Консалтинговые услуги,
финансирование проектов, девелопмент
Карта сайта
Санкт-Петербург, Выборгское шоссе 5/1 - 397
+7 (921) 939-43-33
+7 (921) 919-70-77

Основные параметры юзабилити сайта


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

юзабилити сайта

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

  • Технический аудит (скорость загрузки и отсутствие ошибок). Главная страница загружается за 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

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

Назад к списку новостей

КОМПАНИЯ

Мы рады приветствовать вас на сайте «CFD Group»

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

Мы в соцсетях:

Facebook ВКонтакте

БЕСПЛАТНАЯ КОНСУЛЬТАЦИЯ