.webp)
.webp)
В сегодняшней статье мы разберем 10 лучших практик, которые помогут вам проектировать эффективные карусели — как для десктопных, так и для мобильных интерфейсов.
Карусель (или слайдер) — популярный элемент дизайна, который позволяет разместить несколько фрагментов контента (изображения, текст, видео) в максимально компактном формате. Чаще всего карусели можно встретить на сайтах электронной коммерции, где они используются для демонстрации товаров и специальных предложений.
Основные выводы:
- Карусели на главных страницах сайтов электронной коммерции зачастую не работают должным образом.
- Из-за проблем взаимодействия пользователи могут пропустить важный контент.
- Соблюдение 10 ключевых принципов проектирования каруселей (или их замена на статичное изображение) гарантирует, что пользователи легко найдут интересующие их функции.
Статистика
- 33% ведущих американских и европейских сайтов электронной коммерции имеют карусель на главной странице;
- 46% таких каруселей реализованы неправильно с точки зрения UX.
Масштабное тестирование сайтов электронной коммерции, проведенное Baymard, показало, что пользователям зачастую сложно взаимодействовать с каруселями, поскольку они не соответствуют ключевым требованиям юзабилити. В этой статье мы разберем:
- 3 требования к дизайну каруселей в десктопных и мобильных интерфейсах;
- 3 дополнительных UX-требования для десктопных каруселей с автоматической прокруткой;
- 4 дополнительных UX-требования для мобильных каруселей.
3 требования к дизайну каруселей в десктопных и мобильных интерфейсах
Наше тестирование показало, что, хотя карусели на главной странице могут быть эффективными, около половины из них не работают на практике, однако эти проблемы можно исправить.
1) Тщательно выбирайте первый слайд
Большинство пользователей увидят НЕ все слайды в карусели, даже если она прокручивается автоматически. Они просто не задерживаются на главной странице так долго, особенно в верхней ее части.
Во время тестирования участники, как правило, переходили на другую страницу или прокручивали главную страницу вниз задолго до того, как происходила полная смена слайдов.
Это справедливо для автоматических каруселей. Если же карусель прокручивается вручную, она будет отображать только первый слайд, пока пользователи сами не решат посмотреть остальные.
Последовательность слайдов в карусели невероятно важна. Вы должны тщательно выбрать первый слайд, поскольку он получит гораздо больше внимания, чем другие. Используйте его для демонстрации контента, который способен заинтересовать большинство пользователей, например, распродажи, новинок или сезонных товаров.
2) Слайды карусели не должны выступать в качестве единственного или основного пути к функциям или контенту.
Некоторые пользователи не увидят ни одного слайда, кроме стартового, который по умолчанию получает наибольшее количество просмотров.
Во время тестирования, особенно на мобильных устройствах, большинство участников сразу же приступали к поиску товара (например, использовали поле поиска, открывали главное меню и т.д.), иногда даже до завершения загрузки главной страницы. Следовательно, они либо вообще не увидели, либо лишь мельком взглянули на содержимое карусели.
Также высок риск, что карусель вызовет у пользователей баннерную слепоту, и они пропустят ее из-за того, что она визуально напоминает рекламу. Поэтому важные функции никогда не должны быть доступны ТОЛЬКО из карусели. Вместо этого повторите содержимое слайда в других разделах главной страницы (например, функция «Распродажа» может быть представлена как на слайде карусели, так и в основной навигации).
3) Спроектируйте заметные элементы управления
Если элементы управления карусели трудноразличимы, некоторые пользователи не смогут приостановить автопрокрутку слайдов или пролистать их вручную. Те же, кто их заметили, могут столкнуться с проблемами в процессе взаимодействия, если области нажатия слишком маленькие и по ним трудно попасть.
Таким образом, элементы управления карусели должны быть заметными, хорошо контрастировать с фоном и располагаться с двух сторон.
3 дополнительных UX-требования для десктопных каруселей с автоматической прокруткой
Автоматическая прокрутка хорошо работает на десктопе (но не в мобильных интерфейсах), поскольку она повышает видимость слайдов и демонстрирует, что перед нами именно карусель, а не статичный баннер.
Есть 3 детали, которые необходимо учитывать для реализации эффективной автопрокрутки:
1) Разумный интервал между слайдами
👎🏻«У этих ребят есть несколько пешеходных экскурсий по разным районам Лондона». О! Как быстро сменился слайд, это было странно. Я даже не успеваю прочитать, что написано в этих плашках от TripAdvisor». Когда слайды переключаются слишком быстро, как это было в случае с Fun London Tours, карусели будут малоэффективны и, скорее всего, произведут плохое впечатление на пользователей.
Когда слайды сменяются слишком быстро, некоторые пользователи не успевают нормально изучить интересующий их контент. Это особенно верно, если слайд содержит текст, и у людей недостаточно времени, чтобы прочитать его полностью.
Однако если слайды сменяются слишком медленно, и при этом видимый слайд недостаточно интересен, это может вызывать раздражение.
Среднее время переключения слайдов, содержащих только заголовок и несколько тегов, — 5–7 секунд, в то время как слайды с большим количеством текста могут оставаться статичными до 10 секунд.
2) Приостанавливайте автоматическую прокрутку при наведении
👍🏻Приостановка смены слайдов при наведении на карусель на главной странице Home Depot позволяет пользователям эффективнее взаимодействовать с контентом.
Автоматическая прокрутка должна приостанавливаться при наведении курсора, чтобы пользователь мог рассмотреть слайд, и, что более важно, совершить целевое действие. Она может возобновиться, как только курсор покинет карусель.
Во время тестирования слайды зачастую менялись непосредственно перед тем, как участник кликал по ним, что приводило к загрузке неправильной страницы.
Очевидно, что такой опыт нельзя назвать позитивным, а в некоторых случаях он может быть сопряжен с нежелательными последствиями, если пользователь не понимает, что произошло, и начинает просматривать неактуальную страницу.
3) Останавливайте автопрокрутку после активного взаимодействия
👍🏻Автопрокрутка карусели на сайте Amazon останавливается, как только пользователь вручную кликает на стрелку вперед или назад. Это дает пользователям возможность контролировать ситуацию, позволяя им сосредоточиться на любом интересующем их слайде.
Обычно автоматическая прокрутка перезапускается после приостановки, но есть одно исключение. Если пользователь взаимодействовал с каруселью как-то помимо наведения, например, нажимал на элементы управления, она не должна возобновляться. Такие действия являются целенаправленными, поэтому мы должны дать людям достаточно времени, чтобы изучить контент.
4 дополнительных UX-требования для мобильных каруселей
Наше масштабное тестирование показало, что для создания успешной карусели в мобильных интерфейсах необходимо придерживаться 4 правил:
1) Избегайте автоматической прокрутки
Автоматическая прокрутка слайдов в мобильных интерфейсах — плохая идея.
Ключевое различие между десктопными и мобильными версиями сайтов заключается в отсутствии в последних состояния наведения. На десктопе намерения пользователя очевидны, когда он наводит курсор на карусель, и, поскольку, скорее всего, он читает текст на слайде, автопрокрутку можно приостановить. Отсутствие состояния наведения на мобильных устройствах не позволяет отследить подобную заинтересованность.
Во время тестирования участники, просматривавшие контент в автоматической карусели, часто расстраивались, если слайд менялся до того, как они успевали его изучить. Хуже того, некоторые из них нажимали на него, чтобы узнать больше, но в последнюю секунду слайд переключался, что приводило к непреднамеренному переходу на случайную страницу.
Большинство участников быстро понимали, что произошло, но те, кто не заметили смены слайда, были сбиты с толку тем контентом, который они видели.
Поскольку в настоящее время не существует технического способа избежать такой несвоевременной смены слайдов, не стоит использовать автопрокрутку в мобильных интерфейсах. Ее недостатки перевешивают достоинства, связанные с повышением видимости всех слайдов.
2) Обеспечьте поддержку привычных жестов
Пользователи мобильных устройств привыкли использовать определенные жесты — например, свайп для перехода к следующему слайду. Да, конечно, мы можем добавить в карусель стандартные элементы управления, такие как кнопки «следующий»/«предыдущий» и индикаторы, но тестирование показало, что они должны служить дополнением к поддержке привычных жестов.
3) Убедитесь, что текст на слайдах получился читаемым
Мобильные сайты нередко напрямую используют слайды из десктопной версии. Однако это приводит к проблемам с читабельностью и доступностью. Помните, что любой текст на слайдах должен быть настоящим HTML-текстом, а не частью изображения (это также лучше для SEO).
4) Обеспечьте быструю загрузку слайдов
Пользователи мобильных устройств менее терпеливы, они не готовы ждать, пока загрузится «тяжелый» контент.
Один из участников тестирования пожаловался: «Все загружается так медленно [постукивает пальцами]. Я не знаю, в чем дело: в моем интернет-соединении, в моем телефоне или в сайте. Так на кого же мне направить свое нетерпение? На данном этапе... я бы сказал «нет» и отправился бы куда-то еще».
Выбирая контент для карусели, следует учитывать скорость загрузки, поскольку пользователи разочаруются, если она будет занимать более секунды (это в первую очередь касается визуального и анимированного контента).
Что выбрать: карусель или статичное изображение
Более простая, эффективная альтернатива карусели — статичный контент. Он позволяет избежать всех проблем, о которых мы говорили выше, и значительно упрощает взаимодействие для большинства пользователей. Люди могут просматривать информацию о товарах и специальных предложениях, просто прокручивая страницу вниз, легко и естественно.
Это лучший компромисс для многих сайтов электронной коммерции. Так они могут уделить больше внимания юзабилити вместо того, чтобы тратить недели на попытки спроектировать и реализовать идеальную карусель. Однако если карусель на главной странице все же предпочтительнее, чем статичный контент, следуйте 10 лучшим практикам, которые мы разобрали в статье.
