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

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

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

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

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

Дежурный эксперт: специалист USABILITYLAB  Андрей Столяров.

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

Стоит отметить, что бизнес находится в Ростове-на-Дону, там же располагается и большой офлайн-магазин.

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

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

Таня, 23 года. 4 месяц беременности.

Таня живет в Московской области (по данным Яндекс.Метрики, наибольшее количество покупателей проживают в Центральном регионе), работает парикмахером. Первый триместр уже прошел, в декретный отпуск она еще не ушла.

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

В свободное от работы время Таня старается присматривать вещи для малыша (мебель, одежду) и, конечно, для себя, так как хочет оставаться привлекательной и во время беременности. Она не очень опытный интернет-покупатель, но в обычный магазин может теперь выбраться только вечером или в выходные на машине с мужей.

Основной сценарий покупки – подобрать для себя несколько вещей по сезону (весна-лето) и заказать доставку.

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

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

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

2. В шапке сайта мы видим контакты и ссылки на сервисную информацию. Они доступны на любой странице. Опрошенные нами покупательницы из целевой аудитории посчитали удобным быстрый доступ к этим разделам.

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

3. Большой баннер на главной странице содержит три блока. Первый рекламирует коллекцию одежды, второй – информирует о возможности доставки по странам ТС, третий – об адресе и времени работы офлайн-магазина в Ростове.

Страница каталога

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

• Стоит выделить цветом категорию, в которой находится пользователь.
• Рекомендуем добавить возможность быстро отфильтровать список товаров по конкретному типу одежды. В разделе каталога присутствуют и джинсы, и леггинсы, и брюки. В зависимости от ситуации искать будут скорее что-то одно. То же относится и к другим категориям (например, свитера и комбинезоны/юбки).

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

• по размеру в наличии;
• по цвету (особенно актуально для платьев);
• по составу ткани.

3. Плагины социальных сетей (справа) занимают значительную часть страницы и отвлекают внимание от основной области с товарами.

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

Карточка товара

Карточка товара скомпонована удачно: достаточно места отведено под фотографии, есть снимки деталей одежды. Некоторым пользователям, действительно, может не хватать режима увеличенного просмотра (максимальное разрешение сейчас не такое большое).

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

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

Теперь о проблемах:

• Блок загружается отдельно от остальной страницы и часто случается, что в течение нескольких секунд (до 25) нет возможности купить товар и просмотреть информацию о доставке. Судя по географической принадлежности аудитории сайта, можно предположить, что не у всех пользователей высокая скорость загрузки.
• Кнопка "Купить" исчезает при переходе на информационные вкладки.
• В поле "Количество" логично было бы по умолчанию ставить параметр "1". Пользователи часто пропускают этот параметр. Но при оформлении заказа, если покупатель не проставил количество, его возвращают не предыдущий шаг.

Добавление в корзину

Всплывающее окно при добавлении товара в корзину дает информацию об общей стоимости товаров в корзине – это интересное решение.

Однако кнопки "Продолжить шопинг" и "Оформить заказ" имеют несколько недостатков:

• Они одинаково оформлены. А значит, пользователю не дают подсказку о следующем действии на пути оформления заказа.
• Текст на кнопках считывается плохо: дизайнерский цвет и блик делают надпись неконтрастной.

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

1. Ссылка на поиск почтового индекса – полезный инструмент, однако неуместный на этом этапе оформления. В идеале индекс должен уточняться при звонке менеджера или формироваться автоматически в зависимости от указанного адреса.
2. На этом же шаге требуется ввод информации об адресе проживания/доставки. Хотя для самовывоза он не нужен, так что логично было бы сначала дать пользователю выбрать способ доставки (для этого достаточно определить город) и требовать от него только необходимые данные. Тот же индекс для доставки курьером в пределах Ростова-на-Дону точно не понадобится.
3. Нет пояснений о том, зачем магазину нужна информация об обхвате груди и бедер. Покупательницы, которых мы попросили протестировать сайт, очень неоднозначно восприняли эти поля. Они понятны на этапе выбора товара, но не в блоке "Контактная информация"!
4. И снова встречаем одинаковое оформление кнопок – "Вернуться назад" и "Продолжить оформление". Необходимо визуально выделить основное действие. Это касается всех страниц оформления заказа.

Выбор способа доставки и оплаты

1. Формулировка "Курьером, без примерки" сбивает с толку. Возникают вопросы: почему нет вариантов с примеркой, для кого они предлагаются.
2. В тексте не указано, есть ли вообще пункты самовывоза СПСР в городе клиента. Также не ясно, какому менеджеру и куда необходимо звонить.
3. При фиксированной ставке комиссии "Почты России" лучше сделать автоматический расчёт дополнительных расходов и указывать всю сумму уже со стоимостью доставки.

Страница подтверждения заказа

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

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

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