Плюсы и минусы карусели: советы от Нильсена

Плюсы и минусы карусели: советы от Нильсена

Что такое «карусель» в применении к сайтам? Это блок, позволяющий выводить больший объем информации в заданной последовательности без увеличения высоты страницы. Обычно, карусель

  • располагается в верхней части страницы;
  • занимает значительную часть места «над разворотом»;
  • содержит более одного фрагмента информации, представленной (в большей степени) графикой и (в меньшей степени) текстом;
  • имеет собственные навигационные элементы, позволяющие понять принцип ее действия и доносящие до посетителя информацию о том, что просматриваемый фрагмент – не единственный;
  • используется для анонсирования новинок, акций, скидок, компании в целом и т.п.

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

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

Главным преимуществом карусели является ее способность представить больший объем информации в рамках ограниченного пространства. При том, что обычно этим пространством является область страницы над разворотом – то есть «парадный вход» сайта, к которому прибывает большая часть посетителей – это свойство каруселей действительно имеет некоторую ценность. Но...

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

Советы

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

1. Не размещайте в карусели более 5 кадров. Иначе посетителю будет сложно запомнить, что он просмотрел, а что – еще нет. Кроме того, такой подход поможет вам выделить действительно важную информацию.

2. Используйте четкие, легкочитаемые шрифты и картинки, отражающие суть. Учитывайте тот факт, что на ваш сайт могут зайти с мобильного устройства, экран которого меньше. В этой связи, кстати, из мобильной версии карусель можно убрать вовсе. Подробнее тема мобильных версий рассмотрена в материалах «Мобильная версия против полной версии» и «Мобильный интернет: что пользователи делают на вашем сайте?».

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

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

5. Навигационные элементы размещайте внутри карусельного блока.

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

7. Не используйте автоматические карусели (в которых листание начинается сразу, без клика) на «тяжелых» сайтах, так как они замедляют скорость ресурса.

8. Если вы используете автоматическую карусель, тщательно выверяйте время, отводимое на каждый кадр (исходя из его насыщенности информацией, цель – то количество секунд, которое позволит эту информацию усвоить), и зацикливайте показ.

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

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

Автор: Vyacheslav Vityuk

Подписаться на новости

Читайте также

21 февраля / Комментарии

Дизайн, ориентированный на конверсии

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

далее →

1 февраля / Комментарии

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

Одежда – один из самых продаваемых товаров в интернете. Ранее мы публиковали резюме отчёта об исследовании, проведённом аналитическим агентством Nielsen, «Nielsen: какие товары россияне чаще всего покупают в интернете». Согласно результатам этого исследования, одежда не просто самый популярный товар, приобретаемый в интернете. Этот вид товаров на 14% опережает «ближайшего преследователя», потребительскую электронику. Очевидно, что у многих интернет-магазинов одежды дела идут неплохо. Могут ли они идти ещё лучше? Если они внедрят в свои товарные страницы одну маленькую деталь, ответ запросто может быть положительным.

далее →

13 декабря 2016 / Комментарии

Мобильная версия интернет-магазина: предпраздничная подготовка

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

далее →

25 октября 2016 / Комментарии

11 принципов веб-дизайна, которые повышают конверсию

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

далее →

26 сентября 2016 / Комментарии

Разбор юзабилити интернет-магазина Ulmart.ru и его преобразования за 2016 год

Изначально статья планировалась как одно целое, где я хотел рассмотреть возможные ошибки в юзабилити топа российских интернет-магазинов. Но после нескольких дней обзора, понял, что каждый сайт заслуживает отдельного разбора. Кроме того, мне захотелось не только осветить проблему, но и предложить своё видение ее решения. В связи с этим вся статья строится по схеме: Гипотеза о проблеме > Причина и Обоснование > Решение.
Поскольку статья начата еще в ноябре 2015 года, а закончена только сейчас, Ulmart успел исправить часть проблем,  обозначенных в статье. Об этом я дополнительно говорю в примечаниях . И сейчас мы можем отследить те преобразования, которые были сделаны.

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook