Наш блог

Интересные факты из мира рекламы и продвижения

Инфографика: как сделать юзабилити аудит сайта

Инфографика: как сделать юзабилити аудит сайта - 5.0 out of 5 based on 1 vote

Рейтинг:  5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна
 

pic 01

Что такое usability?

Юзабилити - дословно означает "возможность использования", "способность быть использованным", "полезность". При разработке пользовательских интерфейсов слово юзабилити означает общую концепцию их удобства при использовании программного обеспечения, логичность и простоту в расположении элементов управления.

Юзабилити - удобство пользования сайтом

Улучшение юзабилити

Это комплекс мер, направленных на повышение доступности сайта, удобства навигации по сайту, улучшения подачи информации и соответствия сайта общим стандартам дизайна разработки.

pic 02

Зачем нужно юзабилити

Веб-стандарты + Юзабилити = Больше траффик = Больше продаж

Что влияет на юзабилити сайта?

1. Зашел на сайт
Доступность

2. Оценил сайт
Дизайн
Тематика
Навигация

3. Нашел информацию

Контент
Взаимодействие
Верстка

4. Перешел по ссылке

pic 03

Составляющее юзабилити сайта

1. Разработка сайта

2. Взаимодействие с аудиторией

3. Контент

4. Информационная архитектура

5. Дизайн сайта

6. Identity - Кто Вы такие?

7. Доступность сайта

pic 04

И-И-И начали

1. Разработка сайта

Кросс браузерность верстки

Правильная кодировка

Спецсимволы сделаны кодом

Код страниц и CSS валидный

В коде нет ненужных закоменченных элементов/скриптов

Скрипты вынесены отдельными файлами/расположены внизу страницы

Таблицы используются только для верстки страниц

2. Взаимодействие с аудиторией

Заметные призывы к действию

Различные типы призывов к действию

Наличие на сайте контактной формы

На сайте есть предупреждения, подтверждения, подсказки, полоса загрузки - сигналы, которые помогают пользователю понимать, что происходит

Есть возможность отменить все действия

pic 05

3. Контент - Содержание и Оформление

Заголовки понятны и содержательны

Основной контент четкий, простой, поясняющий

Ссылки в тексте не "нажмите здесь", а описательные

Стили и цвета оформления постоянны

Выделение текста <strong> используется в разумных пределах

Для подачи больших объемов информации используется форматирование: категоризация, списки, таблицы

pic 06

4. Информационная архитектура

Главную навигацию и ссылки в тексте легко найти и распознать

Названия меню четкие и понятные

Количество кнопок/ссылок в меню не более 7

Поиск на сайте легко найти

Навигация без излишних уровней вложенности

Урлы четкие и понятны. Урлы структурированы. Нет чрезмерно динамических урлов

5. Дизайн сайта

Важная информация в первом скроле

Хороший контраст текста и фона

Стилистика соответствует тематике

Используются правильные цвета (не раздражают зрение, сочетаются с тематикой, призывы к действию выделены)

Структура сайта сохраняется от страницы к странице

Используется черный цвет на белом фоне

Для иконок используются знакомые формы

pic 07

6. Identity - Кто Вы такие

Лого компании расположено на видном месте

Слоган позволяет понять цель и сущность вашего сайта

Главную страницу можно осознать за 5 секунд

На сайте есть фавикон

На сайте есть страницы "О нас" и "Контакты"

pic 08

7. Доступность сайта

Время загрузки в разумных переделах

На сайте нет горизонтального скролла

На сайте нет битых ссылок

На сайте есть кастомная 404 страница

Текстовые области не заверстаны как картинками

Все графические ссылки доступны как текстовые

Лого пролинковано на главную страницу

Формы не выдают ошибок и показывают статус события

На этом все. Любите своего пользователя. Не позволяйте ему долго разбираться с Вашим сайтом. Помогайте ему.

Don't have an account yet? Register Now!

Sign in to your account