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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В главном меню не обозначено наличие выпадающего подменю:

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

Не совсем понятно, почему на сайте интернет-магазина размещена страница с отзывами о тренинге:

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

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

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

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

Также допущены некоторые ошибки в юзабилити выпадающего подменю каталога.

Выпадающее подменю не помещается по высоте окна даже при просмотре сайта на экране с большим разрешением. Видео показано по ссылке: https://yadi.sk/d/lTtb9Z4-3M7tRc.

Для категорий используются фото различного размера. Из-за этого дизайн выглядит неаккуратно.

Пространство блока меню скомпоновано неэффективно. Используются большие вертикальные и горизонтальные отступы. Скриншот показан по ссылке https://yadi.sk/i/QMoHBPqJ3M87uk.

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

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

Аналогичная проблема с выделением текущего раздела сайта наблюдается и в нижнем навигационном меню. Видео показано по ссылке https://yadi.sk/i/V5G_SgF63M89Rh.

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

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

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

Сейчас навигационная цепочка на некоторых страницах сайта отображается некорректно.

При переходе по подразделам каталога название раздела является ссылкой на ту же страницу. Видео показано по ссылке https://yadi.sk/i/filmTjBI3M8APA

На некоторых страницах сайта неверно отображается путь в навигационной цепочке, в частности – не выводится название категории каталога. Видео показано по ссылке https://yadi.sk/i/Swt9SjIh3MAqJD

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

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

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

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

Главная страница сайта

Далее рассмотрим юзабилити главной страницы сайта.

Не совсем понятно, почему ссылка «Вход» выделена как активная желтым цветом:

Рекомендуем сделать данную ссылку белой.

Данные иконки не реагируют на наведение курсора. Видео показано по ссылке https://yadi.sk/i/n0QwMSb63MAqUj

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

Кнопки для управления прокруткой размещены в правом нижнем углу поверх баннеров. Они плохо видны из-за недостаточной контрастности баннера и кнопок. Видео показано по ссылке https://yadi.sk/i/__iiSUrd3MAqWH

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

Далее следует блок с заголовком «Товары в наличии». Но в нем размещено только 11 товаров, нет последней карточки товара и ссылка на все товары размещена ниже в плохо заметном месте. Это отрицательно сказывается на юзабилити. Скриншот страницы приведен по ссылке https://yadi.sk/i/CUsRU8u_3MAqv9.

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

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

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

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

Далее следует блок «Акции» в котором есть всего один товар:

Его дизайн не проработан и не привлекает внимание пользователя.

Заголовок является ссылкой, но оформлен как обычный текст:

 

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

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

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

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

Рекомендуем сократить текстовое описание и уменьшить до 2-3 количество выводимых анонсов.

Главная страница каталога

Далее рассмотрим дизайн и юзабилити главной страницы каталога товаров.

Данный элемент во вспомогательной навигации должен быть обычным текстом, а не ссылкой:

Не согласовано взаимное расположение иконок и названий категорий. Из-за этого дизайн выглядит неаккуратно. Полный скриншот показан по ссылке https://yadi.sk/i/jvm8R8uC3MAtEL.

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

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

https://yadi.sk/i/vFAwknKj3MAtq4.

Карта ссылок также показывает, какие разделы являются приоритетными. Видео показано по ссылке https://yadi.sk/i/iNF-Synr3MAuAo.

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

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

Пункты списка разделяются точкой с запятой, в конце последней строки списка ставится точка:

Для разделения строк должен использоваться только один графический маркер, а не два:

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

Обычный текст, который не является ссылкой, выделен при помощи подчеркивания:

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

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

Работу данного раздела сайта будем рассматривать на примере страницы http://opt7shop.ru/catalog/umnye-chasy-smart-watch.

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

 

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

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

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

Нет возможности отсортировать товары по возрастанию или уменьшению цены, а также по названию в прямом и обратном порядке. Видео показано по ссылке https://yadi.sk/i/YQjE7y8J3MAwWg.

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

На странице выводится два товара с маркером «Акция». При этом на главной странице этих товаров нет. Видео показано по ссылке https://yadi.sk/i/dMh369kW3MAwmp.

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

Кроме этого, при переходе по страницам выводится разное количество товаров. Видео показано по ссылке https://yadi.sk/i/euXQiZ2B3MAxN5.

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

Далее рассмотрим работу фильтра товаров, который является важным функциональным элементом каталога товаров.

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

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

В данный момент полностью не работают слайдеры для выбора диапазона цен. Видео показано по ссылке https://yadi.sk/i/xHWScL5k3MB2ZJ.

При вводе диапазона цен в числовые поля слайдеры также не перемещаются в соответствующее положение:

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

В некоторых категориях (например, http://opt7shop.ru/catalog/uhod-za-nogami-i-rukami ) нет акционных и рекомендуемых товаров, но в блоке фильтра выводятся эти параметры. Видео показано по ссылке https://yadi.sk/i/CbMOvx7p3MAzqR

Непонятно, почему не работает выбор типов часов. Видео показано по ссылке https://yadi.sk/i/qIGBsbaW3MB2uk

Некорректно работает вывод нужного количества товаров на странице. В результате выводится большое количество товаров и страница имеет избыточную высоту. Полный скриншот показан по ссылке https://yadi.sk/i/tkTjTuoQ3MB3GW.

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

На части страниц каталога модуль фильтра полностью отсутствует. Например, http://opt7shop.ru/catalog/asic-dlya-majninga-kripto-valyut. Скриншот показан по ссылке https://yadi.sk/i/nNXgCIML3MB3Ug.

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

В некоторых категориях каталога нет возможности отфильтровать товары в наличии или под заказ. Например, http://opt7shop.ru/catalog/klatchi-koshelki-remni. Скриншот показан по ссылке https://yadi.sk/i/nTox-j1g3MB3dh.

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

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

Юзабилити страницы детального просмотра товаров будем рассматривать на примере http://opt7shop.ru/products/umnye-chasy-smart-watch-gt-08.

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

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

Некорректно работает скрипт прокрутки уменьшенных изображений товаров. Он не блокируется при достижении последнего фото и в результате на экране выводится пустой блок. Видео показано по ссылке https://yadi.sk/i/7U3jCnQ03MBeAy.

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

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

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

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

Используется неправильное склонение прилагательных в списке выбора цвета:

При выборе другого цвета нет возможности увидеть фото товара в этом цвете. Видео показано по ссылке https://yadi.sk/i/VrutIQBM3MBgkP.

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

Неэффективно используется пространство страницы. Почти 25% экрана занимает практически пустой блок с двумя вспомогательными кнопками «Сравнить» и «Отложить». Полный скриншот страницы показан по ссылке https://yadi.sk/i/q7Xsaoh33MBh9V.

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

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

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

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

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

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

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

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

Всплывающие подсказки в полях формы не исчезают при переходе на другую вкладку. Видео показано по ссылке https://yadi.sk/i/2cccgxuW3MBiJ3

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

 

На странице просмотра товара нет никакой информации о том, добавлен ли он в корзину и в каком количестве. Видео показано по ссылке https://yadi.sk/i/63GOmELS3MBmCQ.

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

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

В корзине рядом с каждым товаром есть поле выбора его количества. Выбор реализован с помощью выпадающего списка с числами от 5 до 100. Это отрицательно сказывается на юзабилити, т.к. невозможно заказать произвольное число более 100. Например, 250 или 500. Видео показано по ссылке https://yadi.sk/i/u4_5kyQb3MBnKf.

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

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

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

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

Нет проверки правильности ввода данных в полях формы. Удалось успешно отправить заказ с неверными данными. Видео показано по ссылке https://yadi.sk/i/fyT9srX73MBrGM.

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

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

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

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

Это особенно актуально при наличии большого количества страниц, товаров и разветвленной структуре каталога.

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

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

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

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

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

Динамические подсказки при поиске по запросу «часы» показаны на видео https://yadi.sk/i/fgQ_dBHI3MBuP9.

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

На странице с результатами поиска выводятся не все товары каталога, соответствующие запросу. Видео показано по ссылке https://yadi.sk/i/DdaSpnqL3MButE.

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

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

Для примера по ссылке показан процесс поиска по запросу «микрокамера» https://yadi.sk/i/T5L6N37e3MC2cV.

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

Доставка и оплата.

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

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

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

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

Для большинства служб доставки доступны онлайн-калькуляторы для предварительной оценки стоимости услуг. Например, http://emspost.ru/ru/calc/, https://www.dellin.ru/ .

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

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

Аналогичная проблема наблюдается и с информацией о доступных способах оплаты:

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

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

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

Блог

На сайте есть раздел с публикациями.

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

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

Кроме этого, страницы с просмотром переполнены ссылками и плохо структурированной информацией. Например, по ссылке https://yadi.sk/i/ohKdb9Ds3MCDiX показан полный скриншот одной из таких страниц.

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

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