Аудит usability интернет-магазина детских игрушек

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

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

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

 

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

 

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

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

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

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

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

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

Юзабилити навигации по сайту

На главной странице данный элемент служит для открытия части меню, скрытой под данным символом:

Юзабилити работы навигации по сайту

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

При переходе на страницу каталога (например, http://www.toys01.ru/catalog/transport/), все меню каталога игрушек по умолчанию скрыто от пользователя. Чтоб его увидеть он должен навести курсор на ссылку «Каталог товаров». Это продемонстрировано на видео по ссылке https://yadi.sk/i/80Ll9y3SkE9MS.

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

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

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

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

Аудит юзабилити выпадающего меню

Аудит юзабилити выпадающего меню

Такое решение отрицательно сказывается на юзабилити и внешнем виде сайта.

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

Отдельно стоит остановиться на высоте элементов и выпадающих подменю в боковом меню каталога.

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

Анализ разрешений экрана пользователей сайта

Наиболее популярными разрешениями экрана являются:

  • 1366х768
  • 1280х1024
  • 1920х1080

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

Это продемонстрировано на соответствующих видео:

При этом полное выпадающее меню для подраздела «Игры и игрушки Bondibon» выглядит так: https://yadi.sk/i/p4QafqFukEQZB

Для подраздела «Другие игры» (при масштабировании страницы в 50%) https://yadi.sk/i/rzeb2wNdkEQmz.

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

Большие вертикальные отступы в меню

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

В меню каталога игрушек не выделяется текущий раздел сайта. Например, для подраздела http://www.toys01.ru/catalog/avtotreki/ :

Не выделяется текущий раздел сайта в меню

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

Далее рассмотрим работу верхнего меню.

Не выделяется текущий раздел сайта при переходе на соответствующую страницу. Например, http://www.toys01.ru/news/ :

Анализ юзабилити главного меню сайта

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

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

Ошибки в оформлении ссылок в главном меню

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

Общее оформление ссылок

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

Ссылка оформлена как текст

Ссылка оформлена как текст

Ссылка оформлена как текст

Ссылка оформлена как текст

Ссылка оформлена как текст

Ссылка оформлена как текст

Ссылка оформлена как текст

Ссылка оформлена как текст

Ссылка оформлена как текст

Ссылка оформлена как текст

Ссылка оформлена как текст

Модуль выбора города

Непонятно, что это за город.

Юзабилити модуля выбора города

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

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

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

Непонятно, для чего при выборе города предлагается как минимум три варианта. Например, для Тулы:

Юзабилити процесса выбора города

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

Также стоит отметить, что в данный момент 91,9% пользователей сайта заходят из Москвы и Московской области. Автоматического расчета стоимости доставки в данный момент нет. Ее необходимо уточнять в ручном режиме по телефону или email. Поэтому ценность данного модуля вызывает сомнения.

Аудит посещаемости сайта по городам

Юзабилити модуля расчета доставки

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

Блок со спецпредложениями на главной

Не видны кнопки управления прокруткой (белые кнопки на белом фоне). Это продемонстрировано на видео по ссылке https://yadi.sk/i/vfxtTsrRkEWAc.

Аудит юзабилити блока прокрутки изображений

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

Аудит юзабилити блока прокрутки изображений

Аудит юзабилити блока прокрутки изображений

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

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

Аудит юзабилити каталога игрушек

Далее рассмотрим работу и юзабилити каталога игрушек.

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

Анализ посещаемости каталога игрушек

Анализ статистики посещаемости каталога игрушек

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

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

Единственное поле «Возраст» удалось найти в блоке с детальными характеристиками на странице просмотра товаров. Но, к сожалению, в нем указано не возраст, а информация о бесплатной доставке http://www.toys01.ru/catalog/elektromobili_i_mototsikly/elektromobil_mercedes_g_65_chernyy_matovyy_s_pultom_du/:

Ошибки в оформлении текстов

То же самое касается и пола ребенка – какая-либо информация об этом параметре игрушек отсутствует.

Стоит отметить, что возможность быстрого подбора игрушек по возрасту и полу ребенка есть на большинстве сайтов-конкурентов из топа Яндекса по запросу «интернет-магазин игрушек». Например:

http://www.toy.ru/

Подбор игрушек по возрасту

Форма подбора игрушек

http://tigrushki.ru/

Подбор игрушек по возрасту

Форма подбора игрушек по возрасту

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

На странице http://www.toys01.ru/catalog/elektromobili_i_mototsikly/ наименее популярная категория «Аксессуары и аккумуляторы» размещена второй, а популярная «Мотоциклы аккумуляторные» – последней. Это подтверждается и данными карты кликов.

Анализ данных карты кликов

Аналогичная ситуация и на странице http://www.toys01.ru/catalog/konstruktory/. Первой находится наименее популярная категория:

Анализ данных карты кликов

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

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

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

Аудит текстов сайта

Другая крайность – полное отсутствие какого-либо текстового описания в категории. Например http://www.toys01.ru/catalog/cheburashka_litsenzionnaya_igrushka/ :

Нет описания категорий игрушек в каталоге

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

В блоке подбора игрушек по параметрам отсутствует информация о числе товаров, соответствующих конкретному параметру.

Аудит юзабилити модуля подбора по параметрам

Рекомендуем выводить количество игрушек, соответствующих конкретному параметру (как в меню каталога).

Вывод каталога в виде списка или галереи отличается только наличием маленькой картинки с изображением товара, т.е они практически идентичны. Это продемонстрировано на видео по ссылке https://yadi.sk/i/qcDBzfmAkEbJ7

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

Ошибки в работе сортировке каталога

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

В ходе тестирования обнаружено, что неверно работает функция добавления товаров в избранное. После нажатия соответствующей иконки на товаре не происходит изменения количества товаров в избранном на нижней панели. При нажатии на ссылку «Избранное» выводится пустой блок. И только после обновления страницы (или перехода на другую страницу) добавленные товары появляются в данном блоке. Это продемонстрировано на видео по ссылке https://yadi.sk/i/5_7OvBu2kEq39 .

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

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

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

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

Для некоторых фото не работает увеличение фото. Например, страница http://www.toys01.ru/catalog/elektromobili_i_mototsikly/elektromobil_mercedes_g_65_chernyy_matovyy_s_pultom_du/. Видео можно увидеть по ссылке https://yadi.sk/i/nBkajelQkEqRR.

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

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

Ошибки в оформлении заголовков

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

Оформление текстов

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

Название игрушек расположено на строку ниже. Ширина левого отступа не согласована с компоновкой других элементов.

Компоновка блоков

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

Юзабилити блока с ценами

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

Ошибки в характеристиках товаров

Для других товаров указан только одно значение возраста «Всем детям». Найти более точную информацию о рекомендованном возрасте ребенка найти не удалось. Например, для http://www.toys01.ru/catalog/igrushki_i_tovary_dlya_malyshey/plastizol_karlson_9_sm_v_pakete/ :

Не указан возраст

Не указан возраст

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

Далее рассмотрим текстовые описания товаров.

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

Для примера, рассмотрим типичный сценарий выбора робота-трансформера для подарка.

Описание самого дорогого трансформера http://www.toys01.ru/catalog/transformery/nabor_robotov_transformerov_collection_of_5_warriors_34kh25kh11/

Ошибки в текстах описания товара

Описание самого дешевого трансформера http://www.toys01.ru/catalog/transformery/robot_transformer_svet_12sm_4_vida/

Ошибка в описании товара

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

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

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

Следует отметить, что на сайтах-конкурентах из топа Яндекса, для большинства игрушек размещено подробное текстовое описание со всеми особенностями и характеристиками.

Непонятно, для чего на многих страницах сайта текстовое описание полностью дублируется в верхней части страницы и внизу в блоке «Описание». Например, http://www.toys01.ru/catalog/elektromobili_i_mototsikly/elektromobil_bmw_e001kkh_belyy_s_pultom_du/

Дубликаты текста

Это также имеет отрицательный эффект в плане SEO.

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

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

При входе на страницу http://www.toys01.ru/catalog/elektromobili_i_mototsikly/elektromobil_bmw_e001kkh_belyy_s_pultom_du/ по умолчанию открыто обе вкладки «Описание» и «Характеристики».

Ошибки в работе вкладок

При нажатии на одну из ссылок, второй блок скрывается. Не совсем понятно, для чего сделана такая реализация – она не представляет для пользователя практической пользы. Это продемонстрировано на видео по ссылке https://yadi.sk/i/zFJ0-IEckFDh4.

Также непонятно, для чего заголовки «Описание» и «Характеристики» сделаны ссылками, а заголовок «Отзывы» – обычным текстом. Визуально они оформлены одинаково.

Ссылки оформлены ка обычные заголовки

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

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

Ошибки в юзабилити интерфейса

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

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

Не согласовано положение элементов

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

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

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

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

В данном поле необходимо вручную очищать значение «Guest».

Ошибки в юзабилити формы

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

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

Ошибки usability формы

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

Ширина поля капчи

Непонятно, почему для некоторых товаров на странице детального просмотра отсутствуют кнопки покупки и добавления в корзину. Например, http://www.toys01.ru/catalog/myagkie_igrushki_bez_funktsiy/medved_slastena_40sm_sonata_style/ :

Нет кнопок покупки и добавления в корзину

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

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

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

Оформление покупки в один клик.

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

Звездочки в названиях полей формы

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

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

Юзабилити формы покупки в один клик

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

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

Юзабилити формы покупки в один клик

Если ввести код защиты и повторить отправку – появляется сообщение «Не заполнено одно из обязательных полей». При этом не указано, какое конкретно поле не заполнено.

Юзабилити формы покупки в один клик

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

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

Нет проверки правильности ввода данных

Успешная отправка формы с ошибками

Юзабилити корзины и оформления заказа

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

Полоса горизонтальной прокрутки

При изменении ширины экрана наблюдается «моргание» данного элемента. Это продемонстрировано на видео по ссылке https://yadi.sk/i/s13FGg29kFMyz.

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

Непонятно, почему при переходе на вторую страницу оформления заказа, которая называется «Оформление заказа», в боковом меню подсвечен раздел «История заказов».

Ошибки в подсветке разделов меню

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

Что обозначают звездочки в полях?

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

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

Дублирование текстов в форме

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

Выбор способов доставки

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

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

Только один способ оплаты

Для сравнения – сайт toy.ru предлагает 7 способов оплаты, которые обеспечивают максимальный охват всех платежных систем.

Юзабилити блока способов оплаты

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

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

Юзабилити таблицы с товарами в корзине

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

Нет проверки правильности ввода данных

Юзабилити оформления заказа

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

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

Ошибки в юзабилити личного кабинета

Результаты поиска по сайту

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

Сколько результатов поиска?

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

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

Юзабилити постраничной навигации

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

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

Юзабилити страницы с результатами поиска игрушек

Юзабилити страницы с результатами поиска игрушек

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

Непонятно, зачем в результатах поиска размешены хлебные крошки вида «Главная страница – Каталог». Они не представляют никакой практической пользы и создают визуальный шум.

Юзабилити навигации хлебные крошки

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

Компоновка футера (нижней части) сайта.

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

Пустая зона в футере сайта

Общие замечания по цветовому решению сайта.

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

Ниже приведены скриншоты, на контраст и цвет которых рекомендуем обратить внимание.

Низкий контраст элементов интерфейса

Низкий контраст элементов интерфейса

Низкий контраст элементов интерфейса

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

  1. В данный момент нет комплексного набора инструментов для быстрой связи посетителя сайта с менеджером (онлайн чат, звонок с сайта, заказ обратного звонка и т.д.). Рекомендуем в качестве эффективного решения использовать сервис krible.com или аналогичный. Он обеспечивает полный набор инструментов и не требует существенных доработок сайта.
  2. Отсутствует полный набор различных способов оплаты товара.
  3. Отсутствует возможность выбора способов и стоимости доставки в другие города и регионы.
  4. Нет возможности выбора игрушек по возрасту и полу ребенка.
  5. Особо критичным является отсутствие корректного детального описания конкретных игрушек, что сильно усложняет их выбор и покупку.
  6. В данный момент дизайн сайта и его функционал не доработан. Создается ощущение незавершенности и некоторой кустарности сайта, что отрицательно сказывается на доверии посетителей.

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

Get new case studies by email:

More Case Studies

See all