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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Верстка

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

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

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

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

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

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

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

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

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

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

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

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

Get new case studies by email:

More Case Studies

See all