Задумывались ли вы, почему некоторые сайты хочется закрыть сразу, даже если контент нас заинтересовал? Секрет в том, насколько комфортно устроен сайт и легко ли найти нужную информацию. Не раздражает ли нас цветовое оформление. Из этих и многих других факторов складывается то, что называют юзабилити сайта.
RU-CENTER подготовил цикл статей о том, как прокачать юзабилити своего сайта. В первой расскажем об основных принципах, которые стоить учесть.
Чек-лист, что проверить на сайте
- Технический аудит (скорость загрузки и отсутствие ошибок). Главная страница загружается за 1–3 секунды (в идеале все остальные тоже). На сайте минимальное число технических ошибок.
- Адаптивность. Сайтом удобно пользоваться с разных устройств (смартфонов, планшетов, десктопов).
- Главная страница. Попав на домашнюю страницу сайта, пользователи сразу понимают, какие товары или услуги предлагает ваша компания.
- Навигация. У сайта чёткая простая структура и есть поиск. Названия всех элементов сайта (от домена до заголовков и кнопок) однозначно воспринимаются пользователями.
- Единообразие интерфейса и форм. У всех страниц и форм сайта сходная структура и оформление.
- Читабельность. Оформление текстов не затрудняет восприятие информации.
Рассмотрим каждый пункт подробнее.
Скорость загрузки и ошибки
Посетителям комфортно, когда страница загружается за 1–2 секунды. Добиться такой скорости помогут подходящий хостинг и оптимизация сайта. Оптимизированной считается страница с простой структурой, минимизированным кодом и без тяжёлых форм.
Узнать скорость загрузки своего сайта можно с помощью сервисов PageSpeed Insights, Loading.Express и подобных им. Вот результаты скорости загрузки Яндекса в PageSpeed Insights. Он загружается очень быстро. Это, с одной стороны, связано с тем, что на странице немного контента. А с другой — с тем, что содержимое страницы оптимизировано для оперативной загрузки:
Кроме скорости загрузки важно, чтобы на сайте было как можно меньше технических ошибок. Они напрямую связаны с восприятием качества сайта. Очевидно, что неработающие кнопки, битые ссылки или некорректная вёрстка негативно влияют на мнение пользователей. Постарайтесь не допускать технических ошибок или оперативно устранять их.
Адаптивность
Адаптивность — это способность сайта выглядеть одинаково хорошо и на десктопе, и на смартфоне, и на планшете. Чтобы добиться этого, можно использовать адаптивную вёрстку или сверстать для каждого варианта свою версию.
Если у сайта простая структура и немного контента (например, сайт-визитка), выбирайте адаптивную вёрстку. Благодаря ей элементы страницы подстраиваются под экраны планшетов и смартфонов.
Если же на сайте много разделов и контента, подготовьте отдельную мобильную версию. Как правило, это неполная версия сайта, в которой на главную страницу вынесены главные разделы и возможности.
Например, мобильная версия сайта «ВКонтакте»: основные разделы сайта в виде иконок вынесены наверх:
Пример отсутствия адаптивной вёрстки или мобильной версии: сайт Большого театра. Из-за большого количества элементов и маленького шрифта сложно разобрать текст. А ещё есть шанс нажать не туда.
Главная страница
Главная страница на то и главная, чтобы выражать основной посыл вашего сайта. Убедитесь, что, оказавшись на главной странице сайта, пользователь поймёт, чем занимается ваша компания и что вы ему предлагаете.
Например, сайт интернет-магазина Asos. По главной странице понятны сфера (одежда) и направление (интернет-магазин). Разделы сайта повторяют классификацию товаров. Кнопка «Купить» намекает на то, что к целевому действию можно перейти с первой страницы:
Навигация
У сайта должна быть простая структура и упорядоченное меню, тогда пользователь сможет быстро выполнить целевое действие. Помогают ориентироваться на сайте следующие настройки:
- Кликабельные «хлебные крошки» (путь от домашней (главной) страницы до текущей). Благодаря им пользователь понимает, на каком уровне сайта он находится, и может перейти на уровень выше в один клик.
- Кнопка «Наверх», если страница занимает больше одного экрана.
- Возможность вернуться на главную страницу благодаря кликабельному логотипу в шапке или текстовой ссылке в футере (информационном блоке внизу страницы).
- Кнопка возврата в браузере работает корректно на всех страницах сайта. Чтобы при нажатии пользователь попадал на шаг назад, а настроенные фильтры/формы сохранялись.
- Поиск по сайту, который позволит пользователю найти конкретные товар/услугу/статью. Принято размещать строку поиска (или иконку лупы) в правом верхнем углу.
Сайт Vichy — удачный пример. В нём есть «хлебные крошки», которые позволяют ориентироваться в каталоге. Названия разделов краткие и однозначные. Мы понимаем, что найдём в разделах «Лицо» (средства по уходу за лицом), «О марке» (История бренда/текст о компании). Отыскать конкретную позицию можно через поиск, он расположен в правом верхнем углу.
Чтобы пользователям было удобнее ориентироваться на сайте, используйте точные формулировки. Например, раздел «Коллекция» на сайте кажется слишком общим. Лучше выражаться конкретнее: «Пальто, куртки и пиджаки», «Свитеры и кардиганы».
Пользователь должен понимать, что произойдёт, когда он нажмёт на кнопку или перейдет по ссылке. Для кнопок лучше использовать глаголы в инфинитиве: «Подписаться», «Купить», «Перейти в корзину». Неудачный пример названия кнопок: «Готово», «Продолжить», «Дальше». Если человек отвлечётся от сайта и, вернувшись, увидит эти кнопки, он не вспомнит, на каком этапе находился.
Формулировки важны не только в служебном тексте на сайте, но и в имени домена. Выбирайте домен, который будет связан с вашей деятельностью или торговой маркой, чтобы его было легко запомнить или напечатать. Вы можете подобрать подходящий домен на сайте хостера.
Единообразие интерфейса и форм
Дизайн и структура должны быть единообразными для большинства страниц. Если все страницы будут свёрстаны по-разному, у пользователя не закрепится образ вашего сайта как единое целое. Ориентироваться на хаотичных разрозненных страницах сложнее.
Удачный пример — единообразный интерфейс сайта BAGAAR. Шапка сайта с логотипом и основными разделами закреплена и не пропадает при скролле страницы вниз. Футер повторяется на всех страницах сайта.
Позаботьтесь и о единообразии форм (инпута) на сайте. В формах должны быть чётко указаны обязательные поля, а также даны примеры/советы для заполнения. Приветствуется, если формы на разных страницах организованы единообразно.
Читабельность
Последнее общее правило: оформление текста не должно отвлекать пользователя от контента. Для этого подберите подходящий для чтения шрифт (чаще всего выбирают вариант с засечками: Times New Roman, Bodoni и др.). И придерживайтесь правила контрастности: тёмные цвета — для текста и светлые — для фона или наоборот.
Удачным примером является оформление статей на сайте Т — Ж. Воспринимать информацию легко благодаря минималистичному контрастному оформлению, большому межстрочному интервалу и подходящему шрифту:
Помните, что вы пишете тексты в первую очередь для пользователей, а не для поисковой системы. Текст на сайте не должен состоять из бессвязных ключевых фраз или повторять ключевое слово в каждом предложении.
На этом всё. В следующих статьях мы расскажем, на что обратить внимание в дизайне сайта и коммуникациях с клиентами:
Оригинал Чек-лист юзабилити сайта. Часть I: основные параметры
