Чеклист для проведения UX/UI аналитики веб сайта
Важно понимать, что каждый аудит юзабилити уникален. Не существует универсального чеклиста. Сайты отличаются друг от друга тематикой, структурой, форматом подачи контента и разными методами взаимодействия с пользователем. Поэтому примеров аудитов юзабилити может быть множество: но они, скорее всего, не будут похожи друг на друга.
В данной инструкции приведены основные шаги UX аудита и часто встречающиеся примеры некорректных решений.
Каждая продвигаемая страница анализируется индивидуально.
Анализ сайта в системах аналитики
Для начала стоит изучить поведение пользователей на сайте через системы аналитики. Это может сузить поиск проблемных мест на сайте.
Google Analytics
1. Bounce Rate
Слишком высокий показатель отказов говорит о том, что пользователи попадают на целевую страницу, просматривают ее и уходят, не переходя на другие вкладки. Причин может быть множество: целевая страница выглядит недостаточно убедительно, нерелевантные ключи (если смотрим платный трафик), функциональные баги и т.д.
2. Устройства и браузер
Смотрим все ли корректно работает и не отваливаются ли пользователи с определенным устройством/браузером (в таком случае показатель отказов по определенному пункту будет значительно выше, чем по остальным)
3. Путь пользователя (Behaviour Flow)
Наблюдение: переключение пользователей между двумя страницами, может означать, что пользователи сбиты с толку, и призывы к действию или ссылки на этих конкретных страницах должны быть пересмотрены.
4. Behavior > Site Content > Landing Pages
Смотрим конкретно на показатель отказов целевых страниц, с которых пользователи заходят на сайт, а затем оцениваем их эффективность.
5. Behavior > Site Content > All Pages
В этом отчете можно увидеть увидеть показатель отказов отдельно для каждой страницы. Смотрим, какие страницы работают плохо и на где следует провести оптимизацию.
6. Checkout page
В данном примере около 75% пользователей отваливались в процессе заполнения полей на странице оформления заказа – что является сигналом для более тщательного изучения шагов пользователя на этой стадии.
7. Вебвизор
Вебвизор зачастую оказывается полезен тем, что мы видим куда хочет кликнуть пользователь, и сделать эти элементы кликабельными (если они таковыми не являются), либо добавить информации на сайт.
Шапка сайта
Шапка сайта может содержать:
- основные элементы фирменного стиля: логотип, слоган, изображение, представляющее компанию и т. д.
- представление товара или услуги
- ссылки на основные категории контента сайта
- ссылки на самые важные социальные сети
- основная контактная информация (номер телефона, электронная почта и т. Д.)
- переключение языков при многоязычном интерфейсе
Почему шапка сайта очень важна:
Различные эксперименты по сбору данных об отслеживании глаз пользователей (ссылка на статью) показали, что существует несколько типичных моделей, по которым посетители обычно просматривают веб-сайт:
А также F – pattern модель
Во всех случаях процесс сканирования начнется в верхней горизонтальной области веб-страницы, поэтому важно отобразить основную информацию в шапке сайта, а также обозначить бренд.
Частые ошибки:
1. Большие фиксированные шапки
Такие шапки при скролле закрывают немалую часть контента
Пример того, как не надо делать: https://www.atptour.com/en/players/roger-federer/f324/overview
2. Информация в шапке довольно скудная
Не разъясняет пользователю куда он попал, нет ссылок на соц. сети или другие разделы
Пример того, как не надо делать: https://prnt.sc/1plcw39
Как правильно оформлять шапки:
Главная страница
1. Слоган
Начать страницу следует со слогана, который резюмирует, чем занимается сайт или компания, особенно малоизвестная. Слоган должен быть ёмким, но достаточно коротким, чтобы пользователи действительно его прочитали.
Пример https://www.etecc.com/
2. Специфика побеждает абстракцию
Важно демонстрировать реальные результаты своей работы на главной странице, чтобы зацепить пользователя
Функциональные элементы
Все кнопки и ссылки должны быть кликабельны, СТА четким и ясным, «хлебные крошки» тоже кликабельны, кнопка возврата на предыдущую страницу должна работать.
1. Карусель
Согласно Nielsen Norman Group: «люди часто сразу же прокручивают эти большие изображения и пропускают весь контент внутри них». Способ проверить, имеет ли карусель на сайте смысл: запишите три преимущества, которые карусель предоставляет посетителю. Если не удается найти три значимых преимущества, то карусель не представляет особой ценности.
2. Кнопки
Кнопки и другие кликабельные элементы должны быть выделены, так чтобы пользователю было понятно, что сюда можно кликнуть.
Как не надо делать:
Текстовая составляющая страницы
1. Чрезмерное увлечение тонкими, светлыми шрифтами
2. Плохое сочетание контрастов
3. Сложно читаемые шрифты
4. Комбинации разных шрифтов
Не рекомендуется использовать более 3-х шрифтов (два – достаточно, одного часто достаточно). Семейства шрифтов должны дополняют друг друга в зависимости от ширины их символов:
5. Цветной текст
Избегайте цветного текста (в особенности красного и зеленого, так как эти цвета не видят люди с дальтонизмом)
6. Много текста
Много текста – почти всегда плохо, если только это не продиктовано спецификой сайта. Лучше сокращать текст, там где это можно.
7. Текст не должен перекрывать значимые части изображения
Дизайн и отображение страницы на разных устройствах
1. Scroll Hijacking (Usability nightmare)
Если веб-сайт создан для нишевой группы, находящейся на грани экспериментального, продвинутого пользователя, раннего адаптера, конкретного устройства… тогда Scroll Hijacking может быть рассмотрен как опция. Следует помнить, что даже самые лучшие попытки Scroll Hijacking часто оказываются ужасными на мобильных / планшетных устройствах.
Примеры – https://durimel.io/nel, http://valaire.mu/
2. Проверяем адаптивность сайта под разные устройства
3. Контент следует разбивать на логические блоки:
4. Отступы
Важно не делать отступы между блоками слишком маленькими (как и расстояние между элементами), иначе разбиение теряется :
5. Не следует выделять цветом слишком узкие блоки:
6. Цветовая гамма
Наиболее эффективная цветовая схема веб-сайта соответствует соотношению 60-30-10, где 60% — что основной цвет, 30% — вторичный цвет, 10% — контрастный цвет
Как не надо делать:
Как надо делать:
UX – анализ работы контакт форм, разделов сайта, навигации
1. Перегруженная навигация
2. Не интуитивная навигация
Навигация должна быть кристально чистой и не вводить пользователя в заблуждение
3. Удобство и минимализм форм (чеклист по формам)
Футер
Как правило, футер содержит:
- Название и/или логотип
- Контактная информация
- Ссылки на соц. Сети
- Юридическая информация
1. Перегруженный футер
Важно: не следует дублировать в футере основную навигацию, оставьте ее в шапке сайта
2. Незавершенный футер
3. Идеальный футер
Заключение
В сумасшедшем изобилии тенденций веб-дизайна модные вещи приходят и уходят. В этом хаосе сбалансированное использование эстетики, эффективности и удобства использования играет важную роль в выявлении тенденций UX, которые оказались самыми сильными и получили наибольшее признание пользователей.
Веб-дизайнеры могут придумать самую крутую цветовую схему, самую причудливую анимацию прокрутки или самые фантастические эффекты параллакса, но если в результате пострадает человеческое взаимодействие, UX будет плохим, и люди быстро уйдут. Другой сайт находится на расстоянии одного клика.
Мы в Lira — Data-driven Digital Marketing Agency для проведения UX анализа сайта пользуемся различными инструментами: как знаниями о поведении пользователей, так и инструментами ситемам аналитики. Мы оказываем широкий спектр маркетинговых услуг для компаний по всему миру, обеспечивая сбор данных, анализ информации и генерацию идей, которые помогают нашим клиентам улучшать показатели онлайн-бизнеса. В нашей команде работают опытные инженеры, свободно владеющие английским и русским языками. Независимо от размера или объема рынка, мы создаем индивидуальное исследовательское решение для вашего бизнеса.