Чек-лист юзабилити сайта — основные параметры

  Комментариев к записи Чек-лист юзабилити сайта — основные параметры нет

Чек-лист юзабилити сайта. Часть I: основные параметры

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

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

image

Чек-лист, что проверить на сайте

  • Технический аудит (скорость загрузки и отсутствие ошибок). Главная страница загружается за 1–3 секунды (в идеале все остальные тоже). На сайте минимальное число технических ошибок.
  • Адаптивность. Сайтом удобно пользоваться с разных устройств (смартфонов, планшетов, десктопов).
  • Главная страница. Попав на домашнюю страницу сайта, пользователи сразу понимают, какие товары или услуги предлагает ваша компания.
  • Навигация. У сайта чёткая простая структура и есть поиск. Названия всех элементов сайта (от домена до заголовков и кнопок) однозначно воспринимаются пользователями.
  • Единообразие интерфейса и форм. У всех страниц и форм сайта сходная структура и оформление.
  • Читабельность. Оформление текстов не затрудняет восприятие информации.

Рассмотрим каждый пункт подробнее.

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

Посетителям комфортно, когда страница загружается за 1–2 секунды. Добиться такой скорости помогут подходящий хостинг и оптимизация сайта. Оптимизированной считается страница с простой структурой, минимизированным кодом и без тяжёлых форм.

Узнать скорость загрузки своего сайта можно с помощью сервисов PageSpeed Insights, Loading.Express и подобных им. Вот результаты скорости загрузки Яндекса в PageSpeed Insights. Он загружается очень быстро. Это, с одной стороны, связано с тем, что на странице немного контента. А с другой — с тем, что содержимое страницы оптимизировано для оперативной загрузки:

image

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

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

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

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

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

Например, мобильная версия сайта «ВКонтакте»: основные разделы сайта в виде иконок вынесены наверх:

image

Пример отсутствия адаптивной вёрстки или мобильной версии: сайт Большого театра. Из-за большого количества элементов и маленького шрифта сложно разобрать текст. А ещё есть шанс нажать не туда.

image

Главная страница

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

Например, сайт интернет-магазина Asos. По главной странице понятны сфера (одежда) и направление (интернет-магазин). Разделы сайта повторяют классификацию товаров. Кнопка «Купить» намекает на то, что к целевому действию можно перейти с первой страницы:

image

Навигация

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

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

Сайт Vichy — удачный пример. В нём есть «хлебные крошки», которые позволяют ориентироваться в каталоге. Названия разделов краткие и однозначные. Мы понимаем, что найдём в разделах «Лицо» (средства по уходу за лицом), «О марке» (История бренда/текст о компании). Отыскать конкретную позицию можно через поиск, он расположен в правом верхнем углу.

image

Чтобы пользователям было удобнее ориентироваться на сайте, используйте точные формулировки. Например, раздел «Коллекция» на сайте кажется слишком общим. Лучше выражаться конкретнее: «Пальто, куртки и пиджаки», «Свитеры и кардиганы».

Пользователь должен понимать, что произойдёт, когда он нажмёт на кнопку или перейдет по ссылке. Для кнопок лучше использовать глаголы в инфинитиве: «Подписаться», «Купить», «Перейти в корзину». Неудачный пример названия кнопок: «Готово», «Продолжить», «Дальше». Если человек отвлечётся от сайта и, вернувшись, увидит эти кнопки, он не вспомнит, на каком этапе находился.

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

Единообразие интерфейса и форм

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

Удачный пример — единообразный интерфейс сайта BAGAAR. Шапка сайта с логотипом и основными разделами закреплена и не пропадает при скролле страницы вниз. Футер повторяется на всех страницах сайта.

image

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

Читабельность

Последнее общее правило: оформление текста не должно отвлекать пользователя от контента. Для этого подберите подходящий для чтения шрифт (чаще всего выбирают вариант с засечками: Times New Roman, Bodoni и др.). И придерживайтесь правила контрастности: тёмные цвета — для текста и светлые —для фона или наоборот.

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

image

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

Оригинал: https://www.nic.ru/info/blog/usability-cheklist/

Комментарии

blogsiam