Статью «8 UX Requirements for Designing a User-Friendly Homepage Carousel» написал Джейми Эплсид 13 января 2015 года.
Карусели часто встречаются в интернет-магазинах. Особенно на главных страницах. Мы обнаружили их на главных страницах десктопных версий 52% топовых американских интернет-магазинов. Мы ещё не закончили соответствующее исследование, но предварительные данные показывают, что на мобильных версиях карусели тоже популярны.
Примечание: desktop site переводится как «версия сайта для настольных компьютеров», но в тексте я пишу «десктопная версия» ради лаконичности и противопоставления «мобильной версии».
Полезны ли карусели пользователям? Или единственная их цель — примирить отделы интернет-магазина, дерущиеся за баннерное место на самом видном месте? Ответ прост: карусели на главных страницах могут быть полезны, но часто на практике работают они очень плохо. Исследование выявило 8 проблем в реализации каруселей. Проблемы и решения отличаются для мобильных и десктопных версий сайтов.
Обратите внимание, мы пишем о дизайне каруселей и взаимодействии с ними, а не о контенте. В рамках статьи мы допускаем, что к содержанию каруселей претензий нет, и сосредотачиваемся на том, чтобы сделать её удобнее для пользователей.
- Если содержание подобрано плохо, оно некачественное и не соответствует ожиданиям, работать карусель будет плохо. Даже если с ней легко взаимодействовать;
- Если содержание похоже на рекламу, из-за баннерной слепоты многие проигнорируют даже полезное содержание;
- Плохое и вводящее в заблуждение содержание — тоже так себе идея, неважно, как оно выглядит.
Во время тестов мы часто наблюдали, как внимание респондентов привлекали большие авторские изображения, которые часто встречаются в каруселях на главных страницах. И как незначительные на первый взгляд недоработки раздражали, вводили людей в заблуждение и превращали их интерес в неудачный и даже вредный пользовательский опыт.
Рассмотрим 3 главных элемента: последовательность слайдов, их автоматическая смена, контекст устройства (отличие мобильных, планшетов и десктопов).
Последовательность слайдов
Большинство пользователей не увидит всех слайдов, даже если они сменяются автоматически. Они просто не проведут столько времени на главной странице и особенно в её верхней части.
В ходе тестирования респонденты уходили с главной или прокручивали её так, что карусель скрывалась из виду, задолго до того как появлялся последний слайд. В случае с «полностью ручной» сменой первые слайды отображаются до тех пор, пока пользователи не начинают переключать их самостоятельно.
Это показывает, что последовательность слайдов чрезвычайна важна. Первые получают намного больше внимания, чем следующие за ними. При этом нельзя быть уверенным, что пользователи увидят какой-то конкретный слайд. Разве что первый слайд в карусели, находящейся на первом экране десктопного сайта.
На мобильных карусель часто смещается с первого экрана. А ещё пользователь может не дождаться загрузки большого изображения и пойти дальше, потому что кроме этого изображения отвлечься ему не на что. В десктопных версиях пользователи обычно 1–2 секунды изучают навигационное меню, чего достаточно для загрузки первого слайда.
Это не проблема, если кроме карусели есть альтернативный путь к возможностям и содержимому сайта. Однако, многие сайты из наших исследований продвигали определённые предложения и возможности (продуктовые визарды, поиск подарков и так далее) только с помощью карусели. А вот это уже проблема. Многие респонденты уходили с главной страницы, так и не узнав об этих инструментах.
Кратко: осторожно выбирайте последовательность слайдов, используйте карусель только для дополнительного продвижения, то есть слайды не должны быть единственным путём к возможностям и содержимому сайта.
Автоматическая смена слайдов
Автосмена распределяет внимание пользователя между слайдами и намекает, что перед ним карусель, а не простой баннер. Но анимация привлекает к себе повышенное внимание, соответственно, повышаются требования и к содержимому карусели.
Если вы всё это понимаете и оставляете автосмену слайдов, учтите следующие нюансы её работы.
Состояние при наведении курсора
Включайте автосмену только если устройство пользователя распознаёт состояние при наведении курсора. Это критически важно для распознавания интереса пользователя.
Если пользователь навёл курсор на слайд, это признак того, что содержимое его заинтересовало и он, возможно, захочет нажать на него после прочтения текста. Поэтому приостанавливайте автосмену, чтобы пользователь дочитал текст и не нажал по ошибке на следующий внезапно открывшийся слайд.
На практике это значит, что автосмена не годится для мобильных сайтов. В мобильных устройствах нет курсоров и состояния при наведении курсора, люди взаимодействуют с ними при помощи касаний. Если нет способа понять, куда смотрит пользователь, сайт не узнает, собирается он нажать на текущий слайд или нет. Слайд может смениться за мгновение до нажатия на карусель, и это приведёт к открытию ненужной страницы. В ходе исследования мы наблюдали такой сценарий множество раз.
Большинство посетителей мобильных сайтов используют устройства без состояний при наведении курсора. На них автосмену лучше не использовать, так как сейчас неизвестно, как избежать несвоевременной смены слайдов. Минусы от открытия ненужных страниц частью пользователей перевешивают плюсы от распределения внимания между слайдами.
Нюансы автосмены на десктопных сайтах
Для правильной автосмены на десктопных сайтах обратите внимание на 3 момента:
- Слайды не сменяются слишком быстро;
- Автосмена приостанавливается при наведении курсора;
- Автосмена прекращается после любого активного пользовательского действия.
1. Слайды не сменяются слишком быстро
В этом случае пользователи не успеют рассмотреть интересный слайд. Им будет неприятно в спешке читать текст, ожидая смены слайда. Слишком медленная автосмена вызовет обратный эффект, пользователи заскучают со слайдами, которые им не очень интересны.
Длительность должна зависеть от количества текста на слайде. Для одного короткого заголовка хватит 5–7 секунд, для многословного текстового содержания нужно больше времени, прежде чем автосмена переключит карусель на следующий слайд. Как следствие, каждому слайду можно установить уникальную длительность.
2. Автосмена приостанавливается при наведении курсора
Между положением курсора на странице и вниманием пользователя есть взаимосвязь (Родден К. и другие, Google 2008, страница 29). Таким образом, наведение курсора на карусель можно считать показателем того, что пользователь заинтересовался слайдом, и лучше их автосмену приостановить.
Но важнее сделать это для того, чтобы избежать ситуации, когда пользователь хочет нажать на интересный ему слайд, а нажимает на новый, только что отобразившийся в карусели. Мы часто наблюдали это в своих тестах.
Если пользователь понял, что попал не туда, это лишь слегка его расстроит, так как придётся вернуться, найти в карусели нужный слайд и нажать на него снова. Но мы наблюдали много ситуаций, когда респонденты не понимали, что произошло, продолжали изучать неправильную страницу и быстро находили её совершенно бесполезной.
Важно приостанавливать автосмену слайдов при наведении курсора, чтобы не расстраивать пользователей и не отправлять на бесполезные страницы. К сожалению, 22% топовых интернет-магазинов этого не делают.
Примечание: если пользователь убрал курсор с карусели и никак с ней не взаимодействовал, возобновляйте автосмену. Наведение курсора нельзя интерпретировать как взаимодействие, так как пользователь может случайно провести курсором над каруселью. Наведение курсора — хороший способ понять, на что пользователь обратил внимание, но это не активное пользовательское взаимодействие.
3. Автосмена прекращается после любого активного пользовательского действия
Если пользователь активно взаимодействует с каруселью, например, переключает слайды, останавливайте автосмену. Даже если пользователь увёл курсор.
Если он открыл конкретный слайд с помощью кнопок «Следующий», «Предыдущий» или индикаторов, скорее всего, он сделал это намеренно. Не стоит обесценивать сделанный пользователем выбор только потому, что он, возможно, решил изучить остальное содержимое главной страницы, прежде чем нажимать на выбранный слайд.
Нажатие в корне отличается от наведения курсора, которое в лучшем случае сообщит об интересе пользователя. Нажатие — это конкретный пользовательский запрос и надёжный показатель его интереса и намерений. Поэтому останавливайте автосмену после активных действий пользователя, так как он мог открыть определённый слайд намеренно.
Мобильные сайты
Как мы уже писали, не стоит автоматически переключать слайды на мобильных сайтах, так как мы взаимодействуем с ними касаниями, а не двигая курсор по экрану. Но обратите внимание на ещё три момента.
Во-первых, поддерживайте основные механики работы с мобильными устройствами. В частности, жесты смахивания, которыми пользователи привыкли пролистывать галереи. Это не значит, что нужно отказаться от традиционных карусельных кнопок (следующая, предыдущая и индикаторы). В исследовании мобильной коммерции мы убедились, что их можно добавить к уже работающим жестам.
Во-вторых, мы часто видели, что в каруселях на мобильных сайтах были те же изображения, что и на десктопных. Это не проблема, если они подобраны аккуратно и можно быть уверенным, что текст останется читаемым даже на маленьких экранах мобильных в портретном режиме. Кратко: будьте аккуратны, повторно используя изображения с текстом.
И в-третьих, пользователи мобильных менее терпимы к медленной загрузке слайдов. Скорее всего, потому что кроме карусели на экране ничего нет. На десктопных сайтах люди обычно просматривают навигационные меню и другое содержимое, пока загружаются слайды.
Контрольный список для внедрения карусели
Если содержание карусели плохого качества, нерелевантно и неаккуратно подобрано, её не спасёт удобное взаимодействие. Но если эти критерии учтены, карусель — отличный способ рассказать пользователям об интересных возможностях и содержимом сайта.
Если вы используете карусель, при её внедрении:
- Тщательно определите последовательность слайдов;
- Слайд не должен быть единственным путём к функциям и содержимому сайта;
- Переключайте слайды автоматически, если готовы к тому, что анимация привлечёт внимание к карусели;
- Не переключайте слайды автоматически на мобильных сайтах (пока на них не появится аналог состояния при наведении курсора);
- Убедитесь, что слайды не меняются слишком быстро или медленно. Если потребуется, настройте уникальную длительность показа для каждого слайда;
- Приостанавливайте автосмену при наведении курсора, чтобы избежать смены слайда за мгновение до нажатия;
- Останавливайте насовсем автосмену после осмысленного взаимодействия пользователя с каруселью. Например, после ручного переключения слайдов;
- На мобильных убедитесь, что работают жесты смахивания. И что текст остаётся читаемым, если используются те же изображения, что и в десктопной версии.
Да, часть пользователей проигнорирует карусель из-за баннерной слепоты. А кто-то просто их не любит. Но если вы прислушаетесь к этим рекомендациям, остальным будет удобно, слайды волшебным образом станут привлекательнее, а содержание полезнее. Если учесть эти 8 нюансов вы не можете, от использования карусели на главных страницах лучше отказаться вовсе.
…
Также опубликовано в VC и на Медиуме.
Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 249 рублей.