Юзабилити аудит сайта (чек-лист), часть 1

12 июня 2020

СОДЕРЖАНИЕ

Что представляет собой юзабилити-аудит?

1. Адаптивная вёрстка

2. Мобильная версия сайта

3. Полосы прокрутки

4. Элементы CTA

5. Единообразие интерфейса

6. Однозначность и понятность, или Правило пяти секунд

7. Стандартизация расположения ключевых элементов

8. Логотип сайта

9. Фавикон

10. Страница 404

11. Автоматически запускающиеся видео

12. Всплывающие окна

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

14. Автоматическое определение региона

15. Кликабельные элементы

16. Деактивированные элементы

17. «Ниже что-то есть»

18. Отсутствие горизонтальных пустот

19. Честность кнопок

20. Зона клика по элементам взаимодействия

21. Кнопки очистки

22. Честные ссылки

23. Удобство ссылок

24. Раздел «Вы недавно смотрели»

25. Кнопка «Назад».

Вместо итогов

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

Что представляет собой юзабилити-аудит?

Само по себе слово «юзабилити» образовано от слова «use» - «использовать». Соответственно, юзабилити – это удобство использования сайта. Чем функциональнее сайт – тем лучше… сказали бы мы, если б не одно НО – сайт должен быть не только функционален, но и УДОБЕН, чтобы этот самый функционал было приятно использовать.

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

Из чего же состоит данная проверка?

1. Адаптивная вёрстка

Сайт должен адекватно отображаться как на компьютерах и ноутбуках, так и на смартфонах и планшетах. А все потому, что смартфоны и планшеты реально очень сильно отъели себе долю трафика. Отъели настолько, что на многих сайтах соотношение составляет 65/35 в пользу мобильного. Также бывают сайты с куда бОльшим перевесом в пользу того же мобильного трафика. Вот Вам пара свежих кейсов.

Интернет-магазин электронных сигарет – соотношение как раз примерно 65/35:

Туроператор Нафтуся-Тур – соотношение почти 57/43 в пользу мобильного трафика.

Не отрицаем, бывают сайты, где основная доля трафика – это ПК и ноутбуки, однако, у таких сайтов, как правило, доля мобильного трафика тоже немалая – порядка 15-25%. Этого уже достаточно, чтобы вплотную заняться адаптивной версткой на сайте. По логике следующим пунктом должны быть Турбо-страницы Яндекса и Google AMP, но у нас они вынесены в другой аудит. Причина простая – мы говорим сейчас о юзабилити САЙТА, а не его урезанной версии.

2. Мобильная версия сайта

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

Адаптивная верстка нужна для того, чтобы сайт выглядел одинаково красиво как на старых «квадратных» мониторах в разрешении 800х600, так и на ультрасовременных 4К-мониторах в разрешении 3840х2160, а разница между этими разрешениями в 3,5 раза по высоте и более чем в 5 раз по ширине. Не спорим, адаптивная вёрстка позволяет красиво и правильно отобразить сайт на мобильных устройствах, но не забываем про главный ее минус – она никак не уменьшает объем передаваемых данных. Именно поэтому имеет смысл в дополнение к адаптивной вёрстке добавить еще и облегченную версию сайта для мобильных устройств.

3. Полосы прокрутки

Тут всё просто: при любом разрешении экрана допускается только вертикальная полоса прокрутки. Горизонтальная не допускается.

4. Элементы CTA

Под элементами CTA (Call-To-Action – призыв к действию) подразумеваются:

  • кнопка заказа обратного звонка;
  • кнопка «Купить», «В корзину» (ну или как она там у Вас называется);
  • кнопка «Оставить заявку»

и т.п.

Все эти элементы взаимодействия с пользователем должны:

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

5. Единообразие интерфейса

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

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

6. Однозначность и понятность, или Правило пяти секунд

Да-да, то самое правило – «у тебя есть 5 секунды, чтобы посетитель понял, что попал туда, куда нужно». Некоторые Digital-агентства это правило ужесточают и сокращают 5 секунд до 3, но не суть. Суть в том, что посетитель, попав на сайт, должен:

  • чётко понимать, что это за сайт – магазин, блог, форум и т.д.;
  • чётко понимать, что страница действительно релевантна его запросу и, соответственно, он найдет на ней то, что ищет.

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

7. Стандартизация расположения ключевых элементов

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

Под «ключевыми элементами» подразумеваются как элементы взаимодействия с посетителем, так и элементы оформления сайта.

Например:

  • логотип должен располагаться строго слева в шапке;
  • корзина должна располагаться строго справа в шапке;
  • контакты, график работы и адрес – посередине шапки;

и т.д.

8. Логотип сайта

Тут тоже все довольно просто:

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

9. Фавикон

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

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

Во-вторых, фавиконка будет отображаться еще и во вкладках браузера, что значительно упростит поиск вкладки с Вашим сайтом, т.к. картинка всегда (ВСЕГДА!!!) сильнее бросается в глаза, чем текст. Крайне полезная вещь, если у пользователя одновременно открыто 10-15 вкладок (а у некоторых это количество может доходить до 100 штук).

10. Страница 404

Именно эта страница в 99,9999999999% случаев является самой отпугивающей, поскольку она свидетельствует о том, что посетитель попал не туда, куда ему нужно. При этом не важно, присутствует ли на сайте искомая пользователем страница или нет. Если пользователь увидит зловещее число 404, надпись «Не найдено» или «Not Found» - он уйдет со 100% вероятностью. Ну… Почти со 100%-ной.

Страница должна быть оформлена так, чтобы она попадала в те самые 0,0000000001% тех страниц, которые не отпугивают посетителя, а ПРИВЛЕКАЮТ его. В ближайшем будущем у нас выйдет целая статья на эту тему, где мы подробно разберем, как ее правильно сконструировать, в каких случаях она нужна, а в каких – нет.

Ну а пока просто в общих чертах скажем, что страница 404 должна:

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

11. Автоматически запускающиеся видео

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

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

Если же видео будет запускаться со звуком, то…

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

Во-вторых, внезапный звук вызывает только одну реакцию «Блин, какого хрена? Что это вообще? Откуда? Как это остановить? ДА ЗАТКНИСЬ ТЫ УЖЕ!!!». И это 100% гарантия того, что посетитель не только уйдет с сайта, но и подаст на Вас жалобу в поисковые системы и правильно сделает.

12. Всплывающие окна

Несмотря на предыдущий пункт, всплывающие окна – это самый бесячий пункт во всём чек-листе. ДАЙТЕ ПОЛЬЗОВАТЕЛЯМ СПОКОЙНО ПОГУЛЯТЬ ПО САЙТУ!!! Всплывающие окна должны появляться ТОЛЬКО ПО ЗАПРОСУ ПОЛЬЗОВАТЕЛЯ!!! Например, при нажатии на кнопку «Заказать обратный звонок», иконку онлайн-консультанта и т.д.

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

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

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

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

14. Автоматическое определение региона

Самое смешное, что даже сейчас – в 2К20 году во многих интернет-магазинах отсутствует функция автоматического определения региона пользователя. Почему – не понятно, ведь это реально полезная функция, которая позволяет значительно упростить посетителям использование сайта. Простейший пример – оформление заказа. Что тут может сделать автоматика:

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

и т.д.

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

Если сайт не умеет автоматически определять регион пользователя – дела очень плохи.

15. Кликабельные элементы

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

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

16. Деактивированные элементы

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

17. «Ниже что-то есть»

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

18. Отсутствие горизонтальных пустот

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

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

19. Честность кнопок

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

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

20. Зона клика по элементам взаимодействия

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

Пример (красным выделена зона клика):

Как Вы понимаете, идеальный вариант – это сделать кликабельной всю кнопку целиком, т.е. вот так:

Однако, некоторые идут еще дальше и делают кликабельной еще и угловую зону» за пределами кнопки, т.е. вот так:

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

21. Кнопки очистки

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

  • достаточно близко соседствуют с кнопками «Отправить», «Рассчитать» и т.д. в зависимости от заполняемой формы;
  • «сливаются» с ранее упомянутыми кнопками.

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

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

22. Честные ссылки

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

Исключения:

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

И, пожалуй, всё. Других исключений нет.

23. Удобство ссылок

Если ссылка безанкорная, то все здорово – места для клика будет предостаточно в любом случае. Если же ссылка анкорная, то никаких «тут», «здесь» и т.п., т.к. это очень короткие слова, по которым сложнее попасть, чем по «скачать можно тут». Уловили разницу?

24. Раздел «Вы недавно смотрели»

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

 

25. Кнопка «Назад».

Нет, ее не должно быть на сайте. Речь о кнопке браузера, т.е. вот об этой:

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

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

Ничего подобного происходить не должно.

Вместо итогов

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


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

(0)
Читайте также