Правила юзабилити

Чек-лист юзабилити сайта

Почитать позже
Поможем вашему бизнесу оптимизировать расходы на маркетинг и увеличить прибыль!

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

Подготовка к аудиту

Для проверки потребуется как можно больше данных. За основу нужно взять:

  • Данные из систем веб-аналитики: популярные страницы, количество посещений, поисковые запросы, распределение аудитории по устройствам и браузерам.
  • Воронка продаж и/или пути пользователей по целевым действиям на каждом этапе взаимодействия с сайтом.
  • Тепловые карты самых посещаемых страниц от Яндекс.Вебвизор или Hotjar.

Если у вас настроены цели в веб-аналитике или интеграции с CRM, вам будет удобнее проводить аудит с учетом конверсий.

Базовый чек-лист юзабилити сайта

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

  • Адаптивность

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

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

Это важный технический элемент не только для юзабилити сайта, но и для SEO. Если страница загружается более 3 секунд, большинство пользователей уходит, поэтому нужно сокращать это время до 0,5-2 секунд.

Speed Test_Freepik.jpg

  • Title, favicon

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

  • SSL-сертификат

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

  • Страница 404

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

  • Понятно, о чем сайт

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

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

Чек-лист дизайна

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

3054120.jpg

  • Единство

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

  • Иконки

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

2901249.jpg

  • Доступность

В этом пункте нужно учитывать контрастность, чтобы тексты, кнопки и графика не сливалась с фоном.

  • Z- или F-паттерны

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

1.png

2.png

  • Тексты

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

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

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

  • Чекбоксы

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

  • Выпадающие списки

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

Удобство навигации

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

2796389.jpg

  • Меню

Количество ссылок в меню стоит ограничить 8 пунктами. Порядок выстраивайте по приоритетности разделов для пользователей.

  • Корзина

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

  • Ссылки

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

  • Переходы между страницами

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

Конверсионные элементы

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

3.jpg

Формы

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

Кнопки

  • У CTA есть понятная визуальная иерархия: главные кнопки ярче, заметнее и лучше выделяются на фоне страницы, а менее значимые — полупрозрачные или рамочные.
  • Целевое действие можно выполнить на всех страницах с коммерческим содержанием.
  • Текст на кнопке обозначает действие или результат клика.

Чек-лист для проверки контента

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

4.jpg

  • Тексты

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

  • Изображения

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

  • Таблицы

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

Проверка на ошибки

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

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

Закажи юзабилити-тестирование прямо сейчас
Заказать услугу
Читать также

Готовы узнать, что думают пользователи?

Тогда переходите на новый уровень и улучшайте ваш
продукт вместе с нами

Узнать