Баннерные карусели на мобильных устройствах

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

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

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

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

• • Главный принцип их работы — последовательный доступ. Пользователи должны просмотреть все элементы в карусели один за другим, чтобы добраться до последнего. Такое взаимодействие неэффективно.
  • Они не очень информативны. Даже если люди понимают, что перед ними карусель, они, как правило, не могут узнать, что она содержит, без взаимодействия с ней.

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

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

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

Это не значит, что карусель должна содержать только 3 или 4 баннера. Например, в приложении Netflix главная карусель отображает только один элемент на экране. Чтобы добраться до 6го элемента, пользователю необходимо 5 свайпов. Но некоторые другие карусели в этом же приложении отображают сразу по 3 элемента на экране, и, таким образом, за 16 свайпов пользователь может просмотреть список из 50 элементов.

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

 

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

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

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

• • точки или линии;
  • стрелки;
  • иллюзия непрерывности.

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

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

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

 

Даже если карусель сразу заметна, это не значит, что люди станут ей пользоваться. Нужно, чтобы первые элементы карусели заинтересовали пользователя. Эти элементы играют роль “рекомендательного письма” для остального контента – люди будут просматривать карусель, если первый элемент кажется связанным с их целью, и проигнорируют ее, если это будет не так (даже если другие элементы в карусели могут быть релевантными). Поэтому:

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

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

 

Однако на айфонах использование свайпа для управления каруселью может породить проблему из-за неоднозначности жеста. В iOS свайп может вызывать разные действия в зависимости от того места на экране, где он выполняется. Начиная с iOS 7, эта неоднозначность стала проявляться чаще. Например, в браузере Safari горизонтальный свайп по левому краю возвращает пользователей на предыдущую страницу. В iPhone X свайп возле нижнего края экрана переключает пользователя между приложениями. Тот же жест используется для навигации по карусели в каком-то другом месте экрана.

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

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

 

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