Карусель на главной интернет-магазина: 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

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

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

11 августа / Комментарии

Чек-лист юзабилити интернет-магазина

По-настоящему проверить удобство интернет-магазина без подтверждения данными веб-аналитики, не получится. Контекст взаимодействия; задачи, опыт и мотивы пользователей; устройства, с которых пользователи просматривают магазин — всё это влияет на конверсию и не может быть оценено чек-листом.
При составлении чек-листа, я ориентировался на исследования института Baymard, Юзабилити Лаб, Mastercart и студии Сибирикс + некоторые собственные наблюдения.

далее →

Навигация как способ управления вниманием пользователя

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

далее →

Адаптивный дизайн. Just do it

Вечером иногда очень хочется пиццы. Это желание охватывает прямо утром и терзает одичавший желудок весь день: пока едешь в метро, весь день в офисе и по пути домой. И вот, уже в маршрутке, рука тянется к телефону и открывает заветный адрес любимой пиццерии. Но что-то пошло не так. Ничего не видно. Малюсенькие квадратики раздражающе мелькают перед глазами, чтобы прочесть состав, приходится увеличивать страницу вручную. И ведь ещё нужно умудриться попасть на кнопку «Заказать». Именно так выглядит столкновение суровой реальности с резиновыми сайтами.

далее →

Что важнее: главная страница или карточка товара?

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

далее →

Проектирование экранов сайта по диаграмме Гутенберга

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

далее →

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