Аудит юзабилити интернет-магазина товаров для дома

Логотип и слоган

Логотип сайта является важным элементом оформления сайта. Он должен быть уникальным, соответствовать корпоративному стилю и оформлению сайта.

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

К сожалению, в данный момент, часть этих требований не выполнена.

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

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

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

Краткий слоган, отражающий суть предлагаемых товаров и услуг, также в данный момент отсутствует. Хотя ниже в тексте явно указано – «Интернет магазин товаров для дома».

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

Компоновка верхней части главной страницы.

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

Разная ширина левого и правого поля.

Не согласовано взаимное расположение верхних полей блоков.

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

Навигация по сайту

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

Рассмотрим, насколько выполнены эти требования на сайте lovetta.ru.

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

Аналогичная ситуация и с оформлением ссылок второго уровня.

Это продемонстрировано на видео по ссылке https://yadi.sk/i/8S1OwCW1peSqA .

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

Также вызывает вопрос целесообразности выделения основных разделов каталога (органайзеры для обуви и сумок, путешествий и т.д.) в подменю третьего уровня. Согласно данным Яндекс.Метрики страницу «Ланч-боксы для еды» посещают всего 1,09% пользователей сайта.

При этом страницу с органайзерами для нижнего белья (http://www.lovetta.ru/collection/organayzery-dlya-nizhnego-belya) , которая расположена в подменю третьего уровня посещает 3% пользователей сайта.

Это также подтверждается и данными карты ссылок для страницы http://www.lovetta.ru/collection/sistemy-hraneniya. Видео можно увидеть по ссылке https://yadi.sk/i/WIuzWfPzpehSh.

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

Также следует отметить, что в данный момент в выпадающих подменю не выделяется текущий раздел сайта. Это продемонстрировано на видео по ссылке https://yadi.sk/i/pUMToa_Vpegah.

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

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

http://www.lovetta.ru/collection/organayzery – https://yadi.sk/i/x6edDT97peiaQ

http://www.lovetta.ru/collection/mebel – https://yadi.sk/i/oNORaU7zpeirU

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

Часть ссылок на сайте оформлено как обычный текст. Ниже представлены скриншоты таких элементов:

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

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

Юзабилити каталога товаров

Согласно данным Яндекс.Метрики за последний квартал, наиболее популярными являются следующие страницы:

Юзабилити страниц каталога будем рассматривать на примере раздела http://www.lovetta.ru/collection/tkanevye-shkafy.

При загрузке страницы в соответствующем поле не указано, по какому принципу выполнена сортировка товаров.

В поле выбора количества товаров указано «15», но на странице выводится 30. Это показано на скриншоте по ссылке https://yadi.sk/i/yJh2N3SkpbXeE.

Рекомендуем устранить данную ошибку.

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

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

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

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

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

Рекомендуем вместо маркера «Есть на складе» добавить кнопку «Купить в один клик».

Также не совсем понятно, для чего сделано дублирование одной и той же информации – кнопки «В корзину» с меткой «Есть на складе» в одном случае и кнопки «Под заказ» с меткой «Нет на складе» – в другом.

На странице детального просмотра товара не совсем корректно работает навигационное меню по типу «хлебные крошки», которое информирует посетителя о его текущем местоположении относительно главной страницы сайта.

Для примера разберем работу этого элемента на странице http://www.lovetta.ru/collection/universalnye-organayzery/product/3-universalnyh-organayzera-na-33-boksa-blue-line .

Непонятно, почему выделено жирным шрифтом название категории товара:

Ссылки и обычный текст оформлены одинаково.

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

В данном элементе должно использоваться сокращение слова «Количество» в виде «Кол-во», а не «Кол-ва».

Также непонятно, для чего данное сокращение сделано ссылкой, которая не несет никакой функциональной нагрузки.

Далее рассмотрим юзабилити корзины и процесса оформления заказа.

В корзине большую часть блока с фото занимает маркер наличия товара на складе. Изображение товара сделано слишком маленьким и второстепенным.

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

Непонятно, это ссылки или текст.

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

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

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

На странице оформления заказа непонятно, является ли этот элемент заголовком или ссылкой на соответствующую страницу.

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

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

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

Непонятно, что обозначают звездочки рядом с названиями полей.

Сообщения об ошибках в заполнении полей выводится в верхней части формы, а не рядом с соответствующими полями.

При подсветке ошибочных полей увеличивается их высота и ширина. Из-за этого дизайн формы разваливается.

В списке регионов доставки неверно используются сокращения. Должно быть: «г.Москва», «Московская обл.», «Республика Алтай», «Алтайский край» и т.д.

Непонятно, почему если выбран город в выпадающем списке регионов, его повторно необходимо вводить в поле «Город/Район».

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

Доступность контактной информации

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

К сожалению, в данный момент в верхней части сайта есть только номера телефонов.

Рекомендуем меню разместить снизу под логотипом, а рядом с номерами телефонов добавить email адрес.

На странице «Контакты» http://www.lovetta.ru/page/kontakty обычный текст оформлен как ссылки.

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

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

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

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

В данный момент на странице контактов отсутствуют карты или схемы проезда к представительствам магазина в Москве и Питере.

Рекомендуем разместить на странице контактов интерактивную карту на базе сервиса Яндекс.Карты.

Также в данный момент отсутствует форма обратной связи для отправки сообщений и заявок прямо со страницы контактов. Она есть только на подстранице http://www.lovetta.ru/page/feedback. Рекомендуем добавить такую форму на сайт.

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

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

При этом наиболее высокий показатель отказов и наименьшее время просмотра страниц у пользователей, использующих смартфоны.

Причина – в данный момент сайт абсолютно не оптимизирован для работы со смартфонами.

Для примера по ссылке https://yadi.sk/d/gZ5sOWAHpfy2q показаны скриншоты некоторых страниц при просмотре сайта с iPhone.

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

С радостью отвечу на Ваши вопросы по результатам аудита по email, skype или телефону.