UI чеклист

Основное

1. Скорость загрузки. Сайт быстро грузится (1–2 секунды). Если ваш сайт грузится более 3-х секунд – около 40 % посетителей, скорее всего, уйдут, не став ждать.

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

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

4. Наличие адаптивной верстки. Сайт должен быть оптимизирован:

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

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

6. Скрытие ненужных полос скролла. На сайте при разрешении 1024×768 во всех стандартных браузерах горизонтальная полоса скролла не появляется.

7. Быстрый доступ к кнопкам CTA. Возможность купить товар/заказать услугу/заказать обратный звонок есть на каждой странице сайта.

8. Наличие интуитивно понятных иконок. Везде, где это уместно и возможно, текстовые пункты дополнены иконками.

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

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

11. Предсказуемое местонахождение ключевых элементов. Все стандартные элементы посетитель находит на привычных местах (принцип «Не заставляйте меня думать»):

a. логотип компании – слева вверху,
b. контакты – справа вверху,
c. строка поиска – вверху слева или вверху по центру.

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

13. Удобство взаимодействия с лого сайта. Логотип кликабелен и ведет на главную страницу, а на самóй главной – не перезагружает страницу.

14. Карта сайта. На сайте есть ссылка на карту сайта, и она сквозная (оптимальное расположение – в футере).

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

16. Заметные CTA. Все призывы к действию на страницах – визуально заметны и очевидны: кнопки крупные и понятно подписаны, ссылки выделены.

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

18. Ясная терминология. В пунктах меню, кнопках и ссылках не используются непонятные посетителю термины или формулировки.

19. Возможность увидеть лица компании. На сайте есть страница «О компании», с подробной информацией о вас, желательно – с фото офиса внутри и снаружи, с фото персонала, работающего с клиентами, с фотографиями производственного/рабочего процесса.

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

21. «Принцип ненасилия».

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

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

23. Минимум трудностей для пользователя. Посетителю сайта предлагается выполнять только действительно необходимые действия:

a. все, что можно сделать программно – делается программно (например, подставляется город доставки, исходя из местоположения пользователя);
b. запросы действий посетителя сайта и варианты выбора динамически изменяются в зависимости от параметров товара, данных посетителя и т. д. Например, если платье доступно только в одном цвете, пользователя не заставляют выбирать цвет. Если он проживает в Туле, ему не предлагается вариант доставки в пределах МКАД.

Дизайн и элементы сайта

24. Умеренность. Яркие цвета, крупный цветной текст, анимация – используются минимально или вовсе не используются.

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

26. Отсутствие лишней анимации. Flash используется по минимуму или вовсе не используется.

27. Отсутствие нагромождения элементов. Элементы и их блоки чередуются с пустым пространством; нет чувства нагромождения, пестроты на страницах.

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

29. Подстройка курсора под «кликабельное/некликабельное». При наведении на кликабельные элементы иконка курсора «стрелка» меняется на иконку «рука». При наведении на некликабельные элементы курсор не меняется.

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

31. Пояснения для деактивированных элементов. При наведении на неактивную кнопку или ссылку появляется краткое пояснение, почему кнопка/ссылка неактивна.

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

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

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

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

Кнопки

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

37. Удобство клика по кнопке. Кликабельна сама кнопка, а не надпись на ней. Можно также сделать кликабельной небольшое пространство вплотную к ней (но не в том случае, если рядом расположена другая кнопка).

38. Четкий однозначный CTA. Текст на кнопке говорит о действии, которое будет совершено при клике. Оптимально это глагол в инфинитивной форме (купить, заказать, скачать, продолжить оформление). Он конкретен, информативен и не допускает различных толкований. Плохо – кнопки с названиями:

a. «Продолжить» (Что подразумевается под «Продолжить»? Что произойдет по нажатию кнопки?).
b. «Назад» (Куда именно назад? Пользователь уже может не помнить, что было на предыдущей странице).
c. «Дальше», «Готово» и тому подобными.

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

Ссылки

40. «Честные» ссылки. Стандартный функционал обычной ссылки – переход на другую страницу или открытие другой страницы в новой вкладке, но не запуск какого-либо действия.

41. Стандартизация взаимодействия. Все ссылки оформлены в привычном посетителю стиле – синим цветом, подчеркнутые, курсор при наведении на ссылку меняет свой вид на кликабельный (иконка руки). После клика ссылка меняет свой цвет (стандарт – фиолетовый).

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

43. Анкорная или хотя бы человекопонятная ссылка. В тексте ссылки явно указывается объект, на который ведет ссылка (название статьи, товара). То есть пользователь точно знает, что он открывает по ссылке.

44. Удобство клика по ссылке. Текст ссылки достаточно длинный, чтобы посетитель мог легко по ней кликнуть (к примеру, ссылка с анкором «тут» не слишком удобна).

Навигация и поиск

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

46. Кликабельные «хлебные крошки». Благодаря им посетитель всегда понимает, в каком подразделе сайта он находится, и может в один клик перейти в вышестоящие разделы.

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

48. Кнопка возврата. На всех страницах сайта работает кнопка «Назад» браузера. Пункт 38 b говорит нам о нежелательности такой кнопки на самом сайте, но в браузере она есть, и сайт должен корректно с ней взаимодействовать: возвращать пользователя на предыдущую просмотренную им страницу, с теми пользовательскими параметрами сортировки или фильтрации, которые там были.

49. Раздел «Недавно вы смотрели». Он доступен на любой странице сайта, чтобы пользователь мог легко найти просмотренный ранее товар.

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

Главное меню

51. Сквозное главное меню сайта. Разделы контактов, доставки и оплаты, каталога товаров, услуг или другие основные разделы должны быть в главном меню сайта. Так посетитель, попав на любую страницу, за 2 секунды найдет основную интересующую его информацию.

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

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

54. Выделение пункта, где находится пользователь. Такой пункт всегда выделен и неактивен (не перезагружает страницу при нажатии).

55. Простая структура главного меню. В главном меню не более двух подуровней.

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

Поиск

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

58. Единственное поле поиска. Не заставляйте пользователя думать: «Зачем второе? Какое из них важнее?» и застревать на этом моменте.

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

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

61. Подробная информация о результатах поиска. Посетитель должен увидеть:

a. количество найденных результатов;
b. как были отсортированы результаты поиска (с возможностью изменить эту сортировку);
c. основную краткую информацию о каждом найденном товаре/статье.

62. Помощь при отсутствии результатов. В том случае, если ничего не найдено, мы не показываем посетителю малоутешительную пустую страницу «По вашему запросу ничего не найдено». На странице результатов:

a. клиенту предлагается несколько ближайших к его запросу вариантов товаров или разделов сайта, где, возможно, есть то, что он ищет;
b. клиенту рекомендуется, как можно отредактировать запрос, чтобы он был более релевантным;
c. опционально: предлагается воспользоваться расширенным поиском.

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

Коммуникация с клиентом на сайте, контакты, обратная связь

64. Текстовый формат. Все контакты на сайте, в том числе в шапке, представлены текстом, а не картинками, чтобы посетитель мог их скопировать.

65. Отсутствие защиты от копирования. Если на сайте таковая есть, она не распространяется на копирование контактов.

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

67. Форма обратной связи. Можно заменить формой «Написать директору».

68. Возможность сделать быстрый заказ («заказ в 1 клик», заказ обратного звонка и т. п.)

Страница контактов

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

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

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

72. Полная информация о каждой точке. Она включает:

a. точный адрес, включая номер корпуса, номер офиса, а также почтовый индекс;
b. график работы офиса, а также информацию, как связаться с вами/сделать заказ в нерабочее время;
c. телефоны всех отделов и менеджеров, работающих с покупателями, если нужно – телефоны рекламного отдела, бухгалтерии и отдела по работе с поставщиками;
d. все адреса электронной почты, по которым вы принимаете заказы;
e. номера Viber, Skype, Telegram, WhatsApp и других мессенджеров, актуальных для вашей целевой аудитории;
f. адреса ваших пабликов в социальных сетях – если вы общаетесь с клиентами и там;
g. интерактивную карту Google или Яндекс с отмеченным местоположением вашей компании;
h. информацию о том, в скольких минутах ходьбы расположена ближайшая станция метро или остановка общественного транспорта;
i. схему проезда к вашему офису – и для тех, кто добирается на авто, и для тех, кто перемещается на общественном транспорте;
j. информацию о наличии парковки рядом;
k. фото входа в ваше офисное здание, фото местности рядом – для того, чтобы клиент мог легко сориентироваться, как вас найти;
l. схему, как добраться к вашему офису внутри здания – если это достаточно сложно.

73. Отправка данных на принтер. Сделайте так, чтобы страницу контактов, или карту/схему проезда можно было отправить на печать одним кликом.

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

Отзывы и комментарии

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

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

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

Форма обратной связи

78. Стандартизация. Форму обратной связи для вопроса, жалобы, заказа в свободной форме на сайте легко найти (привычное расположение – на странице контактов).

79. Удобство. Форма обратной связи доступна без регистрации, от посетителя требуется только оставить свой контакт (email, телефон) для ответа на его обращение. Текст сообщения не теряется, если посетитель неверно ввел капчу или случайно закрыл страницу.

80. Объемные сообщения. Форма позволяет посетителю оставить развернутое сообщение. При вводе большого объема текста форма позволяет быстро посмотреть весь введенный текст – например, справа появляется скроллбар для прокрутки.

81. Обратная связь. После отправки сообщения на email посетителя приходит письмо о том, что его сообщение получено, указаны сведения о примерном времени ожидании ответа. Если посетитель оставил в качестве контакта телефон – он получает аналогичное SMS.

Онлайн-консультант (чат поддержки)

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

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

84. Информация о времени ожидания ответа. Функционал онлайн-консультанта (чата поддержки) предусматривает информирование посетителя – сколько примерно времени ему нужно ждать ответа.

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

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

Страницы категорий товара (разделы каталога)

87. Оптимальное количество товара. По умолчанию на странице категории отображается 10–15 товаров.

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

89. Фокус на реальную (а не формальную) ситуацию. Если посетитель может искать какой-то тип товара в разных категориях, добавлена возможность показа ее в разных категориях. К примеру, посетители часто путают понятия «точка доступа» и «Wi-Fi роутер», поэтому можно поместить одну и ту же модель в обе категории.

90. Интересные предложения. В каталоге предусмотрены такие категории, как «Распродажа», «Акции», «Новинки», «Популярное» и т. д.

91. Дополнительные категории. На страницах разделов каталога есть ссылки на типы, серии товара, которые ваши покупатели ищут чаще всего, но для которых не выделен отдельный раздел. Например, в категории роутеры есть ссылки на «Роутеры для дома», «Роутеры с Wi-Fi», «Роутеры TP-Link» и т. д.

92. Отсутствие пустых разделов. Если на данный момент в этом разделе (категории) каталога товаров нет, он временно скрывается.

93. Полная информация о товаре. Каждый товар на странице каталога минимально содержит следующую информацию:

a. фото;
b. наименование;
c. цену;
d. ярлык акции, распродажи, новинки, хита продаж и т. п. – если он входит в эти категории;
e. кнопку «купить».

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

95. Наличие и актуальное количество товара. Опционально: на странице категории показывается точное или примерное количество данного товара на складе.

Фильтры

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

97. Заметная кнопка применения. Это актуально при использовании отложенного фильтра, когда посетитель активирует фильтр только после выбора всех нужных ему параметров.

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

99. Отсутствие «пустых» результатов.

a. Фильтры, которые изначально не содержат данных для выборки, скрываются совсем.
b. Зависимые фильтры, которые после синхронизации при выборе покажут 0 позиций, делаются неактивными, либо скрываются (менее предпочтительно).

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

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

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

103. Быстрая очистка фильтра. После сброса фильтра страница каталога полностью возвращается в исходное состояние.

Сравнение товаров

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

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

106. Заметность. Ссылка на сравнение товаров располагается на заметном месте сайта, к примеру, возле корзины.

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

Сортировка товара

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

109. Пользовательская сортировка. Если есть необходимость, предусмотрены свои варианты сортировки, исходя из потребностей ЦА и особенностей товара; возможные стандартные варианты:

a. от дешевых к дорогим,
b. от дорогих к дешевым,
c. по алфавиту,
d. по рейтингу,
e. по наличию скидок,
f. по наличию на складе.

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

Страница товара (карточка товара)

Цена

111. Заметность ценника. Цена хорошо заметна, написана крупным кеглем или выделена иначе.

112. Указание валюты цены.

113. Указание причин отсутствия цены. Если цена не указывается, то на месте ее расположения сообщается причина отсутствия цены («Товар снят с производства», «Цена пока неизвестна») или рекомендация уточнить стоимость у менеджера. В этом случае здесь же размещены контакты менеджера или ссылка на них.

Фото и видео

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

115. Примеры применения/использования/сервировки. Для некоторых типов товаров полезными будут фото в применении, в работе, в интерьере и т. д.

116. Ярлык с интересным предложением. Если для товара есть скидка, или он входит в категории «Новинка» «Топ продаж» и т. д. изображение товара дополнено соответствующим ярлыком-иконкой.

117. Видео анпакинга/обзора. Чем подробнее – тем лучше; желательно – в хорошем разрешении.

Характеристики

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

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

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

121. Подсказки к неочевидным характеристикам/терминам и т.д. Во всплывающем окошке при наведении курсора на название параметра или по клику на иконку вопросительного знака рядом с ним.

122. Информация о гарантийном сроке на товар. Также есть развернутая информация о возможности вернуть товар (опционально).

123. Информация о комплектации товара.

124. Информация о стране-производителе товара. Это опциональная характеристика.

Другое

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

126. Заметная кнопка CTA. Призыв к действию (кнопка «Купить», «Заказать», «Перезвоните мне») – крупная, выделена контрастным основной гамме сайта цветом и кликабельна, находится на первом экране.

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

128. Дополнительная информация. На странице товара, кроме его характеристик, есть описание – понятное и полезное для покупателя, – отзывы, кнопки социальных сетей (актуально не для всех тематик), рейтинг (оценка) товара, предусмотрена возможность поставить оценку одним кликом.

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

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

131. Информация о доставке и оплате. Способы, примерная стоимость и сроки, либо ссылка на соответствующий раздел.

132. «Список желаний». Это опциональная возможность.

133. Сопутствующие товары. Если к товару предусмотрены аксессуары, насадки, комплектующие, которые можно приобрести отдельно, они выводятся в блоке «Сопутствующие товары» или «С этим товаром покупают»

134. Никакой надуманности! Блоки «Сопутствующие товары» и «Аналогичные товары» заполнены действительно подходящими товарами, а не беспощадным рандомом.

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

136. Простой переход покупателя к оформлению заказа. Варианты:

a. 1 вариант: после добавления товара в корзину появляется всплывающее окно с двумя кнопками (ссылками) выбора – «Перейти к оформлению заказа» и «Продолжить покупки». Это избавит пользователя от необходимости искать корзину.
b. 2 вариант: на кнопке «Купить» или рядом с ней после добавления товара в корзину появляется ссылка на оформление заказа.
c. 3 вариант: ссылка на оформление заказа появляется на иконке мини-корзины (которая сама по себе достаточно заметна), после того, как в нее добавляется товар.

Регистрация на сайте, оформление заказа, корзина

Общие принципы заполнения полей форм регистрации и заказа

137. Необходимый минимум полей. При регистрации и оформлении заказа количество обязательных полей минимально, в идеале – имя и контакт: email и/или телефон. Каждое дополнительное обязательное поле снабжено пояснением – зачем нам нужна эта информация. Если полей в форме регистрации много, они визуально объединены в группы, группы имеют заголовки.

138. Заметность обязательных к заполнению полей. Они отмечены или выделены привычным пользователю образом (звездочкой).

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

140. Одна колонка полей. Поля во второй колонке пользователи часто не замечают вовсе.

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

142. Использование подсказок и автозаполнения. Примеры:

a. все поля имеют не только наименование, но и понятное описание;
b. рядом с полем или прямо в поле (плейсхолдер) приводится пример корректного заполнения;
c. если какие-то поля возможно по умолчанию заполнить наиболее часто встречающимся вариантом – заполняем;
d. при вводе текста в поле пользователю выдается формирующийся на лету список подходящих значений, предлагается автозаполнение строк;
e. поля, которые могут вызвать сложности при заполнении, снабжаются подробными всплывающими подсказками, если уместно – графическим�� (например, показывается, где именно на карте располагается CVV код, и что делать, если его в этом месте нет).

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

144. Отсутствие проверки корректности ввода номера телефона. От этого рекомендуется отказаться: ограничение форматов ввода создает неудобства пользователю с нестандартным номером (например, заграничным, в котором есть буквы). Примечание: если номер телефона используется программным обеспечением без предварительной ручной обработки, например, для отправки SMS – используем программное приведение его к требуемому формату и отбраковку номеров нестандартного формата.

145. Помощь при введении телефона. Предыдущий пункт обязывает нас помочь пользователю ввести номер телефона:

a. снабжаем это поле интуитивными подсказками;
b. предусматриваем выбор из списка код страны, региона;
c. предлагаем альтернативный вариант для пользователей с нестандартными номерами.

146. Мгновенная проверка. Каждое поле проверяется на правильность заполнения сразу после ввода данных, страница при этом не перезагружается.

147. Поощрение пользователя. Правильно заполненное поле выделяется, к примеру, зеленым цветом.

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

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

150. Удобная корректировка информации. В процессе регистрации или оформления заказа посетитель всегда может вернуться на шаг назад и откорректировать данные.

Регистрация

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

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

153. Упрощение регистрации. Дополнительно к стандартной регистрации пользователю предлагается авторизация через социальные сети.

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

155. «Фоновая» регистрация. Она предлагается автоматически, и для нее клиенту не нужно ничего заполнять дополнительно: используются данные из заказа (ФИО, электронный адрес), которые он будет заполнять в любом случае, а пароль генерируется автоматически.

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

Корзина

157. Стандартный алгоритм отправки в корзину. При добавлении товара в корзину:

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

158. Отсутствие лишней информации. В корзине нет отвлекающих элементов:

a. каталога товаров, витрины;
b. рекламы, анимации;
c. новостей или ссылок на статьи блога.

159. Мгновенная связь с менеджерами. В корзине предусмотрена возможность связаться с менеджерами и получить помощь, если что-то стало непонятно в ходе покупки:

a. есть иконка онлайн-консультанта;
b. указаны телефоны и контакты менеджеров;
c. есть форма для обратного звонка.

160. Полная информация о собранном заказе. В корзине отображаются:

a. достаточно крупное изображение товаров, чтобы пользователь понимал – что это;
b. наименование товаров;
c. опционально – краткое описание товара;
d. количество позиций каждого товара;
e. общая сумма товара;
f. общая сумма с учетом доставки (опционально).

161. Кликабельность позиций. Изображение и наименование товара кликабельны и ведут на страницу товара.

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

163. Удобные операции прямо в корзине.

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

164.Простая, понятная и наглядная очистка корзины.

a. После удаления всех товаров из корзины появляется сообщение, что корзина пуста.
b. После завершения оформления товара корзина очищается.

Оформление заказа

165. Быстрый доступ к помощи. На всех этапах оформления заказа клиенту явным образом предлагается помощь в оформлении:

a. заголовок чата поддержки/онлайн консультанта меняет свой заголовок на, к примеру, «Нужна помощь в оформлении заказа?»;
b. на видном месте располагаются контакты менеджера и предложение позвонить/связаться для получения помощи.

166. Закрепленный список товаров. Список виден на всех этапах оформления заказа.

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

168. Наглядность. Если заказ оформляется в несколько этапов, пользователь сразу видит, сколько всего этапов заказа предусмотрено, и на каком из них он находится.

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

170. Подтверждение заказа. После завершения заказа пользователь:

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

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

Оплата

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

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

174. Информативные примечания.

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

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

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

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

Доставка

178. Минимум полей. Соблюсти эту старую, но всегда актуальную рекомендацию позволит инструмент Geo IP – он определит местоположение пользователя, а сайт автоматически заполнит соответствующее поле.

179. Минимум действий пользователя. Данные доставки для зарегистрированного пользователя сохраняются, и при следующей покупке ему не нужно их вводить заново.

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

181. Автоматический расчет суммы доставки. Она включается в общую сумму заказа.

Тексты на сайте

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

183. Лаконичные и короткие тексты. Отсутствует «вода», длинные вступления, ненужная информация, перегруженные предложения.

184. Фокус на целевой аудитории. В тексте используются простые, привычные и понятные для ЦА фразы и слова.

185. Простота представления чисел. В основном они представлены цифрами, а не словами, для облегчения восприятия текста. Разряды в цифрах отделены пробелами (пример: 1 560 000).

186. Форматирование текста, облегчающее чтение. Используются следующие приемы:

a. подзаголовки разбивают текст на смысловые блоки;
b. расстояние между абзацами устанавливается в 1,5–2 раза больше, чем между строками абзаца;
c. формируются списки – нумерованные и маркированные;
d. выделяются ключевые слова и фразы (ключевых не с точки зрения SEO, а с точки зрения смысла);
e. текст чередуется с изображениями, графиками, таблицами;
f. отдельные, особо важные моменты выделяются курсивом;
g. для выделения части фразы или целого предложения используется жирный шрифт;
h. подчеркивание применяется, в основном, только для ссылок;
i. все виды выделения текста используются в меру, чтобы текст не казался пестрым;
j. текст выравнивается на всех страницах одинаково, предпочтительно – по левому краю;
k. строки занимают примерно 70–80 символов;
l. больше «воздуха» (пробелов и полей) в тексте увеличивает привлекательность текста и его «понятность», восприятие;
m. верхний регистр не используется ни для заголовков, ни для текста – он сложен для восприятия;
n. расстояние между подзаголовком и предыдущим абзацем больше, чем между подзаголовком и абзацем сразу за ним.

Шрифт

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

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

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

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

Заголовки и подзаголовки

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

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

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

Изображения и видео на сайте

194. Качество изображений. Все изображения на сайте – качественные, четкие, без дефектов и сторонних водяных знаков.

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

196. Единообразие. Размеры превью и больших фото товара соответственно одинаковы для всех страниц товара; размеры превью-фото товара в каталоге одинаковы для всех каталогов/категорий товара.

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

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

Блог сайта

199. Разбивка статей на тематические категории.

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

201. Блок со ссылками на статьи. На страницы товаров и товарных категорий добавлены ссылки на полезные материалы, которые помогут клиенту с выбором товара.

202. Блок со ссылками на товары. Обратный случай: если по ходу статьи говорится о товаре или услуге, которая есть на сайте – добавлена ссылка на страницу этого товара/услуги. В этом случае клиенту не придется тратить время на ее самостоятельный поиск.

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

Постоянное совершенствование юзабилити

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

Итак, несколько последних рекомендаций.

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