Глобальный чек-лист по современному юзабилити

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

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

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

Базовые основы

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

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

Современные порталы с учетом новых трендом достаточно «тяжелые» в первую очередь за счет большого количество JS и CSS кода. Оптимизированный проект должен грузиться в течение 1-2 секунд. Если время ожидания появления читабельного и визуального контента превышает три секунды – значительное число пользователей просто уходит с него (от 40 до 50 процентов по разным данным). Обязательно обращайте внимание за скорость загрузки как стандартной, так и мобильной версии веб-портала – у второй часто бывают проблемы с медленной загрузкой, в особенности, если она создана на основе CMS.

Учет географии целевой аудитории

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

Переключение языка

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

Тотальная адаптивность

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

Индивидуальное юзабилити

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

Отказ от полос скроллинга

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

Возможность быстрого доступа к кнопкам «Call-To-Action»

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

Интуитивно понятные иконки

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

Единая интерфейсная концепция

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

Понятность и однозначность концепции

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

Стандартизированное нахождение ключевых блоков и компонентов

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

• Лого фирмы – слева и вверху;
• Контакты фирмы – вверху и справа, а также в футере;
• Поисковая строка – в верхней части страницы ближе к центру или слева.

Соразмерное количество контактов

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

Лого как зацепка

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

Карта сайта

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

Такой маленький, но важный фавикон

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

Выделенные «Call-To-Action»

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

Понятные пользователю термины

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

Лица компании и реальные фотографии

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

Качественная страница 404

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

Отказ от принуждения

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

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

Быстрый переход/скролл

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

Больше автоматизации и меньше трудностей для клиента

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

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

Дизайн как основа визуального восприятия

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

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

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

Восприятие цветов пользователем

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

Анимация

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

Группировка элементов

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

Размеры элементов для удобной кликабельности

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

Определение кликабельности/не кликабельности

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

Деактивация временно недоступных компонентов

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

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

Учет специфики клиентского обзора

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

F-паттерн обзора

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

 Сохранение интереса к последующим экранам и блокам

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

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

Кнопки

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

• Честность. Нажатие должно подразумевать действие. На подменяйте его простым переходом на иную страницу, если конечно кнопка явно не предназначена для такой процедуры.
• Удобство. Кликабельность компонента обязательна. При этом кликабельно должно быть и локальное пространство вокруг неё (особенно это актуально для компонентов небольшого размера и соответствующей мобильной страницы сайта). Единственное исключения локального «расширения» зоны – это наличие расположенной рядом кнопки, регламентирующая исключение потенциальных конфликтов.
• Четкий CTA. Текст компонентов должен явно указывать на дальнейшее производимое действие. Лучше всего для этих целей применять глаголы в инфинитивной форме, не допускающие двояких толкований. Хорошие примеры – «Скачать», «Заказать». Плохие примеры – «Продолжить» (что именно произойдет, нужно конкретизировать), «Назад» (юзер уже может не помнить, что было на предыдущей страницы и куда он уйдет по кнопке).
• Наличие и правильное позиционирование механизмов удаления/очищения. Элементы «Отмена», «Очистить форму» и прочие должны быть в структуре дизайна для создания дополнительного удобства в отношении пользователей. Однако их нужно располагать на приемлемом расстоянии от соответствующих компонентов, ответственных за подтверждение, ввод, отправку. В противном случае есть вероятность, что посетитель может по ошибке удалить уже введенные данные или отменить нужное действие.

Ссылки

Еще одна обязательная группа элементов на сайте имеет собственные правила юзабилити. Наиболее значимые:

• Честность. По аналогии с кнопками, ссылки должны переводить на иную страницу или открывать её в новой вкладке, но не активировать действие в общем случае.
• Стандартизированное оформление. Юзер привык к типичному поведению ссылок и их привычному отображению на экране. Речь идет о синем цвете компонентов с подчеркиванием, изменении внешнего вида курсора в случае наведения на элементы, а также смене оттенка на фиолетовый после клика, который сигнализирует о том, что переход по ссылке уже осуществлялся.
• Индивидуализм «особых» ссылок. Если нажатие на элемент подразумевает развертывание скрытого контента, то нужно оформлять ссылку подчеркиванием с пунктирной линией. Классический элемент, позволяющий осуществлять прямое скачивание, рекомендуется дополнять соответствующим словом, указывая формат файла и его размер.
• Анкоры и ЧПУ. В тексте, который сопровождает компонент, необходимо явно указывать целевой объект, на который ведет ссылка. Последним может выступать конкретный товар, индивидуальная статья и так далее. Посетитель должен точно знать, что будет открыто после клика.
• Удобство нажатия. Не делайте слишком короткие анкоры – на них неудобно кликать и тем более тапать с мобильных устройств. Минимальная длина – 6-7 символов.

Навигация

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

Поиск

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

Хлебные крошки

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

Заголовок H1

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

Кнопка для возврата

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

Недавние страницы

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

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

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

Главное меню

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

Сквозная реализация схемы

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

Общая доступность

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

Стандартизированные обозначения

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

Выделения

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

Простая структура

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

Поиск

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

Стандартизация

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

Один компонент

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

Взаимодействие

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

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

Дополнительная информация

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

Механизм помощи при отсутствии релевантных страниц

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

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

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

Коммуникация с потенциальным или реальным клиентом

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

Основные положения:

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

Страница с контактами

Основные положения юзабилити:

• Отдельные контакты под каждый офис. Если компания имеет сеть подразделений, то необходимо реализовать обязательный учет регионального фактора и выводить потенциальному клиенту точный адрес офиса в его регионе, а не полный список с десятками, а то и сотнями позиций.
• Выбор на карте. Для контактов рекомендуется использоваться не только классическое текстовое изображение, но и дублирование на карте, притом в интерактивном режиме. Это создает дополнительное удобство в процессе поиска подразделения.
• Фильтры. При значительном количестве подразделений рационально сделать фильтрацию не только в региональном сегменте, но также по графикам работы, предоставляемым услугам, ассортименту и так далее.
• Полнота информационного наполнения. Контакты для современной компании – это не просто безликий номер телефона. Соответствующую страницу нужно наполнять максимально подробно, включая точный адрес с почтовым индексом, стационарные и мобильные телефоны отдельных подразделений, адреса электронных почт, номера в популярных востребованных мессенджерах, ссылки на социальные сети, а также отображения интерактивных карт Гугла или Яндекса. В качестве дополнения можно предусмотреть схему проезда, информацию о ближайших ориентирах, фотографии внешнего вида здания и близлежащей территории, а также внутреннюю схему расположения помещений компании, если она размещается в большом офисном центре.
• Быстрая печать. Рекомендуется реализовать механизм для осуществления печати страницы контактов в один клик прямо с сайта.
• Конкретные лица. При наличии небольшого штата ответственных сотрудников в качестве альтернативы можно разместить их отдельные контактные данные с реальными фотографиями людей. Это важно для тех клиентов, кто уже имеет положительный опыт сотрудничества и желает, чтобы его обслуживал тот же сотрудник, что и ранее.

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

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

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

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

Основные требования:

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

Онлайн консультация

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

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

Разделы каталога

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

• Ограничение количества товаров на страницу. По умолчанию рекомендуется выводить не более пятнадцати позиций.
• Представление. Включает в себя возможность изменения количества выводимых товаров, а также опцию показа всех позиций. Помимо этого необходимо предусмотреть несколько форматов представления (плиточный, списочный, витринный, табличный), а также степень подробности вывода информации – от минимального (название/стоимость/наличие) до полного (со всеми характеристиками).
• Грамотная фокусировка. Один и тот же товар пользователи часто ищут в разных категориях, схожих по смыслу.
• Специальные предложения. Привлекают дополнительное внимание и повышают лояльность посетителей. Типичные примеры – «Новинки», «Распродажа», «Специальная акция» и так далее.
• Дополнительные категории. Удачный пример – «Мясорубки для дома», «Профессиональные мясорубки», «Универсальные мясорубки».
• Скрытие пустых разделов. Абсолютно пустые разделы создают у пользователей ощущение недостаточности ассортимента и перебоев с привозом товаров. Лучше их временно скрывать до появления хотя бы нескольких релевантных позиций.
• Полное информирование. Каждый товар или услуга должны быть описаны максимально подробно. Обязательно наличие наименования, стоимости фотографий, кнопки заказа или покупки, а также специальных обозначений, если таковые предусмотрены.
• Расширенные скрывающиеся характеристики. Формируются опционально. На странице категории представлена основная информация. При этом для реализации принципа экономии места дополнительные характеристики показываются только после наведения курсора на товар, которые открываются во всплывающем окне и раскрываются после клика на соответствующую область.
• Наличие товара. Обозначается отдельно. В качестве дополнительной опции рекомендуется показывать её остаток на складе.

Фильтрация

Обязательна для сайтов со средним и большим количеством страниц. Базовые компоненты:

• Отложенная фильтрация. Позволяет выбрать ряд опций без мгновенной переброски на страницу.
• Кнопка активации фильтра. Необходима для включения комплексной отложенной фильтрации.
• Синхронизация. Производится без перезагрузки страницы. При больших задержках в процессе осуществления процедуры необходимо выводить progressbar, который визуально указывает на необходимость ожидания завершения мероприятия.
• Исключение пустых результатов. Фильтры, не содержащие данных изначально, скрываются полностью. Зависимые аналоги после синхронизации с выдачей нулевого результата показываются в неактивном состоянии.
• Количества вариантов выбора. Должно быть унифицированным и объединенным в стандартизированные диапазоны при наличии значительного количества вариаций.
• Выдача позиций. После выборки с помощью фильтрации юзеру показывается общее количество позиций для вывода. Данное сообщение позволяет применять опцию как ссылку либо кнопку с использованием фильтра.
• URL. Формируется и изменяется динамически при выборе параметров фильтров, что позволяет пользователю поделиться результатами с другими юзерами, скопировав УРЛ.
• Очистка. Обязательно наличие сброса параметров фильтрации и возвращение в базовое положение.

Товарное сравнение

Предопределяет наличие более аргументированного выбора продукции или услуги для посетителя. Ключевые моменты:

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

Сортировка

Позволяет пользователю быстрее найти нужную позицию без использования поиска. Основные моменты:

• Фокусировка по умолчанию. Обычно настраивается на наиболее популярные и коммерчески выгодные товары, имеющие достаточный уровень рейтинга. Это помогает сделать выбор юзеру, который не знает, какой же товар или услуга ему нужна на 100 процентов. В свою очередь товарные позиции, уже снятые с производства и не имеющие необходимого уровня актуальности, размещаются в конце сортировки по умолчанию.
• Пользовательские возможности. Классический набор для реализации – это сортировки по стоимости (от самых высоких до низких и наоборот), алфавитному порядку, рейтингу, скидкам, фактическому наличию и так далее.
• Выделение параметров фильтрации. Создает явную наглядность, какие критерии сортировки использовал клиент. Реализуется иконкой.

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

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

Стоимость

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

Визуальный контент

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

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

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

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

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

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

Иное

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

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

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

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

Регистрация и оформление покупок

Базовые принципы формирования качественного современного юзабилити включают в себя следующие пункты:

• Небольшое количество обязательных полей. Посетители сайтов не любят оставлять о себе слишком много информации, в особенности, если она требуется в обязательном порядке. При оформлении покупки или же регистрации нового пользователя в идеальной реализации достаточно основного имени, а также ключевого контакта. Последним может быть номер телефона или электронная почта. Каждое из полей должно иметь пояснение о необходимости введения той или иной информации. При значительном количестве позиций их нужно объединять в группы с соответствующими заголовками.
• Отдельное выделение обязательных полей. Отмечаются звездочкой или иным доступным видимым способом.
• Просмотр вводимого пароля. Реализуется опциональной функцией для облегчения ввода. Современные требования к защищенности паролей достаточно высоки, часто они состоят из букв в разном регистре, символов и цифр, что делает их введение без ошибок с первого раза достаточно сложным, в особенности на мобильных платформах.
• Одноколоночная структура. В рамках заполнения данных юзер часто не обращает внимания на соседнюю колонку, поэтому рекомендуется реализация линейной структуры для оформления заказа либо регистрации нового пользователя.
• Удобство форм. Посетителю, желающему зарегистрироваться или же приобрести товар/услугу, нужно предоставлять именно ту форму, данные с которой достаточные и исчерпывающие для проведения конкретной процедуры. При этом желательно реализовать перемещение по блоку, как с помощью мыши, так и клавиатуры (кнопкой Tab и курсорами). Курсор мыши после открытия формы устанавливается на первое поле. Активные поля в процессе заполнения подсвечиваются.
• Подсказки. Возможная реализация через автоматическое заполнение, представление примера корректной информации, формирующийся в реальном времени список значений либо иными механизмами. При необходимости интегрируется система подсказок, актуальная для сложных ситуаций.
• Валидация. Внедрение базовой схемы проверки корректности вводимой информации – указанной даты рождения, электронной почты, прочее. При этом не рекомендуется проводить точную проверку корректности введения номера телефона, в особенности, если компания, для которой создается веб-проект, представлена в ряде регионов либо государств, поскольку формат номера, как и принципы его написания пользователями, могут отличаться. Если отказаться от проверки номера невозможно (например, результаты ввода используются для API автоматических сервисов), то стоит снабдить поле необходимым индивидуальным шаблоном, системой подсказок, выпадающим списком выбора кода страны и индивидуальным вводом для нестандартных номеров (коротких вариантов или с буквенными символами).
• Проверка. Оптимален вариант мгновенной проверки вносимых данных на корректность без перезагрузки страницы и ожидания, реализуемый посредством JavaScript.
• Информационные сообщения об успешности/проблеме ввода. Правильно заполненные поля обозначаются зеленым оттенком или соответствующей галочкой. Неправильно заполненные – красной окантовкой либо «крестиком».
• Возможность корректировки. Предопределяет возможность быстрого возврата на предыдущий этап заполнения без потери введенной информации.

Регистрация

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

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

Корзина

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

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

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

Дополнительные факторы, влияющие на улучшение юзабилити корзины:

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

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

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

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

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

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

Оплата заказа

Большинство современных интернет-магазинов и торговых площадок позволяют оплатить заказанный товар/услугу прямо на сайте. Критичные с точки зрения юзабилити пункты в данном аспекте:

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

Доставка

Несколько ключевых моментов:

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

Текстовый контент

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

• Читабельность. Основная ориентация на живых людей даже в случае использования SEO оптимизации с соответствующими ключами.
• Лаконичность. Характерна для текстов коммерческой направленности. Люди, которые собираются приобретать товар, не будут прочитывать «поэмы» – им необходима только полезная информация.
• Фокусировка на ЦА. В рамках формирования текстового контента следует обязательно учитывать целевую аудиторию и общаться с ней понятным языком.
• Правильное представление числовых значений. Упрощайте – это главное. Числа представлены именно цифрами, они легче воспринимаются большинством аудитории.

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

• Разбитие подзаголовком на смысловые блоки;
• Увеличенные расстояния между абзацами по сравнению с междустрочными отступами (разница – 1,5 раза);
• Использование как маркированных, так и нумерованных списков;
• Выделение ключевых фраз и строк, важных не для поисковой оптимизации, а именно посетителей сайта;
• Разбавление текстового наполнения графиками, таблицами и иллюстрациями/изображениями;
• Выделение главных моментов болдом или курсивом;
• Применение для акцентированных фраз и предложения жирных шрифтов;
• Исключение частого использования подчеркивания, поскольку последнее часто ассоциируется со ссылками;
• Строчное наполнение в пределах 70-90 символов;
• Умеренное употребление выделений;
• Выравнивание основных текстов по левому краю с использованием единой стилистики данной процедуры по всему сайту, кроме редких индивидуальных блоков;
• Дополнительные пробелы и поля в текстовом наполнении, для исключения его восприятия как однородного «полотна»;
• Исключение верхнего регистра в написании отдельных слов, фраз, предложений, абзацев.

Шрифты

Базовые требования юзабилити по отношению к шрифтам:

• Единая стилевая концепция. Не более двух, максимум трех разновидностей на всем сайте. При этом для компонентов одного уровня менять тип и размер шрифта не рекомендуется.
• Цветовая сочетаемость. Черное на белом – классический вариант. Современная трендовая альтернатива – темный фон и светлые шрифты. Стандартизация фона и шрифта подбирается для максимально комфортного чтения.
• Размер кегля. Подбирается индивидуально. Современная тенденция – крупные шрифты с выразительным содержанием для расстановки акцентов. Размер обычного текста – от 12 до 16.
• Качественное восприятие на любом разрешении. Выбранный шрифт обязательно проверяется на читабельность в разных разрешениях и при прямом масштабировании вплоть до значений в 300 процентов.

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

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

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

Мультимедийный контент

Ключевые моменты для комплексной проверки в рамках разработки веб-проекта:

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

Блог

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

• Наличие тематических категорий и тегов. Упрощают поиск материалов, товаров и так далее.
• Ссылки на статьи и товары. Гарантируют быстрый переход к продукции/услугам или статьям, о которых идет речь в посте.
• Рубрика «Читать далее» с более подробным освещением темы. Расширение кругозора юзеров и получение ними дополнительной информации.

Вместо послесловия

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

Как самому добавлять пункты в чек-лист и определять проблемные места? Вот несколько простых заключительных рекомендаций:

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

Удачи во всех начинаниях!