10 требований UX, которым должен соответствовать удобный для пользователей дизайн карусели на главной странице

• Многие карусели на главной странице сайтов электронной торговли работают некорректно.
• Из-за сложностей с взаимодействием с каруселями на главной странице пользователи могут пропустить важный контент.
• Следуя 10 ключевым принципам UX-разработки каруселей — или используя вместо них статичные изображения — вы можете обеспечить пользователям лёгкий поиск интересующих их функций.

Ключевые статистические данные

• 33% сайтов электронной торговли имеют карусель на главной странице.
• 46% всех каруселей на домашних страницах сайтов электронной торговли имеют проблемы с производительностью UX.

Последние UX-тесты Baymard показывают, что на 33% ведущих сайтов электронной торговли есть карусель.

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

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

Действительно, 46% сайтов для ПК и мобильных устройств с каруселью на главной странице имеют проблемы с юзабилити-реализацией.

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

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

• 3 требования к дизайну карусели для настольных и мобильных устройств
• 3 дополнительных требования к UX для автоповорота карусели на рабочем столе
• 4 дополнительных требования к UX для мобильных каруселей

3 Требования к дизайну карусели для настольных и мобильных устройств

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

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

1) Тщательно выбирайте начальный слайд

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

Напротив, крупный текст «Распродажа» и использование привлекающих внимание красных акцентов дизайна на первом слайде Overstock наверняка привлекут пользователей, заинтересованных в большой распродаже.

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

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

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

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

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

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

2) Избегайте использования карусельных слайдов в качестве единственного или основного пути к функциям или контенту.

Хотя большинство пользователей увидят предложение на iPhone от AT&T, поскольку оно отображено на первом слайде карусели (первое изображение), гораздо меньше пользователей увидят второй слайд и, следовательно, могут упустить выгодную сделку (второе изображение).

Ссылка «Prime Early Access Sale» в карусели на Amazon — не единственная заметная ссылка на этот контент — основная навигационная ссылка «Prime Early Access Deals» переносит пользователей в то же место. Предоставление альтернативы ссылке карусели позволяет пользователям, которые не видят соответствующий слайд, получить доступ к контенту.

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

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

Следовательно, эти участники , скорее всего, никогда не видели или лишь мельком просматривали содержимое карусели.

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

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

Вместо этого содержимое слайда должно повторяться в других местах главной страницы (например, функция «Продажи» может присутствовать как на слайде-карусели, так и в основной навигации).

3) Обеспечьте заметное ручное управление

Элементы управления каруселью на Newegg очень трудно увидеть. Следовательно, некоторые пользователи не смогут приостановить или остановить вращение слайдов и, следовательно, не смогут должным образом рассмотреть интересующий слайд перед его заменой.

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

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

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

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

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

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

3 дополнительных требования к UX, которые необходимо соблюдать для автоповорота карусели на рабочем столе

Как правило, слайды карусели должны автоматически поворачиваться на сайтах для ПК (но не на мобильных сайтах), поскольку это помогает распределить воздействие по слайдам и ясно показывает, что изображение принадлежит карусели, а не одному статическому баннеру на главной странице.

Однако для эффективной авторотации необходимо соблюдать три особенности ее реализации.

1) Установите автоповорот слайдов карусели на разумный интервал

«У этих ребят есть несколько пешеходных экскурсий, показывающих разные стороны Лондона» — О! Это изменилось очень быстро, это было странно. Я даже не закончил — все происходит слишком быстро. Я даже не могу прочитать, что в этих коробках от TripAdvisor». Когда слайды вращаются слишком быстро, чтобы пользователи могли усвоить весь их контент, как это было в Fun London Tours во время масштабного тестирования туров и впечатлений, карусели будут бесполезны и, скорее всего, произведут плохое впечатление на пользователей.

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

Это особенно актуально, если слайд содержит текст и у пользователей нет времени прочитать его полностью.

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

В зависимости от объема текста на слайдах, для слайдов, содержащих только заголовок и несколько тегов и меток, разумно чередовать слайды каждые 5–7 секунд , в то время как слайды с большим количеством текста могут нуждаться в статичности в течение 10 секунд.

2) Приостановка авторотации при наведении

Приостановка вращения при наведении курсора на карусель на главной странице Home Depot позволяет пользователям полностью взаимодействовать с содержимым каждого слайда.

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

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

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

Поэтому важно приостанавливать слайды при наведении мыши.

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

3) Остановить автоповорот после активного взаимодействия с пользователем

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

Существует исключение для перезапуска авторотации после ее приостановки.

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

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

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

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

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

1) Избегайте самовращающихся каруселей

На мобильных сайтах автоповорот слайдов — плохая идея.

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

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

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

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

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

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

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

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

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

Недостатки карусели, которая резко меняется и приводит к отклонениям, намного перевешивают преимущества, связанные с распределением экспозиции по всем слайдам карусели.

На практике это означает, что мобильные карусели не выполняют свою основную функцию — предоставление доступа к разнообразному контенту посредством авторотации.

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

2) Поддержка мобильных жестов

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

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

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

3) Убедитесь, что текст на слайде разборчив

Слайд карусели в Home Depot , написанный в виде HTML-текста, легко читается, несмотря на использование шрифта меньшего размера.

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

Однако это часто приводит к неразборчивым изображениям в карусели и проблемам с соблюдением требований доступности.

Поэтому любой текст в слайде карусели должен быть настоящим HTML-текстом, а не встроенным в изображение (это, как правило, также лучше для SEO).

4) Обеспечьте быструю загрузку контента карусели

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

Как пожаловался один из мобильных участников: «Сейчас все просто медленно [стучит пальцами]. Я не знаю, в чем дело: в моем интернет-соединении, в телефоне или в веб-сайте. Так на кого мне направить свое нетерпение? На этом этапе… я бы сказал «нет», вышел с веб-сайта и занялся чем-то другим».

При выборе контента для каруселей следует учитывать скорость загрузки, поскольку пользователи быстро разочаруются в контенте, загрузка которого занимает больше секунды (например, слишком визуальный или анимированный контент).

Решите, является ли карусель на главной странице правильным выбором — или отдайте предпочтение разделам со статическим контентом

Как правило, более эффективной альтернативой каруселям является отображение слайд-контента на главной странице, как показано здесь, на Living Spaces . Пользователи могут просматривать любые специальные предложения, а также переходить к основным разделам, не имея дела с каруселью.

Аналогично, H&M демонстрирует продукты и предложения прямо на главной странице. Это дает пользователям четкий обзор каталога продуктов, а также выделяет любые текущие предложения.

Учитывая проблемы, которые создают карусели, тестирование показало, что эффективной и более простой альтернативой является использование разделов статического контента.

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

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

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

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

Настольные и мобильные сайты должны соответствовать следующим трем деталям реализации карусели:

1. Тщательно выбирайте начальный слайд.
2. Избегайте использования карусельных слайдов в качестве единственного или основного пути к функциям или контенту.
3. Обеспечить заметное ручное управление

Сайты для ПК с авторотирующимися каруселями должны соответствовать следующим трем дополнительным деталям реализации:

1. Установите автоповорот слайдов карусели на разумный интервал
2. Пауза авторотации при наведении
3. Приостановить автоповорот после активного взаимодействия с пользователем

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

1. Избегайте автовращающихся каруселей
2. Поддержка мобильных жестов
3. Убедитесь, что текст слайда разборчив
4. Обеспечьте быструю загрузку контента карусели

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

В этой статье, под авторством Эдварда Скотта, представлены результаты исследования лишь нескольких из более чем 650 руководств по UX в Baymard.