Чек-лист для проведения UX/UI аналитики веб сайта

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

В этой инструкции приведены основные шаги UX аудита и часто встречающиеся примеры некорректных решений.

Каждая продвигаемая страница анализируется индивидуально.

Для начала стоит изучить поведение пользователей на сайте через системы аналитики. Это может сузить поиск проблемных мест на сайте.

1. Показатель отказов

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

 

 

2. Устройства и браузер

Смотрим все ли корректно работает и не отваливаются ли пользователи с определенным устройством/браузером (в таком случае показатель отказов по определенному пункту будет значительно выше, чем по остальным).

 

3. Путь пользователя (Behaviour Flow)

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

 

 

4. Поведение > Содержание сайта > Целевые страницы.

Смотрим конкретно на показатель отказов целевых страниц, с которых пользователи заходят на сайт, а затем оцениваем их эффективность.

 

5. «Поведение» > «Содержимое сайта» > «Все страницы».

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

 

 

6. Страница оформления заказа

В данном примере около 75% пользователей отваливались в процессе заполнения полей на странице оформления заказа – что является сигналом для более тщательного изучения шагов пользователя на этой стадии.

 

 

7. Вебвизор

Вебвизор зачастую оказывается полезен тем, что мы видим куда хочет кликнуть пользователь, и сделать эти элементы кликабельными (если они таковыми не являются), либо добавить информации на сайт.

 

 

Шапка сайта может содержать:

• основные элементы фирменного стиля: логотип, слоган, изображение, представляющее компанию и т. д.;
• представление товара или услуги;
• ссылки на основные категории контента сайта;
• ссылки на самые важные социальные сети;
• основную контактную информацию (номер телефона, электронная почта и т. д.);
• переключение языков при многоязычном интерфейсе.

 

Почему шапка сайта очень важна

Различные эксперименты по сбору данных об отслеживании глаз пользователей (ссылка на статью) показали, что существует несколько типичных моделей, по которым посетители обычно просматривают веб-сайт:

 

 

 

А также F – pattern модель.

 

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

 

1. Слоган

Начать страницу следует со слогана, который резюмирует, чем занимается сайт или компания, особенно малоизвестная. Слоган должен быть ёмким, но достаточно коротким, чтобы пользователи действительно его прочитали.
Пример: https://www.etecc.com/

 

2. Специфика побеждает абстракцию

Важно демонстрировать реальные результаты своей работы на главной странице, чтобы зацепить пользователя.

 

Все кнопки и ссылки должны быть кликабельны, СТА четким и ясным, «хлебные крошки» тоже кликабельны, кнопка возврата на предыдущую страницу должна работать.

 

1. Карусель

Согласно Nielsen Norman Group, «люди часто сразу же прокручивают эти большие изображения и пропускают весь контент внутри них». Способ проверить, имеет ли карусель на сайте смысл: запишите три преимущества, которые карусель предоставляет посетителю. Если не удается найти три значимых преимущества, то карусель не представляет особой ценности.

 

2. Кнопки

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

Как не надо делать:

 

1. Чрезмерное увлечение тонкими, светлыми шрифтами

 

 

2. Плохое сочетание контрастов

 

 

 

 

3. Сложно читаемые шрифты

 

 

4. Комбинации разных шрифтов

Не рекомендуется использовать более 3-х шрифтов (два – достаточно, одного часто достаточно). Семейства шрифтов должны дополняют друг друга в зависимости от ширины их символов:

 

 

5. Цветной текст

Избегайте цветного текста (в особенности красного и зеленого, так как эти цвета не видят люди с дальтонизмом):

 

 

6. Много текста

Много текста – почти всегда плохо, если только это не продиктовано спецификой сайта. Лучше сокращать текст, там где это можно.

 

 

7. Текст не должен перекрывать значимые части изображения.

 

1. Перехват прокрутки (кошмар юзабилити)

Если веб-сайт создан для нишевой группы, находящейся на грани экспериментального, продвинутого пользователя, раннего адаптера, конкретного устройства… тогда Scroll Hijacking может быть рассмотрен как опция. Следует помнить, что даже самые лучшие попытки Scroll Hijacking часто оказываются ужасными на мобильных / планшетных устройствах.

Примеры – https://durimel.io/nel, http://valaire.mu/

 

2. Проверяем адаптивность сайта под разные устройства

 

3. Контент следует разбивать на логические блоки:

 

 

4. Отступы

Важно не делать отступы между блоками слишком маленькими (как и расстояние между элементами), иначе разбиение теряется:

 

 

5. Не следует выделять цветом слишком узкие блоки:

 

 

6. Цветовая гамма

Наиболее эффективная цветовая схема веб-сайта соответствует соотношению 60-30-10, где 60% — что основной цвет, 30% — вторичный цвет, 10% — контрастный цвет.

 

 

Как не надо делать:

 

 

 

Как надо делать:

 

 

 

1. Перегруженная навигация

 

 

2. Неинтуитивная навигация

Навигация должна быть кристально чистой и не вводить пользователя в заблуждение.

 

 

3. Удобство и минимализм форм (чеклист по формам)

 

Как правило, футер содержит:

• Название и/или логотип.
• Контактную информацию.
• Ссылки на соц. сети.
• Юридическую информацию.

1. Перегруженный футер

Важно: не следует дублировать в футере основную навигацию, оставьте ее в шапке сайта.

 

 

2. Незавершенный футер

 

 

3. Идеальный футер

 

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

Веб-дизайнеры могут придумать самую крутую цветовую схему, самую причудливую анимацию прокрутки или самые фантастические эффекты параллакса, но если в результате пострадает человеческое взаимодействие, UX будет плохим, и люди быстро уйдут. Другой сайт находится на расстоянии одного клика.

Мы в Lira — Data-driven Digital Marketing Agency для проведения UX анализа сайта пользуемся различными инструментами: как знаниями о поведении пользователей, так и инструментами ситемам аналитики. Мы оказываем широкий спектр маркетинговых услуг для компаний по всему миру, обеспечивая сбор данных, анализ информации и генерацию идей, которые помогают нашим клиентам улучшать показатели онлайн-бизнеса. В нашей команде работают опытные инженеры, свободно владеющие английским и русским языками. Независимо от размера или объема рынка, мы создаем индивидуальное исследовательское решение для вашего бизнеса.