Карусель на главной интернет-магазина: 10 советов, проверенных опытом

Исследователи ecommerce из Baymard Institute недавно опубликовали отчет по результатам тестирования каруселей на главных страницах ряда магазинов. Тестированию подверглись как десктопная, так и мобильная версии сайтов. Мы резюмировали этот отчет; если в вашем интернет-магазине крутится слайдер, рекомендуем к ознакомлению. Наверняка что-то в этом материале вас удивит, с чем-то вы согласитесь, а что-то примете в свою практику.

Карусель на главной странице интернет-магазина Drugstore.com.jpg

«Ух ты… агрессивная реклама», жалуется один из тестеров, приземлившийся на главной Drugstore.com. «На моей концентрации это плохо сказывается». Эффективность карусели во многом зависит от ее контента. Качественные изображения в каруселях часто привлекали внимание участников тестов, однако нередко изначальное воодушевление превращалось в раздражение. Три ключевых элемента карусели, которые влияют на такое превращение – последовательность слайдов, тип ротации (авто/ручная), тип устройства (смартфон/планшет/десктоп).

Последовательность слайдов

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

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

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

Карусель в мобильной версии Toys'r'us.jpg

Страница подбора подарка в мобильной версии интернет-магазина Toys’R’Us доступна только из карусели. Функционал полезный, но реально пользуется им, видимо, не так много людей, так как единственная точка входа расположена в элементе, который не всегда привлекает внимание посетителей.

Карусель в десктопной версии

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

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

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

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

Карусель в мобильной версии

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

Карусель в мобильной версии интернет-магазина должна поддерживать штатные жесты. Чтобы перейти от слайда к слайду, большинство пользователей «смахивает» кадр. При этом, вовсе избавляться от стрелок и кнопок, с помощью которых можно управлять каруселью, не следует.

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

Карусель в мобильной версии Nieman Marcus.jpg

Текст на слайдах в этом примере практически не читается.

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

Итого

1. Content is king, эффективность карусели определяется, в первую очередь, ее наполнением.

2. Тщательно подбирайте последовательность слайдов.

3. Никогда не делайте слайд единственной точкой доступа к полезным инструментам, разделам и т.п.

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

5. Не используйте авторотацию на мобильных сайтах.

6. Тщательно подбирайте время показа каждого слайда при авторотации.

7. Приостанавливайте авторотацию при наведении на карусель указателя мыши.

8. Останавливайте авторотацию полностью после любого взаимодействия посетителя с ней (клик по кнопкам ручного управления).

9. Обеспечивайте поддержку штатных жестов в мобильной карусели.

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

Есть ли карусель в вашем магазине? Какие улучшения делали вы? Делитесь опытом в комментариях.
По мотивам материала 8 UX Requirements for Designing a User-Friendly Homepage Carousel

Автор: Vyacheslav Vityuk

Подписаться на новости

Читайте также

Какие изображения повышают конверсию сайта: на основе тестов

Изображения повышают конверсию сайта. На эту тему написано много статей. В основном приводят примеры сайтов из США. Мы решили на своем опыте протестировать разные изображения. Чтобы понять, когда конверсия выше.

далее →

Как избежать 10 ошибок в работе с цветом на сайте

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

далее →

18 апреля / Комментарии

Правила оформления шапки интернет-магазина

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

далее →

17 апреля / Комментарии

Как психология цвета может увеличить конверсию вашего сайта

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

далее →

12 апреля / Комментарии

Что, как, зачем, куда: проверенные принципы компоновки элементов интернет-магазина

Коллеги из сервиса AskUsers продолжают делиться опытом из UX и веб-дизайна. В этой статье рассмотрим общие принципы, которые нужно соблюдать в процессе проектирования и разработки интернет-магазина, чтобы сайт получился стильным и модным удобным и продающим.

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook