Из чего состоит анализ юзабилити сайта. Примеры

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

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

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

  1. 1. Логотип:
    • наличие уникального логотипа, а не просто текста;
    • наличие ссылки на главную страницу.
  2. 2. Навигация:
    • количество и структура разделов меню сайта;

      Пример неудачного вертикального меню:

      left-menu-bad-small

      Такое меню тяжело для восприятия. Близкие по назначению товарные категории следует объединять в группы.

      Хорошо сделанное меню:

      left-menu-good-small

    • соблюдение тематики и логики при распределении разделов (при наличии нескольких меню сайта);
    • обозначение текущего раздела в меню
    • наличие меню в футере;
    • выделение ссылок в тексте;
    • наличие и заметность меню "хлебные крошки".
  3. 3. Информация о ценах:
    • доступность и заметность прайс-листа;
    • использование единой валюты.
  4. 4. Поиск по сайту:
    • наличие поиска;
    • удобство и заметность формы поиска.

    Пример. Попробуйте найти форму поиска в шапке этого сайта.

    poisk-bad-small

    Пример правильно оформленной формы.

    poisk-good-small

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

    Пример неудобного и незаметного раздела "Контакты".

    Пример раздела "Контакты", сделанного по канонам юзабилити.

  7. 7. Верстка:
    • отображение сайта идентично и без ошибок во всех браузерах.

      Пример. Годами посетители сайта, использующие Google Chrome, видели искаженную форму авторизации.

      identichno-mozilla identichno-chrome
      В браузере Mozilla Firefox В Google Chrome
  8. 8. Социальные сети:
    • наличие блока "поделится в соц. сетях";
    • наличие блока со ссылками на собственные группы в соц. сетях.
  9. 9. Длинные страницы:
    • для страниц с большим объемом содержимого наличие кнопки "вернуться к началу страницы".
  10. 10. URl:
    • названия разделов;
    • иерархия.

    Пример. На этом сайте и адреса страниц и "хлебные крошки" точно показывают посетителю, где он находится в данный момент.

    url-small

  11. 11. Видимость полезной информации.

    Пример сайта, в котором из-за большой шапки посетитель видит полезную информацию в нижней половине экрана:

    polezno-bad-small

    Пример правильного с точки зрения юзабилити размера шапки сайта:

    polezno-bad-small

  12. 12. Подача информации:
    • разбивка на абзацы;
    • заголовки;
    • размер шрифта;
    • иллюстрации;
    • цвет фона и шрифта.

    Пример. Хотя вебмастер и разбил статью на абзацы, читать текст сложно.

    podacha-small

Обратите внимание

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

Спасибо, пригодилось

Ответить

Константин Гайдук
14.03.2019 в 18:28

Рад, что пригодилось.

Ответить

Комментировать