«Включайте эмпатию»: 8 юзабилити-практик для сайта

Что такое юзабилити 

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

UI — интерфейс сайта, визуальная эстетика и логика всей структуры. Юзабилити — это степень удобства пользования сайтом. Чтобы она была высокой, дизайнеры продумывают и анализируют пути пользовательского поведения, делают интерфейс максимально доступным и простым для понимания.

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

1. Кнопка «Вверх к началу страницы»

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

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

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

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

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

Автовозврат к началу страницы: пример и антипример

2. Прогресс-бар

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

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

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

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

Изменение прогресс-бара при чтении: пример и антипример

3. Автоподбор интересных материалов

Не упускаем возможность показать заинтересованному пользователю еще больше контента!

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

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

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

Слайдер автоподбора похожих материалов: пример и антипример

4. Несколько вариантов смены контента

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

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

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

5. Темный режим или темная тема

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

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

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

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

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

Смена цветовой темы: пример и антипример

6. Подгрузка контента по желанию пользователя

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

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

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

Подгрузка материалов: пример и антипример

7. Автоматическое заполнение формы

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

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

Автозаполнение данных в форме: пример и антипример

8. Доступность интерфейса

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

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

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

Управление навигацией по сайту с помощью Tab

Что делать с этой информацией 

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

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