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

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

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

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

Не совсем понятно, почему данные разделы в главном меню выделены цветом (через один).

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

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

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

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

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

Текущий раздел сайта не выделяется в главном меню. Пользователю сложно понять, в каком разделе сайта он находится в конкретный момент времени. Например, на скриншоте ниже показан вид подменю при переходе на страницу каталога «Сладкие букеты» http://fruttiflowers.ru/katalog/sladkie-bukety.

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

При переходе в подкатегорию каталога (например, «Фруктовые букеты» http://fruttiflowers.ru/katalog/fruktovye-bukets ) название подкатегории не выводится в навигационной цепочке.

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

В каталоге данный элемент правильно работает только на странице поиска http://fruttiflowers.ru/katalog/poisk-po-sajtu.

Для других разделов сайта вспомогательная навигация работает верно. Например, ниже приведен скриншот со страницы «Сотрудничество» http://fruttiflowers.ru/o-nas/sotrudnichestvo .

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

Для примера по ссылке https://yadi.sk/i/nYiBRXdknYgSo показано поведение элементов главной страницы при наведении курсора.

Аналогичная проблема наблюдается и на странице детального просмотра выбранного букета (например, http://fruttiflowers.ru/katalog/sladkie-bukety/veselchak ). Это продемонстрировано на видео по ссылке https://yadi.sk/i/1Ie2-Kv9nYhCU .

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

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

• Главная страница https://yadi.sk/i/O4iIM4aanYkjg
• Страница просмотра категории каталога (http://fruttiflowers.ru/katalog/fruktovye-bukets) https://yadi.sk/i/yfufQCgnnZb3n
• Страница детального просмотра (http://fruttiflowers.ru/katalog/fruktovye-bukets/derevo-zhelanij) https://yadi.sk/i/VRI7yNhDnZbA3

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

• Главная страница https://yadi.sk/i/slPKFezenZboT
• Страница просмотра категории каталога https://yadi.sk/i/sJXo6YTUnZchL

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

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

В данный момент отсутствует четкое позиционирование сайта. Непонятно, это интернет-магазин, каталог или сайт-визитка.

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

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

Кнопки прокрутки баннера практически не видны. Из-за этого по ним очень мало кликов.

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

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

Фоновое изображение в верхней части страницы имеет ширину 1400 пикселей и при просмотре сайта на мониторе с большим разрешением экрана по бокам появляются пустые белые зоны. Из-за этого дизайн выглядит незавершённым https://yadi.sk/i/J1UgM8l0nbFch .

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

Контактная информация

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

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

Адрес электронной почты сделан в виде обычного текста, а не ссылки.

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

На странице контактов отсутствует форма отправки сообщения.

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

Также в данный момент на сайте нет возможности связаться с менеджером с помощью современных мессенджеров Skype, Viber и WatsApp.

Формы регистрации и входа на сайт

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

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

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

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

Аналогичная ситуация и с формой входа на сайт. Это продемонстрировано на видео по ссылке https://yadi.sk/i/IX7yIb_nnZmMC .

Кроме этого, набор полей на странице http://fruttiflowers.ru/component/users/?view=registration не соответствует набору полей в форме регистрации, которая открывается при переходе через ссылку «Вход». Это показано на скриншоте.

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

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

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

Поиск по сайту

Поиск по сайту является важным элементом повышения эффективности и улучшения юзабилити сайта.

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

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

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

Это отрицательно сказывается на юзабилити и подтверждается данными Яндекс.Метрики. Из 112 642 общего числа просмотров страниц за последний год, страницу поиска просмотрели всего 38 раз. Т.е. эффективность модуля поиска практически равна нулю.

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

Дизайн формы поиска не соответствует общей стилистике сайта. Скриншот страницы с комментариями представлен по ссылке https://yadi.sk/i/wWl2jbhWnb8wr.

При вводе запроса выводятся подсказки, несоответствующие тематике сайта. Это продемонстрировано на видео по ссылке https://yadi.sk/i/CP9SolMNnb9vp.

Дизайн вывода результатов поиска также не соответствует общему стилю оформления сайта. Ссылка на сриншот https://yadi.sk/i/4XmktrsHnbEGh.

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

Каталог и оформление заказа

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

Работу страниц каталога будем рассматривать на примере раздела http://fruttiflowers.ru/katalog/fruktovye-bukets .

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

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

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

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

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

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

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

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

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

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

Часть букетов предлагается всего с одним вариантом веса. Но при этом все равно выводится выпадающий список с одним вариантом. Например, на странице http://fruttiflowers.ru/katalog/fruktovye-bukets/fantaziya .

На странице http://fruttiflowers.ru/component/jshopping/fruktovye-bukets/medovyj при просмотре в браузере выводится полоса горизонтальной прокрутки страницы и обнаружено некорректное отображение маркеров «Хит». Это продемонстрировано на видео по ссылке https://yadi.sk/i/TMUUl8mZnbJwf.

Аналогичные проблемы и на других страницах – например, http://fruttiflowers.ru/katalog/fruktovye-bukets/palitra-chuvstv. Видео представлено по ссылке https://yadi.sk/i/5JBb64konbLfC .

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

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

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

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

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

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

Оформление быстрого заказа

Рассмотрим оформление быстрого заказа.

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

В алгоритме работы и дизайне допущен ряд ошибок, которые подробно описаны в видео по ссылке https://yadi.sk/i/xFIRxilwnbNdZ.

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

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

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

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

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

Список населенных пунктов, в которые осуществляется доставка и ее стоимость представлена на странице http://fruttiflowers.ru/oplata-i-dostavka . Но на странице оформления заказа пользователю предлагается самостоятельно ввести данные в обычное текстовое поле, а не выбрать из списка. Это отрицательно сказывается на юзабилити.

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

Рекомендуем сделать данный элемент в виде выпадающего списка со списком населенных пунктов.

Положение фона ползунка выбора времени постоянно меняется при работе с данным элементом. Это продемонстрировано на видео по ссылке https://yadi.sk/i/Mj7rMR_WncMf8.

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

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

Удалось успешно отправить заказ без заполнения полей с адресом и временем доставки. Это продемонстрировано на видео по ссылке https://yadi.sk/i/zhQx7vZ6ncNmn.

Замечания по верстке сайта

В ходе тестирования сайта было обнаружено, что на большинстве страниц при уменьшении ширины окна браузера (1400 пикселей и меньше) появляется полоса горизонтальной прокрутки. Это отрицательно сказывается на юзабилити и е соответствует современным требованиям. Причина – использование фиксированной ширины тега body в css-стилях.

Видео демонстрация представлена по ссылке https://yadi.sk/i/DrJRcfJ3ncQQu .

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