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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итого

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

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

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

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

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

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

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

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

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

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

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