Сайты

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

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

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

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

Для начала обсудим с Вами, что ж такое юзабилити?

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

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

Юзабилити сайта: структура аудита и чек-лист основних параметров

Юзабилити аудит должен содержать в себе проверку следующих элементов сайта отдельно для ПК и мобильной версии сайта:

  • Хедер - шапка сайта. Верх сайта это своеобразная карта сайта для пользователя. Именно при первом взгляде на нее пользователь должен понять чем именно занимается компания и сразу найти то, что ищет.
  • Главное меню - нужно проверять для исключение гипотез что меню неудобное, слишком большое или непонятное.
  • Главная страница и ее содержание - проверяем все ли элементы пользуются спросом или есть и такие что нужно убрать или модернизировать.
  • Страницы категорий товара - здесь нужно особо тщательно проверять структуру страницы и поведение пользователей на ней. Именно эта информация поможет модернизировать страницу так чтобы пользователи сразу находили нужный товар или услугу. Пользователь должен получать ответ на интересующий его запрос сразу, не пытайтесь запутать клиента, подать недостоверную информацию. Большую роль играет структурированность информации. Поставьте себя на место потенциального клиента и задайте себе вопрос - удобно ли выстроен контент на сайте.
  • Страницы товаров - от качества наполнения и удобства этой страницы напрямую зависит конверсия всего интернет-магазина. Стоит тщательно анализировать каждый элемент и стараться максимально улучшить страницу.
  • Страница корзины - здесь нужно сделать максимально простой дизайн ы функционал. Не нужно отвлекать клиента от покупки. Но, здесь должно быть максимальное количество убедительной информации (доставка, оплата, дополнительные возможности).
  • Оформление заказа - обеспечьте пользователю возможность максимально быстро завершить покупку: в 1 клик или заповлення буквально 3-4 полей. Чем дольше пользователь тратит времени на оформление заказа, тем меньшее количество пользователей все же закажет.
  • Футер - низ сайта - поскольку маленький% пользователей просмотрят страницу полностью вниз (по исключением не высоких страниц) размещать там основной призыв к действию не стоит. Однако стоит продублировать ссылки на основные категории товаров или услуг, а также указать контактную информацию и ссылки на социальные сети компании.
  • Информационные страницы (оплата, доставка, контакты) - Данные на сайте должны соответствовать реальности. Желательно указывать немного информации о себе, это показывает посетителю, что вы ничего не скрываете. На подсознательном уровне - аргумент в пользу надежности веб-сайта.

Новички часто допускают ошибки, наиболее распространены следующие:

  • веб-сайт не адаптирован под устройства разных типов;
  • дизайн перегружен лишними элементами;
  • непродуманная навигация;
  • медленная скорость загрузки;
  • неуместное использование Call-to-Action кнопок. Это неплохой инструмент, но им нужно уметь пользоваться;
  • использование только стоковых фотографий. Лучше потратить немного денег на фотографа и получить эксклюзивный фотоматериал;
  • нет демонстрации статистики, обратной связи от аудитории. Продемонстрируйте посетителю статистику клиентов, довольных своим заказом, их отзывы;
  • перегруженность текстом;
  • посетителя подводят к размышлению, а не к действиям. Исходите из того, что человек просто хочет получить то, что ищет. Он не хочет думать, взвешивать за и против;
  • излишний креатив. Это скорее переоценка собственных возможностей. То, что кажется остроумным и оригинальным вам может показаться глупым и наигранным основной аудитории. Это не поможет ни в SEO, ни в юзабилити.

В SEO для вывода сайта в ТОП используются такие приемы как:

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

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

Оценка юзабилити на примере анализа сайта store.entrepreneur.com

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

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

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




Как реализован поиск на сайте

К этому пункту замечаний также нет:

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

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




Корзина на сайте

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

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





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




Отсутствие пагинации и слишком длинные страницы категорий сайта

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

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

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

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

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

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





Наличие интерактивных элементов и баннеров

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





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

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

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

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

Версия сайта под мобильные устройства оптимизирована. Но шероховатости есть, разберем их на примере заказа смартфона “Xiaomi 4a”. При его заказе корзина с добавленным товаром имеет вид.





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

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









Ошибка в написании кода картинки

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

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




Выводы

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