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

После перерыва мы возобновляем выпуски юзабилити-аудитов на Oborot.ru!

Внимание: список экспертов пополнился. Теперь у вас есть возможность заявить свой сайт на экспертизу от крупнейшей юзабилити-компании России – USABILITYLAB.

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

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

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

Герой сегодняшнего выпуска – орловский интернет-магазин подарков oblako7.ru.

Дежурный эксперт: Анна Крамаренко, USABILITYLAB.

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

В роли пользователя мы пройдём типичный путь на сайте: начнем с главной страницы и дойдем до успешного оформления заказа.

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

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

Переходя к работе пользователя на сайте, обратимся к главной странице. Здесь сразу замечаем контакты и адрес магазина, новинки каталога и наиболее интересные предложения в виде баннеров справа. Однако, во-первых, нигде на главной странице не указано время работы интернет-магазина – с 10 до 19. Эта информация отнесена в раздел "Как покупать", куда заглядывает не каждый посетитель сайта. Во-вторых, описание магазина частично сливается с фоновой картинкой. Серьёзной проблемы для пользователя это не представляет, но выглядит не очень аккуратно.

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

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

Перейдём к выбору и заказу необычных подарков

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

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

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

Названия товаров в каталоге не отображаются полностью.

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

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

Категория "Классные кружки": два товара имеются в наличии, два – под заказ. В чём разница?

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

Копилка "Панда" имеет только одно небольшое изображение.

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

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

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

Игрушка "Говорящий хомяк" иллюстрирована двумя картинками, но при открытии самих фотографий на них не отображаются элементы переключения.

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

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

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

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

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

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

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

В корзине отсутствуют изображения находящихся в ней товаров.

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

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

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

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

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

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

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

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

Страница раздела "Как купить" перегружена слабоструктурированной информацией.

Страница регистрации

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

Однако есть и мелкие недочёты, которые стоит исправить. Например, отсутствие кнопки обновления капчи, да и вообще и подпись к ней ("Введите цифры с картинки", в то время как на ней есть и буквы). Вызывает трудности непонятное обозначение надёжности пароля (слабая – честный – good). Оно требует перевода и унификации: низкая – средняя – высокая или плохая – средняя – хорошая.

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

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

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

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