Юзабилити аудит и обзор ТОП интернет-магазинов России

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

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

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

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

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

Многие владельцы сайтов полагают, что провести подобное тестирование весьма просто самостоятельно. Да, это возможно, учитывая вышесказанное и подойдя к своему веб-ресурсу с точки зрения посетителя. При этом вам необходимо прочесть немало информации, изучить инструменты для проведения юзабилити аудита и потратить много времени. Лучше доверить это специалистам, которые проведут эффективный анализ юзабилити и помогут увеличить продажи, повысить конверсию и эффективность вашего бизнеса. Основные этапы проведения данного тестирования:

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

Для обзора мы выбрали 3 топовых магазины России:

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

Высота страницы - 9500рх

Структурно, шапка состоит из 3 строк. Высота шапки - 200 px. Первая строка это Hello Bar.

Во второй строке размещен логотип, поле поиска, геолокации, авторизация и корзина.

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

На мониторах небольшого размера 1366 px баннер в меню падает вниз и его не видно.

Под шапкой находится баннер в виде слайдера. На некоторых слайдах отсутствует кнопка призыва к действию. Высота слайдера 370 px.

Справа расположен сайдбар с баннерами. Высота одного баннера 240 рх. Количество баннеров - 16.

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

Внизу 2 баннера без призыва к действию.

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

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

Далее идет баннер с коммерческим предложением, и перелинковка на бренды, разделенные на категории.

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

однако если перейти на часть футера, то ее не видно.

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

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

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

Юзабилити аудит всех страниц очень важен, каждой отдельной категории. Высота страницы - 10740 рх. По умолчанию отображается 100 товаров, однако есть возможность выбора 40 и 200 товаров. Также есть два варианта показа сетки товаров, в основном варианте товар размещен в 5 столбцов, в дополнительном - 4 столбца. Нумерация размещена вверху над товаром и внизу под товаром.

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

Слева размещены фильтры.

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

При наведении курсора на карту товара появляется дополнительная информация. Есть варианты выбора цветов с фото, кнопка быстрого просмотра, которая автоматически изменяет фото каждые 2-3с, цена, стикер об акции, название, рейтинг и размеры.

Кнопки “купить” рекомендуется сделать более заметными.

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

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

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

Нет кнопки виш-листа, присутствует только кнопка корзины.

Фильтр работает неправильно. Присутствует выпадалка, однако она не работает.

Кнопка "Применить фильтр" содержит иконку о выпадалке. Она не нужна.

Высота страницы - 8590 рх. Кнопка купить находится в первом экране. Состоит из хлебных крошек блока с фотографиями, блока названия и покупки, внизу размещен блок с описанием товара. В блоке фотографий присутствует зум, но нет иконки которая указывает на это.

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

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

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

Блок с отзывами содержит голосовалку рейтинга, анкету фитбеков по размеру товара, а также вверху отзывов закреплены фото покупателей (если есть такие). Внизу уже сам текст отзывов.

Если открыть фотогалерею, присутствует вертикальный скролл по странице товара.

Отсутствуют хлебные крошки, есть только кнопка назад.

Название товара в десктопной

и мобильной версиях отличаются.

Не увеличиваются фотографии покупателей с отзывов.

Эта выпадалка не нужна, так как купить товар без выбора размера итак невозможно.

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

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

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

Покупка происходит в два этапа. На скриншоте изображен первый этап.

Второй этап - это авторизация или регистрация.

Поля регистрации.

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

Высота страницы - 3600 рх.

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

Если скролить на 1366px только в меню, левая и правая часть тоже движется,что очень сбивает с толку.

Сверху расположено ТОП меню со всеми техническими страницами.

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

Присутствуют три блока с перелинковкой на товары.

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

В футере размещены информационные страницы, социальные сети, способы оплаты и кнопка “Вверх”.

На карточках товара нет кнопки “купить”.

Это стоит скрыть и добавить иконки переключения слайда.

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

Для этих блоков присутствует свайповая перемотка влево.

Меню немного больше расширено, в сравнении с ПК версией. Тут добавлены информационные страницы.

Высота страницы - 9445 рх. Хлебные крошки размещены над названием товара. Около названия размещен блок с количеством товаров, внизу хэштеги или подкатегории/фильтры. Далее идет сортировка и пагинация. Справа расположен большой блок фильтров. Карточка товара состоит из фото, стикеров, названия и краткого описания. Под описанием большой блок с городами, в которых есть магазины. Внизу цена и кнопки покупки.

Присутствующие дубли фильтров в виде хештегов.

Фильтры занимают большую часть экрана. Нужно добавить кнопку “скрыть/открыть” блок фильтров.

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

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

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

Следует указать, что это за цена. Стоит сделать подсказку что это именно “цена”.

Стоит добавить иконки увеличения/уменьшения количества товара и поставить ограничение по количеству товара, которое есть на складе. Здесь вообще можно заказать 999

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

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

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

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

Эти стикеры стоит разместить в один ряд.

Высота страницы - 4740 рх

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

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

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

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

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

При добавлении товара в сравнение меняется иконка чек бокса.

При добавлении товара в виш-лист, появляется попап, что необходимо авторизоваться. Кнопок входа или регистрации нет.

Стоит добавить иконки увеличения или уменьшения количества товара.

Выбор цвета должен быть над кнопкой покупки.

Сюда стоит добавить иконки, что это цена, общая сумма.

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

Нет иконки увеличения или уменьшения количества товара.

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

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

Шаг "Сервисы и услуги" содержит следующие дополнительные услуги:

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

Следующий шаг - это способы оплаты и подтверждения заказа.

Высота страницы - 8040 рх. Высота шапки 270 рх.

При скролле закреплена только определенная часть шапки.

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

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

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

Количество баннеров на главной странице - 13. Главный баннер представлен в виде слайдера, высотой 420рх.

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

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

Под статьями размещены хэштеги и футер с информационными страницами.

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

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

Есть дубли категорий.

Когда меню открыто, иконка открытого гамбургера не меняется на закрытый.

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

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

Высота страницы - 4385 рх. Под шапкой присутствуют хлебные крошки, акционный баннер, название категории и варианты показа товара, ниже расположен блок хештегов. Слева фильтры с функциональной возможностью показать/скрыть фильтр. Справа карточки товаров. Количество столбцов - три. По умолчанию отображается 12 товаров.

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

Карточка товара содержит стикер об акции, фото, рейтинг, название, цену и коммерческие кнопки.

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

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

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

Нет кнопки корзины и виш-листа. Есть только сравнение.

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

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

При нажатии на фото не открывается фотогалерея.

Блок характеристика товара стоит убрать из блока покупки.

При добавлении товара в виш-лист автоматически предлагает авторизоваться.

Цвет и параметры товара следует перенести над кнопкой “купить”.

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

Четвертый этап - оформление покупки, которое происходит в три шага.

Юзабилити аудит ТОП-3 интернет-магазинов России показал, что улучшать юзабилити сайта нужно регулярно. После каждых поправок следует анализировать, как это отразилось на пользователях. С помощью карты кликов можно посмотреть используются нововведения или нет. Используя информацию относительно глубины скролла можно узнать, насколько оптимальная высота страницы для пользователя.

В первых двух магазинах юзабилити аудит выявил, что на главной странице отсутствуют кнопки покупки на перелинковке товара, но блоки перелинковок с товарами больше, чем в третьем магазине. Также стоит обратить внимание на количество акций. На главной странице их видят мало пользователей, поэтому следует не перенасыщать страницу баннерами. Сравнивая блоки фильтров, то хуже оптимизированы фильтры в магазине https://www.citilink.ru/. Фильтры не должны занимать полстраницы, а также должен быть функционал скрытия каждого отдельного параметра, однако все зависит от высоты экрана монитора. Стоит для этого следить за картой кликов по элементам.

Сравнивая страницы корзины можно сказать, что на сайте https://www.citilink.ru/ есть слишком много этапов и шагов для оформления покупки. В идеале - все поля и формы должны быть размещены на одной странице.

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

При аудите карточки товара на странице категории, самой удобной оказалась карточка https://www.wildberries.ru/, поскольку при наведении курсора там дополнительно появляется расширенная информация о товаре. В магазине https://www.citilink.ru/ карта товара перенасыщена городами с магазинами.