Юзабилити-экспертиза: выпуск №8

Заявки на бесплатный аудит присылайте по адресу: usability-audit@oborot.ru. Более подробно об условиях участия можно прочитать в предыдущих выпусках.

Если вы впервые с нами – начинайте с начала:

• Юзабилити-экспертиза. Выпуск №1
• Юзабилити-экспертиза. Выпуск №2
• Юзабилити-экспертиза. Выпуск №3
• Юзабилити-экспертиза. Выпуск №4
• Юзабилити-экспертиза. Выпуск №5
• Юзабилити-экспертиза: выпуск №6
• Юзабилити-экспертиза: выпуск№7

Герой сегодняшнего выпуска – интернет-магазин косметики из Японии и Кореи – japan-cosmetic.biz.

Дежурный эксперт: юзабилити-специалист USABILITYLAB Анна Крамаренко

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

Составим собирательный образ клиента этого интернет-магазина.

Итак, нашего персонажа зовут Елена, ей 26 лет. Она работает секретарём в кадровом агентстве. Подруги порекомендовали Лене японскую косметику как высококачественную, но при этом доступную по цене. Поэтому наша героиня решила попробовать купить что-нибудь для себя. Вместе с персонажем мы пройдем один из стандартных путей (сценариев) совершения покупки, попутно отмечая удачные решения и возникающие затруднения.

Елена не помнит адрес сайта, поэтому ей нужно воспользоваться поисковиком. Она вводит в google запрос "японская косметика интернет магазин" и по одному из первых результатов выдачи переходит на главную страницу japan-cosmetic.biz.

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

На наш взгляд, лишним кажется раздел главного меню "Каталог", поскольку его полностью дублирует колонка слева. При этом каталогу с изображениями и ссылками на товарные категории отведена всего лишь треть ширины экрана. Ещё треть занимают меню и ссылки каталоги производителей, опрос, подписка на рассылку и т.п. Последняя треть пустует – это место занимает фон. Создаётся впечатление "сжатости".

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

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

Помимо этого, уже на главной странице в "шапке" Елена обращает внимание на телефоны компании. Для большей функциональности этой информации, мы советуем привести номера к единому формату (+7_код города_телефон). Не исключено, что Елена решит связаться с магазином по скайпу, кликнув на номер на сайте.

Здесь же в шапке висит информация о поддержке 24/7. Позже, изучая условия оплаты, покупательница столкнется с противоречием: ведь в разделе "Оплата" сказано, что менеджеры магазина не связываются с покупателями в выходные и праздничные дни.

Последнее несоответствие, замеченное Еленой: в "подвале" указана возможность оплаты Web Money и Яндекс.Деньги, а в информации об оплате этих способов нет.

Значки платёжных систем в подвале сайта.

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

Результаты поиска по запросу "крем". Два из первых трех результатов не содержат искомое слово в названии.

Тогда Елена возвращается на главную страницу и с неё отправляется в раздел "Уход за лицом". Здесь нет возможности перейти к карточке товара по клику на название сверху. Кликабельны только небольшое изображение и еще меньшая по размеру ссылка "Подробнее…".

Отметим и удачные моменты: указан вес каждого товара. Это полезная информация, поскольку стоимость доставки почтой напрямую зависит от итогового веса посылки. Также хорошо, что кнопка "купить" и возможность выбрать количество товара находятся рядом с каждым из продуктов уже внутри раздела. И все-таки кнопки "+" и "–" расположены неудачно. Логичнее было бы расположить "+" справа, а "-" слева, либо "+" сверху, "–" – снизу.

Кликабельное изображение товара и ссылка "Подробнее…", ведущие на карточку товара. Непривычное расположение кнопок для выбора количества товара.

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

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

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

Ещё одно затруднение может возникнуть при работе с каталогом слева. Первоначально в раскрытом виде представлен только активный раздел, остальные свёрнуты. Они разворачиваются по наведению курсора. Соответственно, меню постоянно "скачет". Елена убирает курсор, чтобы свернуть ненужную часть каталога, но выпадающее меню не всегда сворачивается автоматически. Малозаметное указание на то, в каком разделе сейчас находится посетитель – название раздела, подчёркнутое в левом меню. Хлебные крошки при этом отсутствуют (появляются только на карточке товара).

Раздел каталога "Уход за телом", развёрнутый по наведению мышки.

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

Мы советуем либо не дублировать информацию на карточке товара, либо качественно её синхронизировать.

Дублирование содержимого на карточке товара. Несинхронная работа двух форм.

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

Этот недочёт стоит устранить, тем более что такая возможность на сайте существует: в правой колонке все товары объединены по производителям.

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

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

Странное название товара.

Выбрав несколько подходящих продуктов, покупательница, наконец, переходит в корзину. Здесь уже нет кнопок "+" и "–" для изменения количества товара – его можно исправить только вручную. Таким образом, меняется способ взаимодействия пользователя с системой. Обновлять при этом можно только товары по отдельности, а не всё содержимое корзины. Здесь Елена пересчитывает сумму заказа самостоятельно, чтобы быть уверенной, что корзина обновилась правильно.

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

На следующем шаге заказа меняются только надписи мелким шрифтом под содержимым корзины (которое всё ещё можно менять) и появляются кнопки "Войти и купить", "Зарегистрироваться и купить", "Купить без регистрации". Мелкий текст описывает преимущества покупки с регистрацией, и Елена, привыкшая подробно изучать предложения, замечает его и решает пройти регистрацию.

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

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

Если же пользователь решает купить продукты без регистрации, то затруднений возникает ещё больше. Например, для указания адреса предусмотрено только одно поле. Пользователь может пропустить какую-то часть адреса (несмотря на подсказки внутри поля). Чтобы исключить эту возможность и сократить время на уточнение деталей доставки, есть смысл разбить адрес на несколько полей – индекс, субъект, город, улица, дом, квартира – каждое из которых обязательно для заполнения. Поле "Email" не является обязательным. Однако, не заполнив его, покупатель потом не получит письмо с информацией о заказе. Но важная информация об этом теряется среди большого количества текста на "thank you page". К слову, всю информацию на финальной странице удобнее было бы разбить на смысловые блоки, выделив их визуально.

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

Ссылка "Узнать почтовый индекс по названию улицы" переводит на непонятную страницу, где можно найти контакты различных организаций ("жёлтые страницы"). Возможно, если большая часть заказов доставляется в границах РФ, то стоит разместить на странице ссылку на сайт "Почты России" с соответствующей пометкой, например: "Сервис доступен для РФ". Помимо этого, по умолчанию установлена рассылка писем от сайта, как ни парадоксально, со значком "no spam".

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

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

Подведём итог нашей экспертизы.

Мы советуем владельцам магазина обратить внимание на следующие рекомендации:

• Увеличить ширину содержательной части сайта в пользу области представления товаров.
• Откорректировать информационный блок "Телефоны". Блок "Поддержка" привести в соответствие с информацией в разделе "Оплата".
• Оптимизировать поиск по сайту и добавить фильтры к поисковой выдаче.
• Добавить внутри разделов фильтры по параметрам товаров.
• Оптимизировать каталог товаров в левой колонке.
• Убрать нижнее окошко на карточке товара, либо синхронизировать информацию в обоих окошках.
• Добавить ссылку на все товары производителя непосредственно из карточки товара.
• Добавить индикаторы к полям, обязательным для заполнения.
• Информацию на финальной странице разбить на смысловые блоки, выделив их визуально.
• Добавить страницу подтверждения товара.

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

Читайте также: Что такое onboarding и как лучше подойти к его реализации.