Лого vc.ru

8 правил дизайна «карусели» для главной страницы сайта — исследование Baymard Institute

8 правил дизайна «карусели» для главной страницы сайта — исследование Baymard Institute

Специалисты Baymard Institute опубликовали исследование дизайна каруселей на главных страницах сайтов и сформировали рекомендации по их проектированию.

Сооснователь «Проектората» Антон Григорьев перевёл для vc.ru заметку, опубликованную в блоге института.

Поделиться

Карусели часто встречаются в интернет-магазинах. Особенно на главных страницах. Мы обнаружили их на главных страницах десктопных версий 52% топовых американских интернет-магазинов. Мы ещё не закончили соответствующее исследование, но предварительные данные показывают, что на мобильных версиях карусели тоже популярны.

Полезны ли карусели пользователям? Или единственная их цель — примирить отделы интернет-магазина, дерущиеся за баннерное место на самом видном месте? Ответ прост: карусели на главных страницах могут быть полезны, но часто на практике работают они очень плохо. Исследование выявило 8 проблем в реализации каруселей. Проблемы и решения отличаются для мобильных и десктопных версий сайтов.

«Ого, какая агрессивная здесь реклама», — пожаловался посетитель страницы drugstore.com. — «Она сбивает меня с толку». Карусель с плохим содержанием не может быть хорошей.

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

  • Если содержание подобрано плохо, оно некачественное и не соответствует ожиданиям, работать карусель будет плохо. Даже если с ней легко взаимодействовать.
  • Если содержание похоже на рекламу, из-за баннерной слепоты многие проигнорируют даже полезное содержание.
  • Плохое и вводящее в заблуждение содержание — тоже так себе идея, неважно, как оно выглядит.

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

Рассмотрим три главных элемента: последовательность слайдов, их автоматическая смена, контекст устройства (отличие мобильных, планшетов и десктопов).

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

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

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

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

На мобильных карусель часто смещается с первого экрана. А ещё пользователь может не дождаться загрузки большого изображения и пойти дальше, потому что кроме этого изображения отвлечься ему не на что. В десктопных версиях пользователи обычно 1–2 секунды изучают навигационное меню, чего достаточно для загрузки первого слайда.

Единственный путь к визарду выбора подарка на Toys'R'Us — через слайд в карусели. Вероятность, что пользователи его обнаружат, крайне низка. Особенно, если это не первый слайд.

Это не проблема, если кроме карусели есть альтернативный путь к возможностям и содержимому сайта. Однако, многие сайты из наших исследований продвигали определённые предложения и возможности (продуктовые визарды, поиск подарков и так далее) только с помощью карусели. А вот это уже проблема. Многие респонденты уходили с главной страницы, так и не узнав об этих инструментах.

Кратко: осторожно выбирайте последовательность слайдов, используйте карусель только для дополнительного продвижения, то есть слайды не должны быть единственным путём к возможностям и содержимому сайта.

Автоматическая смена слайдов

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

Если вы всё это понимаете и оставляете автосмену слайдов, учтите следующие нюансы её работы.

Состояние при наведении курсора

Включайте автосмену только если устройство пользователя распознаёт состояние при наведении курсора. Это критически важно для распознавания интереса пользователя.

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

Респондент заинтересовался Spring Into Summer Mega Sale и нажал на него. К сожалению, мгновением ранее слайд сменился на Bike Blast, и пользователь попал не туда, куда хотел.

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

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

Нюансы автосмены на десктопных сайтах

Для правильной автосмены на десктопных сайтах обратите внимание на три момента:

  • Слайды не сменяются слишком быстро.
  • Автосмена приостанавливается при наведении курсора.
  • Автосмена прекращается после любого активного пользовательского действия.

Слайды не сменяются слишком быстро

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

Респондентам понравились большие красивые изображения на главной странице Pottery Barn. Многие из них посчитали, что слайды сменяются слишком быстро, и у них остаётся слишком мало времени на изучение содержимого.

Длительность должна зависеть от количества текста на слайде. Для одного короткого заголовка хватит 5–7 секунд, для многословного текстового содержания нужно больше времени, прежде чем автосмена переключит карусель на следующий слайд. Как следствие, каждому слайду можно установить уникальную длительность.

Автосмена приостанавливается при наведении курсора

Между положением курсора на странице и вниманием пользователя есть взаимосвязь (Родден К. и другие, Google 2008, страница 29). Таким образом, наведение курсора на карусель можно считать показателем того, что пользователь заинтересовался слайдом, и лучше их автосмену приостановить.

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

«Если я навёл курсор, оно должно остановиться», — объяснил посетитель Blue Nile.  — «Иначе я рискую нажать на неправильный слайд, потому что они меняются, и попасть на неправильную страницу».

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

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

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

Автосмена прекращается после любого активного пользовательского действия

Если пользователь активно взаимодействует с каруселью, например, переключает слайды, останавливайте автосмену. Даже если пользователь увёл курсор.

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

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

Мобильные сайты

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

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

Neiman Marcus использует одни и те же изображения для десктопной и мобильной версии сайта. На некоторых слайдах сложно разобрать текст.

Во-вторых, мы часто видели, что в каруселях на мобильных сайтах были те же изображения, что и на десктопных. Это не проблема, если они подобраны аккуратно и можно быть уверенным, что текст останется читаемым даже на маленьких экранах мобильных в портретном режиме. Кратко: будьте аккуратны, повторно используя изображения с текстом.

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

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

Если содержание карусели плохого качества, нерелевантно и неаккуратно подобрано, её не спасёт удобное взаимодействие. Но если эти критерии учтены, карусель — отличный способ рассказать пользователям об интересных возможностях и содержимом сайта.

Если вы используете карусель, при её внедрении:

  • Тщательно определите последовательность слайдов.
  • Слайд не должен быть единственным путём к функциям и содержимому сайта.
  • Переключайте слайды автоматически, если готовы к тому, что анимация привлечёт внимание к карусели.
  • Не переключайте слайды автоматически на мобильных сайтах (пока на них не появится аналог состояния при наведении курсора).
  • Убедитесь, что слайды не меняются слишком быстро или медленно. Если потребуется, настройте уникальную длительность показа для каждого слайда.
  • Приостанавливайте автосмену при наведении курсора, чтобы избежать смены слайда за мгновение до нажатия.
  • Останавливайте насовсем автосмену после осмысленного взаимодействия пользователя с каруселью. Например, после ручного переключения слайдов.
  • На мобильных убедитесь, что работают жесты смахивания. И что текст остаётся читаемым, если используются те же изображения, что и в десктопной версии.

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

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

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

Вот интересно, что же может стать аналогом курсора на тачскринах? ;)

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

когда vcru сменит дизайн приложения?

0

Собственно главный вопрос не раскрыт - А нужны ли карусели в целом.
И чем лучше сайт с каруселью, чем просто с парой больших баннеров без смены.

0

Карусель нужна. Конверсия с неё выше чем без неё.
А чем лучше сайт с каруселью хз, но конверсия лучше.
Это всё равно как думать "почему этой аудитории нравится одна и та же музыка"

0

Что думаете о варианте, когда рядом с каруселью или прямо на ней есть превьюшки/заголовки всех слайдов из карусели, чтобы юзер мог одним взглядом оценить "главное" и выбрать не перелистыванием, а кликом/наведением? Очевидно, ждать смены слайдов будут немногие, листать в неизвестность тоже. Решили делать так в новом проекте, но статистики пока нет.

0

Что думаете о варианте, когда рядом с каруселью или прямо на ней есть превьюшки/заголовки всех слайдов из карусели, чтобы юзер мог одним взглядом оценить "главное" и выбрать не перелистыванием, а кликом/наведением? Очевидно, ждать смены слайдов будут немногие, листать в неизвестность тоже. Решили делать так в новом проекте, но статистики пока нет.

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Sasha Zivers

Ничего не заставит.

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Sasha Zivers

Ну да, приравнивать жену к предментам, ок-ок. )

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Sasha Zivers

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

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Artem Korsunov

Сайт написан на Laravel :)

«Омоймот» — сайт для подбора мотоциклов с блогами пользователей
0
Alexander Pershin
HTML Academy

Все перечисленные задачи типовые для IT, просто взял примеры чуть шире просто программирования.

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

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

Куда пойти учиться программисту: советы опытного тимлида, преподавателя и новичка
1
Показать еще