Кейсы

Аудит юзабилити на примере сайта https://pmg.ua/

29 May, 2019

pmg usability audit 1

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

Когда сайтов стало много и конкуренция постучалась в окно, картинка начала уступать место удобству и о юзабилити заговорили громче. Начиная со скорости загрузки страницы, заканчивая идеей минимализма на грани “типографика и цвет — только на акцентах” — сайты из дизайнерского баттла начали эволюцию в сторону удобных информационных ресурсов.

Закончилось все заявлением Google в прошлом году, что страницы, не приспособленные к просмотру на экране мобильного они даже в индекс не добавят. Это стало моментом окончательного осознания для разработчиков и маркетологов: насколько быстро и доступно сайт покажет пользователю, что тут делают, и как это получить, столько очков вперед он гарантированно даст своим соперникам в борьбе за пользователя и место в ТОПе поисковых систем.

Что такое “юзабилити”?

Вопросами удобства сайта заведует характеристика “usability”, в переводе с английского “удобство использования”. Лучший способ проверить, насколько пользователь достигает своей цели, заходя на веб-ресурс, — провести аудит этой характеристики.

Если вы попадали в ситуацию, когда, еще только зайдя на сайт, у вас уже появляется желание поскорее отсюда уйти — то вы легко поймете, зачем вообще нужен аудит юзабилити. И если вам еще приходится встречать на просторах интернета такие сайты — смело можно предполагать, что их владельцы от тестировании удобства даже не слышали.

Как провести юзабилити-аудит?

Что собой представляет проверка удобства сайта для пользователей — посмотрим на примере новостного портала pmg.ua.

Для аудита выбираются те страницы, которые являются определяющими, зачем пользователи посещают этот ресурс. Будут рассмотрены:

  • главная страница;
  • страницы новостей;
  • страница категории новостей.

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

Анализ сводной статистики кабинета и кликов

Итак, посмотрим на ТОП-10 страниц сайта, которые собрали больше всего кликов при просмотре на компьютерах:

  1. ТОП-10 страниц, которые имеют больше всего кликов.
  2. Мобильный трафик генерирует 61% кликов поэтому будем анализировать мобильную (адаптивную) версию сайта в первую очередь.pmg usability audit 2
  3. По карте скролла видно, что многие страницы показывают четкое взаимодействие с контентом только на первых 20%, поэтому будем анализировать их. Проверим, есть ли нужный и ценный контент в зеленых зонах. Если мы ожидаем на них клики, а их нет — следует менять или добавлять призывы к действию.pmg usability audit 3

Мобильная версия — https://pmg.ua/

  1. Кнопка “Последние новости” не работает. Что не работает — то нужно убрать с сайта.pmg usability audit 4
  2. Досье целесообразно перенести выше, чтобы получать траффик.pmg usability audit 5
  3. Если человек начинает кликать по новостям, автоматическую прокрутку нужно скрыть. После скролла вручную скрипт еще прокручивает до следующей новости. Это создает лишнюю суету с поиском нужного экрана, что нежелательно для ПК-версии, а для мобильной недопустимо вовсе.pmg usability audit 6Под каждую заметку нужно создавать отдельную страницу — аудитория кликает по ним, чтобы узнать больше.pmg usability audit 7

Версия для ПК — https://pmg.ua/

  1. Блок рекламы на сайте не является основным контентом. Он лишний вверху страницы.pmg usability audit 8
  2. Не все баннеры отображаются. Такое может случиться, если баннеры работают на FLash-технологии. Рекомендуется изменить используемую технологию или убрать места для баннеров вообще.pmg usability audit 9
  3. Разнообразие стилей на сайте может пользователя запутать. Изображение новости следует выводить над текстом, а не после него, поддерживая единый стиль.pmg usability audit 10
  4. При клике подтягивается анкорная ссылка “Вверх”. На деле это выглядит так: если картинку закрыть, то пользователь неожиданно для себя окажется на первом экране страницы, что его дезориентирует. Страница должна оставаться на месте, никаких анкорных ссылок, привязанных к ее началу, быть не должно.pmg usability audit 12
  5. Много кликов по переключателю, а по самой картинке — мало. Добавить призыв к действию: “Подробнее”, или иконку “Увеличить”.pmg usability audit 13
  6. Есть клики по неактивной картинке. Можно это использовать, поставив на нее полезную ссылку. Например “Подписаться на новости”.pmg usability audit 14
  7. Судя по тому, что по меню мало кликов мало, люди приходят на сайт, чтобы почитать последние новости. На этом можно сделать акцент, создав блоки последних и актуальных новостей. Можно сделать выезжающее меню, спрятав его за кнопку. Вместо выделения цветом можно ее немного увеличить. Оно будет скрываться во время просмотра, тем самым не отвлекая от контента.pmg usability audit 16
  8. Крайне низкая активность кнопок в шапке. Их можно тоже спрятать за кнопкой “Меню”.pmg usability audit 17
  9. Много кликов по логотипу на главной. Это может означать, что пользователи не могут сориентироваться, что они и так на главной. На такой клик можно добавить вызов меню и посмотреть, как изменится количество кликов и переходов.pmg usability audit 18
  10. В правой и центральной части дизайн сливается или аудитории информация, расположенная здесь, не интересна — пользователи делают здесь меньше кликов. Эти части нуждаются в переработке дизайна. Лучше сделать блоки с разным фоном, чтобы отделить их друг от друга, тем самым привлекая внимание к области и повышая взаимодействие.pmg usability audit 19
  11. На баннерах нет призыва к действию, из-за чего по ним не кликают. Призыв к действию на рекламных и важных материалах привлекает и концентрирует внимание: пользователь получает конкретную команду, что он может сделать. Поэтому на баннеры и добавляются смысловые призывные надписи “Купить”, “Акция”, “Билеты” и т.д. Если баннеры предоставляются рекламодателем — условия наличия призыва к действию должно быть прописано в рекламном УТП.pmg usability audit 20

Мобильная версия — Новости

  1. Функционал, заявленный в этом тексте не работает на мобильной версии и лишь занимает место, увеличивая количество экранов для прокрутки. Если функция не работает — ее быть не должно.pmg usability audit 21
  2. Firebug выявил большое количество ошибок в коде страницы. Пользователям это не мешает — картинка для них вполне приемлема. Чего не скажешь о поисковых роботах.pmg usability audit 22Боты отдельно читают код, подобно тому, как мы читаем книги — сверху вниз. Дизайн они смотрят уже отдельно от кода, вторым заходом. Как бы воспринималась книга, если бы в ней было много опечаток, неуместных оборотов и непонятных терминов без примечаний? Такую книгу хотелось бы сжечь, даже если картинки там вполне себе ничего.
    То же самое хотят и роботы, когда видят ошибки в коде. Поэтому код должен быть вычищен и оптимизирован по правилам “важное — вверх, скрипты и второстепенное — вниз”. Страница будет загружаться быстрее, что добавит баллов к ее ранжированию. Досадно будет потратить многотысячные бюджеты на продвижение и рекламу, когда можно было обойтись силами одного разработчика с прямыми руками.
    Пользователи кликают по тегам темы, чтобы найти похожие статьи. Стоит выделить этот блок и активно использовать метки, сформировав объемное облако тегов. Это увеличит количество переходов.pmg usability audit 23
  3. Поле поиска не очевидно, из-за чего его мало используют, а ведь это — тоже инструмент увеличения переходов.pmg usability audit 24Следует сделать его более заметным, например, перенести в другое место и использовать иконографику, как здесь.pmg usability audit 25Уважающий себя сайт предоставляет пользователю возможность выбрать, как он хочет просматривать информацию — постранично или подгружая данные ниже, как бы разворачивая свиток. Второй способ относительно нов в веб-дизайне и если пользователь не видит привычных переходов на новые страницы с цифрами “1, 2, 3”, он может страницу закрыть вовсе. Что и происходит со страницей “Новости”, где не реализована пагинация.pmg usability audit 26Привычная пагинация может заметно снизить процент отказов
  4. Располагать на странице виджет социальных сетей уже считается моветоном, поскольку он занимает много места и создаёт шум на странице. В случае мобильной версии — не каждый телефон может этот виджет отобразить. Для новостного портала лучше будут работать иконки “Поделиться новостью в социальных сетях” после текста записи. Если пользователю понравится новость — он поделится ею в своем профиле.pmg usability audit 27

Версия для ПК — Новости

  1. Если на сайте больше одной статьи о каком-то событии или человеке, для него должен быть отдельный тег, ведущий на страницу со всеми новостями о нем.В примере ниже предлагаем создать метку “Алексей Фазекош”.pmg usability audit 29
  2. Ссылка на страницу категории должна быть активной, чтобы пользователь мог на нее кликнуть и перейти в интересующий его раздел, как здесь.pmg usability audit 30
  3. Блок рекламы активен. Большое количество рекламы пугает пользователей. Этот блок лучше убрать с сайта или сделать неактивным.pmg usability audit 31
  4. Изображение привлекает больше внимания, чем текст. Даже если его расположить на цветном фоне. Это следует учитывать и не забывать добавлять для новости уникальную, но релевантную картинку. Подойдет даже картинка-заголовок с видео новости. Это увеличит привлекательность самой записи.pmg usability audit 32

Версия для ПК — Страница категории — https://pmg.ua/crime

  1. Если нет лайков и комментариев, то лучше не портить впечатление о посещаемости сайта и убрать запись.pmg usability audit 33
  2. Блок рекламы лучше фиксировать, чтобы не было пустот на странице.pmg usability audit 34
  3. Есть участки, где можно добавить блок новостей.pmg usability audit 35
  4. Есть множество интересных решений для таких пустот: “Интересное за месяц”, “Сейчас обсуждают”. В них можно выводить список ТОП-новостей с максимальными просмотрами и “вечнозеленые” статьи, обеспечивающие поисковый трафик.pmg usability audit 36
  5. С 2017 года социальная сеть ВКонтакте недоступна на территории Украины. Это значит, что виджет социальной сети на любом сайте будет висеть ошибкой, если пользователь просматривает его на территории Украины. Поэтому его лучше убрать, чтобы не создавать негативный опыт.pmg usability audit 37
  6. Все блоки новостей однотипны. Единство стиля — вещь ценная, но на новостном портале информации много, и без акцентов все превратится в однообразную простыню, сложную для восприятия. Пользователю становится не за что зацепиться взглядом, просматривая страницу. Нужно расставить акценты, выделяя новости в отдельные блоки: “Сейчас обсуждается”, “Последние новости” и т.д. Так пустое пространство в середине страницы, где мало кликов, заполнится полезной информацией.pmg usability audit 38
  7. Выделить блок цветом, чтобы увеличить количество кликов.pmg usability audit 39

Выводы

Образно говоря, юзабилити-аудит — это проверка, где пользователи делают клики, что ищут, как путешествуют по сайту. Эти простые, но важные действия называются “пользовательским опытом”. От него зависит, какое мнение будет у пользователя о сайте, сколько времени он на нем проведет и вернется ли обратно. А эти показатели — время просмотра страницы, количество переходов, отказы — влияют на будущую позицию сайта в поисковой выдаче.

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

SEO и юзабилити аудит сайта: чек-лист 50+ ошибок на примере Kidsi.com.ua

SEO и юзабилити аудит сайта: чек-лист 50+ ошибок на примере Kidsi.com.ua

Перейти
plerdy iboxstore ux audit

Аудит юзабилити для мобильной версии Интернет-магазина https://www.iboxstore.com/

Перейти
iboxstore usability audit 11

Аудит юзабилити для Интернет-магазина https://www.iboxstore.com/ на основе карты кликов Plerdy

Перейти
ux audit apple

Пример юзабилити аудита на основании сайта apple.com

Перейти

Аудит юзабилити сайта CMS на основе карты кликов

Перейти
Аудит юзабилити фирменного сайта на основе карты кликов Plerdy

Аудит юзабилити фирменного сайта на основе карты кликов Plerdy

Перейти
Lower the Bounce Rate of a Page With PopUp Forms

Уменьшение показателя отказов на странице с помощью умных форм

Перейти
Приклад юзабіліті аудиту сторінки інтернет-магазину

Пример юзабилити аудита страницы интернет-магазина

Перейти
Пример юзабилити аудита страницы туристической компании

Пример юзабилити аудита страницы туристической компании

Перейти
Кейс: анализ юзабилити сайта

Кейс: анализ юзабилити сайта "WebPromoExperts" на основе карты кликов

Перейти
Категории блога
Статьи из блога