Юзабилити удобство использования сайта


Содержание материала:

Юзабилити сайта: как понравиться посетителям

Кликнуть по ссылке – посмотреть – закрыть страницу – искать еще. Такие действия мы выполняем ежедневно, посещая сотни сайтов, практически не задумываясь. Некоторые ресурсы пролетают « как фанера », другие же добавляются в закладки. Кажется, что этот процесс трудно осмыслить, просто одним везёт, а другим нет.

Если ввести в поиске какой-либо запрос, то в результате можно получить огромное количество сайтов с подходящей информацией. Но популярностью почему-то пользуются одни и те же ресурсы, оставляя конкурентов далеко позади.

Еще более явно такое превосходство проявляется в сфере услуг, когда одни интернет-магазины продают много и дорого, а у других покупают только ближайшие родственники.

Так почему же к одним люди идут и надолго остаются, а от других бегут как от огня? Ответ на этот вопрос такой же, как на «А почему вы купили этот диван, а не тот?». Потому что удобнее:

Удобство дивана выражается в мягкости посадки, легкости транспортировки, неподверженности загрязнениям и « Как же он подходит к цвету твоих глаз !». За подобные факторы в веб-разработке отвечает юзабилити сайта, и человек, работающий в сфере интернет-бизнеса, обязан понимать основные принципы обеспечения удобства пользователей ресурса.

Что такое юзабилити

Под юзабилити следует понимать не только конкретные технические моменты, с помощью которых обеспечивается удобство и простота использования сайта. Также учитывается применимость в той среде, для которой разрабатывался проект. Иными словами, требования к сайту спортивных новостей и к видео хостингу будут совершенно разными.

Для того чтобы разобраться в непростом вопросе пользовательских предпочтений, стоит выделить основные принципы юзабилити веб-сайтов.

  • Контент. Информационное наполнение ресурса – это основа, стержень, без которого сайт не имеет смысла. Посетителям важно с легкостью воспринимать текст и извлекать из него всю необходимую информацию. Если же этого не происходит – человек не будет лишний раз ломать голову и отправится на поиски чего-то более понятного;
  • Функционал. Тот, кто написал в жизни пару программ, с уверенностью может сказать, что сразу ничего не работает. Ошибки могут быть очевидны, а могут затаиться и обнаружить себя в самый ответственный момент. Во время работы сайта, особенно на первых этапах, постоянно выявляются недочеты, и для разработчиков очень важно вовремя на них реагировать. Если же какая-то функция сайта не выполняется ( или выполняется некорректно ) в течение длительного времени – даже самые преданные пользователи такого не поймут и будут беспощадны;
  • Кроссбраузерность и независимость от платформ. Если вы думаете, что ваш любимый Internet Explorer – единственный и неповторимый, то попросите у Билла Гейтса пирожок с полки:

Важно обеспечить корректное отображение сайта во всех наиболее популярных браузерах. Что касается операционных систем, то тут стоит вспомнить о чем-то кроме Windows или насладиться вторым пирожком.

Существуют, конечно, знатные извращенцы, способные воспринимать красный текст на зеленом фоне, но большинство посетителей от такого удовольствия откажутся. Помимо цветовых решений, дизайн сайта подразумевает взаимное размещение « строительных блоков » страницы, таких как меню, логотип, поле для текста и так далее.

Важно понимать, что посетитель способен положительно оценить оригинальность, но в разумных пределах. Дизайн должен подчеркивать информацию, а не выходить на первый план.

  • Навигация. Посетители хотят знать свое местоположение, а также понимать: куда следовать дальше. Наличие участков, до которых сложно или невозможно добраться, существенно ограничивает возможности ресурса.
  • Структурирование информации. Всё в мире подчинено логике, и информационные ресурсы не должны становиться исключением. По мере продвижения вглубь сайта, пользователь должен получать всё больше деталей по рассматриваемому вопросу. К примеру, посетитель ищет « Каким мясом кормить овец », тогда отправной точкой должен стать раздел « Млекопитающие », а конечной – подзаголовок « Что любят овечки на полдник ».

Почему это так важно

Несмотря на то, что интернетом пользуются люди, многие сайты создаются не для того, чтобы открыть для человека что-то новое или расширить уже имеющуюся информацию. Все жаждут денег, и конструируют свои ресурсы для размещения рекламы.

Казалось бы, зачем же следовать нормам юзабилити, если сайт создаётся не во благо человечества, а исключительно как источник дохода?

  • Юзабилити влияет на конверсию. Если страница создана для того, чтобы пользователь совершил какое-либо действие, то он должен найти, понять, подумать, выполнить и всё это сделать быстро. Если же посетитель растеряется хоть на секунду, это может заставить его покинуть сайт;
  • Юзабилити влияет на посещаемость. Если во время посещения вашего ресурса пользователь получил положительные впечатления, он не забудет приятный опыт. Сайт, где всё понятно, а действия совершаются быстро, станет популярным. Если же находиться на страницах ресурса некомфортно, а совершать действия неудобно – вы будете довольствоваться разовыми посещениями и плохой репутацией;
  • Добавление рекламы не должно снижать посещаемость. Правила юзабилити предусматривают грамотное размещение объектов на странице. Если сайт дорос до первых рекламодателей, то баннеры должны гармонично сочетаться с основным наполнением ресурса.

Не следует забывать, что даже если сайт создаётся для получения прибыли – без посещений денег не будет. Поэтому необходимо создавать максимальные удобства для пользователей, чтобы они выбрали именно ваш ресурс.

Как добиться удобства

Если говорить о конкретных рамках юзабилити, в которые должен вписываться сайт, то необходимо учитывать функциональные требования, предъявляемые посетителями к страницам ресурса. Следует отметить некоторые немаловажные практические моменты.

  • Размещать в меню до 7 пунктов. Не стоит предлагать пользователю обилие категорий. Человеческий мозг настроен на быстрое адекватное восприятие не более 8-9 объектов, поэтому здесь краткость – сестра таланта. Это подтверждает закон Хика, посему, проводя анализ сайта с точки зрения удобства посетителей, не лишним будет пользоваться научным достоянием;
  • Сразу же выдать пользователю главную мысль. Что касается контента, то, как правило, посетители приходят на сайт с конкретной целью, поэтому следует выражать суть статьи в её начале, а потом уже приступать к планомерному раскрытию темы;
  • Посетители не склонны ждать. Скорость загрузки страниц сайта – немаловажный момент. По состоянию на сегодняшний день она не должна превышать две секунды, но технологии несутся вперед, и, возможно, скоро стандарты будут уже совсем другими;
  • Не более трёх кликов. Для попадания в самый дальний уголок сайта пользователь должен нажать кнопку мыши не более трёх раз. Иначе, структура считается слишком запутанной, а посетители могут заскучать;
  • Большое расстояние между маленькими объектами – не самая удобная штука. Чем меньше и дальше друг от друга кнопки, тем больше времени нужно пользователю на то, чтобы понять свои возможности. Это правило отражено в законе Фиттса, и его необходимо учитывать при проектировании интерфейса:

Интернет-магазин

Когда сайт должен что-то продавать – помимо общих норм, существуют свои особенности. Рассмотрим основные правила юзабилити интернет-магазинов.

  • Качественная визуализация товаров. Когда человек тратит свои деньги, он должен знать – на что. Хорошие фотографии помогут разбудить в посетителе покупательский интерес. Но стоит помнить, что изображение должно соответствовать реальному предмету;
  • Как можно более быстрая загрузка страниц. Если человек решил купить – важно, чтобы его ничего не остановило;
  • Чем больше покупатель знает о товаре, тем лучше. Следует тщательно проработать описание всех деталей, тогда доверие посетителей значительно повысится. К примеру, покупателям будет очень полезно знать, имеется ли товар в наличии;
  • Помогайте посетителю найти нужный продукт. Достаточно сложно создать удобную навигацию при обилии категорий. Когда пользователь просматривает информацию о конкретном товаре, следует ненавязчиво предлагать ему похожие. Возможно, таким образом, человек найдет то, что ему нужно или подумает « А не купить ли мне и то, и другое ?»;
  • Элементы, отвечающие за выполнение целевых действий, должны быть четко обозначены. Кнопка « Купить » обязана сразу же бросаться в глаза, ведь именно покупки вы и добиваетесь от посетителя.

Требуется аудит

Аудит юзабилити сайта – это комплексное исследование, с помощью которого можно выявить проблемы ресурса с точки зрения удобства использования. Такую работу можно проделать самостоятельно, однако лучше доверить дело компетентным в этой области людям.

Они определят потребности пользователей и составят подробный отчёт, в состав которого будут входить:

  • Анализ аудитории, на которую рассчитан ресурс;
  • Задачи, которые выполняет сайт;
  • Полное описание и анализ функционала;
  • Анализ структурной организации и рекомендации по её улучшению;
  • Некоторые советы по привлечению рекламодателей;
  • Технические параметры сайта;
  • Анализ структуры и содержания контента.

Также применяется количественная оценка быстродействия пользовательского интерфейса. При подсчете учитывается:

  • время, которое пользователь тратит на решение о совершении действия;
  • время нажатия на кнопку;
  • переход от одного устройства ввода к другому;
  • время, потраченное на поиск элемента на экране.

Как протестировать юзабилити

Чтобы получить наиболее полные данные для дальнейших улучшений проекта, необходимо провести тестирование юзабилити сайта. Оно заключается в субъективной пользовательской оценке отдельных страниц или всего ресурса в целом.
Можно заняться подбором респондентов самому, а можно воспользоваться услугами специальных организаций. Также существуют онлайн-сервисы, которые помогут в проведении качественного тестирования.

Ниже представлены некоторые из них:

    Usability Hub позволяет определить наилучшие элементы дизайна, области, по которым пользователи чаще всего кликают, а также легкость или сложность ориентирования среди объектов страницы. Необходимо задавать количество людей, которые должны пройти тестирование, а результаты будут получены по достижению нужного числа прохождений:

    User Plus предлагает возможность самостоятельной оценки юзабилити сайта с помощью масштабного списка вопросов, на которые вам предстоит ответить:

    Feng-GUI моделирует взгляд посетителя сайта на протяжении первых пяти секунд. Для этого необходимо загрузить изображение страницы тестируемого ресурса:

Таким образом, анализ юзабилити ресурса позволяет определить основные проблемы с точки зрения удобства пользователей.

Тестирование сайта можно доверить экспертам, провести самостоятельно или воспользоваться помощью онлайн-сервисов.
Для интернет-сайтов пользователи – это клиенты, а клиент всегда прав.

Что такое юзабилити или 7 основных правил юзабилити сайта

Что такое юзабилити, почему этот параметр считается важным, как он влияет на конверсию и какие действия можно предпринять для улучшения юзабилити сайта.

Продуктовый дизайнер (UX/UI) и аналитик

Сен 18, 2020 · 4 мин читать

Вы читаете перевод фундаментальных исследований Nielsen Norman Group, которые они описали в статье “Top 10 Mistakes in Web Design”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.

Что такое юзабилити?

Юзабилити – это качественный показатель простоты и удобства использования сайта. Юзабилити оценивается по 5 качественным критериям:

  1. Легкость в изучении: насколько просто новым посетителям веб-сайта совершать элементарные действия, т.е. не мешает ли им навигация, различные всплывающие окна, реклама или видео;
  2. Эффективность: насколько быстро пользователь может ориентироваться на сайте и совершать необходимые ему действия;
  3. Запоминаемость: насколько легко пользователь может сориентироваться на сайте после того, как он вернется спустя месяц;
  4. Ошибки: как много ошибок совершают пользователи и как легко они разбираются в чем дело;
  5. Удовлетворенность: уровень удовольствия от пользования сайтом. На него влияет множество аспектов, среди них: история, навигация, подача и другие.

Есть и другие качественные критерии, но мы считаем ключевым – полезность. А еще, юзабилити и полезность лежат в основе практичности. Давайте разберем их подробнее:

  • Полезность — дает ли сайт то, что ищет пользователь;
  • Юзабилити — насколько легок и удобен сайт в использовании;
  • Практичность сайта = юзабилити + полезность.

Почему юзабилити так важно?

Если сайт сложно использовать – посетитель его закроет. Если главная страница не отвечает на вопросы “что именно тут предлагают?” и “это похоже на то, что я искал?”, то пользователь тоже закроет сайт.

Посетитель ни за что не будет пытаться разобраться в интерфейсе. У него в соседних вкладках уже открыто много сайтов такой же тематики.

Просто запомните одно простое правило — первое правило электронной коммерции: если пользователь не может найти товар – он не сможет его купить.

Как повысить юзабилити сайта?

Существует множество способов улучшения юзабилити сайта, самым результативным считается юзабилити тестирование сайта, которое состоит из 3 компонентов:

  1. Собрать группу представителей потенциальной аудитории сайта; у них действительно должна быть потребность разобраться с каким-либо вопросом;
  2. Дать группе задание. Задачи должны находиться на пересечении интересов пользователей и бизнес-целей. К примеру задача может звучать так: вашему сыну нужен велосипед, зайдите на сайт и купите подходящий;
  3. Наблюдать за действиями тестируемых, что у них получилось/не получилось сделать, с какими трудностями они столкнулись, что оказало влияние на их поведение (вебвизор, карта кликов, карта скроллинга в этом вам помогут).

Это очень важный момент, на который стоит обращать внимание – проводить тестирование нужно на каждом испытуемом по-отдельности и наблюдать за его действиями и решениями проблем. Но! Наблюдающий должен быть невидим и ни в коем случае нельзя давать подсказки.

Чтобы найти самые грубые ошибки на сайте достаточно всего 5 человек. Поэтому, вместо того, чтобы проводить один дорогостоящий тест, организуйте несколько простых последовательных тестов. Опираясь на результаты которых, вносите правки в контент сайта, и, по мере возникновения новых сложностей у пользователей – постоянно улучшать свой сайт. Метод повторного тестирования – самый выгодный и ресурсов экономный способ улучшить юзабилити сайта. Чем больше версий сайта вы протестируете – тем лучше.

Когда начинать работать над юзабилити сайта?

Юзабилити – критерий, который стоит учитывать на всех стадиях разработки сайта. И именно вследствие этого стоит проводить тестирования быстро и просто. Вот несколько обязательных условий для достижения верных показателей оценки юзабилити разных этапов создания сайта:

  1. Протестируйте старый сайт прежде чем тестировать новый вариант сайта, т.к. это поможет выявить сильные и слабые стороны предыдущей версии и не упустить их из виду при разработке новой версии.
  2. Проведите оценку сайтов конкурентов – это хороший (а главное – бесплатный!) способ получить конкурентоспособные данные, которые помогут тебе сделать сайт лучше и лучше чем у конкурентов.
  3. Проведите полевое исследование, чтобы понять, как испытуемые ведут себя в их привычных условиях.
  4. Создайте напечатанные версии интерфейсов сайта и протестируй их. Помните: потратить время на корректировку бумажных прототипов в разы экономнее, чем тестировать и вносить правки в живую систему.
  5. Отметьте успешные правки. Правки после внесения которых показатель юзабилити сайта становится лучше. По мере устранения ошибок и усовершенствования интерфейса, проводите тест уже не на бумаге, а на компьютере. И тестируй сайт после каждого нового исправления.
  6. Проверь окончательный вариант сайта на соответствие с общепринятыми нормами юзабилити сайта и со своими предыдущими результатами тестирования.
  7. Проведите тестирование еще раз напоследок, после того, как все правки были внесены, сайт уже начал свою «новую» жизнь. Потому что самые коварные нюансы могут появиться как раз после того, как вы выложите сайт на живой.

Не откладывайте юзабилити тестирование на самый последний момент, чем позднее вы начнете это делать, тем больше ресурсов потребуется на исправление.

Где проводить юзабилити-тестирование?

Если вы запускаете тестирование хотя бы раз в неделю, лучше будет создать или арендовать специальную юзабилити-лабораторию. Но большинство компаний обходятся обыкновенным офисом или попросту переговорной комнатой.

Главное – изолировать помещение от внешних факторов. Основными условиями проведения юзабилити тестирования являются наличие правильно подобранных испытуемых, сформулированных заданий и присутствие наблюдателя, который будет модерировать процесс тестирования.

Если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.

Как сделать сайт удобнее: юзабилити

Здравствуйте, друзья! Посещая тот или иной сайт, мы ожидаем от него не только наличия контента, соответствующего нашему запросу, но и простого для понимания интерфейса. Мы хотим предельно быстро и легко получить доступ к тому, за чем пришли, будь то статья в блоге или товар в интернет-магазине. Наверняка мы не останемся там, где полноэкранное видео тормозит загрузку страницы, меню не удается найти интуитивно, а шрифт настолько мелкий, что делает текст практически нечитабельным.

Тратить время в таком случае нет смысла, ведь поисковые системы предлагают нам широкий выбор других ресурсов. И каждому вебмастеру необходимо помнить об этом, уделяя должное внимание не только техническим характеристикам и seo-оптимизации, но и удобству использования сайта.

Сегодня предлагаю поговорить о том, что необходимо сделать разработчику для улучшения восприятия интернет-ресурса посетителем, иными словами, об основах юзабилити сайта и его влиянии на продвижение веб-проекта.

Что такое юзабилити и на что оно влияет?

Понятие веб-юзабилити, или просто юзабилити (от англ. «usability») подразумевает степень удобства и простоты использования интернет-ресурса для достижения результата пользователем. Цель повышения юзабилити сайта не в том, чтобы привлечь аудиторию на веб-страницу, а чтобы удержать ее и побудить к совершению целевого действия: заказу или покупке товара, регистрации нового участника и т.п. Если же функционал блога или интернет-магазина не понятен и не удобен для посетителя, он, вероятнее всего, откажется от взаимодействия и уйдет со страницы. Таким образом, удобство использования сайта влияет непосредственно на увеличение конверсии ресурса.

Следование принципам юзабилити сайта позитивно отражается на восприятии контента пользователем, показателе времени пребывания на страницах ресурса и проценте конверсии. Тем самым естественным образом улучшает поведенческие факторы ранжирования.

Базовые правила юзабилити

Перед тем, как перейти к практическим советам, как сделать удобный сайт, предлагаю вашему вниманию ряд принципов, которые являются фундаментом веб-юзабилити. Понимание основ дает возможность подходить творчески к вопросу выбора инструментов для усовершенствования и упрощения ресурса.

Правило 2х секунд

Одно из базовых правил, выполнение которого жизненно важно для любого проекта. Посетитель не должен ожидать отклика системы или загрузки веб-страниц более 2х секунд.

Значение 2 секунды – величина средняя и довольно условная. В целом, чем меньше скорость загрузки сайта, тем лучше. В наше время информационной конкуренции имеет смысл бороться за каждую долю секунды. Посетитель не станет ждать, а уйдет со страницы, чтобы найти другой источник необходимого ему контента.

Правило семи сущностей

Кратковременная память человека может в среднем удерживать 7 сущностей (от 5 до 9). К таким результатам привели Джорджа Миллера исследования способности мозга воспринимать и обрабатывать полученную информацию.

Как на практике данный принцип поможет улучшить сайт? Его, например, следует применять при построении навигации проекта: количество пунктов меню не должно превышать число 9. Если веб-ресурс содержит очень много блоков информации и нет возможности сократить количество навигационных элементов, имеет смысл ввести подпункты.

Правило 3х кликов

Одно из самых известных в юзабилити сайта правил. Посетителю от момента попадания на веб-страницу до выполнения желаемого действия должно понадобиться не более 3х кликов. Значение 3 весьма условно. Суть в том, чтобы увидев интерфейс, пользователь четко понимал, что получить искомое он сможет быстро и без проблем, а также в каком направлении двигаться.

На практике это может значить возможность в 3 клика попасть на любую страницу сайта, оформить заказ в интернет-магазине, начать онлайн-игру. Следует помнить, что любая дополнительная информация должна сопровождать посетителя, а не мешать ему достичь цели.

Правило Парето

20% действий реализуют 80% общего эффекта. В контексте юзабилити сайта примером применения этого закона может быть выявление 20% постоянных пользователей вашего ресурса. Ведь именно эта группа составляет основу аудитории проекта, и, согласно правилу, совершает 80% целевых действий: онлайн-покупки, комментарии, клики. Обратите особое внимание на интересы этих посетителей и создайте комфортные условия для их взаимодействия с сайтом.

Перевернутая пирамида

Это такой способ подачи материала, когда основная мысль, она же по сути вывод, размещается в начале страницы. Таким образом посетитель в первые же секунды имеет возможность получить ответ, независимо от того, захотел ли он прочесть дальше статью или же раскрытие каких-либо ключевых моментов и деталей ему не интересно.

Такое оформление контента – одно из необходимых требований к юзабилити сайта в современном мире интернета. Пользователи становятся все более мобильными, результат ожидается здесь и сейчас. Поэтому просто необходимо с первых строк завладеть вниманием аудитории, чтобы увеличить время пребывания на сайте и вероятность того, что статья будет прочитана. Если ничего существенного не бросится в глаза сразу же, посетитель, вероятнее всего, уйдет искать другой источник.

Принцип структуры и логичности

Любой продукт, который вы делаете, должен иметь четкую логичную структуру. Одни информационные блоки должны последовательно вытекать из других. Пользователь должен иметь возможность легко находить путь к необходимой информации, руководствуясь логическими действиями.

В процессе разработки проекта обязательно дайте оценку юзабилити сайта с точки зрения данного принципа. Не стоит нагромождать лишнюю и неуместную информацию на веб-странице. Например, информация о спортивных товарах будет лишней на кинопортале. Пытаясь угодить всем запросам, есть шанс потерять свою аудиторию.

Правило формата

Все страницы ресурса и его элементы должны быть выполнены однотипно. Речь идет о том, что ссылки, фильтры и т.п. следует форматировать одинаково. Если посетитель во вкладке «блог» видит ссылку на главную страницу размещенной вверху слева в виде логотипа, то во вкладке «контакты» он рассчитывает найти ее в том же формате, а не прописанной словами внизу справа.

Пользователь не хочет учиться выполнять одно и то же действие снова на каждой странице и тратить время на догадки.

Эффект неопределенности

Исследования психолога Б.Зейгарник показали, что человек не любит недосказанности и неопределенности. Оборвавшаяся информация пробуждает любопытство и заставляет искать недостающий фрагмент. В результате, человек запоминает такую информацию лучше.

Возможно, применение данного эффекта в веб-разработке и не способствует удобству, но определенно служит цели удержания аудитории на сайте. Вы можете убедиться в этом, разместив на своем ресурсе обрывающиеся видеоролик или статью, содержащие некую недосказанность и вызывающие у посетителя вопросы.

Синдром утенка

Суть принципа в том, что человек, открывая для себя какую-либо новую область и начиная ее изучение, считает первый встреченный им объект из этой сферы самым лучшим. И в дальнейшем это впечатление практически нельзя изменить. (Вылупившийся утенок считает мамой первый движущийся объект, который увидит).

С точки зрения юзабилити, это правило предполагает, что аудитория отдаст предпочтение привычной структуре веб-ресурса, стандартному дизайнерскому решению, а не каким-то инновациям. Например, посетитель может захотеть покинуть страницу, встретив там незнакомый ему горизонтальный скролл. Также, скорее всего, негативной будет и первая реакция на какой-либо редизайн сайта.

Это не означает, что ваш проект не должен развиваться и всю жизнь сохранять морально устаревший, но привычный пользователю интерфейс. Просто учитывайте данное явления и производите такие перемены, которые однозначно улучшат юзабилити сайта. В конце концов старая аудитория привыкнет к новому виду, а для кого-то ваш ресурс станет тем самым первым встреченным объектом.

Зеркальный эффект

Это правило заключается в том, что все, связанное с нашим личным опытом, мы запоминаем лучше, чем не имеющее к нам никакого отношения. Изучите интересы своей основной аудитории и апеллируйте к ним, связав контент с увлечениями посетителей.

Простые способы сделать проект лучше

Давайте перейдем к практическим рекомендациям, как улучшить сайт на WordPress, основываясь на базовых принципах юзабилити.

Увеличьте скорость работы сайта. Чтобы воплотить в жизнь правило 2х секунд, существует немало способов:

  • редактирование файла .htaccess;
  • использование плагинов кэширования;
  • оптимизация базы данных;
  • сжатие изображений;
  • оптимизация кода;
  • выбор качественного хостинга и некоторые другие

Проанализировать же реальную скорость работы веб-ресурса можно с помощью различных сервисов, среди которых и PageSpeed Insights от Google. Детальней о том, как работать с этим инструментом и как ускорить загрузку сайта на WordPress, вы можете узнать, перейдя по ссылке.

Сделайте навигацию по ресурсу простой и понятной. Перемещению посетителя по сайту помогают меню, хлебные крошки и карта сайта. Эти элементы должны быть устроены таким образом, чтобы пользователь без труда мог найти нужную ему информацию.

Разрабатывая структуру сайта, постарайтесь избежать большого количества уровней в выпадающем меню. Раскрывающиеся при наведении мышки рубрики и подрубрики – не самый удобный вариант для ориентирования на сайте. К тому же он может неожиданно свернуться от нечаянного движения руки.

Постарайтесь ограничиться двумя уровнями выпадающих списков. Если концепция проекта все же предполагает большое число рубрик, вы можете сгруппировать их по тематике в виджетах. Вывод похожих записей в WordPress с плагином и без также послужит дополнительной навигацией, что положительно скажется на поведенческих факторах.

С точки зрения юзабилити, удобству сайта для посетителя способствует и размещение на страницах хлебных крошек. Для многоуровневых веб-ресурсов такой вид навигации необходим, чтобы предоставить возможность получения быстрого доступа к любому из уровней каталога.

Помимо этого, данный элемент влияет на улучшение внутренней перелинковки. Перейдя по ссылке, вы можете узнать, как установить хлебные крошки на WordPress с плагином и без.

Для того чтобы читатели могли наглядно ознакомиться со всеми страницами вашего блога, убедитесь, что у вас создана карта сайта HTML WordPress. Это оглавление со ссылками на все публикации поможет значительно улучшить сайт на WordPress, содержащий сотни записей.

Максимально упростите регистрацию на сайте. Регистрация на развлекательных порталах и сайтах с тематическим контентом не должна требовать от пользователя подтверждения по e-mail. Если сам ресурс не представляет большой ценности для посетителя, то он откажется совершать лишние действия для получения искомого. Оптимальным вариантом можно считать авторизацию через соцсети.

Пребывание же на сайте постоянных посетителей сделает более комфортным создание личного кабинета.

Расположите данные для обратной связи таким образом, чтобы они были постоянно на виду. Номер телефона, скайп, электронная почта или форма обратной связи должны быть доступны для пользователя без необходимости уходить с интересной ему страницы.

Разместите на страницах строку поиска. Оптимально – интерактивную, то есть такую, которая будет формировать подсказки во время набора текста.

На Вордпресс реализовать форму поиска можно с помощью стандартного виджета, кода php и плагинов. Из статьи по ссылке вы также сможете узнать, как установить Яндекс поиск.

Избавьтесь от ненужных элементов. Не стоит размещать в боковых панелях календари, последние комментарии, неуместные на определенных страницах кнопки соцсетей. Разгрузите интерфейс и дайте возможность посетителю получить нужную информацию, не отвлекая его сомнительными «фишками».

Следите за внешним видом. При выборе шаблона проанализируйте, какой дизайн сейчас в тренде и подходит ли такой стиль вашему проекту. На текущий момент актуален минимализм. Мода переменчива, но ваш сайт должен всегда быть аккуратным, без перекошенных элементов, размытых картинок и «поплывшей» верстки. Помимо этого, он должен корректно отображаться на любом устройстве, не поленитесь сделать мобильную версию блога. Но если вы хотите получить какой-то уникальный и креативный продукт, то лучше доверить этот вопрос специалисту.

Работайте над качеством подачи контента:

  • форматируйте статьи. Текст, разбитый на абзацы, разделенный подзаголовками и содержащий списки или таблицы, воспринимается гораздо лучше, чем сплошной поток слов. Структура важна не только для организации всего проекта, но и каждого отдельно взятого поста;
  • красиво оформляйте записи. Убедитесь, что размер шрифта и межстрочный интервал удобны для чтения. Картинки привлекают внимание, разбавляют текст и способствуют запоминанию. Важные слова будут замечены с большей вероятностью, если выделить их жирным шрифтом или курсивом. Такой же эффект произведут небольшие блоки, чье стилистическое оформление будет отличаться от основного текста;
  • избегайте воды и длинных «полотен». Что значит: писать следует по теме и не очень много. Но не в ущерб раскрытию сути вопроса. Так что если материал получается объемным, разумнее разбить его на несколько статей, чтобы не перегружать читателя информацией за один раз. Слишком же короткие посты плохо влияют на продвижение;
  • придерживайтесь выбранной стилистики и пишите без ошибок ;
  • делайте внутреннюю перелинковку. Предлагайте пользователям дополнительные материалы, связанные с интересующим их вопросом. Это увеличит их время пребывания на сайте и избавит от необходимости самостоятельно искать уточняющую информацию, если в этом есть необходимость. Проследите, чтобы ссылки были легко заметны на общем фоне. Помните, что необходимо регулярно проверять сайт на битые ссылки;
  • и последнее, но не менее важное правило – предоставляйте своим посетителям полезный и уникальный контент.

Это далеко не все советы по улучшению юзабилити сайта, которые можно дать. Но для вашего удобства мы остановимся на этом.

Анализ удобства веб-ресурса

Оценка юзабилити сайта осуществляется по 5 параметрам:

  • ориентация – как легко посетитель может совершать основные действия на страницах ресурса, не мешает ли ему в этом большое количество рекламы, всплывающих блоков, видео/аудио в режиме autoplay;
  • эффективность – как быстро пользователь может ориентироваться на сайте и совершать нужные ему действия;
  • запоминаемость – как просто человек сможет сориентироваться на сайте после длительного отсутствия;
  • ошибки – как много ошибочных действий совершает посетитель для достижения нужного результата и насколько легко устранить их последствия;
  • субъективная удовлетворенность – общее впечатление от взаимодействия с ресурсом.

Оперируя всей изложенной выше информацией, вы можете самостоятельно осуществить первичную проверку юзабилити сайта. Но поскольку этот аспект оказывает прямое влияние на эффективность и качество проекта, более конструктивным решением будет заказать юзабилити-аудит у профессионалов.

На этом все. Сегодня мы узнали с вами об основах юзабилити и практических способах, как улучшить сайт и сделать пребывание посетителей на его страницах более комфортным. До встречи!

Как улучшить юзабилити сайта: 6 простых советов

Отмечаем Всемирный день юзабилити вместе — мы подготовили удобный чек-лист по улучшению юзабилити сайта и поведенческих характеристик. Берите на заметку и увеличивайте количество продаж!

Автор: Анна Шумилкина, веб-аналитик Ingate

Встречают по одёжке, а точнее — по тому, как ваш сайт выглядит и насколько он удобен для пользователей. Ранее мы уже писали о самых популярных ошибках в юзабилити интернет-магазинов. Теперь поговорим о том, какие элементы на сайте нужно проработать, чтобы клиенты не уходили до совершения покупки.

Рекомендации относятся в первую очередь к многостраничным услуговым сайтам и сайтам интернет-магазинов. У лендингов (landing page) другие принципы юзабилити, о них в статье говорить не будем.

Итак, как повысить удобство использования сайта?

1. Проработайте шапку сайта

Чтобы шапка была максимально удобной и эффективной, в ней должны присутствовать следующие элементы:

Дескриптор

Это короткое описание предложения компании. Например, «Строительство домов из бруса в Подмосковье», «Доставка здоровой еды» или «Свадебные платья на заказ». Перейдя на сайт, пользователь должен в первые секунды понять, что ему предлагают и соответствует ли это предложение его потребностям. Наилучшее место для расположения дескриптора — справа от логотипа или под ним.

Конверсионные элементы

К ним относятся такие кнопки, как «Заказать звонок», «Оставить заявку», а также «Корзина» (в случае интернет-магазинов). Значок «Корзина» традиционно располагается в правом верхнем углу шапки сайта. Он должен отражать количество добавленных товаров и/или сумму покупки.

В некоторых тематиках, например «Изготовление пластиковых окон» и «Мебель на заказ», также актуальны кнопки вызова замерщика. Для привлечения внимания пользователей кнопки должны выделяться и обращать на себя внимание пользователей.

Контакты

На сайте рекомендуем указывать один, максимум два номера телефона. Оптимально, если один из них будет в формате «8 (800)…», так как он бесплатный для звонков из регионов. Большее количество номеров часто вызывает замешательство пользователей и визуально загромождает шапку.

Если на сайте есть личный кабинет, разместите справа блок регистрации/входа. Это поможет существенно улучшить юзабилити и поведенческие характеристики.

Рассмотрим ещё несколько примеров шапок сайтов с дескриптором, конверсионными элементами и контактами:

Чтобы при прокрутке важная информация всегда оставалась на виду, закрепите шапку сайта. На что нужно обратить внимание:

  • шапка должна быть небольшой по высоте (в среднем от 40 до 70 px), чтобы не мешать обзору;
  • содержать кнопку перехода на главную страницу;
  • содержать телефон и/или кнопку «Заказать звонок» для связи с компанией;
  • содержать значок «Корзины» для быстрого перехода в неё и оформления заказа (для интернет-магазинов).

Часто закреплённая шапка представляет собой горизонтальное меню со ссылками на основные разделы каталога. Это облегчает навигацию и позволяет улучшить юзабилити сайта.

Вот примеры закреплённых при скроллинге шапок:

2. Проработайте главную страницу сайта

Задача главной страницы — быстро и эффективно «показать товар лицом», т. е. сжато рассказать о предложении, мотивировать к заказу и показать, как его совершить. Поэтому нельзя оставлять её полупустой или размещать на ней только SEO-текст.

Для повышения юзабилити главной страницы рекомендуется добавить следующие блоки:

Яркий баннер/баннеры

Они должны быть в первом экране при просмотре. Желательно, чтобы на баннерах были представлены наиболее выгодные предложения и/или условия сервиса, например, скидки на определённые категории товаров, акции.

Блок преимуществ

Чтобы улучшить юзабилити сайта, важно кратко и ёмко сформулировать основные преимущества компании, товаров или услуг (4–7 слов) и визуализировать их. Иконки должны соответствовать содержанию пунктов и вызывать конкретную ассоциацию.

Ссылки на основные разделы сайта

Визуализация с помощью ярких и привлекательных образов — лучшее оформление для такого блока. Пользователь сможет быстрее найти нужный ему раздел.

3. Проработайте элементы навигации

Пользователь должен без труда находить нужные ему страницы и перемещаться с одной на другую. И в этом помогает навигация. Все элементы навигации должны иметь интуитивно понятные названия и удобно располагаться. Это позволит улучшить юзабилити сайта и повысит лояльность пользователей: увеличится глубина просмотра, время, проведённое на сайте, и пр. (данные показатели вы можете отслеживать в Яндекс.Метрике и Google Analytics).

Разберём, какие элементы нужно проработать в первую очередь.

Горизонтальное меню. Пункты этого меню должны отражать категории товаров и услуг. Оптимально, чтобы в каждой категории было не более трёх уровней. Например, если на сайте есть раздел «Посуда», то при наведении курсора на него должны выпадать максимум еще два списка: «Посуда» — «Для сервировки стола» — «Салатники», «Бокалы», «Кружки» и пр.

Более сложным меню неудобно пользоваться. Для некоторых тематик (например, для техники с большим количеством параметров или для ювелирных украшений) в меню логично включить тегирование по параметрам, а не только по типу изделия.

Вертикальное меню. Пункты этого меню должны отображать структуру сайта и местонахождение пользователя. Это можно сделать с помощью разноуровневых списков и выделения цветом, как в примере ниже.

Футер

Это нижняя часть сайта. Обычно там размещают ссылки на важные разделы, причём структуру меню не обязательно всегда дублировать. Часто в футере располагаются ссылки на страницы, которых нет в основном меню.

Если хотите улучшить юзабилити, в футере рекомендуется размещать следующие блоки:

  • контакты;
  • блок со ссылками на инфостраницы («О компании», «Фотогалерея», «Партнёрство», «Вакансии» и др.);
  • блок со ссылками на сервисные страницы («Доставка», «Оплата», «Условия возврата», «Гарантийное обслуживание» и пр.);
  • ссылки на аккаунты компании в соцсетях.

Примеры оформления футера:

Кнопка навигации «Наверх»

Она помогает пользователю из любого места страницы быстро попасть в её начало. Это упрощает и ускоряет навигацию на сайтах, страницы которых приходится долго скролить, например сайтов с объёмными каталогами. Обычно эта кнопка представляет собой круглую или прямоугольную иконку с изображением указывающей вверх стрелки и статично размещается внизу страницы (справа или слева), в стороне от основного контента или поверх него.

Контентная перелинковка

Это ссылки внутри текстового (реже — графического) контента. Первостепенное значение она имеет для информационных сайтов, где важна глубина просмотра и количество прочитанных материалов. Главные требования к ссылкам внутри текста — уместность и их умеренное количество.


Пример ссылок с отдельных фраз:

Пример блочной перелинковки внутри текста:

Для интернет-магазинов также важны такие составляющие навигации, как тегирование (ссылки на конкретные группы товаров в каталогах), фильтры (функционал подбора по параметрам) и поиск.

4. Проработайте страницы товаров/услуг

Такие страницы можно разделить на три вида:

  • каталоги товаров или услуг;
  • карточки товаров;
  • страницы услуг.

Рассмотрим каждую из них.

Каталожные страницы

Для повышения юзабилити в каталоге обязательно должны быть фото товаров, их название и краткое описание, цена и кнопка для заказа. Кроме того, желательно предусмотреть возможность покупки товаров в один клик. Цена и кнопка заказа должны выделяться на фоне других элементов за счет размера и контрастных цветов.

Примеры каталогов товаров:

Пример каталога услуг в тематике «Аренда выделенных серверов»:

Для перехода в карточку товаров рекомендуется делать кликабельной всю область товарного блока, а не только наименование продукта.

Карточки товаров

С точки зрения эффективности один из лучших способов организации карточки товара следующий:

  1. Изображения товара лучше располагать слева. У пользователей должна быть возможность рассмотреть продукт с разных ракурсов и приблизить его. Неактивные фото рекомендуется размещать в виде маленьких превью под основным фото или сбоку от него;
  2. Справа (сверху вниз) следует указать наименование продукта, цену, расположить функционал изменения количества выбранных товаров и конверсионные элементы. До кнопок заказа желательно разместить краткое описание, главные характеристики или основные условия доставки и оплаты.
  3. Фото, главную информацию о товаре, цену и кнопку заказа лучше размещать в первом экране просмотра, чтобы пользователю не пришлось совершать лишнее действие — прокрутку.
  4. Детальные характеристики продукта рекомендуется располагать под всеми указанными блоками во вкладках.

Примеры оформления карточек товаров:

Страницы услуг

Здесь рекомендуется разместить блоки:

  • краткое и ёмкое описание услуги с изображением, иллюстрирующим услугу;
  • ключевые выгоды для пользователя от заказа услуги именно в этой компании;
  • портфолио работ или примеры реализованных проектов, если тематика предполагает;
  • отзывы пользователей, уже заказавших услугу;
  • простая форма заявки на услугу (открытая или во всплывающем окне).

Прочие элементы опциональны, их желательно размещать после указанных.

5. Проработайте функционал заказа

Формы захвата данных пользователя

Есть два основных типа форм, которые наиболее часто встречаются на сайтах: форма заказа обратного звонка и универсальная форма заявки. Основные принципы юзабилити форм:

  • Минимум полей. Если для заявки хватит одного поля, смело оставляйте только его.
  • Минимум обязательных полей. В идеале — только поле для ввода телефона или email-адреса (в зависимости от того, какой тип связи предпочтительнее для компании). В поле для ввода телефона рекомендуется добавлять маску, чтобы минимизировать риск ошибки при вводе. Также важно указать, какие поля обязательны для заполнения, например отметьте их звёздочкой. Для улучшения юзабилити сайта важно, чтобы функционал проверки заполнения обязательных полей был интуитивно понятным. Например, если пользователь не заполнит поле, его границы подсветятся красным цветом и появится надпись: «Пожалуйста, заполните обязательное поле».
  • Отсутствие капчи. Если капча всё же необходима для фильтрации ботов, рекомендуется использовать самую простую. На данный момент это reCaptcha от Google.
  • Яркая и заметная кнопка отправки заявки.
  • Наличие надписи о согласии на обработку персональных данных со ссылкой на политику конфиденциальности компании.
  • После отправки заявки пользователю должно показываться оповещение, в течение какого времени с ним свяжутся.

Примеры форм заявки:

Страница «Корзины»

Основные принципы организации страницы «Корзины»:

  1. Товары, которые пользователь добавил в «Корзину», должны быть визуализированы. Необходимо разместить их фото, указать наименование, цену, количество. Кроме того, у покупателя должна быть возможность увеличить и уменьшить число добавленных продуктов, удалить их, а также перейти из «Корзины» к карточке товара.
  2. Необходимо указать общую стоимость покупки, причём она должна автоматически изменяться при добавлении в «Корзину» новых товаров или их удалении.
  3. Кнопка начала оформления заказа или покупки в один клик должна быть яркой и заметной.
  4. Каждый шаг в процессе оформления заказа (выбор способа доставки и оплаты, указание адреса) важно визуально отделить от следующего.
  5. Пользователь должен чётко понимать, сколько он заплатит за доставку каждым из способов. Эту цифру желательно выводить отдельно, плюс указывать итоговую сумму с учётом стоимости доставки.

6. Увеличьте скорость загрузки основных страниц сайта

Несмотря на огромное количество статей на эту тему, многие по-прежнему забывают об этом. Между тем, низкая скорость загрузки страниц сайта даже при блестящем юзабилити может сослужить плохую службу: большинство пользователей просто уйдут с сайта, если какая-то страница не загрузится в течение нескольких секунд.

Чтобы оптимизировать скорость загрузки, нужно:

  1. На основе статистики Яндекс.Метрики и Google Analytics выбрать основные страницы, которые приносят максимальное количество трафика и/или страницы, на которые запланировано вести трафик в ближайшем будущем.
  2. Протестировать скорость их загрузки с помощью любых общедоступных сервисов, например Pagespeed Insights от Google.
  3. Реализовать доработки с учётом рекомендаций сервиса. Если вы не специалист в данной области, сделать это будет достаточно сложно, зачастую требуется помощь веб-разработчика.

Конечно, приведённые советы не исчерпывающие. Мы рассказали об основных элементах на сайте, которые важно и нужно проработать для улучшения юзабилити. Однако в основном все рекомендации относятся к десктопной версии сайтов.

Если доля мобильного трафика составляет более 20% или вы планируете увеличить её в ближайшее время, например за счёт запуска контекстной рекламы, создайте мобильную верстку или разработайте адаптивную версию ресурса для удобного отображения на смартфонах. И не забывайте про A/B-тесты. Это лучшее решение, если вы не знаете наверняка, что лучше сработает в конкретном случае!

Юзабилити сайта – что это такое и каким должно быть?

В продвижении веб-сайта одним из ключевых моментов является удобство ресурса для посетителей. Наилучшее представление об этом дает термин «юзабилити». Под юзабилити сайта понимается способность ресурса быть понятным и привлекательным для пользователя. В этом материале мы подробно разберемся, почему юзабилити настолько важно для вашего сайта, и какие сегодня существуют правила по улучшению данной характеристики.

Из чего состоит юзабилити?

Как вы уже поняли, юзабилити представляет собой свойство сайта, позволяющее пользователям достигать своей цели с нужной им результативностью и удовлетворенностью. Это касается любых веб-сайтов, будь то крупный портал или одностраничник, рекламирующий конкретную услугу. Однако для каждого типа сайта приведенные ниже правила юзабилити будут применяться с теми или иными оговорками, смотря какой требуется результат.

Юзабилити любого сайта, независимо от его направленности и объема, оценивается по пяти характеристикам:

  • Эффективность. Показывает, какое количество времени необходимо новому пользователю сайта для того, чтобы сориентироваться на веб-ресурсе и найти ту информацию, за которой он к нему обратился.
  • Ориентация. На этот показатель влияет количество элементов, способных помешать пользователю найти то, что он хочет от просматриваемого сайта. Сюда входит дизайн, реклама, скрипты, расширения и т.д.
  • Запоминаемость. Чем легче посетителю будет сориентироваться на сайте после того, как с последнего посещения пройдет достаточно много времени, тем выше оценивается запоминаемость этого ресурса.
  • Защищенность. Эта характеристика отражает степень, в которой оцениваемый веб-сайт предостерегает пользователей от совершения грубых ошибок, мешающих получить требуемую от ресурса информацию.
  • Удовлетворенность. Субъективная характеристика, отражающая эмоциональное впечатление читателя от просмотренного сайта. Складывается из дизайна, полученной информации, навигации и иных факторов.

Наряду с юзабилити большое значение имеет и такой параметр веб-сайта, как полезность. Эта характеристика оценивает возможность пользователя понять, подходит ли веб-сайт для удовлетворения его потребностей на основании полученных при посещении впечатлений. Даже если ресурс будет иметь грамотную навигацию и приятный дизайн, отсутствие нужной для посетителя информации сведет его полезность к абсолютному нулю.

Оперируя такими терминами, как юзабилити и полезность, можно вывести еще одну важную характеристику сайта – практичность. Она представляет собой сумму юзабилити и пригодности, и достаточно точно отражает способность сайта привести клиента к совершению целевого действия. Это может быть подписка на рассылку, покупка товара иои услуги, либо иное действие. Далее разберемся, почему юзабилити ценится так высоко.

В чем ценность юзабилити?

Рассматриваемый параметр очень важен для сайта, так от него сильно зависит конверсия веб-ресурса. Именно высокая конверсия является своеобразным спасательным кругом для сайтов на темы с высокой конкуренцией. Очевидно, что если сайт будет досаждать кислотным дизайном, обилием рекламы и длительной загрузкой страниц, пользователь не будет тратить время. Он уйдет и не совершит целевое действие – конверсия упадет.

Аналогичная ситуация произойдет, если пользователь не сможет разобраться в структуре сайта. Он попросту закроет его и пойдет на страницу конкурентов, которые позаботились о формировании юзабилити. Даже если посетитель быстро нашел нужную информацию, но она представлена в нечитабельном виде, он тоже закроет сайт и больше никогда на него не зайдет. Работа над юзабилити снижает риск ухода посетителя к минимуму.

7 золотых правил юзабилити

Сегодня, когда в Интернете есть миллионы сайтов на совершенно любые тематики, важно задержать клиента на веб-ресурсе как можно дольше, естественным образом сопроводив его к совершению целевого действия. Для достижения этой цели были выведены 7 золотых правил юзабилити. Беспрекословное следование этим семи правилам позволит вам довести удобство и эффективность продвигаемого веб-ресурса до наилучшего значения.

Правило 1 – у сайта должна быть четкая структура

Самое важное – информация на веб-сайте обязательно должна иметь четкую структуру. Пользователь приходит на страницу не просто так, а с конкретной целью – узнать информацию либо сделать заказ товара/услуги. Ваша задача – сделать так, чтобы посетитель достиг своей цели за минимальное время и без каких-либо трудностей. Еще перед наполнением сайта нужно разработать его структуру, где все части контента будут на своих местах.

Сегодня общепринято иерархическое деление структуры сайта, которое включает в себя следующие элементы:

  • Раздел. Наиболее крупный элемент, в составе которого находятся материалы на конкретную тематику.
  • Категория. Так как раздел – это весьма крупный элемент структуры, он делится на небольшие категории.
  • Подкатегория. Необходимость в подкатегориях есть не всегда – обычно у очень крупных веб-сайтов.
  • Материал. Это конечный элемент структуры сайта. В интернет-магазине материал – это карточка товара.

В этом правиле есть еще одна важная рекомендация – не стоит нагружать страницы ресурса той информацией, которая не соответствует основным тематикам сайта. Это только собьет пользователей с толку и заставит их уйти.

Правило 2 – навигация должна помогать клиенту

Главная задача навигации сайта, с которой она должна справляться безупречно, заключается в простом удобном отражении информационной структуры веб-ресурса. Панель навигации должна располагаться на видном месте веб-страницы, чтобы пользователю не пришлось тратить время на ее поиск. Каждый пункт меню должен иметь уникальное название, в полной мере отражающее содержание того раздела, на который этот пункт ссылается.

Помимо того, что навигация должна быть простой и понятной, есть еще три рекомендации из этой же категории:

  • На каждой странице продвигаемого сайта должна быть заметная ссылка на главную страницу ресурса.
  • Пользуйтесь «хлебными крошками» – это элементы навигации, ведущие от текущей страницы к главной.
  • На всех страницах продвигаемого вами сайта всегда должна использоваться единая система навигации.

Не забудьте составить удобную карту сайта. Она представляет собой отдельную веб-страницу, содержащую в себе иерархическую модель структуры ресурса. Визуально карта сайта похожа на оглавление справочника. На карту сайта должны вести ссылки со всех страниц, в том числе с главной. Этот инструмент помогает посетителям быстро находить ту информацию, за которой они пришли. Следовательно, карта повышает уровень конверсии.

Правило 3 – организуйте удобный поиск по сайту

На любом многостраничном сайте, и особенно в интернет-магазине, обязательно должны быть средства поиска нужной информации либо товаров. Если поисковые средства отсутствуют, пользователь будет вынужден тратить свои силы и время на то, чтобы прокручивать все страницы в поисках той информации, за которой он пришел. Но практика показывает, что подавляющее большинство посетителей не тратит время и просто уходит с веб-сайта.

Оптимальная локация для размещения окна поиска – верхняя часть веб-страницы. Достаточно разместить одну поисковую строку с заметной кнопкой «Поиск» либо «Искать», чтобы значительно облегчить жизнь посетителей вашего ресурса. Обязательно позаботьтесь о том, чтобы поисковые средства охватывали все материалы и товары на продвигаемом веб-сайте. В противном случае есть вероятность, что пользователь не найдет нужное и уйдет.

Правило 4 – уменьшите скорость загрузки страниц

Первое место среди наиболее раздражающих факторов заслуженно принадлежит длительной загрузке страниц. Никто не любит долго ждать, особенно в Интернете. Чем больше времени уходит на загрузку страниц веб-сайта, тем выше риск того, что пользователь не будет ждать, а попросту уйдет к ближайшим вашим конкурентам. По этой причине хороший вебмастер просто обязан ускорить загрузку страниц. Простые способы сделать это:

  • Откажитесь от большого количества графических элементов на сайте. Это касается изображений, GIF-анимаций, автоматически включаемых аудиозаписей и видеороликов. Если без изображений нельзя обойтись, надо уменьшить их «вес» путем конвертации в PNG и JPEG. Видео конвертируются в GIF.
  • Удалите анимированные заставки, выполненные по технологии Flash. Мало того, что обилие заставок отвлекает внимание пользователя и вызывает раздражающий эффект, так еще и Flash работает не у всех пользователей. У них при заходе на сайт будут появляться дополнительные уведомления в браузере.
  • Уменьшите количество рекламных баннеров на странице. Не надо говорить, насколько пользователей Интернета раздражает реклама. Помимо этого она еще и увеличивает время загрузки страницы. Если для вас важнее репутация и конверсия сайта, а не копеечный заработок с баннерной рекламы, уберите ее.

Не забывайте о том, что все хорошо в меру. Не стоит сокращать время загрузки веб-страниц, нанося при этом серьезный ущерб их содержанию и качеству. Найдите золотую середину и примените ее для каждой страницы.

Правило 5 – грамотно проработайте дизайн сайта

Это, пожалуй, наиболее обширный и влиятельный аспект веб-сайта, требующий к себе особого отношения. Под дизайном сайта понимается сочетание используемых на страницах графических элементов, шрифтов, стилей, шаблонов, элементов баннерной рекламы. Работа над дизайном осложняется его субъективностью. То, что по мнению вебмастера выглядит привлекательно, может не понравиться определенному количеству посетителей.

В отношении дизайна веб-сайта есть масса правил, однако ниже мы разберем наиболее важные рекомендации:

  • Графические компоненты дизайна не должны отвлекать посетителя от информационного наполнения.
  • Если сайт принадлежит компании, ее логотип должен размещаться в шапке сайта на каждой странице.
  • Логотип организации можно превратить в навигационный элемент, заложив в него ссылку на «главную».
  • Дизайн веб-сайта не должен пестрить многочисленными цветами, напрягающими глаза посетителей.
  • Не используйте текстурное оформление фона – текст на нем читается очень сложно и напрягает зрение.
  • Цвета шрифта и фона должны быть высоконтрастными по отношению друг к другу – так проще читать.
  • Применяйте стандартные шрифты – лучше всего отображаются Tahoma, Verdana, Arial, Times New Roman.

Несмотря на то, что веб-сайт – неплохая площадка для экспериментов, делать их с дизайном не рекомендуется. Лучше использовать стандартные и минималистичные решения, которые не будут отвлекать пользователей от информации, товаров и услуг. Кислотные тона, нечитаемые шрифты, масса картинок, баннеров и видеороликов – самый простой и эффективный способ отпугнуть посетителей и свести конверсию ресурса к абсолютному нулю.

Правило 6 – позаботьтесь о практичности контента

Контент – это именно то, за чем пользователи приходят на сайт. Для информационных веб-сайтов контент – это статьи, а для интернет-магазинов – описания разделов и карточки товаров. Независимо от того, для какой цели предназначен продвигаемый вами веб-ресурс, юзабилити его контента должно быть на высоте. В достижении хорошего результата по части контента вам поможет следование приведенным ниже простым рекомендациям:

  • Не используйте сложные термины и фразы, серьезно затрудняющие восприятие материала людьми.
  • Пишите привлекающие внимание заголовки, полностью отражающие содержание материала или товара.
  • Информационные и рекламные тексты должны максимально раскрывать тему, но иметь малый объем.
  • Перед публикацией проверяйте контент на наличие грамматических, орфографических и других ошибок.
  • Составляйте тексты по принципу перевернутой пирамиды –наиболее важная информация во вступлении.
  • Иллюстрируйте публикуемый материал уместной графической информацией в умеренных количествах.

Отличный способ заострить внимание читателя на важной информации – выделить ее в тексте жирным шрифтом или курсивом. Однако пользоваться этим способом нужно очень аккуратно и в умеренных количествах, так как постоянные жирные выделения предложений и даже абзацев сделают текст трудночитаемым и отталкивающим. В идеале надо выделять одну самую важную мысль, а в ряде случаев можно и вовсе обходиться без этого.

Позаботьтесь о том, чтобы текстовый контент на сайте был читабельным. Каждый текст должен иметь заголовок и подзаголовки, абзацы. Рекомендуется использовать нумерованные и маркированные списки там, где это будет уместно. Каждый абзац должен раскрывать одну законченную мысль, чтобы при чтении текста по диагонали у пользователя не возникало проблем с восприятием информации. Безусловно, контент должен быть уникальным.

Правило 7 – исправьте технические ошибки сайта

Обязательно посмотрите, как финальная версия веб-ресурса отображается в различных браузерах и с различных устройств. Для этого установите несколько популярных браузеров, используйте компьютер, смартфон, планшет для тестирования отображения сайта на разных платформах. Публикуйте конечную версию сайта только после того, как окончательно убедитесь в том, что у всех пользователей он будет отображаться одинаково корректно.

Проверьте все ссылки на сайте и удалите «битые». Такие ссылки ссылаются на несуществующие страницы, что вызывает у пользователей только негативные эмоции и плохие впечатления о сайте. К тому же битые ссылки не лучшим образом сказываются на поисковой оптимизации веб-ресурса, так что их однозначно надо убирать. Если ссылок на сайте много, используйте для их проверки специальные плагины, чтобы сэкономить время и силы.

Как увеличить юзабилити сайта?

Зачастую бывает так, что даже беспрекословное соблюдение перечисленных выше правил приводит не к самому эффективному результату. Это нормально, так как правила достаточно обобщенные, а как вы уже знаете, каждый веб-ресурс требует индивидуального подхода. Этим вы и должны заняться – следует провести тестирование. В этом вам поможет ваша же целевая аудитория. Тестирование проводится по формуле, включающей три этапа:

  1. Сбор представителей ЦА. На первом этапе вы набираете группу из наиболее ярких представителей вашей целевой аудитории. Размер группы точно назвать нельзя. Однако помните, что чем больше группа, тем обширнее и точнее результаты, но потребуется больше времени и сил на проведение тестирования сайта.
  2. Выдача группе задания. Здесь нужно подготовить список действий, которые должны выполнить люди из группы испытуемых во время пребывания на сайте. Подойдут такие задания, как заказ того или иного товара, поиск конкретной статьи, использование формы обратной связи. Задания должны быть разными.
  3. Проведение тестирования. Наиболее ответственный этап, на котором нужно проследить за тем, каким образом испытуемые справляются с поставленными перед ними задачами. Надо отметить, какое время ушло у людей на достижение целей, с какими проблемами встретились, оценить уровень конверсии.

Важно проследить за действиями каждого представителя испытуемой группы. При этом ваше вмешательство, даже малейшее, сильно исказит результаты тестирования и сведет его эффективность к нулю. Рекомендуется начать тестирование с небольшой группы в 5 человек. Если результаты теста будут неполными, можно провести еще несколько испытаний, но уже с другими людьми, чтобы показания исследования были более честными.

Где и как работать над юзабилити?

Юзабилити – свойство сайта, которое нужно поддерживать в форме всегда, без перерывов и выходных. Только так продвигаемый вами веб-сайт будет оставаться конкурентоспособным, что особенно важно для коммерческих проектов, в том числе для интернет-магазинов. Чтобы это было возможным, упомянутые выше тестирования надо делать регулярно с должной частотой. Приведем еще 4 совета по правильному тестированию юзабилити:

  • Проведите первое тестирование в отношении старой версии сайта. Это поможет выявить все сильные и слабые стороны прежней версии ресурса, дабы использовать их для разработки новой версии сайта.
  • Выполните проверку веб-сайтов успешных конкурентов. Это один из самых простых и бесплатных путей к получению конкурентоспособной информации. Знание плюсов конкурентов даст сделать сайт еще лучше.
  • Найдите параметры, исправление которых приводит к улучшению юзабилити. После внесения каждой важной корректировки обязательно проводите дополнительное тестирование с привлечением группы.
  • Обязательно проверьте финальную версию продвигаемого ресурса перед размещением в сети. Только после того, как убедитесь в том, что целевая группа не испытывает проблем с сайтом, публикуйте его.

Может возникнуть вопрос о том, где именно проводить тестирования веб-сайта, ведь их может быть много. Для этой работы достаточно иметь изолированное от внешних раздражителей помещение, внутри которого есть хотя бы один компьютер. Частники могут проводить тестирование у себя дома, компании – в отдельной зоне офиса. Также не забывайте проводить тестирование мобильной версии сайта – для этого нужен планшет и смартфон.

Подводим итоги по юзабилити сайта

Благодаря этому материалу вы знаете все самое необходимое по такой теме, как юзабилити сайта, а именно:

  • Юзабилити можно улучшить без посторонней помощи, используя 7 простых правил.
  • Перед началом работы с юзабилити надо обязательно выполнить аудит веб-сайта.
  • Лучший способ оценить удобство сайта для пользователей – провести тестирование.
  • Чем чаще проводятся тестирования, тем лучше результат – делать это надо регулярно.

Следите за тем, чтобы юзабилити вашего сайта было на высоте, и тогда проблем с конверсией у вас не будет!

Что такое юзабилити сайта — разработка интерфейса сайта

Очень крутая статья про юзабилити сайта! Вы узнаете, что это такое и для чего нужно. Еще будет много советов, кейсов и хитростей по созданию интерфейса сайта и улучшению удобства его использования.

Что такое юзабилити сайта

Usability — это степень эффективности, продуктивности и удовлетворенности, с которой продукт может использоваться пользователями для достижения некоторых задач в определенном контексте.

User Interface (UI — пользовательский интерфейс) — ощущение и реакция человека, вследствие использования или предполагаемого использования продукта, системы или услуги.

User eXperience (UX — опыт взаимодействия) — желаемый, ожидаемый и практический опыт взаимодействия пользователя с продуктом.

Каналы восприятия информации

Когда пользователи приходят на сайт, они имеют возможность воспринимать информацию с помощью трех каналов.

Восприятие информации на сайте

Мы как разработчики интерфейса (юзабилисты) имеем возможность в основном, работать только с визуальным каналом. То есть аудиальный и кинестетический у нас практически отсутствует.

Поэтому нам нужно делать упор на визуальном канале.

Пользователи воспринимают различные объекты по-разному. К примеру, чтобы нашему мозгу выработать число, достаточно 0,30 мс. Числа быстрее воспринимаются чем другие объекты.

Среднее время обработки информации человеческим мозгом

Абстракция воспринимается дольше всего. Если мы хотим привлечь внимание к какому-то объекту в рамках интерфейсного решения, то нужно сделать этот объект более сложным.

Если же мы хотим, чтобы пользователь быстрее усвоил информацию и пошел дальше по сценарию, то объект должен быть более простым.

Для примера, если посмотреть на изображение ниже, то наибольшую часть времени мы потратим за просмотром левой картинки. Ведь там расположены более сложные объекты.

Секретные приемы заострения внимания

Сейчас рассмотрим приемы, которые вы можете использовать в рамках проектирования своих интерфейсов и улучшению юзабилити сайта.

Для примера давайте возьмем объекты, которые расположены на рисунке ниже.

Посмотрите на объекты 5 секунд, закройте глаза и постарайтесь вспомнить, какие элементы были на картинке

Здесь больше всего запоминаются вот эти фигуры:

Почему так происходит?

Контраст

При группировке объектов использовались различные варианты контраста. Их бывает 4 вида.

Варианты контраста объектов

К примеру, если мы делаем какой-то объект по размеру больше остальных или он имеет более сложную форму, то такой элемент будет заметно выделяться.

Контраст движения является самым сильным и с ним нужно быть очень осторожным. Многие ради красоты налепливают слишком много движущих элементов на страницу.

Поэтому используйте такой контраст не чаще чем один раз на пользовательском экране. Также движущий элемент рекомендую использовать только на целевых действиях. Например, кнопка заказать.

Или к примеру, у вас имеется на главной странице несколько баннеров. Однако наибольшую часть аудитории вы хотите направить на один какой-то баннер. В таком случае может пригодиться контраст движения.

Пользовательский опыт

В примере еще использовался пользовательский опыт. При взаимодействии с интерфейсом сайта мы приобретаем какой-то личный опыт. Вот его нужно использовать при донесении информации до своих пользователей.

Иконки понятны для многих

Правила краев и середины в юзабилити

В юзабилити есть правило краев и середины. Видя какую-то группу объектов, пользователи быстрее и проще воспринимают элементы, которые находятся по краям и по середине.

Диаграмма Гутенберга

Сейчас расскажу, как правильно создавать интерфейсы сайтов. Есть пользовательские паттерны. Это понимание того, как пользователи ведут себя на сайте.

Раньше основным паттерном был F.

То есть сначала люди смотрели слева. А потом горизонтально пробегались слева на право, возвращались обратно и шли сверху вниз. В итоге такие движения напоминали букву F.

Но это происходило раньше, когда были более простые интерфейсы. Сайты тогда были похожи друг на друга.

Но потом пришли креативные дизайнеры и изменили правила игры. В итоге пользовательский опыт при работе с интерфейсами стал меняться.

Поэтому сейчас рекомендую ориентироваться на другие паттерны. 90% интерфейсов рекомендую строить по диаграмме Гутенберга.

1. Начальная область

Экран можно поделить на 4 части. В верхнем левом углу пользователь будет начинать взаимодействие.

Если у вас известный бренд, постоянная аудитория более 50%, то в данном месте концентрировать внимание пользователей можно именно на логотипе.

Если вы малый бренд, то акцентировать внимание на логотипе не стоит.

В таком случае, в верхней левой части экрана нужно дать пользователю ответ на то, куда он попал. Если у вас все равно есть логотип, то в таком случае он не должен быть слишком большим.

Но главное, чтобы был большой заголовок. Он должен пояснять человеку, о чем сайт. Например, «Интернет-магазин мягких игрушек».

2. Область с высоким потенциалом

Дальше идет область с высоким потенциалом. Пользователь всегда смотрит слева на право. Поэтому вероятность того, что он переведет свой взгляд на эту область будет высокой.

Интернет-магазин 5 элемент

Если вдруг нужно что-то купить, воспользоваться поиском или справкой, то пользователь будет сразу знать, где это находится. То есть ему не нужно будет тратить время на поиски.

3. Область с низким потенциалом

Третья область в диаграмме Гутенберга имеет самый низкий потенциал. Туда лучше всего ставить графику. Изображения и так привлекают на себя довольно много внимания.

Вы также можете вообще, ничего не ставить в эту область. Все равно, она с низким потенциалом. Поэтому пихать туда важную информацию все же не стоит. Пользователи ее просто не заметят.

4. Конечная область

Четвертый блок — это конечная область. Сюда ставим нужное нам целевое действие. Например, кнопка заказать или купить, чат, форма заказа, регистрации и так далее.

В четвертой области высокий потенциал если блок 1 и 2 для человека будут интересны. В таком случае пользователь всегда доходит до конечной области.

Но даже если люди понимают, что в блоке 2 и 3 для них интересного ничего нет, то тогда они начинают пробегаться по диагонали.

Существует даже такая техника чтения, когда мы усваиваем информацию по диагонали чтобы сэкономить свое время.

Почему конверсия не будет равна 100%?

Почему даже при самом лучшем usability сайта конверсия никогда не будет равной 100%? Дело в том, что на проект могут заходить три типа пользователей.

Распределение трафика для рунета

У любого сайта есть нецелевой трафик. Это люди, который попали на проект случайно. Поэтому вероятность конверсии будет практически нулевой.

Лояльные пользователи сделают целевое действие независимо от того, как мы спроектировали интерфейс.

Самая большая группа, это сомневающиеся пользователи. Для принятия решения таким людям нужно ответить на вопросы, которые вызывают сомнения. В рамках интерфейса мы должны это сделать.

На хороших сайтах, где отлично проработано юзабилити, отвечено на большинство сомневающихся вопросов, проработан сценарий (о нем ниже), показатель конверсии можно улучшить.

Вы должны знать ожидания пользователей, их боли, потребности и так далее. Вот в рамках интерфейса сайта вы должны закрыть большой пласт всех этих страхов, сомнений и вопросов. Вы должны оправдать ожидания пользователей.

А все начинается с выдачи!

Когда человек набирает поисковый запрос, то по нему у пользователя уже формируются какие-то ожидания. Дальше человек читает сниппеты. Они тоже формируют его ожидание.

Сниппеты в поисковой выдаче

Если в сниппете у нас написано дешевая сковородка, человек переходит по нему на сайт и видит, что продают телевизоры, то естественно, его ожидания не оправдаются.

В итоге, на выходе получили высокий процент отказа.

Помимо ожиданий, у покупателя существует еще личный опыт (взаимодействие с подобными сайтами), эмоции, потребности (хочет продукт с определенными характеристиками) и страхи (обман среди конкурентов вашей тематики).

Бизнес же со своей стороны хочет, чтобы продажи росли и были выгодными. Вот как раз несоответствие этих двух взглядов приводит к тому, что конверсия нигде не будет равной 100%.

Как улучшить конверсию сайта?

Сейчас приведу пример, как можно сбалансировать цели и увеличить конверсию сайта. Есть промежуточные цели, по достижению которых, пользователь становится удовлетворенным и доходит до целевого действия.

Например, если хотим чтобы человек подписался на интернет-рассылку, то мы должны заранее предложить ему выгодные условия.

Для интернет-магазинов это может быть скидки и новости об акциях. Для информационных сайтов это будут бесплатные курсы, лайфхаки, кейсы и тому подобное.

Только в таком случае вероятность подписки будет высокой.

Если бизнес хочет собрать email-базу и продавать, а покупатель заинтересован получить информацию и выгоду, то делаем как в примере выше. Это промежуточная цель и пример, который отлично подходит как для бизнеса, так и для покупателя.

Пользовательские сценарии

Пользовательский сценарий — это путь клиента до совершения целевого действия. У любого сценария есть определенные шаги.

Например, пока я не пришел и не убедился, что попал на нужный сайт, я не совершу дальнейших действий. То есть, если я перехожу по ссылке чтобы купить телевизор и вижу, что сайт о велосипедах, то на этом мой сценарий закончится.

Если же я зашел и вижу, что сайт про телевизоры, тогда у меня возникает следующий вопрос (шаг). Например, мне нужен 42 дюймовый телевизор. В итоге второй шаг для меня — это поиск телевизора с подходящим экраном.

Если я не найду такой, то на этом шаге мой сценарий (запрос) закончится. Если же я нашел товар, то начинается третий шаг и так далее.

Как проектировать сценарии

Проектировать пользовательские сценарии можно практически на всем. Вот основные моменты проектирования:

  • На потребностях
  • На страхах
  • На эмоциях
  • На опыте
  • На ожиданиях
  • На целях (ниже разберем)

Однако несмотря на это, мы не должны забывать и о целях самого бизнеса. На сайте мы можем написать все что угодно. Однако нужно заранее знать, сможет ли сам бизнес работать по таким условиям. Например, дать скидку в 50%.

Давайте попробуем визуально представить проектирование сценария пользователя. Цифры на картинке — это промежуточные цели покупателя и бизнеса.

Для того чтобы построить какой-то сценарий, нам нужно выписать все цели бизнеса, расставить между ними приоритеты. Еще нужно выписать все цели определенного покупателя и смоделировать его сценарий.


Первая цель покупателя — это понять, куда он попал. Первая цель для бизнеса будет удержать или заинтересовать пользователя. В таком случае, нужно составить тот заголовок, который будет удовлетворять ожиданию покупателя.

В общем, таким образом, нужно искать соответствие целей покупателя и бизнеса.

К сожалению, полностью все сценарии точно объединить не получится. Поэтому ни у кого нет 100% конверсии. Однако ниже в статье я дам хитрые приемы по общему объединению нескольких сценариев. Это заметно улучшит итоговую оценку юзабилити сайта!

Методология моделирования сценария

Вот план методологии моделирования:

  1. Сегментация целевой аудитории. Нужно отобрать подходящих людей под бизнес и затем разбить эту аудиторию на отдельные группы (сегменты).
  2. Выбор персонажа. Под каждый приоритетный сегмент выбираем персонажа (человека, чье поведение можно спрогнозировать). Обычно выбирают известных личностей, медийных персон или звезд.
  3. Задачи бизнеса. Обычно это список задач, который ставит бизнес на сайте. Например, подписка, заказы, покупки, звонки и так далее.
  4. Задачи потребителя. Для общей картины берем персонажа, который будет представителем какого-то одного сегмента целевой аудитории. То есть большинство пользователей должны вести себя так, как этот персонаж. Для этого выписываем все его цели и расставляем приоритеты.
  5. Прохождение сценариев. Берем профиль задач покупателя и по пунктам в рамках интерфейса сайта пробуем выполнить каждое задание. То есть ищем ответы, которые возникли (вы выписали в профиле задач) у данного персонажа.
  6. Формируем список всех гипотез. По ходу прохождения сценария на сайте выписываем все неудобные моменты. Например, я не нажал на эту кнопку потому что она не слишком заметная.

Сегментация целевой аудитории

Про сегментацию целевой аудитории я тут много расписывать не буду. Просто ниже дам вам небольшую таблицу данных.

1 Информационные проекты — частные тренеры, консультанты, коучи, психологи и прочее — те, кто консультирует, обучает и работает с 1 — 3 помощниками. Женщины 28 — 40 лет. 10%
2 Небольшой оффлайновый бизнес — детские развивающие центры, небольшие магазины, языковые школы, сфера красоты (парикмахерские и так далее). Женщины 28 — 40 лет. 15%
3 Частные специалисты на стыке бизнеса и фриланса — фотографы, визажисты, спортивные инструкторы, репетиторы. Женщины 28 — 40 лет. 25%
4 Бизнесмены, вышедшие из продаж и открывшие собственный маленький бизнес — это стройка, авто, установка оборудования. Мужчины 35 — 40 лет. 10%
5 Фрилансеры — копирайтеры, дизайнеры, сммщики. Мужчины 20 — 40 лет. 40%

Выбор персонажа

На этом этапе выбираем какого-то популярного персонажа. К примеру, можно взять Леру из сериала «Реальные пацаны».

Лера из сериала «Реальные пацаны»

Кто смотрел сериал, тот уже знает, как ведет себя этот персонаж. Чтобы мы смогли опираться на ее какие-то потребности, жизненные ценности, страхи и так далее, давайте выпишем черты характера.

Основные ее черты:

Далее начинаем моделировать этого персонажа. Для этого выписываем ее:

  • Потребности
  • Страхи
  • Ожидания
  • Опыт
  • Эмоции
  • Промежуточные и конечные цели

Теперь, когда мы сформировали персонажа, то можно сделать тоже самое, но уже для других сегментов целевой аудитории.

Создание профиля задач для бизнеса

Когда всех персонажей собрали, начинаем составлять профиль задач бизнеса. Для этого нужно забрифовать представителя бизнеса.

То есть если вы взяли какой-то проект (сайт, блог), то нужно напрямую получить информацию от представителя бизнеса.

Для этого обычно подойдет интервью, беседа в офисе или заполнение анкеты. Тут бизнес вам рассказывает какие-то особенности. Вы все это записываете.

Затем составляем профиль задач, где расставляем приоритеты для бизнеса. Вот к примеру, профиль задач на сайте строительной техники:

  1. Сдать в аренду как можно больше техники
  2. Сдать технику на длительный срок
  3. Сдавать определенную технику
  4. Загрузить автопарк на будни
  5. Чтобы сайт рекомендовали своим друзьям (ссылки, соц. сети)

Создание профиля задач для покупателя

Теперь нужно составить профиль задач для того персонажа сегмента целевой аудитории, который был выбран ранее.

Первое что нужно, это смоделировать какую-то задачу для него.

Я к примеру, возьму известного персонажа Чебурашку. В одной из серий мультфильма, ему нужен был подъемный кран для постройки школы.

Итак, главная задача для Чебурашки — «Как можно быстрее нужен подъемный кран для постройки 3-ех этажной школы.»

Соответственно, профиль задач Чебурашки будет следующим:

  1. Понять на сайте, туда ли я попал, есть ли там что-то про подъемный кран
  2. Подойдет ли мне подъемный кран (например, хватит ли вылета стрелы для 3-ех этажной школы)
  3. Кто будет управлять этой техникой
  4. Как ее заказать и так далее

Приоритеты покупательских целей

Теперь нужно расставить приоритеты покупательских целей. Расставляем все цели по порядку для каждого персонажа и проставляем баллы. В примере ниже максимальный балл у первой цели равен 9, так как всего выписано 9 целей.

Все цели Сумма баллов целей Чебурашка (нужен подъемный кран) Колян (нужна газель) Сильвестр (нужны 5 катков)
Цели Баллы Цели Баллы Цели Баллы
Понять туда ли попал, есть ли определенная техника (№1) 27 цель №1 9 цель №1 9 цель №1 9
Узнать, сколько стоит аренда техники (№2) 12 цель №8 8 цель №2 8 цель №8 8
Узнать минимальное время аренды (№3) 3 цель №5 7 цель №9 7 цель №4 7
Узнать, когда техника сможет подъехать (№4) 18 цель №4 6 цель №3 6 цель №7 6
Узнать, кто будет управлять техникой (№5) 7 цель №10 5 цель №4 5 цель №6 5
Узнать про закрывающие документы (№6) 5 цель №10 4 цель №2 4
Узнать варианты оплаты (№7) 6 цель №10 3
Узнать, подходит ли данная техника (№8) 16
Узнать, как выгоднее заказать (№9) 7
Как заказать Основная цель должна быть достижима в любой момент прохождения сценария

Как видно на три сегмента (персонажа) у нас приходится 9 задач. Причем задачи для каждого персонажа совсем разные. Поэтому у всех в сценарии получилось разное количество шагов. У Чебурашки — 5, у Коляна — 6, у Сильвестра — 7.

У каждого персонажа выписали цели и расположили в нужном порядке. Если цель №1 выполняется на сайте (то есть персонаж понял, что он попал на нужный проект), тогда проверяем следующую цель и так далее.

Таким образом, мы проверяем, отвечает ли наш сайт на каждую поставленную цель. Нужно чтобы интерфейс сайта полностью отвечал на все цели всех трех персонажей.

На как это сделать?

Вариант по landing page

Можно использовать вариант, по которому проектируется landing page. То есть под сегменты расставляем приоритеты.

Далее, чтобы на сайте получить какой-то сводный сценарий, в лендингах можно просто взять среднее арифметическое.

В таблице всего получилось 10 целей. Но я десятую не включил, потому что она в любом случае должна быть доступна в любой момент времени и для каждого посетителя.

А так у нас 9 целей.

Поэтому максимальный балл берем по количеству целей. В примере, это 9. То есть цель № 1 является самой приоритетной и имеет максимальный балл. Далее для каждой цели снижаем балл на 1.

Поскольку цель №1 приоритетная для всех трех персонажей, то ответ на ее решение должен находится на самом первом экране.

Идем далее и смотрим следующую цель.

Цель №8 в сумме для всех персонажей набирает 16 баллов. И так для каждой цели просчитываем максимальный балл.

Далее мы получаем общий (оптимальный) сценарий.

По нему можно проектировать страницу захвата. Она будет максимально удобна для всех трех персонажей. Кроме того, с помощью такого оптимального сценария мы можем значительно увеличить конверсию сайта.

Конечно же, многое зависит и от реализации интерфейса сайта. То есть как спроектировали, нарисовали и так далее. Но в большинстве случаев такая продающая страница все равно будет решать задачи пользователей.

Так что предоставленный выше кейс по юзабилити я тоже рекомендую использовать.

Вариант с приоритетным сегментом

Еще можно делать какой-то сегмент в приоритете. К примеру, для бизнеса наиболее интересным персонажем будет Сильвестр. Поэтому чтобы сделать наибольший упор на этот сегмент целевой аудитории, вы просто к каждой цели этого персонажа добавляете дополнительный балл.

К примеру, цель №1 для Чебурашки и Коляна будет 9 баллов. Но для Сильвестра она будет иметь 11 баллов.

Потом, когда мы посчитаем сумму баллов для каждой цели, у нас получится общий сценарий, но с наибольшим упором на Сильвестра.

Далее этот общий сценарий отдаем UX специалисту. Он создаст структуру страницы в виде различных форм и блоков. Ну а веб-дизайнер потом распределит внимание для каждого блока.

Прохождение сценариев на сайте

Теперь открываем свой сайт и пробуем пройтись по тем сценариям, которые были созданы ранее. Например, представить себя Чебурашкой и попробовать пройтись по его сценарию.

Вот, что нужно сделать:

  1. Задокументировать все неудобные моменты при прохождении сценария
  2. Составить список гипотез по улучшению UI сайта
  3. Формирование чек-листа с простановкой приоритетов внедрения/тестирования

Проектируем интерфейс сайта

На основе полученных данных начинаем проектировать интерфейс сайта. В любой момент времени он должен давать представление о том, что пользователь находится на правильном пути и верно идет к цели.

А если человек сбился с этого пути, то интерфейс должен подсказать, как вернуться обратно. Поэтому всегда думайте и анализируйте поведение пользователей на сайте.

Например, на информационных статьях приоритет давайте инфо-блокам (на видных местах размещайте меню, ссылки и так далее). В продающих страницах большой упор делайте на коммерческие элементы (кнопки купить, телефон, преимущества компании и так далее).

Исследование юзабилити на пользователях

Если раньше мы моделировали пользовательские сценарии, то теперь будем их анализировать на реальных людях.

Вот план методологии исследования юзабилити на пользователях:

  1. Постановка широких задач для посетителей
  2. Выбор респондентов, которые попадают под целевую аудиторию
  3. Анализ их сценариев
  4. Анализ обратных связей от людей
  5. Формирование списка гипотез

Постановка задач

Для того, чтобы обычные посетители действовали по коммерческим сценариям, мы должны поставить им широкую задачу.

Есть психологические приемы вернуть человека в прошлое. Это необходимо чтобы пользователь на базе своих воспоминаний выразил какие-то эмоции и предложил свое решение текущей ситуации. Поэтому можно напомнить человеку о его опыте.

Как еще можно заставить респондентов думать, как покупатели?

Можно попросить человека что-то выбрать для себя, для своего ребенка, ванной комнаты, балкона, дачи и так далее.

В итоге, когда посетитель о чем-то таком начинает задумываться, то он автоматически начинает вести себя как покупатель.

В вопросах должна быть смоделирована ситуация и указана конечная цель. Однако не должно быть подсказок по ее достижению.

  1. Если вам предстоит выбрать товар для себя, какими 5 критериями вы будете руководствоваться при выборе? Каждый из критериев оцените по 10-бальной шкале, в зависимости от степени важности/актуальности для вас.
  2. Руководствуясь своими критериями, подберите для себя на сайте подходящий товар. Какой информации для вас, как покупателя, не хватает о товаре? Какая раскрыта не полностью? А какая излишняя?
  3. Закажите выбранный вами товар online. Все ли получилось? Понятны ли вам условия оплаты и доставки? Какие сложности возникли? За счет чего можно сделать оформление и заказ удобнее? Укажите несколько причин почему вы выбрали именно этот товар.
  4. Найдите в поиске сайт конкурента, на котором удобнее подбирать и заказывать похожий товар. Почему? укажите несколько основных причин. Оцените наш сайт и проект конкурента по 10-бальной шкале.
  5. Наш сайт вызывает у вас доверие? Стали бы вы приобретать товар в этой компании или же обратились в другую? Почему? Назовите 5 основных причин почему вы закажете или не закажете товар на нашем сайте.

Поиск респондентов

Как вы думаете, где можно найти респондентов чтобы они попадали под целевую аудиторию? Вот несколько вариантов:

  1. Спросить у друзей, родственников и сотрудников компании. Можно записывать посещение пользователя и давать заполнить анкету. Однако при частых анализах у таких людей просто «замыливается взгляд».
  2. Спросить у естественных посетителей сайта (используем опросы, email-рассылку, социальные сети и так далее)

Ниже хочу наглядно представить вам основные плюсы и минусы для двух видов респондентов.

    Сложно замотивировать Можно спрашивать только лояльных посетителей Нет точного портрета респондента Вряд ли согласятся потратить много времени Сложно понять причины ответа Являются целевой аудиторией сайта

    Замотивированы Можно спрашивать у любых людей Понимание портрета пользователя Можно много спрашивать Можно отследить сценарий поведения на сайте Не являются ЦА

Группировка замечаний по usability

Далее используем группировку всех ошибок и замечаний респондентов по usability.

Рекомендую сортировать по следующим типам:

  1. Контент (вода в тексте, плохие фото, шрифт и так далее)
  2. Удобство
  3. Доверие (например, не доверяет потому что не показан цех производства продукции)
  4. Условия заказа (может не хватать данных о работе компании или продукте)
  5. Технические ошибки
  6. Логика действий (например, человек не видит подсказки, что его товар попал в корзину)

Таким образом, мы можем получить готовые сценарии с порядком промежуточных целей. Также будут доступны новые триггеры (продающие моменты для зацепки клиента) и различные ошибки.

Чек-лист по юзабилити сайта

На основе вышесказанного, можно сформировать рекомендации в виде небольшого чек-листа по юзабилити сайта.

  1. Элементы должны располагаться в привычных местах
  2. Пользователи должны понимать, что они совершают действие
  3. Люди должны понимать, что действие произошло
  4. Активные элементы должны быть контрастнее
  5. Формы обратной связи должны быть проще, с проверкой на ошибки и подсказками
  6. Ничего не должно отвлекать от целевого действия
  7. Человек должен получать ответы на интересующие вопросы

Анализ юзабилити сайта

Когда гипотезы собраны, нужно проверить их эффективность, то есть провести анализ юзабилити сайта. Например, какой цвет лучше подобрать для данной кнопки. А для этого нужно тестировать все на практике.

Обязательно учитывайте сезонность. Если этого не сделать, то результаты могут быть ложными. Еще используйте большое количество выборки. Чем больше данных, тем лучше для аналитики сайта.

Вот ключевые показатели эффективности, которые можно измерять при тестировании юзабилити:

  • Процент отказов
  • Время на сайте/странице
  • Количество расшариваний
  • Количество регистраций
  • Сколько просмотрели страниц
  • Количество просмотренный страниц до цели
  • Количество консультаций
  • Сколько звонков
  • Online-заявки
  • Продажи
  • Рост среднего чека
  • Рост оборота
  • ROI
  • другие

Для сбора информации можно использовать:

  • Счетчики веб-аналитики (Яндекс Метрика или Google Analytics)
  • Данные CRM систем
  • Коллтрекинг
  • Данные владельца бизнеса

Выводы

Все правила юзабилити сайта сводятся к такому порядку действий:

  1. Выписываем все цели бизнеса (даже самые абсурдные и малозначимые)
  2. Моделируем возможную ситуацию достижения выбранным персонажем общей конечной цели. При этом выписываем его потребности и промежуточные цели (с учетом его опыта, страха, эмоций)
  3. Расставляем их в хронологическом порядке (как считаем нужным) и находим соответствие целям бизнеса
  4. Пытаемся выполнить получившийся сценарий на сайте с учетом ожиданий персонажа

Как видите, юзабилити — это один из важных моментов при создании любых сайтов. Ваши проекты должны быть максимально удобными и раскрывать все вопросы пользователя.

Также человеку должно быть комфортно находится на вашем проекте. Все это улучшает не только поведенческие факторы, но и саму конверсию.

Почему юзабилити ― важное качество сайта

У большинства наших читателей есть свой сайт. Некоторые с его помощью неплохо зарабатывают, продавая товары или оказывая услуги, а другие никак не могут понять, почему их показатели в разы ниже, чем у конкурентов. Первое, на что нужно смотреть для ответа на этот вопрос, ― это юзабилити сайта. Но что это такое и почему это так важно?

Usability — удобство пользования веб-ресурсом. От того, насколько посетителю комфортно взаимодействовать с сайтом, зависят его дальнейшие действия. Если ознакомление с информацией и покупка товара даются ему легко, он это сделает или сразу, или позже. Но если он не может найти интересующее его предложение, то просто уйдет и не вернется.

Правила юзабилити

  • Дизайн сайта.

Встречается мнение, что от дизайна зависит количество трафика. В реальности это не так. Сам по себе дизайн редко влияет на количество посетителей. Но он влияет на впечатление и эмоции посетителей, на восприятие информации и простоту ее изучения. А в конечном итоге может повлиять на конверсию ― сколько посетителей в итоге совершат заказ, а сколько уйдут разочарованными.

  • Интуитивно понятная навигация.

Любой раздел сайта должен быть доступен в один-два клика. Если же у вас на ресурсе нагромождение ссылок, кнопок и прочих навигационных элементов, пользователь попросту запутается между ними, разозлится, что не может найти нужное, и покинет страницу.

Никто не любит напрягаться там, где этого не ожидаешь. Исключение может составить, разве что, квест, когда стоит задача поразмыслить и найти выход из ситуации. Но на любом коммерческом сайте навигация должна быть упрощена и понятна даже ребенку или далекому от интернет-технологий человеку.

  • Отсутствие битых ссылок.

Если пользователь бродит по сайту и наталкивается на одну или несколько несуществующих ссылок, у него создается впечатление заброшенности. Это, в свою очередь, может стать причиной ничего там не покупать, так как если администратор магазина относится несерьезно к источнику своего дохода, то пользователь формирует ожидание аналогичного отношения к покупателям.

  • Легкий для прочтения текст.

Читабельность текста очень важна для юзабилити. На данный фактор влияет размер букв, выбранный шрифт (избегайте шрифтов с засечками), цвет текста и его фон. Не стоит экспериментировать и делать один текстовый блок черным, а другой оранжевым. Лучше все выполнить в едином стиле, а сам текст должен быть понятным по смыслу и читаться на одном дыхании, не утомляя ни мозг, ни глаза пользователя.

Сплошное текстовое полотно реже дочитывается до конца, чем текст, разбавленный иллюстрациями. Поэтому важно разбавлять контент картинками или фото ― так он легче читается и лучше воспринимается.

  • Любая информация в 10-секундной доступности.

Заходя на сайт, пользователь готов уделить около 10 секунд на то, чтобы найти интересующие его данные или товар. Если за это время он ничего не находит, то покидает ресурс и продолжает свои поиски, но уже без шанса для вас. Чтобы не терять потенциальных клиентов, продумайте структуру своей площадки так, чтобы любой посетитель мог найти в течение нескольких секунд то, что ему нужно.

  • Контакты на самом видном месте.

Наличие обратной связи с покупателями — залог успеха в электронной коммерции. Но бывает так, что контакты спрятаны где-то в подвале сайта или располагаются только в соответствующем разделе. Это неправильно, так как далеко не каждый посетитель захочет листать половину сайта, чтобы связаться с менеджером. Разместите номер телефона, электронную почту или онлайн-чат на видном месте своего ресурса, чтобы любой желающий мог вам позвонить или написать и получить консультацию, а затем оформить заказ.

Как протестировать юзабилити сайта

Отберите группу из 5 человек, которые совпадают с вашей целевой аудиторией. Найти добровольцев можно в интернете, опубликовав объявление на различных площадках.

Составьте для группы несколько заданий, в которых им нужно взаимодействовать с вашим сайтом. Например, зайти в интернет-магазин и оформить покупку или найти контакты.

Каждое задание предполагает выполнение нескольких шагов. Вы должны их отслеживать и смотреть, на каком этапе пользователь столкнулся с затруднениями. Делать это можно при помощи встроенного в Яндекс. Метрику Вебвизора или карт скроллинга/кликов.

Несмотря на то, что для тестирования нужна группа из нескольких человек, задействовать их можно только по одному, чтобы не спутывались результаты. Наблюдатель при этом не должен подсказывать участнику тестирования, что нужно делать при возникновении сложностей.

Влияет ли юзабилити на доходность бизнеса

Однозначно да! Если показатель usability высокий, а трафик, который идет на сайт, целевой, увеличивается количество конверсионных действий. Пользователям удобно находить информацию, товары, услуги и оформлять покупки. Соответственно, растет доход.

Если же при поиске нужных данных или продукции посетителю приходится несладко, он не будет тратить часы своей жизни, чтобы разобраться с непонятной структурой такого сайта. Недовольный клиент закроет страницу и уйдет к конкуренту. А это уже упущенная прибыль.

От юзабилити отчасти зависит и посещаемость веб-ресурса. Когда пользователь доволен тем, как все устроено на сайте, он добавит его в закладки и через какое-то время вернется, чтобы снова что-нибудь купить или заказать. А это дополнительный трафик, а заодно и конвертирование разового покупателя в постоянного.

Юзабилити сайта: как перестать терять посетителей и начать получать лиды

Поднимите руку, если считаете, что коммерческий сайт должен продавать. Подняли? Теперь опускайте. Продавать-то должен не сайт, продавать должны вы, но через сайт. Так что сайт – это не продавец, а инструмент для коммуникации между компанией (которая продавец) и клиентами в сети. И если эта связка хромает, то, каким бы вы ни были идеальным продажником, продать ничего не получится.

Представьте пример плохой коммуникации на обычных входящих звонках – менеджеры отвечают на 1 звонок из 10, берут трубку только после 20 гудка, не здороваются, говорят шаблонными фразами или «льют воду», не вникают в вопрос клиента. Всё. Идеальная почва для слива рекламного бюджета компании. Ибо ни один потенциальный клиент не пройдет дальше разговора с таким менеджером.

Аналогично с сайтом – если он не дает удобной связи между посетителем и компанией, толку от него будет мало. За качество этой коммуникации и отвечает юзабилити – удобство использования сайта.

Юзабилити сайта складывается из двух частей:

  1. Внешняя часть: то, как пользователь видит сайт. Причем смотря на сайт, пользователь видит так и всю компанию. Сайт – это не просто набор текстов и картинок, это лицо компании в сети.
  2. Внутренняя часть: то, как сайт взаимодействует с пользователем. Здесь аналогично – взаимодействие сайта с собой человек воспринимает как отношение к себе всей компании. И временно неработающая выписка по карте в Сбербанк-Онлайне становится плевком в душу от всего Сбербанка.

Теперь понимаете, насколько важно не ударить в грязь лицом сайтом? По сайту и его поведению человек будет судить о вашей компании в целом.

Улучшаем UI

Сначала займемся «лицом» – внешней частью. Еще ее называют UI (User Interface) – интерфейс пользователя.

Проверяем такие параметры:

1. Дизайн сайта

Не обязательно «одевать» свой сайт от Dior. Вспомните, как вы ходите на встречи с партнерами. Вы не каждый раз в парадно-выходном костюме, но все же и не в шортах с майкой.

С сайтом все аналогично. Если ваша целевая аудитория – бизнесмены среднего уровня, берем спокойный дизайн, без резких переходов цвета и анимации. Если аудитория – молодежь, добавляем яркости и вау-эффектов. В любом случае, если вы решили не привлекать профессионального дизайнера, внешний вид сайта должен быть как минимум аккуратен – так сказать, «чист и выглажен», неряшливость недопустима.

Заметьте, что основная функция дизайна – улучшать восприятие информации и делать акценты на правильных местах. Ни в коем случае дизайн не должен перетягивать внимание человека с контента на само оформление. Дизайн ради дизайна – бесполезнейшая вещь. Вам нужен дизайн ради удобной подачи контента.

И еще один момент по дизайну – проследите, что все элементы сайта на разных его страницах оформлены в едином стиле. Это ссылки, пункты меню, кнопки, модальные окна и т.п. То есть если вы используете синюю кнопку для целевого действия на главной странице (читай, надели синий левый носок), то и на странице заказа вполне логично поставить ту же синюю кнопку (да-да, и правый носок тоже надеваем синий).

Смотрим на примеры. Пример 1 – сайт компании, которая строит дома под ключ:

Здесь плохо читаются шрифты, есть картинки и фон, не несущие смысловой нагрузки. Впечатление от сайта – сделан дилетантами/школьниками. Экстраполируем на компанию – значит, строят тоже дилетанты.

Попробуем изменить дизайн и добавить ему аккуратности (заметьте, профессионального дизайнера не привлекаем):

Контент сайта (текст и картинки) остался прежним, но теперь мы видим, что с нами «говорит» уже не школьник, а более-менее взрослый человек, который вызывает больше доверия.

Второй пример – это случай, когда дизайн сбивает с толку и дает неверное представление о компании:

Первая мысль – это сайт тренажерного зала. Ан-нет, это сайт интернет-магазина спортивных товаров. Будет лучше показать сам товар, а не того, кто его использует. С точки зрения посетителя, на этой картинке какой-то тип качается «моей» штангой (то есть товаром, который я хочу купить). Покажем просто штангу, а заодно поставим в шапку правильный логотип (на исходном сайте он почему-то лишь в середине страницы):

Полной однозначности мы пока тоже не добились, для этого надо поменять текст у картинки (этим мы займемся позже). Но уже лучше. И теперь, по крайней мере, в экран входит заголовок, прямо говорящий о деятельности компании.

2. Навигация

Это меню (основное верхнее, вспомогательные слева и в подвале) и хлебные крошки. Навигация показывает, что есть на сайте – какие товары/услуги предлагает компания и что можно про компанию узнать. Оптимально использовать 1-2 уровня вложенности. Если их больше, то будет сложно ориентироваться.

Привычное место основного меню – в шапке сайта. Меню должно быть единым для всех страниц сайта, по нему посетитель понимает, что он все еще находится на одном и том же сайте. В разделах сайта может быть вспомогательное меню (обычно слева). Оно может быть разным для разных разделов.

Старайтесь не ставить на одном уровне меню более 6-8 пунктов. Не забывайте, что объем внимания обычного человека – 5-7 объектов.

При наведении мыши пункты меню следует подсвечивать, чтобы было понятно, что по ним можно кликнуть. Активный пункт меню (соответствует той странице, где сейчас находится юзер) нужно выделять, чтобы пользователь видел свое текущее положение.

При уровне вложенности более двух ставим хлебные крошки, например:
Главная » Услуги » Строительство заборов
чтобы показать всю цепочку, которая привела на ту или иную страницу.

Возвращаемся к примерам. На сайте строительной компании было два меню (вверху и слева), мы можем объединить их в одно. Пункты «Услуги» и «Цены» объединим в один раздел «Услуги и цены» – как-то глупо рассказывать про услуги на одной странице, а про их цены – на другой. Пункт «Схема проезда» уберем вообще, схема будет в разделе «Контакты». Разделы «Вакансии», «Партнеры», «Карта сайта» тоже убираем, основной целевой аудитории этого сайта они не нужны. Пункт «Калькулятор» убираем из меню, делаем его отдельным блоком и ставим в правой части сайта.

Итого получили одно меню вместо двух (теперь проще ориентироваться) и расширили место под основной контент, убрав левую колонку.

Во втором примере главное меню бедновато, нужно дополнить его информацией об оплате, новостях и акциях (то есть тем, что интересно посетителям интернет-магазинов). И обязательно ставим в основное меню каталог товаров, а к нему добавим выпадающее подменю со списком категорий:

Теперь в основном меню есть самая необходимая информация для приобретения товара – собственно, сам каталог, возможные способы оплаты и доставки, а также новости (чтобы узнать, насколько «жив» магазин) и акции (а вдруг какие скидки сейчас есть).

3. Шапка

Это верхняя часть шаблона сайта, которая остается неизменной на всех его страницах. Что в ней может быть: логотип, тэглайн (2-3 слова о том, чем занимается компания), телефон, адрес, режим работы, ссылка на обратный звонок, ссылки на группы в соцсетях, ссылки на вход или регистрацию личного кабинета, корзина, строка поиска. Также в шапку обычно включают и меню.

Работаем с шапкой для сайта строительной компании – добавим тэглайн, полное название компании, ее адрес. Чтобы не запутывать людей, оставим только один номер телефона (и возьмем городской номер, а не сотовый). Добавим режим работы – чтобы люди знали, в какое время можно звонить:

Теперь посетитель видит, что попал на сайт компании, которая строит срубы и дома под ключ, компания эта называется «МС» и это именно компания со своим офисом, а не бригада студентов.

Переходим к интернет-магазину. Уменьшим логотип, чтобы освободить место под другие элементы, добавим краткий слоган к логотипу. Добавим тэглайн, в нем упомянем регион, в котором работает компания. Здесь аналогично оставим один номер телефона и допишем режим работы. Дополнительно поставим ссылки на группы ВКонтакте и в Инстаграме. И самая главная часть в случае интернет-магазина – корзина, ее тоже разместим в шапке сайта справа (это ее стандартное место).

И снова, добавив буквально несколько элементов в шапку, мы значительно помогли посетителям сайта. Теперь они могут увидеть, что это интернет-магазин (тэглайн и корзина недвусмысленно намекают на это) и что но работает по Иркутску и области (опять же теглайн, да еще код города в телефоне). Спутать с тренажерным залом теперь попросту невозможно.

4. Подвал


Он же футер – нижняя часть шаблона сайта, которая так же остается одинаковой на всех страницах. Здесь традиционно ставим копирайт – годы работы компании и ее полное наименование. Сюда же дублируем ссылки и контакты из шапки, ссылки на группы в соцсетях. Можем добавить ссылки, которые не поместились в основное меню. Сильно не захламляйте, все же это не балкон =)

Текущий футер у сайта из первого примера лишен смысла:

Добавим ему пользы:

Помимо информации из шапки добавили ссылки на разделы «Партнеры» и «Вакансии» – они могут пригодиться примерно 2-5% посетителей этого сайта, поэтому они в футере. Также указали здесь дополнительные телефоны менеджеров (но их еще надо будет продублировать в разделе «Контакты»).

Футер второго примера лишь чуть-чуть информативнее первого:

Сделаем его более «солидным»:

Продублировали логотип и ссылки из основного меню. Добавили ссылку на «Обмен и возврат», которая не поместилась вверху. Добавили список популярных категорий – на случай, если посетитель пропустил их ранее. Еще раз напомнили, про телефон, режим работы и соцсети.

5. Контент

Про контент можно говорить почти бесконечно, поэтому здесь кратко. Контент должен быть полезным, без лишней воды. Ваш сайт – это рекламная брошюра, а не «Война и мир». Но и слишком кратким быть не стоит. Должна быть информация об услугах и товарах, о компании в целом и ее сотрудниках, об условиях работы, о гарантиях и выполненных заказах. Никто не захочет довериться незнакомцу. Сайт должен познакомить пользователя с вашей компанией.

Помните, что контент – это не только тексты. Это еще картинки и видео. Они должны быть хорошего качества, сейчас для этого вполне хватит камеры планшета (по крайней мере, для приемлемых фотографий). Идеально, если фотографии и видео сделаны «вживую», а не взяты с других сайтов.

Какие картинки можно размещать – товар, сотрудники, процесс работы. Например, разместите на сайте автосервиса на странице «О компании» фото процесса починки двигателя – и эта компания для пользователя станет уже гораздо более знакомой, ведь он увидит реальных людей в реальном помещении, выполняющих реальную работу. С видео аналогично – можно делать видео-обзоры товаров и услуг. Например, записать пару видеороликов, как проходят занятия в фитнес-клубе.

Помимо информации, напрямую касающейся вашей компании, можно давать посетителям и другой полезный контент. Да, сейчас говорим о статьях. Прямой прибыли компании они не будут приносить, но будут повышать (в случае, если они хорошие) ваш статус эксперта и источника полезностей, а также доверие к компании. Но вести блог стоит только при наличии на это ресурсов (времени и специалистов). Потому что полупустой блог со статьями раз в пятилетку сыграет только отрицательно.

К примерам. На сайте строительной компании есть страница про ленточный фундамент:

Скажите, зачем она здесь? Вместо нее мы можем написать статью, например, о том, как строители этой компании делали ленточный фундамент для одного из объектов. Естественно, с фотографиями этого объекта. Такая статья убьет двух зайцев. Она будет полезна тем, кто решил сам строить дом и ищет информацию по фундаменту. В этом случае идеальный эффект – по статье человек понимает, что не все так просто, решает все-таки обратиться к спецам и выбирает ту компанию, статья которой произвела наилучшее впечатление. Второй заяц – статья покажет реальных сотрудников компании в процессе строительства. В конце статьи можно показать и фотографии готового дома (а не только фундамента), чтобы люди увидели результат ваших работ.

В статье обязательно используем фотографии – ведь 50% людей хлебом не корми, а дай только фотки посмотреть, и даже не важно чьи =)

В примере спортивного магазина возьмем страницу о доставке:

Обычно вместе с доставкой интересуют и способы оплаты, поэтому объединим их на одной странице. Вспомним, что у нас есть промокоды, и добавим пару слов о них в текст об оплате. А также дадим посетителям небольшой инструмент для приблизительного расчета стоимости доставки в свой город:

Стараемся использовать короткие фразы и простые предложения. Экономим время посетителя, пусть лучше он потратит его на просмотр еще пары-тройки товаров.

6. Тексты

И еще пару слов отдельно о текстах. Есть 3 важных момента:

  1. Конкретика. Тут все просто. Пишем не «в нашей парикмахерской самые низкие цены», а «мужские стрижки от 300 рублей». Представьте, что рекомендуете компанию лучшему другу. Ему вы не скажете «индивидуальный подход», а доходчиво объясните – «закрепим за тобой спеца, он будет сопровождать все этапы работ и согласовывать с тобой». Не стесняйтесь говорить со своими посетителями таким же понятным языком.
  2. «Вы получите». Описывайте не то, что вы сделаете, а то, как от этого станет хорошо клиенту. Не «мы подберем вам лучшую путевку», а «вы проведете 10 дней в месте, о котором мечтали».
  3. Целевое действие. Увлекшись написанием правильного текста, не забудьте разместить в нем призыв к действию – Позвоните, Напишите, Оставьте заявку, Перейдите в каталог и пр.

Взглянем на страницу с описанием услуг нашего первого примера:

Из конкретики – только список выполняемых работ. Попробуем добавить фактов, выгоду клиента и целевое действие:

И даже гарантию от срыва сроков сюда добавили (слишком уж больное место, и не только в строительстве).

В примере интернет-магазина обратимся к главной странице:

Сейчас из конкретики лишь телефон, адрес и название компании. Не будем добавлять много текста, на главной странице интернет-магазина он мало кому интересен. Лучше сформируем два блока наподобие «Вы получите». Первый – для молодых людей, которые хотят организовать домашнюю тренажерку (это основное направление этого магазина). Второй – для родителей, которые хотят организовать досуг детей на даче (т.к. лето на дворе). Этот блок явно будет сезонным. Плюс добавим конкретику про скидки.

Здесь целевое действие – это клик по карточке товара, поэтому каких-то отдельных кнопок нет.

7. Отзывы и кейсы

Продолжаем о контенте. Отзывы и примеры работ нужны, чтобы повысить доверие к компании. Хорошо, если у вас есть реальные отзывы и реальные примеры работы – не прячьте их от людей, обязательно добавьте на сайт.

Что делать, если реальных отзывов нет? Стребуйте их со своих клиентов – за скидку, вкусняшку или большое спасибо. Так как мир не без добрых людей, то хотя бы один из десяти согласится дать отзыв о вас (тем более если за скидку), надо только попросить.

А если нет и самих реальных работ? Ну что делать, придется осчастливить родственников или друзей. Например, если открываете салон красоты: сделали маникюр маме, сестре и лучшей подруге, все тщательно отсняли – вот вам и небольшое портфолио, осталось только выложить на сайт. Конечно, такой подход не везде применим, дом ради портфолио даже лучшему другу не построишь =)

К примерам. Портфолио от строительной компании. На один объект – всего одна фотография.

Это мало. Как минимум, штук 10 фото на каждый объект – на разных этапах постройки, под разными углами. Плюс краткое описание – где, что и как строили.

Для интернет-магазина в наше время вот так уже пусто:

Взгляд привычно ищет отзывы:

8. Первый экран

Это та часть страницы, которую вы видите в браузере, не прокручивая страницу. То есть открыли сайт – и все, что в окно поместилось – первый экран.

Когда пользователь открывает из поиска сразу 5-7 сайтов, а затем последовательно просматривает их один за другим, он оценивает именно первые экраны. По результатам этой быстрой оценки 3-4 сайта закрываются сразу, остальные изучаются более тщательно.

Поэтому первый экран страницы должен «цеплять» – выгодным предложением, интересной картинкой, попаданием в проблему или желание клиента.

Смотрим на примере. Вспомним первый экран сайта строительной компании:

Чет не зацепило. Попробуем привлечь попаданием в желание пользователя:

Что хочет человек, который ищет строительство домов под ключ – вот примерно такой дом, как на картинке, он и хочет. Для более сильного эффекта справа размещаем форму с заголовком «Хочу дом», где можно выбрать параметры будущего дома и отправить заявку на расчет стоимости. Здесь же в первом экране указываем и цену услуги.

Теперь первый экран магазина спорттоваров:

Здесь юзер вообще решит, что ошибся сайтом. Искал спорттовары, а открыл сайт тренажерки. Привлекать будем предложением низкой цены, а также персональным призывом к действию:

Теперь эта фотография уже не уведет нас на мысль о сайте тренажерного зала. А кнопка «Выбрать себе диски» в точности отвечает желанию, с которым пользователь приходит в интернет-магазин – выбрать себе товар.

9. Формы

Самая распространенная форма – обратная связь, «напишите нам». Для интернет-магазинов – форма отправки заказа.

Для пользователя работа с формами – не самый приятный момент, приходится отвлекаться на клавиатуру (не у всех высокая скорость печати, а кто-то еще и с телефона). Поэтому чем меньше полей в форме, тем лучше. Хотя правильнее сказать – чем меньше обязательных полей, тем лучше. Можно оставить в форме и 5-6 полей, если обязательны к заполнению только 2 поля. Кто не поленится и заполнит все поля – хорошо, у остальных нужную информацию выспросит менеджер.

Все поля в форме нужно подписать (в 2-3 слова). Можно добавить небольшое пояснение или пример заполнения. Обязательные поля нужно отметить звездочками – это уже давно стало стандартом.

Как пример рассмотрим форму заполнения заявки на расчет стоимости:

Обратите внимание – в блоке «Отметьте необходимые работы» мы сразу отметили те пункты, которые в большинстве случаев точно заказывают. Под кнопкой «Отправить» даем краткое описание того, что произойдет после отправки формы – это дает человеку чувство контроля ситуации.

10. Поиск

Нужен, если у вас много товаров или услуг (чаще все же для товаров, конечно). Если в интернет-магазине больше сотни товаров, можете спокойно добавлять поиск.

Форму поиска не прячем, ставим в шапку сайта. В результатах поиска подписываем, сколько найдено результатов. Если ищем по товарам, то в результатах можно сразу выводить карточки товаров с фотографиями и ценами:

11. Онлайн-консультант

Полезная вещь, если выполнены 2 условия: консультант не навязывается и консультант действительно работает.

То есть кнопка онлайн-чата должна показываться на сайте только тогда, когда ваш специалист действительно в сети и готов ответить на вопросы клиента. Вся фишка онлайн-консультанта – в его оперативности.

И не стоит настраивать «выскакивание» окна «Чем я могу вам помочь» через 5 секунд после того, как пользователь попал на сайт. Он только начал знакомиться с вашим сайтом, и вопросы у него еще не возникли.

Стандартное место кнопки онлайн-консультанта – правый край окна (либо нижний правый угол).

В качестве примера – провокационный вопрос консультанта на сайте Мосигры:

Всплывает сам после просмотра 3-4 страниц сайта и после 20-30 секунд на странице – то есть когда похоже, что человек зашел в тупик с выбором игры.

12. Виджеты соцсетей

Если у вашей компании есть активное представительство в соцсетях, используйте это на сайте.

Например, покажите отзывы из ВКонтакте:

Такие отзывы вызывают больше доверия. Но важно, чтобы отзывы были свежими.

Или пригласите посетителей вступить в вашу группу – возможно, человек не готов к заказу сейчас, но хочет сохранить контакт с компанией. Дополнительно можно завлекать людей в группу скидкой. Либо пытаться зацепить ценностью постов.

Улучшаем UX

Теперь переходим к скрытой части – к взаимодействию. Это UX (User eXperience) – опыт взаимодействия пользователя.

1. Скорость загрузки

Это тоже часть взаимодействия, поэтому не стоит сбрасывать со счетов скорость загрузки сайта. Если сайт работает медленно, пользователь легко найдет более молодую быструю замену.

2. Отсутствие ошибок

Даже мелкие ошибки вроде опечаток, не говоря уже о неработающих формах или нескачивающихся файлах, оставляют негативный осадок не только о сайте, но и о компании в целом. Периодически проверяйте свой сайт на корректность работы.

3. Увеличение картинок по клику

Дайте юзеру рассмотреть побольше картинок в полном размере (фотографии товаров, портфолио и пр.) – и вот он уже «завис» на вашем сайте, а кастрюля начинает исправно поджаривать суп.

4. Валидация форм

Это проверка, правильно ли заполнена форма. Если посетитель не заполнил какое-то обязательное поле, то выделите это поле и укажите, что не заполнено именно оно:

Иначе если пользователю придется пересматривать все поля в поисках ошибки, повторной отправки может и не состояться.

5. Сообщения после отправки форм

Обязательно сообщите юзеру, что данные приняты, и когда он получит ответ на свой запрос. Укажите реальное время ответа. Не стоит писать «Мы ответим через 15 минут», если входящие запросы ваши менеджеры обрабатывают лишь раз в день.

6. Статусные сообщения и диалоги

Проверьте все диалоговые сообщения, которые выдает ваш сайт при тех или иных действиях. Возможно, что половину из них составляли программисты, тогда вы встретите что-то вроде «Ссылка на подтверждение отправлена в автоматическом уведомлении на указанную при регистрации электронную почту». Вроде и слова правильные, и язык русский, а читать тяжеловато.

Перепишите сообщения естественным языком:

7. Email-уведомления

То же самое касается и email-уведомлений. Да, сайт отправляет письма по шаблону, например, уведомления о передаче заказа курьеру, но никто не мешает добавить в них немного человечности по аналогии с примером выше.

8. Динамический контент

Это тоже род взаимодействия сайта с клиентом. Например, если клиент переходит на сайт с одного из ваших рекламных объявлений, то сайт может распознать, что это было за объявление, и показать наиболее подходящий пользователю контент.

Например, если человек пришел на сайт просто из поиска, мы покажем ему стандартный вид:

А если он пришел с объявления «Детские спортивные комплексы», то в слайдере мы поставим на первое место тот из слайдов, который имеет отношение к детям, и ниже блок с детскими товарами тоже поставим первым.

Тогда конкретно этот посетитель с большей вероятностью получит информацию, которую он искал.

9. Полезные инструменты

Это онлайн-калькуляторы, мастера подбора услуг, комплектов и прочего. Помогают пользователю ответить на возникающие вопросы без обращения к специалистам компании или гуглу.

Например, частый вопрос при покупке горных лыж – какой длины должны быть лыжи. Вместо отправки юзера на большую таблицу рост-вес-длина можно предложить ему более удобный расчет:

Ответ получен, можно вернуться к выбору подходящих лыж, не мучаясь вопросом, подойдут выбранные лыжи по длине или нет.

Еще один пример с сайта Мосигры позволяет в пару кликов подобрать настольную игру, подарок или «штуковину» по цене, паре дополнительных параметров и наличию на ближайшей станции метро:

Мелочи

Не закрывайте глаза на мелочи, которые могут мешать посетителям взаимодействовать с сайтом. Любая мелочь может оказаться той последней каплей, после которой пользователь уйдет с вашего сайта.

Из часто встречающегося:

1. А так можно было?

Не всегда посетители понимают, что картинки на странице можно посмотреть в полном размере (увеличить по клику). Простое добавление иконки «лупы» к картинкам решает эту проблему:

2. Адреса картинок и файлов

Сохраняйте картинки и файлы с читабельными названиями. Только на латинице, а вместо пробелов – дефисы или нижнее подчеркивание. Почему это удобно пользователям, поясню на таком примере. Скачала с сайта два файла с описаниями заинтересовавших меня продуктов, собираясь посмотреть их на досуге. Но оказалось, что понять, какой из файлов мне нужен, не так-то просто:

Мелочь, но минус в карму заработан. Тогда как «человеческие» названия файлов не вызвали бы негатива:

3. Кнопка «Наверх»

Актуальна для реально длинных страниц (например, как эта статья). Стандартное место – справа внизу, но может быть и слева (ВКонтакте, Хабр). Изначально кнопка невидима, но появляется, если человек уже прокрутил 1-2 экранов вниз. Я по старинке пользуюсь кнопкой «Home» на клавиатуре, но статистика показывает, что кнопка «Наверх» тоже имеет своих приверженцев.

4. «Приклеенная» шапка

Тоже актуальна для случая, когда на сайте много длинных страниц. По мере прокрутки шапка «прилипает» к верхней границе окна и остается там все время на виду. Так посетитель лишается шанса забыть, на сайте какой компании он находится.

Здесь сразу пример и «приклеенной» шапки, и кнопки «Наверх».

Периодически смотрите на свой сайт глазами стороннего посетителя. Убедитесь, что сайт полностью отражает образ вашей компании – ответственность, качество товаров и услуг, аккуратность, точность, вежливость, профессионализм.

Любая небрежность или ошибка на сайте будут восприняты как неуважение компании к своим клиентам. Позаботьтесь об удобстве пользователей в работе с сайтом, и вы получите их руку и сердце лояльность и доверие – а что еще нужно для установления прочного контакта?

Если вам некогда проверять свой сайт по приведенным выше пунктам, но что-то подсказывает вам, что проблемы есть – вам подойдет юзабилити-аудит, мы все досконально проверим и скажем, что и как нужно исправить. Либо оставляйте заявку на мини-аудит вот в этом посте.

30 статей по юзабилити, которые убивают страх перед изменениями на сайте

Время чтения: 8 минут Нет времени читать? Нет времени?

У нас, как правило, начинают читать инструкцию, когда что-то сломалось. Но лучше просто избежать печальных последствий и заранее познакомиться с подборкой статей по юзабилити.

В ней вы найдете массу советов и примеров того, как оформлять сайты, чтобы у пользователей не текла кровь из глаз, и они не тратились на услуги психиатра. Читайте, делитесь с коллегами и исправляйте, если что-то сделано неправильно.

Исчерпывающе о юзабилити

Без этих элементов в карточке товара интернет-магазин не будет работать в полную силу. С ними же карточка станет более понятной и удобной, поможет закрыть возражения посетителя и мягко подвести его к покупке.

Прочитайте статью и узнайте, пора обновлять сайт или можно оставить все как есть. Главное, после прочтения у вас будет руководство к действию по улучшению текстов, дизайна и функциональности.

Делимся с вами 24 кейсами русскоязычных компаний и специалистов, которые занимаются созданием и оптимизацией посадочных страниц. Некоторые результаты могут показаться вам слишком хорошими, чтобы быть правдой, но это то, чего действительно можно добиться.

Главное, что нужно знать о поп-апах и их вариациях, чтобы они минимально раздражали пользователей и давали максимальный результат.

Пройдитесь по чек-листу элементов юзабилити сайта и посмотрите, какие доработки можно запланировать на ближайшее время. Более 200 пунктов на проверку – что-нибудь точно найдется.

Денис Нарижный, основатель сервиса AskUsers, написал статью о том, как использовать визуальные паттерны на сайте, чтобы удерживать и направлять внимание пользователей.

Обзор 22 разнообразных сервисов для прототипирования: как для ПК и мобильных устройств, так и для работы онлайн, от бесплатных до весьма недешевых, от простых со скромным функционалом до тех, в которых придется основательно разбираться.

Полезная статья о том, какие ошибки в верстке могут спугнуть посетителей вашего ресурса. С примерами реальных блогов, которые вы все знаете и любите.

Руководства

Мы можем искать причины в кризисе и экономических спадах, смене поколений с X на Y и Z, в астрологических прогнозах и даже в том, что «все покупатели козлы». Но. Бизнес закрывается, когда его продукт не решает проблему аудитории. Эта статья поможет найти связь между человеком, его проблемой и продуктом-решением.

Рассказываем, какие фишки-плюшки применить в статье, чтобы человек прочитал ее и сказал другим: «Отличный материал!» Не тронем шрифты и верстку абзацев. Рассмотрим элементы статьи, не относящиеся к тексту: содержание, время прочтения, заголовок и другие. Кратко и по существу.

Чтобы делать удобные пользователям страницы сайта, хорошо бы научиться пользоваться сетками для прототипирования. С помощью нового руководства от Дмитрия Дементия можно заметно повысить качество прототипов.

Статья про то, как создать прототип страницы, чтобы облегчить жизнь себе и пользователю.

В нашей новой статье вы прочтете, что такое UX-аудит, когда его нужно делать, что он дает, какие источники и методы использовать. Материал подойдет для разработчиков, владельцев сайтов, маркетологов, копирайтеров.

Евгений Кучерявый по элементам разобрал оформление текстового контента, который пользователи обязательно прочтут.

Дмитрий Дементий рассказал о том, нужны ли сайдбары, какую информацию туда добавлять, как сделать их удобными для пользователей. Обязательное чтиво.

Если давно хотели научиться пользоваться Axure RP, но ждали, когда кто-то сможет все по-человечески объяснить, момент настал.

Вебинары

Практикум, на котором главред блога Константин Рудов и маркетолог Тимур Фехрайдинов, в прямом эфире разобрали лендинги, которые им прислали.

Константин Рудов и Тимур Фехрайдинов продолжили разбор посадочных страниц, которые им присылали участники вебинара.

Артем Олейник, руководитель отдела разработки интерфейсов, рассказывает, какие ошибки в юзабилити сайта заставляют вас терять клиентов.

Анна Маркова дала базовые знания для создания прототипов страниц сайта. Все рассмотрено на конкретных примерах и максимально доступно.

Бесплатный вебинар по основам работы со шрифтами для сайтов. Спикер – наш руководитель отдела дизайна Святослав Грошев.

Примеры…

Собрали интересные фишки и необычные эффекты одностраничников. Часть из них сделали разработчики и веб-дизайнеры «Текстерры», часть нашлась на просторах рунета.

Здесь вы на конкретных примерах увидите, как другие оформляют свои «услужливые» страницы.

Радуем обновленной подборкой 404-страниц. Добавили 10 примеров, как поднять пользователю настроение страницей с ошибкой. Если не видели эту статью раньше, рекомендуем.

В статье собрано 20 примеров страниц «Портфолио» от разных компаний, чтобы вы оценили, насколько хорошо они сделаны, и что-то применили у себя. Или исправили.

В этой статье собрано 15 примеров того, как выглядят блоги разных компаний, чтобы вы смогли сравнить их со своими, перенять удачные находки или же увидеть слабые места.

Оформление карточек товаров в интернет-магазине напрямую влияет на продажи. В статье 20 реальных примеров того, как может быть оформлена карточка.

Держите идеи оформления страницы «Контакты» на 15 реальных примерах. У этих ребят есть чему поучиться.

Разбор 20 главных страниц сайтов с их сильными и слабыми сторонами. По просьбам читателей обновили подборку. Добавили разбор медицинского центра, салона красоты, портала объявлений, картинной галереи и книжного издательства.

Иногда на сайтах находятся такие «изюминки» интерфейса, что хочется сразу взять и утащить к себе. В материале 10 особенно интересных примеров.

В нашем блоге есть статья по юзабилити, которую мы не включили в подборку? Пишите в комментариях!

Улучшение юзабилити сайта — насколько это важно?

Ваша задача — поднять посещаемость своего сайта? Первый шаг на пути к этому — улучшение юзабилити ресурса.

Юзабилити сайта — это степень его понятности и простоты для пользователя. Его задача — удержать человека. Уровень юзабилити напрямую влияет на выбор Ваших клиентов, покупателей, подписчиков.

  • Пользователь не понял, как заказывать на Вашем сайте.
  • Страницы долго загружаются.
  • Посетитель не стал ничего покупать, потому что его отпугнула форма регистрации в 10 шагов.
  • Пункты меню сливаются с общим фоном сайта и сразу не воспринимаются.
  • В интерфейсе предусмотрено чересчур много выплывающих окон, что мешает пользователю ориентироваться на сайте.

Все это недочеты в юзабилити! Это прямые факторы, провоцирующие уход посетителя с сайта. В конечном итоге это несостоявшиеся покупки (подписки, клики) и упущенная прибыль.

Улучшение юзабилити: основные методы оптимизации

Первым делом надо провести аудит юзабилити сайта. Тут есть два варианта — сделать его самостоятельно, собрав мнения пользователей, или заказать его веб-аналитикам. Во время аудита оценивается множество факторов, влияющих на повышение посещаемости. Приведем некоторые из них:

  1. Навигация сайта. Как много кликов пользователю приходится сделать, чтобы найти то, что он ищет, и сделать заказ? Все ли действия важны или можно ликвидировать промежуточные шаги и тем самым упростить путь к цели? На какое действие приходится больше всего отказов от продолжения совершения заказа?
  2. Уровни сайта. Анализ этого фактора позволяет увидеть, насколько спрятаны важные страницы веб-ресурса от пользователей. Замечено, что глубокие уровни остаются недоступными не только для посетителей, но и для поисковых роботов.
  3. Перелинковка. Ссылки в контенте могут служить ключевыми словами для поискового робота и оптимизировать ориентацию пользователей на сайте. Особое внимание надо уделить тексту этих ссылок.
  4. Заголовки. Они должны четко отражать суть текста. Контент может быть очень интересным, но неудачный заголовок убивает все шансы на прочтение.
  5. Поиск. Сайты, в которых более 100 страниц, должны быть снабжены строкой поиска.
  6. Шрифты. Они должны быть удобны для восприятия.
  7. Структура текста. В веб-контенте исключены длинные абзацы. Текст, какой бы он ни был длины, должен быть четко структурирован. Обязательны подзаголовки, буллитные и нумерованные списки, схемы.

Напомним, что это лишь некоторые факторы, по которым оценивается юзабилити. Специалисты владеют десятками инструментов анализа и досконально тестируют сайт. Для улучшения юзабилити веб-мастера проводят его оптимизацию, которая позволит повысить посещаемость Вашего веб-ресурса.

Таким образом, повышение юзабилити сайта улучшает его удобство при использовании потенциальными и существующими клиентами.

Оптимизация юзабилити и поведенческие факторы

Связь между поведением пользователя на сайте и улучшением юзабилити прямая: чем удобнее ресурс, тем лучше основные поведенческие характеристики, а именно:

  • пользователи проводят больше времени на сайте;
  • снижается показатель отказов (не так много пользователей сразу покидают страницу);
  • больше глубина просмотра (клиент посещает больше страниц за один сеанс);
  • выше показатель возвратов на ресурс.

Оценить все эти показатели позволяют Google Analytics и Яндекс.Метрика.

Показатель отказов

Этот индикатор дает понять, сколько пользователей ушло с сайта сразу после перехода на него (то есть скольким пользователям веб-ресурс не показался интересным). Это важная характеристика, ведь чем меньше эта цифра, тем лучше оценивается ресурс со стороны поисковиков. По нашим наблюдениям, цифры данного показателя для разных сфер бизнеса и типов сайтов могут варьироваться. В качестве примера, за отказ в Яндекс. Метрике считается визит, продолжительностью менее чем 15 секунд.

Как уменьшить число отказов?

  1. Страница входа должна быть максимально информативной. Уже на первом экране до прокручивания вниз должна быть четко, лаконично и информативно обозначена тематика страницы и всего ресурса. Для увеличения информативности можно добавить теглайн (сжатое описание ресурса) рядом с названием компании или ее логотипом.
  2. Не показывать посетителю всплывающие окна с рекламой или предложением оформить подписку сразу после входа на сайт. Это отвлекает его внимание и не дает определить, о чем страница.
  3. Использовать цепляющий заголовок, качественный текстовый контент и графические изображения, чтобы пользователь остался на странице и сайте.

Показатель отказов можно посмотреть в Яндекс.Метрике в отчете по посещаемости и в некоторых других отчетах. Есть возможность включить в таблице отображение графика, чтобы отследить информацию по отказам более наглядно.

Глубина просмотра

Этим термином обозначают число просмотренных страниц за один визит. Визит — это комплекс действий, которые совершил пользователь на разных страницах сайта; он считается законченным, если пользователь не совершает никаких действий в течение определенного времени (по умолчанию это полчаса). Показатель не только позволяет измерить заинтересованность посетителей сайта в его контенте, но и является индикатором качества внутренней линковки и навигации. Считается допустимой глубина просмотра, равная 3 страницам. Хотя значение зависит от сферы бизнеса. Главное, чтобы она не была меньше количества страниц, которое должен пройти посетитель до оформления заказа.

Как увеличить глубину посредством повышения юзабилити?

  1. Проработать навигацию сайта. Пункты должны иметь конкретные названия, по которым сразу понятно, что за ними находится. Не стоит слишком дробить меню — большое количество пунктов путает пользователя.
  2. Разместить в тексте ссылки на основные и дополнительные товары/сервисы. Так пользователь сможет сразу переходить к нужному разделу и не тратить время на его поиски.
  3. Использовать хлебные крошки — они хорошо оцениваются поисковиками. Кроме того, они позволяют вошедшему на сайт не потеряться.

Посмотреть глубину просмотра в Яндекс.Метрике можно в отчете «Содержание», дальше надо перейти на «Страницы входа». Здесь можно увидеть график по глубине просмотра:

Время, которое пользователи проводят на сайте

Этот показатель определяется как временной промежуток между первым и заключительным действием на сайте (например, просмотр страницы, загрузка данных и обновление страницы, переход на другую страницу по ссылке). Чем больше времени потенциальные клиенты проводят на Вашем ресурсе, тем выше он оценивается поисковыми роботами. Из нашего опыта, считается нормой время более 1 минуты, но показатель может быть больше или меньше для сайтов разных тематик.

Какие именно шаги по улучшению юзабилити увеличивают время пребывания пользователя на сайте?

  1. Создание интересного контента. Для коммерческих проектов и интернет-магазинов важно наличие описания услуги/товара — пользователи просматривают его как минимум мельком, а если описание интересное, то тратят больше времени на его изучение.
  2. Добавление информационных или обучающих видеороликов там, где это применимо. Например, интернет-магазин может содержать видео, более наглядно показывающие преимущества товара. Посетитель потратит время на просмотр, а если ролик покажется ему интересным, поделится им с другими пользователями.
  3. Размещение на сайте блога или раздела с интересными статьями. Посетитель не просто прочитает интересный для себя материал, но и будет возвращаться на сайт снова и снова, чтобы почитать свежие статьи.

Проанализировать этот показатель поможет отчет Яндекс.Метрики «Содержание → Страницы входа». Здесь показывается график проведенного на сайте времени для страниц входа. Лучше смотреть в целом по сайту, анализировать страницы выхода.

Что влияет на юзабилити?

Чтобы улучшить поведенческие факторы (в частности, время, которое посетители проводят на сайте), следует работать в первую очередь над содержимым ресурса. Поведенческие показатели очень тесно связаны, поэтому работа над одним из них, как правило, дает улучшения и по другим. Ниже мы расскажем о других показателях, которые существенно влияют на юзабилити.

  1. Скорость загрузки страниц. Современный ритм жизни настолько быстрый, что даже если пользователю придется подождать 2–3 секунды до полной загрузки страницы сайта, он уйдет с нее. Для поисковых роботов тоже существенна высокая скорость загрузки. Даже если пользователь не ощущает разницы в несколько миллисекунд между загрузкой одного сайта и другого, поисковики ее учитывают и лучше оценивают более быстрый сайт.
  2. Доступность контактов компании. На странице «Контакты» или в шапке на каждой странице должен быть телефон и адрес электронной почты, по которым пользователь может связаться с компанией.

Лаконичное внешнее оформление. Современные тренды дизайна страниц таковы, что чем меньше отвлекающей графики, тем лучше для ресурса. Рекомендуется использовать минимальное количество анимированных баннеров и других ярких движущихся элементов — они отвлекают внимание и раздражают.

Страница перегружена анимацией

Лаконичное оформление сайта

Удобство чтения. Текст должен быть читабельным: глаза посетителя сайта и так устают от монитора, не нагружайте его еще и сложными, плохо читающимися, слишком блеклыми или яркими шрифтами. Сюда же относится цвет фона — не стоит экспериментировать с ним, если Вы не уверены, что это понравится Вашим клиентам.

Читабельный текст для сайта

Быстрое оформление. Возможность с минимальными временными затратами подписаться на рассылку/купить товар/заказать услугу/зарегистрироваться высоко ценится как потенциальными клиентами, так и поисковыми роботами. Не рекомендуется делать слишком сложные формы с чересчур большим числом граф для заполнения. Еще лучше дать возможность клиенту оставить свой номер телефона, по которому ему перезвонит менеджер и уточнит всю необходимую информацию.

Пример плохой формы

Пример хорошей формы

Понятные сообщения об ошибках. Не все уделяют внимание формулировкам сообщений о возникающих ошибках. Текст сообщения должен помогать пользователю понять свои дальнейшие действия или причины возникновения ошибки. Если это непонятно, посетитель может просто уйти с сайта и больше не возвращаться. Здесь рекомендуется не злоупотреблять слишком сложными терминами и вообще лишней технической информацией. Можно перефразировать текст ошибки, чтобы он звучал более дружелюбно.

Пример корректного отображения информации при 404 отклике страницы

  • Используйте микрокопирование. Эта опция необходима для любых инструкций или форм, которые должен заполнить пользователь на сайте. Микрокопии улучшают пользовательский опыт и позволяют выстраивать более тесные отношения с потенциальными клиентами. Например, они помогают обучить посетителя, который не очень уверенно ориентируется на сайте или использует продукт/услугу. В частности, микрокопии важны для форм, куда пользователь вносит свои контактные и платежные данные.
  • Дайте пользователю возможность авторизоваться с помощью социальных сетей или почтового аккаунта. Чем меньше данных должен ввести клиент, тем проще вовлечь его в любой свой сценарий.
  • Все перечисленные советы дают возможность улучшить юзабилити сайта, а значит, обеспечить существенный прирост трафика, повысить конверсию лендинга и ускорить продвижение сайта наверх в поисковой выдаче.

    Топ-пост этого месяца:  Изменчивые шрифты в вебе
    Добавить комментарий