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

Позиционирование сайта

При входе на главную страницу сайта непонятно, что это за сайт. Интернет-магазин, каталог, сайт магазина или агрегатор товаров.

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

В главном меню представлены слишком разрозненные категории товаров. Например, сантехника и товары для ресторанов.

То же самое касается и подкатегорий товаров. Например, ламинат, системы хранения вина и детские игровые комплексы.

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

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

Простая и интуитивно понятная навигация является основой построения эффективного юзабилити сайта.

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

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

Рассмотрим, насколько качественно проработаны элементы навигации на сайте http://abrikot.ru.

В верхнем меню не выделяется текущий раздел сайта. Например, при переходе на страницу «О компании» http://abrikot.ru/about/ .

Аналогично – с главным меню. Например, при переходе в раздел каталога «Товары для дачи» http://abrikot.ru/catalog/dacha/

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

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

То же самое – для подменю второго уровня.

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

При заходе в любую подкатегорию соответствующие разделы не выделены. Например, вид меню на странице http://abrikot.ru/catalog/mebel_dlya_doma_i_ofica/prikhozhaya/shkafy_kupe_v_prikhozhuyu/ :

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

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

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

Дизайн выпадающих меню последнего раздела «Товары для ресторанов» отличается от остальных.

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

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

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

Непонятно, для чего выводить блок выбора, состоящего всего из одного значения параметра. Например, на странице http://abrikot.ru/catalog/tovary_dlya_restoranov/hranenie_vina/hranenie_otkrytyh_butylok/:

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

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

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

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

Для товаров, содержащих в цене более пяти знаков (100 000 рублей и выше) сокращенное обозначение валюты (Р) переносится на следующую строку. Из-за этого дизайн разваливается и выглядит неаккуратно.

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

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

Аналогичная ситуация и с другими параметрами товаров. Например:

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

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

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

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

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

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

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

Во время тестирования сайта было выявлено, что в данный момент модуль сравнения товаров, к сожалению, не работает. Видео при работе с сайтом в Google Chrome можно увидеть по ссылке https://yadi.sk/i/rZZpxNxcmjBtd. Работа сравнения в Firefox – по ссылке https://yadi.sk/i/d-wGCMhomjC8W.

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

Используется разное сокращенное обозначение валюты (рублей) на разных страницах каталога.

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

Страница детального просмотра товара

Юзабилити данной страницы будем рассматривать на примере товара по ссылке http://abrikot.ru/catalog/5819/51057/

Адрес страницы в браузере сформирован не на базе человеко-понятных URL-ов (как в каталоге, например http://abrikot.ru/catalog/mebel_dlya_doma_i_ofica/detskaya_komnata/komplekt_detskoy_mebeli/ ), а на базе числовых кодов. Это отрицательно сказывается не только на юзабилити, но и на поисковой оптимизации сайта.

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

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

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

Непонятно, что это за текст и является ли он ссылкой.

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

После двоеточия слово должно быть с маленькой буквы.

Пропущены двоеточия.

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

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

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

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

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

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

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

Блок похожих товаров не содержит никакой информации, но при этом выводится на сайте.

Работа корзины и процесс покупки

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

Например, как купить и сразу узнать общую стоимость четырех табуретов http://abrikot.ru/catalog/5806/51036/.

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

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

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

Аналогичная ситуация и при работе с корзиной на странице детального просмотра товара https://yadi.sk/i/6MDuKRg4mjL4M.

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

Анализ юзабилити корзины

Далее рассмотрим юзабилити страницы с корзиной http://abrikot.ru/basket/ .

Нет суммы по каждой товарной позиции.

При изменении количества товаров нет автоматического пересчета суммы «на лету» – необходимо использовать кнопку «Обновить».

Дизайн кнопок не проработан. Используется стандартное оформление.

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

Непонятно, для чего использовать выбор вариантов создания логина и пароля.

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

Компания работает только на территории России.

По данным Яндекс.Метрики 74,6% посетителей сайта из Москвы и области.

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

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

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

В какой валюте выводится цена и сумма?

В сообщении об успешном заказе используется слишком мелкий шрифт и его общий дизайн не проработан.

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

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

Исходя из количества и характера выявленных ошибок в модуле и алгоритме оформления заказа, можно сделать следующие выводы:

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

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

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

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

Аналогичная ситуация наблюдается и при работе с сайтом через мобильные устройства – панель чата полностью перекрывает ссылки на корзину и оформление заказа. Это показано на скриншотах по ссылкам https://yadi.sk/i/assv-g0xmkRoE и https://yadi.sk/i/WEtCfFZNmkRov .

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

Также рекомендуем привести оформление блока чата к единому стилю дизайна сайта.

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

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

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

В данный момент используются одинаковые иконки для категории «Двери» и «Товары для ресторанов».

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

Выводится категория каталога, не содержащая товаров.

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

В данном блоке с прокруткой размещены две одинаковые фотографии. Это продемонстрировано на видео https://yadi.sk/i/bq7DdULnmjhdA. Они не являются ссылками на какие-либо разделы или страницы сайта. Это снижает ценность данного блока для пользователя.

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

Пять ссылок ведут на одну и ту же страницу http://abrikot.ru/sale/ .

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

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

Не согласовано положение вертикальных границ элементов.

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

Одновременно используется большое количество шрифтов.

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

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