Привет!

10 требований к “карусели” на главной странице [digital note #18]

Валерия СластенниковаВалерия Сластенникова

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

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

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

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

Использование карусели - это не панацея для главных страниц. Существует немалое количество альтернатив, которые и результативные, и разрабатываются намного легче. Критика же в сторону “карусели” объяснима из-за отсутствия в большинстве случаев 10 важнейших деталей удобства пользования. Однако нельзя сказать, что карусели использовать не следует. Это будет противоречить всем исследованиям, в особенности касающихся электронной коммерции.

Применение карусели на практике

Чаще всего используется в интернет-магазинах. В США, к примеру, 52% компаний электронной коммерции посчитали необходимым использовать такой прием у себя на сайте.

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

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

10 советов по улучшению карусели в статье сгруппированы в 4 группы:

  1. Последовательность слайдов и направление.
  2. Логика авто-вращения.
  3. Две функции контроля.
  4. Различия на сенсорных устройствах.

1. Последовательность слайдов и направление

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

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

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

На заметку

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

2. Логика авто-ротации

Статичные карусели (слайды нужно листать самостоятельно) имеют уровень кликабельности 1-2%. В каруселях с автоматической сменой слайдов, этот показатель находится на уровне 8-10%. Как собственно любая анимированная графика, последний вариант привлекает большее внимание.

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

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

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

Если такое происходит, пользователь не успевает оценить интересен ли слайд. Приходится читать текст в спешке. В крайности вдаваться также не стоит. Слишком медленное перемещение слайдов заставит заскучать пользователя и он может потерять всякий интерес.

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

Автоматическая смена слайдов должна прекращаться при наведении на изображение (в 42% случаев этого не происходит)

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

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

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

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

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

3. Управление каруселью должно выполнять две функции

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

Цели отображения текущего слайда среди остальных таковы:

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

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

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

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

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

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

4. На сенсорных устройствах все иначе

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

  • Отсутствие зависания над изображением отменяет использование автоматической смены слайдов.
  • Обязательная поддержка жестов “смахивания”.
  • Дизайн карусели должен быть оптимизирован для мобильных устройств.

Отсутствие зависания над изображением отменяет использование автоматической смены слайдов (в 31% случаев это происходит неверно)

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

Что выходит на практике? Для мобильных версий сайтов и для сенсорных устройств применять прием автоматической смены слайдов нельзя. Предпочтения пользователя выяснить невозможно из-за отсутствия на сенсорных устройствах состояния “зависания”.

Обязательная поддержка жестов “смахивания” (отсутствует в 12% случаев)

Это совсем не значит, что нужно отказаться от привычных элементов управления (точек и стрелок). Их просто желательно дополнить поддержкой жестов, особенно “смахивания”.

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

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

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

10 требований к карусели

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

  1. Для всех платформ: Тщательно продумайте последовательность слайдов. С первым будут взаимодействовать больше.
  2. Для всех платформ: Карусель не должна быть единственным способом перейти к контенту или услугам компании.
  3. Для десктопов: Применяйте автоматическую смену слайдов только когда допустимо отвлечение внимания от других элементов главной страницы анимированной графикой.
  4. Для десктопов: Умеренная скорость смены слайдов. Для слайда с заголовком достаточно 5-7 секунд.
  5. Для десктопов: При наведении автоматическая смена слайдов должна быть приостановлена для того, чтобы пользователь успел прочесть текст или кликнуть по слайду.
  6. Для десктопов: Автоматическая смена слайдов должна быть ненадолго приостановлена при взаимодействии пользователя с кнопками управления.
  7. Для всех платформ: Всегда выделяйте текущий слайд и обеспечьте возможность перехода на следующий и предыдущий слайд. Используйте точки и стрелки достаточного размера и контрастности.
  8. Для сенсорных устройств: Из-за отсутствия положения “зависания” (и, соответственно, способа приостановить автоматическую смену слайдов) не используйте автопролистывание на мобильных и сенсорных устойствах.
  9. Для сенсорных устройств: Обеспечьте поддержку жестов “смахивания”.
  10. Мобильные устройства: Убедитесь, что текст легко прочитать, если вы повторяете дизайн для всех устройств.

Источник: https://www.smashingmagazine.com/2016/07/ten-requirements-for-making-home-page-carousels-work-for-end-users/