Анализ юзабилити сайта в примерах

Опубликовано: 15.08.2014. Обновлено: 20.09.2019 4 369 2

В статье привожу некоторые типовые ошибки в юзабилити сайтов:

1. Логотип:
- наличие уникального логотипа, а не просто текста;
- наличие ссылки на главную страницу.
2. Навигация:
- количество и структура разделов меню сайта;
  Пример неудачного вертикального меню:
  
  Такое меню тяжело для восприятия. Близкие по назначению товарные категории следует объединять в группы.
  
  Хорошо сделанное меню:
  
  Заказать юзабилити-аудит сайта
- соблюдение тематики и логики при распределении разделов (при наличии нескольких меню сайта);
- обозначение текущего раздела в меню
- наличие меню в футере;
- выделение ссылок в тексте;
- наличие и заметность меню "хлебные крошки".
3. Информация о ценах:
- доступность и заметность прайс-листа;
- использование единой валюты.
4. Поиск по сайту:
- наличие поиска;
- удобство и заметность формы поиска.
Пример. Попробуйте найти форму поиска в шапке этого сайта.

Пример правильно оформленной формы.
5. Изображения:
- соблюдение пропорций;
- передача цветов (использование jpg или png, но не gif);
- информативность;
- размеры;
- текстовые подписи;
- навигация по галереям;
- возможность увеличения изображения при нажатии (там где необходимо).
6. Контакты:
- доступность и заметность страницы с контактными данными;
- заметность номеров телефонов в шапке;
- наличие схемы проезда;
- наличие формы отправки сообщения;
- наличие формы для быстрой связи на всех страницах сайта;
- наличие блока "часы работы".
Пример неудобного и незаметного раздела "Контакты".

Пример раздела "Контакты", сделанного по канонам юзабилити.
7. Верстка:
- отображение сайта идентично и без ошибок во всех браузерах.
  Пример. Годами посетители сайта, использующие Google Chrome, видели искаженную форму авторизации.
  
  В браузере Mozilla Firefox В Google Chrome
8. Социальные сети:
- наличие блока "поделится в соц. сетях";
- наличие блока со ссылками на собственные группы в соц. сетях.
9. Длинные страницы:
- для страниц с большим объемом содержимого наличие кнопки "вернуться к началу страницы".

10. URl:
- названия разделов;
- иерархия.
Пример. На этом сайте и адреса страниц и "хлебные крошки" точно показывают посетителю, где он находится в данный момент.
11. Видимость полезной информации.
Пример сайта, в котором из-за большой шапки посетитель видит полезную информацию в нижней половине экрана:

Пример правильного с точки зрения юзабилити размера шапки сайта:
12. Подача информации:
- разбивка на абзацы;
- заголовки;
- размер шрифта;
- иллюстрации;
- цвет фона и шрифта.
Пример. Хотя вебмастер и разбил статью на абзацы, читать текст сложно.