Юзабилити-экспертиза: выпуск №7
Заявки на бесплатный аудит присылайте по адресу: usability-audit@oborot.ru. Более подробно об условиях участия можно прочитать в предыдущих выпусках.
Если вы впервые с нами – начинайте с начала:
- Юзабилити-экспертиза. Выпуск №1
- Юзабилити-экспертиза. Выпуск №2
- Юзабилити-экспертиза. Выпуск №3
- Юзабилити-экспертиза. Выпуск №4
- Юзабилити-экспертиза. Выпуск №5
- Юзабилити-экспертиза: выпуск №6
Герой сегодняшнего выпуска – интернет-магазин детских товаров Poraduet.ru
Дежурный эксперт: юзабилити-специалист USABILITYLAB Мария Крутько
Poraduet.ru – интернет-магазин детских товаров, предлагающий широкий ассортимент: от развивающих игр до автомобильных кресел, спортивных товаров и мебели. Аудитория сайта – молодые женщины, мамы детей в возрасте от 0 до 10 лет.
Чтобы оценить удобство интернет-магазина poraduet.ru для пользователей, мы обратились к методике персонажей. Что это такое? "Персонаж" – это собирательный образ пользователя, представителя группы целевой аудитории какого-либо продукта, в нашем случае – интернет-магазина. Важно помнить, что персонаж – это не реальный человек, не сегмент аудитории, не среднестатистический пользователь продукта, а некий "собирательный образ", в котором отражены характерные черты, потребности, желания и мотивирующие факторы определенной группы пользователей.
Итак, сегодня наш персонаж – это Вика, мама мальчика двух с половиной лет, опытный покупатель детских товаров. Ей 27 лет. Вика часто заказывает детские товары через Интернет, у неё нет времени на долгое изучение сайта, к тому же, в любой момент ее может отвлечь ребенок.
Как правило, Вика точно знает, что ей нужно, какой именно товар и в каком количестве она будет заказывать. Вика хотела бы приобрести новые развивающие игрушки для своего сына, в первую очередь, игрушки для развития речи: паззлы, шнуровки, пирамидки или конструктор. У Вики есть определённые требования к товарам. Во-первых, производитель – Вика отдает предпочтение европейским производителям, т.к. считает эти товары более качественными. Во-вторых, для неё важен материал, из которого сделана игрушка. И наконец, это наличие у интернет-магазина сертификатов качества на продаваемые игрушки.
Итак, рассмотрим конверсионный путь, который проходит наш персонаж.
ПОИСК НА САЙТЕ
Вика набирает в поисковике "купить развивающие игрушки для ребенка 2,5 лет" и попадает на страницу сайта в раздел "Развивающие игрушки". Она сразу видит название раздела, которое крупно написано и выделено цветной подложкой.
Вика просматривает категории товаров, представленные на странице, и открывает подраздел "Юный художник". Она хочет найти пальчиковые краски, которые ей рекомендовала подруга для развития детской моторики. Однако в этом разделе она видит всего пять товаров. И да, её сбивают с толку 2 набора солдатиков, не имеющие отношения к рисованию.
Вика замечает окно поиска в правом верхнем углу и решает с его помощью найти пальчиковые краски. Она вводит поисковый запрос и получает следующие результаты.
На странице с результатами поиска отсутствует возможность сортировки и фильтрации результатов
Вика видит, что в результатах поиска представлены совершенно разнотипные товары – игры, фоторамки, раскраски, деревянные модели и т.д. Страниц с результатами слишком много. Чтобы найти среди них нужные пальчиковые краски, ей придется просматривать каждую страницу. Здесь Вике очень не хватает кнопки "показать всё" и возможности хоть как-то упорядочить результаты – отфильтровать их по группам товаров, отсортировать по цене, по названию. К сожалению, такой опции на сайте не предусмотрено.
Нет возможности показать все товары сразу на одной странице
Пролистав несколько страниц в поисках пальчиковых красок, Вика решает упростить запрос, изменив его на "краски", и получает следующий результат поиска.
Вика думает, что найдено всего три товара, среди которых нет пальчиковых красок, и приходит к выводу, что товар отсутствует в этом интернет-магазине.
На самом же деле, если бы Вика при первом поиске долистала до 8-ой (!) страницы, то увидела бы нужные ей пальчиковые краски. Но шанс, что реальный покупатель магазина пройдет этот нелегкий путь, чтобы найти нужный ему товар, близок к нулю.
Нужный пользователю товар находится на 8-ой странице результатов поиска
Пропуск в представлении результатов воспринимается как окончание товаров. Пользователи не подозревают что ниже этой линии могут быть товары.
Не найдя красок, Вика пробует найти другую игрушку, которую ей посоветовали, – шнуровку. Вика снова вводит поисковый запрос, т.к. сайт не дает ей подсказок, в какой категории может находиться эта игрушка. При вводе слова "шнуровка", она обращает внимание на выпадающие подсказки, которые не заметила в первый раз. Однако при выборе подсказки ничего не происходит, тогда как Вика ожидала, кликнув по ней, перейти сразу на страницу товара.
При выборе выпадающей подсказки не происходит переход на страницу товара
Введя поисковой запрос, Вика нажимает на изображение лупы, ожидая, что за этим последует переход к результатам поиска. Однако этого не происходит. Несколько раз безуспешно кликнув на значок лупы, Вика всё же догадывается нажать на клавишу enter и получает результаты поиска.
ОПИСАНИЕ ТОВАРОВ
Зайдя на страницу с описанием шнуровки, Вика не получает информации, как образом ребенок будет играть с ней. Страница товара не содержит ни инструкций, ни фотографий игрушки в разных состояниях (в разобранном, в процессе игры).
На этом шаге наш персонаж Вика ожидаемо уходит с сайта. Почему? Да потому что не находит в описании товара информации по важным для нее параметрам: из какого материала сделана игрушка, для какого возраста она предназначена, где она произведена, имеет ли она сертификат.
А пока покупатель уходит к вашим конкурентам, покажем хороший пример описания игрушки. Посмотрите на скриншот ниже. Кроме фотографии игрушки в собранном состоянии, на странице есть также фотографии игрушки в процессе сборки и в разобранном виде. Помимо этого, присутствует информация о производителе, материале, из которого сделана игрушка, да и просто её описание.
ОФОРМЛЕНИЕ ЗАКАЗА
Но мы с вами пройдем конверсионный путь до конца и посмотрим, что же ждет покупателя дальше.
К процессу добавления товара в корзину и к интерфейсу корзины нареканий нет.
А на шаге оформления заказа у пользователя могут возникнуть трудности: поле E-mail не отмечено как обязательное к заполнению и находится в верхнем левом углу страницы, который не привлекает внимание пользователя. Вместо этого в глаза бросаются поля в середине экрана, помеченные звездочками, и цветной баннер с предложением помощи в оформлении заказа.
Однако если пользователь пропустит это поле, система вернет его в корзину с уведомлением, что заполнить его все-таки нужно. И…тут его поджидает сюрприз.
При повторном переходе к оформлению заказа мы видим, что все введённые ранее данные обнулились. У многих пользователей это, вероятнее всего, вызовет раздражение. И на этом почти финальном этапе вы потеряете еще какое-то количество клиентов.
Но допустим, мы набрались терпения, нашли строку для ввода адреса электронной почты, указали заново все контактные данные и перешли к итоговой странице. Как нам понять, успешно ли оформлен наш заказ? Страница выглядит как обычная корзина и не содержит никаких явных указаний на то, что заказ принят в обработку, и прочей информации, говорящей о том, что действие покупателя совершено успешно.
На самом деле, всплывающее уведомление с надписью "Ваш заказ был успешно обработан" появляется на странице всего на несколько секунд, а затем исчезает. Заметить это уведомление крайне сложно, т.к. по цвету и форме оно сливается с другими элементами страницы.
Итак, чтобы не терять клиентов, сайту нужно устранить ряд юзабилити-проблем практически на каждом этапе конверсионного пути. Если устранить эти проблемы, работать с интернет-магазином станет проще и приятнее.
Будьте более внимательны к своим сайтам, и пользователи к вам потянутся!
Читайте также: Что такое onboarding и как лучше подойти к его реализации.
Я бы ещё сделал единый стиль для всех промоакций в левом сайдбаре чтобы их также легко и быстро было читать. Возможно даже встроил бы генератор превьюшек в сам сайт единого формата.
Также, хоть и дорого, можно было бы поработать над вёрсткой гибкой к размеру дисплея: работать скролером на большом мониторе лень, особенно грустно, когда сайт занимает четвертую часть простанства экрана.
Заголовки блоков выделить ярче, хоть и расположение блоков с предложениями стандартно, лучше их выделить сильнее.
Можно часть товаров в блоках схлопнуть, тогда получится показать сразу два а то и три блока в видимой области экрана. Остальный скролить js-ом, или разворачивать при наведении на блок, что удобнее для меня лично.
Цены пожирнее, заголовки тоже: мне лично проще когда вся важная тексто-числования информация читабельна, единообразна и ненадо щюрится.
Есть много мелких недочётов по единообразию вида цен, скидок, заголовков и шрифтов, тайтлов инфоблоков и т.п., но всё легкоустранимо.
Толстый градиент в шапке хранящий только логотип и форму поиска? Тоже не порядок. Если уж функциональный дизайн, то должен быть таким до конца. Свернуть
На картинке рандомно выбранной была дата фотографии, картинки открываются медленно, качество низкое, пережатое, при нажатии на картинку категории открывается картинка, а не категория что явно будет раздражать все посетителей.
Картинки в товарах имеют номера других товаров что вводит в заблуждение и при нажатии что будет выбран другой вид товара этого же, открывается другой.
Мое мнение что шаблон сделан что бы был, видимо ранее было еще хуже. Если у вас это быть на высоте и меняться к лучшему тогда я бы опасался у вас делать заказ с таким сайтом, тем более это даже не магазин для заказа товара, а каталог без какого либо функционала, что еще раз подтверждает что вы хорошо сэкономили и сделали кое как, сойдет на первый раз. Свернуть