Советы по дизайну карусели


26.11.2021 Время чтения - 4 минуты 795

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

Преимущества каруселей

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

Как создавать лучшие карусели

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

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

2. Используйте четкий текст и изображения

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

3. Используйте понятные и узнаваемые иконки и ссылки

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

Sal Parasuco – Awwwards

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

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

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

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

Fitlab – Awwwards

Автопрокрутка

Автопрокрутка кадров в карусели сама переключает контент за человека. Но в некоторых случаях это плохая идея.

Не добавляйте автопрокрутку, если:

  • Вы не уверены, что сможете правильно выбрать время, за которое большинство людей успеют прочитать и усвоить контент. Иногда карусели переключаются слишком быстро, и пользователи не успевают прочитать информацию. Это расстраивает их, и контент остается неусвоенным. А иногда карусели переключаются слишком медленно, и когда они вдруг оживают, это удивляет пользователя.
  • Ваш контент похож на рекламу. Пользователи с большей вероятностью проигнорируют анимированный элемент, похожий на рекламу (если они не настроены на покупки). Наше исследование по отслеживанию взглядов показывает, что анимированные баннеры просматриваются в 27% случаев.

Осторожно с автопрокруткой

  • Не добавляйте автопрокрутку на мобильных, потому что: (1) это перегружает страницу и (2) потому что страницы просто короткие. Пользователи часто скроллят страницу быстро. И к тому времени, когда в карусели переключится кадр, пользователь, скорее всего, опустится по странице уже намного ниже и все равно не увидит изменений.
  • Проверьте правильность выбора времени или, по крайней мере, оцените, сколько времени может потребоваться среднестатистическому пользователю, чтобы прочитать текст и рассмотреть изображения. Мы используем 3 слова в секунду в качестве ориентира.
  • Не останавливайтесь на последнем кадре. Продолжайте циклически перемещаться по кадрам (и показывать, какой кадр выбран).
Erika Senft Miller – Awwwards

Заключение

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