9 недооцененных аспектов мобильного юзабилити в интернет-магазинах

Как сделать мобильную версию сайта максимально эффективной? В рамках многолетнего исследования юзабилити мобильных интернет-магазинов Baymard Institute разработал более 140 рекомендаций на эту тему. Сегодня мы расскажем о самых удачных дизайн-паттернах и других аспектах взаимодействия с пользователями, выявленных в процессе тестирования 19 лидирующих онлайн-магазинов.

Анализ мобильных ecommerce-сайтов показал, что большинство из них не может предложить своим посетителям ключевые компоненты UX (user experience — пользовательского взаимодействия). По факту, практически все мобильные версии магазинов приносят едва ли половину конверсий, если сравнивать с их десктопными версиями.

В публикации мы охватим 9 ключевых UX-компонентов для мобильных интернет-магазинов, а также продемонстрируем удачные примеры их реализации. Все они будут поделены на 3 категории по степени сложности и важности: 3 простых, 3 средних и 3 продвинутых примера. Таким образом, статья пригодится как новичкам, так и уже состоявшимся интернет-магазинам.

3 базовых аспекта UX в мобильных интернет-магазинах

1. Не забывайте про зум

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


Источник: Musician’s Friend

На сайте Musician’s Friend пользователям сообщается, что они могут увеличить картинку при желании.

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

2. Пользуйтесь шаблонами клавиатур, адаптированными под touch-устройства

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

 

В большинстве случаев на числовых полях используется обычная раскладка клавиатуры, которую можно видеть на примере Grainger (слева). Сравните уровень удобства с раскладкой клавиатуры, представленной на сайте Baymard (справа).

Тестирование показало гораздо лучший результат с использованием адаптированных сенсорных раскладок, особенно, когда дело касалось числовых полей. Например, в процессе тестирования с пользователями iPhone 6S, удалось выяснить, что увеличенная на 521% числовая панель позволяет делать гораздо меньше ошибок. В то же время результат тестов Baymard показал, что около 54% мобильных интернет-магазинов как будто вообще не знают о существовании сенсорных раскладок, адаптированных под ввод чисел, почтовых индексов или номеров кредитных карт. Данная шпаргалка поможет вам познакомиться со всеми атрибутами для сенсорных клавиатур.

3. Не используйте автоматические “карусели” на главной странице

Примерно 30% мобильных сайтов используют автоматические “карусели” на главной странице, несмотря на то, что это часто вызывает серьезные проблемы в работе сенсорных устройств. Тестирование показало, что люди часто промахиваются при выборе нужных слайдов. Кроме того, многие пользователи подсознательно игнорируют карусели, расценивая их как рекламу.

Источник: L.L. Bean

Посмотрите на 2 версии главной страницы L.L. Bean: слева показан вариант с автоматической “каруселью”, а справа (в обновленной версии) используется хорошо зарекомендовавший себя паттерн с отображением сразу всех слайдов на главной странице.

Может и стоить использовать “карусели” в ПК-версиях сайтов (хотя этот тренд тоже угасает), но ни в коем случае не рекомендуем применять их на мобильных версиях. Большая часть проблемы кроется в отсутствии курсора на мобильных девайсах. В то время как на экране монитора автоматическую “карусель” можно притормозить, наведя на нее курсор мыши, в случае с сенсорными устройствами “карусели” живут своей жизнью и только раздражают пользователей.

Будет лучше, если вы поместите все важные слайды в виде статичного контента главной страницы.

4) Скройте форму авторизации и поместите “гостевую оплату” на видное место

Исследование Baymard установило, что 80% мобильных интернет-магазинов позволяют делать покупки, не регистрируясь на сайте. Однако 88% этих сайтов оформлены так, что большинство посетителей просто упускают из виду такую возможность. Это сродни тому, что ее не было бы вообще.

Источник: Baymard

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

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

5) Отключите автокоррекцию на странице проведения оплаты

Одним только правильно подобранным типом раскладки клавиатуры (совет номер 2) дело не обойдется. Не забудьте о дополнительной оптимизации. Например, автокоррекция категорически не дружит с аббревиатурами, названиями улиц, полями email-адреса, имени и т. д.

Источник: Amazon

Обратите внимание, как на примере Amazon забыли отключить автокоррекцию. Это часто приводит к ошибочному написанию адреса.

Только представьте себе, какое количество недоразумений может возникать у клиентов такого гиганта, как Amazon. Многие люди не замечают, что введенные ими данные были исправлены автокоррекцией, и подтверждают форму. И при этом на 79% мобильных сайтов все равно включена автокоррекция на страницах проведения оплаты.

Чтобы отключить эту функцию, просто воспользуйтесь атрибутом autocorrect=”off”.

6) Пусть ваша корзина будет списком покупок

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

Источник: Build.com

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

7) Рядом с опциями доставки всегда указывайте адреса точек самовывоза

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

Посмотрите, как Toys’R’U (картинка слева), так и REI (картинка справа) предлагают своим клиентам возможность самостоятельно забрать покупку. Однако Toys’R’U забыли упомянуть об этом на странице выбора метода доставки (как и 47% всех мобильных интернет-магазинов). Это существенно снижает вероятность, что кто-нибудь из потенциальных клиентов воспользуется столь важной опцией.

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

8) Предоставьте возможность поиска внутри текущей категории товаров

В рамках исследования в Baymard Institute выяснилось, что более половины пользователей пытаются искать что-либо, уже находясь внутри нужной категории, чтобы хоть немного “отфильтровать” ненужные им товары. Но в 94% интернет-магазинов данная функция просто отсутствует. Вместо этого приходится прибегать к поиску по всему каталогу.

Источник: B&H Photo

На сайте B&H Photo можно увидеть, как пользователям, которые пытаются найти нужную линзу, пройдя в категорию “SLR Camera Lenses”, предоставляется возможность сделать это.

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

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

9) Главная страница должна отражать ваш ассортимент

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

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

 

Посмотрите, как главные страницы Williams-Sonoma и Amazon позволяют посетителям при первичном “сканировании” страницы ознакомиться практически со всем ассортиментом.

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

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

08.02.2017

ОЦЕНИТЕ СТАТЬЮ)

Статья недели

5 способов изучить спрос на товар до открытия интернет-магазина.

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

© 2011-2016

Права на экспертные публикации принадлежат авторам.

Права на комментарии и статьи редакции принадлежат eMagnat.

Реклама на сайте