Кейсы

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

02 October, 2018

Audit of usability of a branded site-60

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

Именно таков фирменный сайт https://englishstudent.net — официальное представительство производителя карточек для изучения английских слов. Веб-ресурс имеет простую навигацию и современный дизайн. Однако мы решили проанализировать его с помощью карт кликов и выявить сильные и слабые стороны юзабилити.

Методология юзабилити аудита

В основе данного подхода лежал принцип анализа наиболее кликабельных страниц сайта.

Для этого был выбран период с 1 июля по 5 августа 2018 г.

Первоначально необходимо было определить перечень страниц для юзабилити аудита.

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

Audit of usability of a branded site-01

Мобильный трафик генерирует 37% кликов. Как видим две первые страницы имеют больше кликов:

Audit of usability of a branded site-02

Мы включим их в наш аудит.

Теперь посмотрим на сводную статистику по карте скроллинга:

Audit of usability of a branded site-03
Немало страниц имеют взаимодействие с контентом не только в первых 20% экрана (на скриншоте — это ячейки красного цвета). Их следует исследовать, ведь посетители внимательно читали эти страницы.

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

Как показывает отчет в Google Analytics более 2000 кликов было сделано посетителями, которые пришли благодаря рекламе в контекстно-медийной сети, но в итоге ничего не приобрели:

Audit of usability of a branded site-04

Очевидно, что это была незаинтересованная аудитория. Видим также статистику в кабинете Plerdy:

Audit of usability of a branded site-05

Итак, в результате оценки ситуации, мы остановились на том, что к юзабилити аудита войдут страницы:

  • главная;
  • карточек с товарами (как в версии для компьютеров, так и для смартфонов);
  • теста;
  • блога;
  • корзине.

Аудит страниц основной версии сайта

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

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

В первую очередь рассмотрим русскоязычную страницу.

Учитывая то, что кнопка «Главная» в меню ведет на страницу с категориями это увеличивает путь к покупке:

Audit of usability of a branded site-06

Если включить клики по этому элементу на всех страницах сайта, увидим, что кнопка имеет 397 кликов:

Audit of usability of a branded site-07

Это означает, что на всех страницах такого же типа (там, где есть такое меню) пользователи переходили на главную. Этот элемент в дизайне лишний, потому что увеличивает путь к покупке.

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

Audit of usability of a branded site-08

В то же время посетители русскоязычной страницы переходят на украинскую и английскую страницы:

Audit of usability of a branded site-09

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

Audit of usability of a branded site-10

На главной странице есть место, которое собирает клики, но которое, при этом, никуда не ведет. Это текст с уточнением, что карты доступны только на украинском:

Audit of usability of a branded site-11

Посетители сайта воспринимают данный текст как возможность переключить язык. Здесь может быть размещена ссылка, которая будет вести посетителей на версию сайта на украинском.

В верхней части главной страницы есть изображение:

Audit of usability of a branded site-12

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

Audit of usability of a branded site-13

Рекомендуем на картинке по центру также добавить всплывающую подсказку с кратким описанием преимуществ:

Audit of usability of a branded site-14

Можно увеличить кнопки с «плюсиками» (по нажатию разворачивается подсказка). Ими пользуются часто и небольшое увеличение позволит больше привлекать внимание к блоку:

Audit of usability of a branded site-15

Страница с перечнем категорий

Главная страница имеет 3 языковые версии: английскую, украинскую и русскую.

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

Из скриншота ниже можно увидеть, что пользователи, которые все же начинали знакомство с сайтом на главной, переходили дальше — к категориям товаров (в нашем случае — группы карточек для изучения английского языка):

Audit of usability of a branded site-16

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

Audit of usability of a branded site-17

Страница категорий товара

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

Audit of usability of a branded site-18

Чуть ниже на странице находится наиболее кликабельный элемент:

Audit of usability of a branded site-19

Он привлекает внимание, поэтому здесь было бы уместно добавить кнопку с призывом к действию:

Audit of usability of a branded site-20

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

Audit of usability of a branded site-21

В блоке с отзывами один элемент — крестик для закрытия окна. Он закреплен в правом верхнем углу:

Audit of usability of a branded site-22

Поскольку окно длинное (его можно проскролить вниз) — для удобства лучше крестик закрытия окна сделать «плавающим», чтобы пользователь мог закрыть его в любой момент.

Страница карточек для детей

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

Audit of usability of a branded site-23

и украиноязычной версий:

Audit of usability of a branded site-24

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

Одного из товаров временно нет в наличии:

Audit of usability of a branded site-25

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

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

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

Audit of usability of a branded site-26

Иными словами, все «сыгранные» карточки должны были быть обозначены серым цветом.

Зато карты, которые уже «сыграли» в тесте подсвечиваются синим цветом, если ответ дан правильно или красным, если — нет:

Audit of usability of a branded site-27

Это также возможное решение, но визуально лучше дополнительно обозначать карточки в «отбое».

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

Audit of usability of a branded site-28

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

Привлекло наше внимание и то, что тест можно просто «прокликать», нажимая на кнопку «Далее». Даже если до этого не был выбран ни один ответ:

Audit of usability of a branded site-29

Лучше реализовать это таким образом, чтобы кнопка “Далее” была активной только после того, как были даны ответы по всем карточкам на странице.

По завершению теста, посетителю сайта предлагается пройти его еще раз. Таким образом, потенциальные покупатели вместо заказа, возвращаются к началу тестирования:

Audit of usability of a branded site-30

Вместо того, чтобы предлагать пройти тест еще раз, мы бы рекомендовали привлечь больше внимания на кнопку «Заказать». Для этого необходимо убрать возможность повторного прохождения теста.

На этой же странице есть показатель «честности», но здесь нет никаких объяснений, что это:

Audit of usability of a branded site-31

Страница теста «Бизнес & IT» и страницы других языков

На всех этих страницах нет ни отзывов, ни видео с презентацией карточек. На самом деле, это такие же карточки как и те, с которых начиналось знакомство с сайтом. Значит стоит добавить все те блоки, которые мы уже увидели в разделе «Английский».
страница блога.

Первое, что бросается в глаза — неполное главное меню:

Audit of usability of a branded site-32

Последняя кнопка «Контакты» не собирает достаточно кликов, поэтому ее можно убрать:

Audit of usability of a branded site-33

Второе — однообразный, не оформленный текст в статьях:

Audit of usability of a branded site-34

Читать его сложно. Здесь стоит добавить заголовки и подзаголовки, использовать отступы, маркированные списки и тому подобное. Словом, текст должен быть читаемым.

Внизу (под каждой статьей) есть окно для комментариев. Среди полей для заполнения является и лишний строку «Сайт»:

Audit of usability of a branded site-35

На самом деле, у большинства посетителей нет собственных сайтов. И даже если бы и были — здесь это не имеет никакого смысла.

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

Audit of usability of a branded site-36

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

Один из элементов, который в блоге нет никакой ценности и в основной, и в адптивний версиях — это информация об авторе (в нашем случае есть только один автор) и месяц и год публикации (большинство статей не утратят актуальности и через несколько лет):

Audit of usability of a branded site-37

В шапку сайта (и для основной версии, и для адаптивной) можно добавить предложение пройти тест на определение уровня английского:

Audit of usability of a branded site-38

Это увеличит количество переходов и интерес к теме. Оптимизированная страница теста уже будет «продавать» сам товар.

Страница корзины

Страница корзины — одна из важнейших, ведь посетители, которые готовы приобрести товар, должны сразу понимать как происходит оформление, оплата и доставка.

В этом проекте рекомендуем организовать подачу информации в две колонки, что упростит восприятие информации:

Audit of usability of a branded site-39

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

Audit of usability of a branded site-40

Все дополнительные продажи следует вынести за пределы корзины, а посетителей сайта мотивировать приобрести дополнительные товары с помощью всплывающих поп-апов.

Критически важной для корзины является информация об оплате за доставку. Многие отказы на этом этапе были вызваны именно непониманием кто должен оплачивать доставку и в пределах какой суммы она будет?

О полях про заказчика. Мы обратили внимание на то, что во время первой попытки заполнить, немало пользователей игнорируют первые 2 поля:

Audit of usability of a branded site-41

Однако уже после того, как они нажимают «Оформить заказ», подсказки говорят, что все таки для оформление должны быть заполнены все поля:

Audit of usability of a branded site-42

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

Также мы рекомендуем подключить модуль «Новой Почты» для автозаполнения полей о доставке (город, улица, номер отделения):

Audit of usability of a branded site-43

Аудит страниц адаптивной версии сайта

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

Стоит помнить также и то, что у пользователей мобильных устройств несколько иные особенности поведения, чем у пользователи, которые заходят на сайт с компьютеров.
Меню
Большинство адаптивных версий сайтов имеют меню, которое разворачивается после нажатия на специальную кнопку — «гамбургер».
Наш проект не является исключением.

После открытия бокового меню, мы обратили внимание на 3 момента:

1. Для увеличения кликов в меню стоит добавить надпись «Меню» возле пиктограммы «Гамбургер» и объединить их одно событие на клик:

Audit of usability of a branded site-44

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

2. Поле «Главная» не нужна:

Audit of usability of a branded site-45

3. Поле для закрытия меню мы рекомендуем заменить на более стандартный «крестик» (который уже традцийно используется как элемент для закрытия окон):

Audit of usability of a branded site-46

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

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

Audit of usability of a branded site-47

2. Подсказки на картинках (обозначены значком «плюс») не срабатывают в адаптивной версии сайта. Хотя клики по ним зафиксированы:

Audit of usability of a branded site-48

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

Audit of usability of a branded site-49

Наша рекомендация — изменить расположение на горизонтальное и добавить стрелки переключения «вправо» и «влево». Таким образом пространство на странице будет оптимизировано.

Сразу под этим показывается две стороны одной (случайной) карточки. Как видим, наиболее кликабельна оказалась стрелка «вправо»:

Audit of usability of a branded site-50

Соответственно этот блок лучше было бы подать в формате слайдера.

Карточка товара

На карточке товара достаточно плохо работает иллюстрация:

Audit of usability of a branded site-51

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

На странице находится кнопка для связи онлайн. Однако она теряет свой смысл, если в действительности никто не сможет ответить оперативно на вопросы потенциального клиента:

Audit of usability of a branded site-52

Мы рекомендуем убрать такую ​​форму общения, если нет менеджера, готового отвечать на вопросы посетителей.

Корзина

В адаптивной версии мало кликов на корзину (за выбранный период всего 28):

Audit of usability of a branded site-53

Наша рекомендация: сделать корзину таким же цветом, как и для основной версии сайта.

Как и в основной версии сайта, адаптивная имеет очень перегружен корзина — здесь показываются все имеющиеся единицы товара:

Audit of usability of a branded site-54

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

Как видим, процесс оформления идентичен тому, который видели в основной версии сайта:

Audit of usability of a branded site-55

То есть пользователи не воспринимают сразу того, что все поля обязательны для заполнения. Мы рекомендуем добавить напоминание об обязательном заполнения до того, как потенциальный клиент нажмет на кноку «Оформить заказ».

Страница теста

На странице теста исчезает пиктограмма корзины. Вероятно, это просто ошибка:

Audit of usability of a branded site-56

Страница блога

Обычная страница с текстом в блоге читается очень трудно:

Audit of usability of a branded site-57

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

Краткий итог

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

Некоторые из советов являются универсальными и могут быть использованы для других проектов.

Если вы планируете провести юзабилити аудит самостоятельно, обратите также внимание на:

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

Перейти
pmg usability audit m

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

Перейти

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

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

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

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

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

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

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

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

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

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