Что такое юзабилити сайта, как его проверить и улучшить


Поделиться

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

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

Для чего улучшать юзабилити сайта

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

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

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

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

Разрабатываем дизайн
Создаём удобные и простые интерфейсы, которые помогают компаниям развиваться в цифровой сред

Правила юзабилити сайта: 10 основополагающих принципов

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

Видимость статуса системы

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

Поиск билетов на Aviasales сопровождается информативной анимацией «Ищем авиабилеты». Источник: https://www.aviasales.ru/

Система соответствует реальному миру

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

Первый экран «Контур.Эльбы» дает понять пользователю суть сервиса максимально простыми словами, приближенными к жизни целевого потребителя. Источник: https://e-kontur.ru/

Контроль и свобода пользователя

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

После просмотра любого товара можно вернуться к каталогу, а также на главную страницу. Источник: https://seafood-shop.ru/

Последовательность и стандарты

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

Источник: https://market.yandex.ru/
Источник: https://www.wildberries.ru/

Предотвращение ошибок

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

В строке для ввода данных OZON дает подсказку. У формы есть ограничения в 12 символов — больше ввести не получится, а также не удастся добавить в строку никакие символы, кроме цифр. Источник: https://www.ozon.ru/business/?perehod=header

Узнавание вместо запоминания

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

Информация о цене, условиях сделки, застройщике и пр. остается закрепленной справа при прокрутке страницы. Источник: https://www.cian.ru/sale/flat/276682197/

Гибкость использования

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

Пользователи VK могут выбрать, какие пункты меню у них будут показаны при использовании соцсети. Источник: https://vk.com/

Лаконичный дизайн

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

Минималистичный дизайн «Кошелька» упрощает понимание указанной информации и прямолинейно ведет пользователя к целевому действию. Источник: https://koshelek.app/

Помощь в диагностике и решении ошибок

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

При некорректном заполнении формы всплывает подсказка, помогающая исправить написанное успешно. Источник: https://www.aeroflot.ru/ru-ru

Справочные материалы

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

При открытии страницы пользователь сразу видит подсказку, которая упростит ему работу на сайте. Источник: https://www.pik.ru/projects

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

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

  • Сайт адаптирован для разных видов устройств. Элементы дизайна не съезжают при открытии сайта с разных устройств, все формы обратной связи, ссылки и кнопки работают исправно, масштаб страницы соответствует экрану устройства.
Чтобы прочитать текст со смартфона, посетителю этого сайта придется приближать страницу, а затем вручную передвигать ее. Источник: https://salon.su/
А вот так выглядит сайт, удобный для просмотра со смартфона. На главном экране осталось верхнее меню, логотип и главные новости, а навигация спрятана в правом верхнем углу. Источник: https://www.m24.ru/
  • Сайт быстро загружается. Оптимальная скорость загрузки страницы — 1-3 секунды. Если сайт загружается долго, проверьте, какие элементы можно оптимизировать без потери качества.
  • Главная страница легко воспринимается и отражает характер и суть деятельности бизнеса. Поместите на главную страницу логотип, ваше название и род деятельности, на первый экран добавьте УТП, немного подробностей, призыв к действию, а ниже — блоки структуры всего сайта в кратком изложении.
Главная страница Sela — слайдер из баннеров с текущими коллекциями одежды. Здесь и УТП, и основные пункты меню, и призыв к действию. Источник: https://www.sela.ru/
  • Установлен SSL-сертификат. Он необходим вам для того, чтобы наладить безопасное интернет-соединение (HTTPS-протокол).
  • Фавикон сайта уникален и быстро различим. Фавикон — это иконка сайта в поисковой выдаче. Кроме того, именно фавикон отображается на открытой вкладке сайта. Среди большого количества вкладок найти нужную бывает сложно, поэтому важно сделать уникальный и фавикон.
Так выглядят фавиконы в выдаче поисковика
  • Регион пользователя определяется сразу после открытия сайта и его можно легко изменить вручную.
  • Каждая страница имеет title с ее темой. Так человек сможет найти нужную вкладку, не открывая каждую.
При открытии https://seafood-shop.ru/ у посетителя сразу уточняется местоположение. Title страницы указан в верхней строке браузера. Наведя на него курсор, можно быстро найти интересующую страницу среди нескольких открытых вкладок.
  • Разработана удобная страница для ошибки 404. Любой человек может ошибиться в адресе страницы или случайно добавить в адресную строку лишний символ. Важно предотвратить ситуацию, в которой после этого он не сможет вернуться к прежней странице и совсем закроет текущую.
«Кинопоиск» объясняет читателю, что произошло, и предлагает варианты выхода из ситуации — вернуться на главную страницу или обратиться за помощью в поддержку портала. Источник: https://www.kinopoisk.ru/6/
  • При углублении просмотра сайта пользователь может вернуться к предыдущим разделам и страницам по хлебным крошкам.
Источник: https://www.dns-shop.ru/
  • На длинных страницах пользователь в любой момент может одним нажатием вернуться к началу.
У Samsung кнопка «вверх» появляется сразу при прокрутке страницы наверх. Источник: https://www.samsung.com/ru/
  • Пользователю легко с вами связаться. Контактный номер на первом экране кликабелен для осуществления звонка (если на устройстве есть сим-карта), на всех страницах закреплен виджет со способами связи, контакты есть в отдельном пункте меню, а также в футере всех страниц.
  • Есть строка поиска по сайту.
  • Поиск можно осуществить как по специализированной кнопке на сайте, так и по нажатию Enter на клавиатуре.

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

Более глубокое исследование юзабилити можно провести несколькими способами.

Анализ метрик

Величина показателей в сервисах веб-аналитики (Яндекс.Метрика, Google Analytics) поможет заметить проблему вовремя и исправить ее без потери бюджета.

Отказы, глубина просмотра, время на сайте

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

Мониторинг аналитики в Яндекс.Метрике

Тип устройства, возраст

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

Страницы выхода

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

Карта кликов

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

Карта кликов в Яндекс.Метрике

Карта скроллинга

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

Аналитика форм

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

Карта ссылок

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

Работа с пользователями

Сбор фокус-группы

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

Опросы и интервью пользователей

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

A/B-тестирование

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

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


Успехов!

Читайте также


Зачем управлять вниманием пользователей на сайте? Почему это важно?

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