Не так давно «Мегафон» запустил собственное медиа Update. За разработку веб-сайта отвечало digital-агентство Red Collar — двукратный владелец статуэтки Webby Awards.
Сооснователь агентства Денис Ломов ведает, какие юзабилити-практики употребляла его команда в работе над сиим проектом и как их успешно использовать на любом веб-сайте (как лучше не созодать).
«Включайте эмпатию»: 8 юзабилити-практик для веб-сайта
Денис Ломов
Что такое юзабилити
Веб-сайт должен быть полезен двум сторонам: и юзеру, и обладателю. Чтоб все было отлично, нужно держать в голове о UX — воспоминании, которое человек получает в процессе работы с веб-сайтом. Это и сам дизайн, и то, как он реализован в коде. Когда веб-сайт приятен и полезен юзеру — он выгоден и обладателю. В UX входят UI и юзабилити.
UI — интерфейс веб-сайта, зрительная эстетика и логика всей структуры. Юзабилити — это степень удобства использования веб-сайтом. Чтоб она была высочайшей, дизайнеры продумывают и анализируют пути пользовательского поведения, делают интерфейс очень легкодоступным и обычным для осознания.
Если не мыслить о этих практиках, веб-сайт получится топорным, сложным. И негатив от его использования будет передаваться на компанию-владельца и на бренд, а означает — вредить бизнесу.
1. Клавиша «Ввысь к началу странички»
Во время просмотра длинноватой странички с однотипным контентом человек прокручивает ее вниз, скроллит. Пока ему любопытно, он изучает поэтапно, не спеша, у него нет дискомфорта от того, что она длинноватая.
Когда человек доходит до низа странички либо уже на середине осознает, что ему неинтересно — приходится скроллить опять ввысь.
Не плохая практика — поставить клавишу автовозврата, чтоб в один клик юзер оказался сначала странички.
Либо бросить остальные пути продолжения исследования веб-сайта: закрепить шапку с меню вверху окна либо предложить перейти в остальные разделы.
Нехорошая практика — не создать этого. Велика возможность, что вкладка будет закрыта, в особенности если материал очень большенный, а в его конце нет перехода.
На Update стрелка «Ввысь» возникает сходу опосля первого абзаца статьи, чтоб человек мог возвратиться в хоть какой момент. Она закрепляется не на всю длину странички, а лишь в текстовом материале. Ниже идут остальные блоки. В сценарии человек или ворачивается ввысь, или скроллит ниже, чтоб их изучить: стрелка уже не нужна.
2. Прогресс-бар
Прогресс-бар — не плохое решение для длинноватой страницы-сторителлинга. Это элемент интерфейса, который указывает состояние выполнения задачки либо пройденного пути.
Это быть может и индикатор процесса, который указывает состояние загрузки, к примеру, файла на веб-сайт. Либо отображение местопребывания юзера на страничке: процент пройденного пути.
Неважно какая неопределенность для человека — стресс (неспецифическая (общая) реакция организма на воздействие (физическое или психологическое), нарушающее его гомеостаз). Прогресс-бар дает осознание о том, что происходит.
Юзер лицезреет, на какой стадии он находится и сколько еще ему осталось ожидать до окончания задачки.
На Update прогресс-бар есть снутри статьей. Мы сделали его не попросту в виде заполняющейся полосы, а для большего удобства — к тому же элементом навигации по материалу. Те разделы статьи, что человек уже прочел, подсвечивается зеленоватым цветом, а по клику на подзаголовок просто передвигаться в подходящую часть текста.
3. Автоподбор увлекательных материалов
Не упускаем возможность показать заинтересованному юзеру еще более контента!
Чемодан подошел к концу — предлагаем похожие материалы. Таковой подход интенсивно употребляют на медиа-порталах, в сайтах-портфолио и интернет-магазинах.
При неплохой выборке релевантных материалов юзер пойдет читать далее, чем повысит глубину просмотра страничек и среднюю длительность сеанса, а для себя сбережет время и отыщет увлекательный контент.
Отсутствие такового блока понижает характеристики метрик, а, соответственно, и монетизацию. В случае с интернет-магазинами это понижает прибыль: к примеру, юзер отыскивает шкаф, но избранный ему не приглянулся. При отсутствии схожих продуктов он просто закроет вкладку и пойдет находить на иной веб-сайт. На медиа-порталах принципиально задерживать рециркуляцию юзеров: показатель «пошли далее».
На Update материалы в слайдере схожих статей выводятся по двум характеристикам: категория статьи и тип материала. В первом случае материалы идентичны из-за общей темы, к примеру, «сохранность», во 2-м — любители подкастов сходу увидят что еще можно слушать.
4. Несколько вариантов смены контента
Учитывайте, что удобное переключение страничек, экранов, картинок в слайдере — для различных людей быть может различным. Принципиально давать человеку выбор, ведь кому-то удобнее скроллить, а кому-то управлять нажатием мыши.
Не плохая практика, когда вы предлагаете два варианта навигации. К примеру, нажатие клавиши и перетаскивание, пореже — три, когда добавляете скролл.
Плохо, когда вариантов очень много: юзер может запутаться. Представьте, что на первом экране обычный слайдер с акциями начнет листаться при помощи колесика мыши. Человек желает глядеть страничку далее вниз и скроллит, а у него вертятся баннеры перед очами — это бесит.
На главной страничке веб-сайта мы сделали слайдер с предпросмотром главных материалов. Обложки статей можно перелистывать перетаскиванием либо кликом по стрелке. Навигирует человек мышкой либо тачпадом — это идиентично комфортно.
5. Черный режим либо черная тема
Черный режим — это набор дизайн-компонентов, которые по одному клику меняют цвет и перекрашивают веб-сайт в инверсию. Обычно изменяется фон, цвет текста и частей управления на веб-сайте. Так, чтоб большая часть дизайна стала черных цветов.
Употребляется там, где много текстовых страничек либо маленьких частей: в сервисах типа соц сетей, мобильных приложениях — потому что ими человек нередко пользуется с телефона в хоть какое время суток — и на медиа-ресурсах.
С темным режимом человек сумеет подольше пробыть на веб-сайте, если изучает его при нехорошем освещении. Так свет от монитора и от окружающего места не контрастирует и глаза напрягаются меньше.
Возможность переключать с дневной темы веб-сайта на ночную — показатель заботы о юзере, плюс это сберегает заряд устройства с OLED-экраном.
На веб-сайте бизнес-журнала для «Мегафона» мы добавили на переключатель переключения иконки звезд и солнца, чтоб юзер еще резвее считал функцию элемента. При клике на нее изменяются переменные кода и веб-сайт «перекрашивается», делая пребывание на нем удобным в хоть какое время суток.
Чтоб в черном режиме не было резкого контраста, заместо традиционного темного подобрали сероватый колер: так глаза устают еще меньше.
6. Подгрузка контента по желанию юзера
Бывает два варианта подгрузки однотипного контента. 1-ый вариант — клавиша «Загрузить еще». Юзер лицезреет несколько статей либо карточек продукта, и по нажатию получает с сервера еще порцию. Внедряется, если опосля блока однотипного контента идут остальные слайды либо принципиальная информация в подвале веб-сайта.
2-ой — напротив, нескончаемая лента. Комфортна, если это большенный сервис либо медиа-ресурс, где много инфы и она отображается в хронологическом порядке. А все принципиальные данные типа контактов и остальных разделов вынесены по краям от ленты либо в меню. К примеру, как в новостной ленте ВКонтакте.
На первом шаге пуска Update поток статей был маленький и мы выгрузили их все на главной страничке, чтоб не растрачивать время на излишние переходы снутри блога. Но мы уже подготовили такую клавишу и при увеличении контента внедрим ее, чтоб юзеру было уютно скроллить страничку для перемещения в блок подписки и оборотной связи.
7. Автоматическое наполнение формы
Браузеры хранят информацию, которую юзер вводит на веб-сайтах: почту, номер телефона, имя, запросы в поисковике. При использовании на остальных ресурсах браузер дает варианты данных, чтоб человек не печатал их поновой. Это сберегает время и мотивирует окончить действие сходу, не отвлекаясь на поиск либо вспоминание.
Автозаполнение — постоянно отменная юзабилити-практика. Опасность в том, что фронтенд-разработчик может невнимательно расставить атрибуты в коде веб-сайта. Тогда там, где требуется почта, браузер может давать старенькые запросы из поисковиков.
Для подписки на анонсы Update необходимо ввести email: при нажатии на поле ввода, возникают почты, которые ранее запомнил браузер, а в форме оборотной связи — пакет инфы: имя, телефон и почта.
8. Доступность интерфейса
Как доступная городская среда для маломобильных людей, доступные интерфейсы для людей с различными способностями — принципиальная вещь при разработке веб-сайтов. Если рука трясется, воспользоваться мышью трудно, и человек выбирает клавиатуру: Tab перемещает по элементам, Enter — активирует их.
В очень доступном интерфейсе предусмотрен скринридер — когда элементы верно подписаны, а при включенной на компе функции человек может слышать заглавие частей, а не читать их. И режим для слабовидящих: когда можно прирастить весь шрифт на веб-сайте либо настроить размер под себя.
В бизнес-журнале мы предусмотрели навигацию при помощи клавиатуры и внедрение скринридера. Может быть, опосля определенного порога размера аудитории будет внедрение режима для слабовидящих.
Что созодать с данной нам информацией
Даже обыкновенные веб-сайты — это сложная история: от UJM (карты пути юзера), где вы думаете о том, кто ваши аудитории и для чего они приходят к для вас на веб-сайт, до таковых мелочей, как скорость анимации переключателей переключения темного режима, чтоб уже неизменный гость был для вас приклонен в длительной перспективе.
Выше только малая часть всех вероятных юзабилити-практик. Чтоб веб-сайт был комфортен и полезен и для вас, и людям — почаще включайте эмпатию, ставьте себя на пространство юзера и думайте на шаг вперед.
Источник: