• Главная
  • Услуги
    • Контекстная реклама
    • Контекстная реклама в Google
    • Продвижение интернет-магазинов
    • Контекстная реклама для SaaS
    • Реклама в Facebook 2023
    • Реклама на Amazon
    • Агентствам
  • Блог
  • Ресурсы
    • База знаний
      • База знаний по электронной коммерции
    • ACoS / ROAS Калькулятор
  • Кейсы
    • Клиенты и отзывы
  • Контакты
    • Вакансии
Оставить заявку
  • Главная
  • Услуги
    • Контекстная реклама
    • Контекстная реклама в Google
    • Продвижение интернет-магазинов
    • Контекстная реклама для SaaS
    • Реклама в Facebook 2023
    • Реклама на Amazon
    • Агентствам
  • Блог
  • Ресурсы
    • База знаний
      • База знаний по электронной коммерции
    • ACoS / ROAS Калькулятор
  • Кейсы
    • Клиенты и отзывы
  • Контакты
    • Вакансии
Оставить заявку
  • Главная
  • Услуги
    • Контекстная реклама
    • Контекстная реклама в Google
    • Продвижение интернет-магазинов
    • Контекстная реклама для SaaS
    • Реклама в Facebook 2023
    • Реклама на Amazon
    • Агентствам
  • Блог
  • Ресурсы
    • База знаний
      • База знаний по электронной коммерции
    • ACoS / ROAS Калькулятор
  • Кейсы
    • Клиенты и отзывы
  • Контакты
    • Вакансии
  • Главная
  • Услуги
    • Контекстная реклама
    • Контекстная реклама в Google
    • Продвижение интернет-магазинов
    • Контекстная реклама для SaaS
    • Реклама в Facebook 2023
    • Реклама на Amazon
    • Агентствам
  • Блог
  • Ресурсы
    • База знаний
      • База знаний по электронной коммерции
    • ACoS / ROAS Калькулятор
  • Кейсы
    • Клиенты и отзывы
  • Контакты
    • Вакансии
Без рубрики

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

02.11.2021 by Оксана Витман

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

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

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

Анализ сайта в системах аналитики

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

Google Analytics

1. Bounce Rate

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

Bounce Rate

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

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

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

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

Behaviour Flow

4. Behavior > Site Content > Landing Pages

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

5. Behavior > Site Content > All Pages

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

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

6. Checkout page

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

Checkout page

7. Вебвизор

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

Вебвизор

Шапка сайта

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

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

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

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

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

Частые ошибки:

1. Большие фиксированные шапки

Такие шапки при скролле закрывают немалую часть контента

Пример того, как не надо делать: https://www.atptour.com/en/players/roger-federer/f324/overview

2. Информация в шапке довольно скудная

Не разъясняет пользователю куда он попал, нет ссылок на соц. сети или другие разделы

Пример того, как не надо делать: https://prnt.sc/1plcw39

Как правильно оформлять шапки:

http://www.bjorndesign.net/

http://www.bjorndesign.net/

https://prnt.sc/1pl8z2h


Главная страница

1. Слоган

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

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

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

Case studies

Функциональные элементы

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

1. Карусель

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

2. Кнопки

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

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

Кнопки


Текстовая составляющая страницы

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

Светлый шрифт

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

Контраст
Good and bad contrast

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 анализа сайта пользуемся различными инструментами: как знаниями о поведении пользователей, так и инструментами ситемам аналитики. Мы оказываем широкий спектр маркетинговых услуг для компаний по всему миру, обеспечивая сбор данных, анализ информации и генерацию идей, которые помогают нашим клиентам улучшать показатели онлайн-бизнеса. В нашей команде работают опытные инженеры, свободно владеющие английским и русским языками. Независимо от размера или объема рынка, мы создаем индивидуальное исследовательское решение для вашего бизнеса.

usability ux аудит ux/ui
Оптимизация фида: как улучшить товарные рекламные объявления Google Ads13.10.2021
Важность корректного отслеживания конверсий для eCommerce проектов10.11.2021

Related Posts

Google Adsgoogle ads shopping campaignGoogle AnalyticsБез рубрики
Увеличили доход интернет-магазина Sibereon в 10 раз
17.02.2022 by Александр Ахмадыршин
Google AdsPPCБез рубрики
Операторы соответствия Яндекс Директ и Google AdWords (часть вторая)
06.07.2013 by Артем Акулов

Подпишитесь на рассылку

Полезные материалы для тех, кто заказывает, и тех, кто ведет контекстную рекламу



    *Ознакомиться с политикой конфиденциальности можно здесь 

    Свежие записи:

    • Как правильно отслеживать телефонные звонки в Google Ads09.11.2023
    • eBay или Amazon: что лучше выбрать малому бизнесу в 202327.10.2023
    • Сравнение Google Performance Max и Microsoft Performance Max20.10.2023
    • Оптимизация листинга товаров на Amazon13.10.2023
    • Сравнение Microsoft Performance Max, Microsoft Smart Shopping и Microsoft Standard Shopping05.10.2023

    Рубрики:

    Bing Ads Customer Journey Map eCommerce Excel Facebook ads Funnels and Tunnels Google Ads google ads shopping campaign Google Analytics google free listing google smart shopping campaign Google Tag Manager mail.ru Microsoft Ads PPC SEO shopify UpWork YouTube Без рубрики Вконтакте Вопрос Ответ Геолокальная реклама Кухня бюро Яндекс Яндекс Директ Яндекс Метрика автоматизация продаж аналитика аудит бизнес доклад интернет-магазин нам не все равно ремаркетинг ретаргетинг тестирование

    Бюро «Лира»

    Делаем сильные компании еще сильнее с помощью вдумчивого управления интернет-рекламой 

     

    Google Premier Partner Lira Agency

    Как правильно отслеживать телефонные звонки в Google Ads
    09.11.2023

    © 2023 Бюро «Лира»

    Политика конфиденциальности и соглашение об обработке персональных данных

    #integrio_button_656e974a4ee5d .wgl_button_link { color: rgba(255,255,255,1); }#integrio_button_656e974a4ee5d .wgl_button_link:hover { color: rgba(252,252,252,1); }#integrio_button_656e974a4ee5d .wgl_button_link { border-color: rgba(24,100,13,1); background-color: rgba(24,100,13,1); }#integrio_button_656e974a4ee5d .wgl_button_link:hover { border-color: rgba(66,150,43,1); background-color: rgba(66,150,43,1); }#integrio_button_656e974a4ee5d.effect_3d .link_wrapper { color: rgba(24,100,13,1); }#integrio_button_656e974a4fa54 .wgl_button_link { color: rgba(255,255,255,1); }#integrio_button_656e974a4fa54 .wgl_button_link:hover { color: rgba(255,255,255,1); }#integrio_button_656e974a4fa54 .wgl_button_link { border-color: rgba(18,138,0,1); background-color: rgba(18,138,0,1); }#integrio_button_656e974a4fa54 .wgl_button_link:hover { border-color: rgba(24,100,13,1); background-color: rgba(24,100,13,1); }#integrio_button_656e974a4fa54.effect_3d .link_wrapper { color: rgba(18,138,0,1); }#blog_module_656e974a5eea7.blog-posts .blog-post_title, #blog_module_656e974a5eea7.blog-posts .blog-post_title a { font-size:24px; line-height:36px; font-weight:700; }#blog_module_656e974a5eea7.blog-posts .blog-post_text { font-size:14px; line-height:24px; }#integrio_soc_icon_wrap_656e974a6139b a{ background: #216b22; border-color: #216b22; }#integrio_soc_icon_wrap_656e974a6139b a:hover{ background: #3c8e25; border-color: #3c8e25; }#integrio_soc_icon_wrap_656e974a6139b a{ color: #ffffff; }#integrio_soc_icon_wrap_656e974a6139b a:hover{ color: #ffffff; }@media only screen and (max-width: 1024px){ #integrio_spacer_656e974a614a0 .spacing_size{ display: none; } #integrio_spacer_656e974a614a0 .spacing_size-desktops{ display: block; } }@media only screen and (max-width: 800px){ #integrio_spacer_656e974a614a0 .spacing_size{ display: none; } #integrio_spacer_656e974a614a0 .spacing_size-tablet{ display: block; } }@media only screen and (max-width: 480px){ #integrio_spacer_656e974a614a0 .spacing_size{ display: none; } #integrio_spacer_656e974a614a0 .spacing_size-mobile{ display: block; } }@media only screen and (max-width: 1024px){ #integrio_spacer_656e974a615ab .spacing_size{ display: none; } #integrio_spacer_656e974a615ab .spacing_size-desktops{ display: block; } }@media only screen and (max-width: 800px){ #integrio_spacer_656e974a615ab .spacing_size{ display: none; } #integrio_spacer_656e974a615ab .spacing_size-tablet{ display: block; } }@media only screen and (max-width: 480px){ #integrio_spacer_656e974a615ab .spacing_size{ display: none; } #integrio_spacer_656e974a615ab .spacing_size-mobile{ display: block; } }#blog_module_656e974a6177c.blog-posts .blog-post_title, #blog_module_656e974a6177c.blog-posts .blog-post_title a { color:#232323; }#blog_module_656e974a6177c.blog-posts .blog-post_title:hover, #blog_module_656e974a6177c.blog-posts .blog-post_title a:hover { color:#216b22; }#blog_module_656e974a6177c.blog-posts .blog-post_title, #blog_module_656e974a6177c.blog-posts .blog-post_title a { font-size:14px; line-height:22px; }