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

Мы перезапускаем на Обороте бесплатные юзабилити и сео-аудиты для интернет-магазинов. Теперь можно не просить "покритикуйте наш сайт" на очередном форуме, а прислать нам заявку на usability-audit@oborot.ru и seo-audit@oborot.ru

Разбор полетов делают эксперты Kokoc.com (Kokoc Group).

Хотите получить бесплатный юзабилити-линч? Присылайте  на usability-audit@oborot.ru.

Предыдущие выпуски: 

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

Дежурный эксперт: Елизавета Иванова – специалист по юзабилити и веб-аналитике Kokoc.com (Kokoc Group).

Герой сегодняшнего выпуска – интернет-магазин "Мистер Гик" (http://mrgeek.ru/). Для того, чтобы понять, насколько удобен сайт, мы поставили себя на место покупателя и попробовали пройти весь конверсионный путь от начала до конца.

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

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

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

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

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

Каталог товаров

Многих товаров из каталога просто нет в наличии. На мини-карточках в каталоге стоят соответствующие "заглушки", которые предлагают сообщить пользователю об их поступлении. Но ассортимент магазина — подарки. А они зачастую покупаются в последний момент, срочно, "желательно вчера".  Вряд ли кто-то будет подписываться на сообщения о том, что у вас когда-нибудь появится этот товар. Кроме того, когда посетитель видит, что многих товаров у вас нет в наличии, его интерес и доверие к магазину снижаются.

Лучше скройте карточки недоступных для покупки товаров.

Для интернет-магазинов с большим количеством позиций важен удобный и корректный функционал для подбора товаров. Однако подбор по категориям позволяет выбрать только один признак, к примеру, "Подарки на день рождения". Скомбинировать несколько параметров ("Подарки на день рождения" и "Подарки от 500 до 1000 рублей") невозможно. Фильтр в каталоге тоже неудобен: в нем нет дополнительных параметров, помогающих сузить круг поисков.

Мы рекомендуем добавить в фильтр все категории (кроме цены), перечисленные в функции подбора. А сам функционал после этого лучше удалить со страниц каталога, чтобы не перегружать их дублирующими друг друга элементами.

Еще один важный, чуть ли не самый главный недостаток – отсутствие кнопки "Купить" прямо на мини-карточках товара. Приобрести его можно, только перейдя на отдельную товарную карточку. Добавьте эту кнопку! Она, скорее всего, повысит конверсию, поскольку позволит посетителю сразу добавить понравившийся товар в корзину.

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

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

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

Еще один важный недочет – отсутствие описания товара на многих карточках, к примеру, на страницах Толстовка Darth Vader (женская) и Плед с рукавами для болельщика Вперед, Зенит!. Конечно, некоторые посетители не читают тексты, но поверьте, веселое и интересное описание товара способно многих подтолкнуть к покупке. Проверьте все товарные карточки на наличие описаний.

На некоторых страницах контент блока "Похожие товары" соответствует заголовку – они действительно похожи. Однако довольно часто это не так. Что, например, объединяет Плед с рукавами для болельщика Вперед, Зенит! и Тапок с подогревом Hello Kitty, который показан на странице с фанатским пледом как "похожий товар"?

В зависимости от того, чего вы хотите добиться, предлагаем два варианта изменений:

1. Показать пользователям действительно похожие товары, являющиеся альтернативой друг другу. В таком случае необходимо отображать в этом блоке аналоги.
2. Показать самые популярные/интересные/востребованные товары и переименовать блок, к примеру, в "Популярные товары".

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

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

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

Формы

В формах для заполнения тоже есть ряд проблем. В разделах "Регистрация", "Обратная связь", "Сообщить о поступлении" есть капча (!). Понятно, что от спама надо защищаться. Но она неизбежно вызовет раздражение у многих.

Есть много способов защиты от спама, не требующих от посетителей никаких дополнительных действий. Например, можно добавить в форму невидимое поле < input type="text" name="name" value="" >. Роботы в первую очередь заполняют поле name.

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

При этом в форме "Обратная связь" обязательные для заполнения пункты не отмечены. Их стоит пометить во всех формах общеизвестным значком "*".

Желаем удачи и высокой конверсии!

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