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

Аудит юзабилити №478

Дата аудита: ноябрь 2017 года

Объем отчета: 22 страницы 

 

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

Содержание

1. Вводная информация

2. Базовая статистика сайта

3. Первый шаг оформления заказа

4. Второй шаг оформления заказа

5. Третий шаг оформления заказа

6. Четвертый шаг оформления заказа

7. Пятый шаг оформления заказа

8. Шестой шаг оформления заказа

9. Седьмой шаг оформления заказа

10. Навигационная цепочка

11. Верстка

12. Общие итоги и выводы

Вводная информация

В данном отчете приведены детальные описания основных проблем, скриншоты сайта и дополнительные видео с демонстрацией выявленных недостатков.

Перед просмотром дополнительных материалов их желательно скачивать на компьютер.

Также по всем выявленным проблемам даны рекомендации по их устранению.

Красным текстом и красными маркерами выделены обнаруженные ошибки и важная информация.

Базовая статистика сайта

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

Сайт просмотрело 9920 человек, общее число визитов составило 12742:

В годовом разрезе наблюдается существенное снижение числа посетителей:

Источники трафика распределены следующим образом:

Основной источник трафика – прямые заходы. На втором месте – переходы из поисковых систем.

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

Наилучшие показатели по глубине просмотра у пользователей с платной рекламы.

Подавляющее большинство поискового трафика идет из Google:

В годовом разрезе наблюдается существенное падение поискового трафика:

Основной источник рекламного трафика – Яндекс.Директ.

Абсолютное большинство посетителей заходит на сайт из России:

Распределение посетителей по городам:

Основной поток трафика идет из Москвы. На втором месте Санкт-Петербург:

Распределение аудитории сайта по возрастным группам:

Основная возрастная группа посетителей от 25 до 34 лет. На втором месте (20%) посетители от 18 до 24 лет.

Аудитория сайта практически одинаково распределена между мужчинами и женщинами:

Распределение пользователей по типу используемых устройств:

Подавляющее число пользователей просматривают сайт с ПК.

Используемые браузеры:

Самый высокий показатель отказов у пользователей браузеров семейства Safari:

Отдельно стоит отметить, что в данный момент не заданы цели в настройках Яндекс.Метрики. Это снижает эффективность всей системы статистики и делает невозможным более детальный анализ конверсии сайта.

Рекомендуем произвести дополнительную тонкую настройку Яндекс.Метрики для сбора данных по целям и всей воронке продаж.

Первый шаг оформления заказа

Ссылки на странице не реагируют на наведение курсора.

Видео: https://yadi.sk/i/igHvXTXK3Q3ncM.

Рекомендуем сделать ссылки интерактивными и изменять текст при наведении курсора (например, убирать подчеркивание или менять цвет).

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

Рекомендуем привести название страницы в навигационной цепочке в соответствие с ее заголовком и контентом.

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

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

Рекомендуем устранить выявленные ошибки.

Второй шаг оформления заказа

При переходе на второй шаг открывается страница https://photoshop-master.org/cart/delivery-version.html с выбором способа доставки цифрового товара. Но название страницы в навигационной цепочке не соответствует заголовку и контенту страницы.

Видео: https://yadi.sk/i/j9-qN4oL3Q889M.

Рекомендуем привести название страницы в навигационной цепочке в соответствие с ее заголовком и контентом.

При наведении курсора на данные элементы указатель меняется, а реакции самого элемента нет.

Видео: https://yadi.sk/d/CQJdq2Am3Q8924.

Рекомендуем сделать данные элементы интерактивными и менять их дизайн при наведении курсора.

Согласно правилам, допустимыми являются оба варианта написания слова «флЕшка» или «флЭшка». Но рекомендуем использовать на странице один из вариантов, а не оба сразу.

Третий шаг оформления заказа

Независимо от выбранной версии товара на следующем шаге открывается страница с вводом email.

Видео: https://yadi.sk/i/77YBPOK-3Q8AmQ.

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

Видео: https://yadi.sk/i/2-O0ze9f3Q8B2d.

Рекомендуем привести название страницы в навигационной цепочке в соответствие с ее заголовком и контентом.

Ссылка «Вернуться назад» не реагирует на наведение курсора.

Видео: https://yadi.sk/i/390qQd883Q8BEV.

Рекомендуем сделать данную ссылку интерактивной и убирать подчеркивание при наведении курсора.

В первом случае «email» написано слитно, во втором через дефис. Рекомендуем придерживаться одного из этих вариантов.

Список стран содержит избыточное количество стран, заказы из которых маловероятны. Такой длинный список создает впечатление сложности оформления заказа. Как говорилось выше в аудите, абсолютное большинство посетителей из России, Украины, Казахстана и Беларуси. Вероятность заказа доставки флешки с уроками в Уганду, Сирию или Японию практически нулевая.

Видео: https://yadi.sk/i/18inOMNS3Q8CMc.

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

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

Видео: https://yadi.sk/i/KKImvqKH3Q8Diq.

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

Видео для Москвы: https://yadi.sk/i/Yqfzvogc3Q8EEP.

Видео для Питера: https://yadi.sk/i/NUdPI1993Q8FFF.

Есть ошибки логики работы списков для некоторых стран.

Например, при выборе страны «Казахстан» в списке выбора региона также есть «Казахстан».

Видео: https://yadi.sk/i/fZNXgyUW3Q8MPk.

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

При этом на странице есть второй и более простой для пользователя способ прямого ввода названия региона и города.

Видео: https://yadi.sk/i/gj_Yv67c3Q8Myd.

Рекомендуем упростить процесс ввода страны и города доставки.

Четвертый шаг оформления заказа

На данном этапе происходит выбор способа доставки.

Видео: https://yadi.sk/i/68WqkrcH3Q8NWA.

Следует отметить, что переход на страницу со способами доставки осуществляется достаточно долго (более 5 секунд). Это отрицательно сказывается на юзабилити. На видео показана работа модуля для Москвы.

Видео: https://yadi.sk/i/MUIeGs9V3Q8Pfd.

Рекомендуем обеспечить максимальное быстродействие работы программной части сайта. Время загрузки следующей страницы не должно превышать 1-1.5 сек.

Данные элементы не реагируют на наведение курсора.

Видео https://yadi.sk/i/FIV560yF3Q8Q4z.

Рекомендуем сделать их интерактивными.

Ссылка «Вернуться назад» также не реагирует на наведение курсора.

Видео: https://yadi.sk/i/tseBmlRM3Q8QJs.

 

Рекомендуем убирать подчеркивание при наведении курсора.

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

Рекомендуем расширить набор возможных способов доставки флешки с уроками и мастер-классами.

Пятый шаг оформления заказа

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

Количество доступных способов оплаты достаточно широко и обеспечивает выбор наиболее выгодного для пользователя способа оплаты.

Отрицательным с точки зрения юзабилити является необходимость вертикальной прокрутки страницы для просмотра всего списка, т.к. он по высоте не помещается на один экран. Полный скриншот страницы приведен по ссылке https://yadi.sk/d/AFUnOVcK3Q8RRy.

Видео: https://yadi.sk/i/JaaS_aYd3Q8RZN.

Шестой шаг оформления заказа

На данном этапе выводится корзина со списком товаров.

При добавлении нескольких товаров в корзину на первом экране не видна общая сумма покупки, размер скидки и итоговая сумма к оплате. Эту информацию можно найти только воспользовавшись вертикальной прокруткой страницы. Это отрицательно сказывается на юзабилити. Скриншот страницы показан по ссылке https://yadi.sk/i/DuCrrqYE3Q8SBi

Видео: https://yadi.sk/i/LBprbAIU3Q8WrJ.

Рекомендуем продублировать данную информацию в верхней части сайта.

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

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

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

Видео: https://yadi.sk/i/qcA4D7nI3Q8XLh.

Седьмой шаг оформления заказа

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

Не совсем понятно, что обозначает термин «Нестандартный адрес».

Видео: https://yadi.sk/i/8TYPHetw3Q8Y6t.

Форма содержит большое количество обязательных полей. Это создает ощущение сложности оформления заказа и крайне отрицательно сказывается на юзабилити. Вся форма не помещается на один экран и страница имеет избыточную высоту. Полный скриншот приведен по ссылке https://yadi.sk/i/B-BuAY1y3Q8YSH.

Видео: https://yadi.sk/i/B-BuAY1y3Q8YSH.

Рекомендуем пересмотреть набор обязательных полей и максимально упростить процесс добавления адреса.

Ссылки не реагируют на наведение курсора:

Видео: https://yadi.sk/i/9AN4-Pw73Q8Ym5.

Рекомендуем сделать ссылки интерактивными.

При нажатии на ссылку открывается окно с дополнительной текстовой информацией. Справа присутствует полоса вертикальной прокрутки. Скриншот приведен по ссылке https://yadi.sk/i/y17e1CXq3Q8Z2B.

Видео: https://yadi.sk/i/a_myZhxU3Q8ZCK.

Рекомендуем обеспечить вывод информационного окна без полосы прокрутки.

Нет проверки правильности ввода данных в поля формы. Например, удалось успешно оформить заказ с некорректными данными.

Видео: https://yadi.sk/i/1U8F0Y1B3Q8Zds.

Рекомендуем добавить скрипт проверки правильности данных непосредственно в процессе заполнения полей.

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

Рекомендуем уменьшить ширину полей и пересмотреть компоновку формы.

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

Рекомендуем сделать поле почтового индекса необязательным либо допускать его пустое значение, если польщователь его не знает.

В поле ввода нестандартного адреса есть проверка только по количеству символов (не менее 4). Рекомендуем добавить проверку наличия букв.

Видео: https://yadi.sk/i/yssEOURR3Q8adf.

Навигационная цепочка

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

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

Видео: https://yadi.sk/i/vJomAff-3Q8ghs

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

Верстка

При изменении ширины окна браузера наблюдаются ошибки в выводе некоторых элементов сайта.

Обрезается текст «Корзина».

Видео: https://yadi.sk/i/_6SM9UQl3Q8guc.

Кнопки пересекаются, текст в одной из них обрезан.

Видео: https://yadi.sk/i/vwNnZZ4-3Q8h8Q.

Рекомендуем обеспечить правильное отображение всех элементов независимо от размеров экрана.

Общие итоги и выводы

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

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

Требуется заполнение большого количества полей разных форм.

Есть ряд недоработок в оформлении и работе навигационных элементов.

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

Также в данный момент не выполнены настройки Яндекс.Метрики, которые бы позволили провести более глубокий анализ всей конверсионной цепочки.

Готов ответить на все вопросы по результатам аудита в скайпе, email или по телефону.

 

Get new case studies by email:

More Case Studies

See all