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

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

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

26 сентября / Комментарии

Разбор юзабилити интернет-магазина Ulmart.ru и его преобразования за 2016 год

Изначально статья планировалась как одно целое, где я хотел рассмотреть возможные ошибки в юзабилити топа российских интернет-магазинов. Но после нескольких дней обзора, понял, что каждый сайт заслуживает отдельного разбора. Кроме того, мне захотелось не только осветить проблему, но и предложить своё видение ее решения. В связи с этим вся статья строится по схеме: Гипотеза о проблеме > Причина и Обоснование > Решение.
Поскольку статья начата еще в ноябре 2015 года, а закончена только сейчас, Ulmart успел исправить часть проблем,  обозначенных в статье. Об этом я дополнительно говорю в примечаниях . И сейчас мы можем отследить те преобразования, которые были сделаны.

далее →

6 сентября / Комментарии

Комфорт покупателей как залог успешного бизнеса. Основные ошибки в юзабилити интернет-магазинов

Четыре года назад была опубликована статья «22 ошибки в юзабилити интернет-магазинов, а также работающие варианты по их исправлению». Мы решили, что настала пора освежить данную информацию и задали разработчикам сайтов и CMS следующие вопросы: «Какие указанные в данном материале ошибки по-прежнему актуальны?», «С какими юзабилити-ошибками интернет-магазинов вам приходится встречаться чаще всего?», «Какие юзабилити-советы вы можете дать заказчикам?». И вот что мы узнали.

далее →

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

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

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

далее →

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

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

далее →

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

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

далее →

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