О дизайне каруселей (carousel) на мобильных устройствах

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

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

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

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

Последовательный доступ

Совсем не весело просматривать элементы один за другим в надежде на то, что, возможно, найдется один интересный. Большинство людей останавливаются после просмотра 3-4 страниц в карусели. Из-за этого мы рекомендуем дать пользователям возможность достичь последнего элемента в карусели за 3-4 шага (т. е. тапа или свайпа). Если у вас большое количество элементов, используйте вместо них список и разрешайте людям напрямую обращаться к любому элементу страницы. Обратите внимание, что рекомендация использовать 3-4 шага для достижения последнего элемента не обязательно означает, что карусель должна иметь только 3 или 4 элемента. Если отображается несколько элементов на странице, то карусель может вместить больше. В приведенном ниже примере карусель Netflix отображала только один элемент на странице и требовала 5 свайпов, чтобы добраться до 6-го элемента в карусели, но другие карусели отображали по 3 элемента на странице (таким образом, для достижения последнего элемента в списке на 50 элементов требовалось 16 свайпов). Стремитесь расставить приоритеты элементов карусели, чтобы в первую очередь показывались наиболее интересные для пользователей. Подумайте об использовании персонализации, чтобы первые несколько свайпов стали еще более релевантными для конкретного пользователя. С приоритизацией последовательный доступ не так утомителен, поскольку пользователям часто не нужно делать много шагов. Кроме того, если вы показываете сначала лучшие элементы, приоритетная последовательность может привлечь пользователей и побудить их дольше взаимодействовать с каруселью, чем при случайной последовательности. Netflix для iPhone (слева) использовал карусели для отображения длинных списков: в карусели «Популярно на Netflix» было больше 70 элементов и пользователям требовалось прокручивать карусель более 23 раз, чтобы добраться до последнего элемента. Напротив, Showtime.com (справа) правильно использовал только 4 элемента в своей карусели.

Открытость

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

• Точки и линии
• Стрелки
• Иллюзия непрерывности

Некоторые сигналы карусели сильнее других. Точки, как правило, слабые сигналы: поскольку они маленькие, люди часто их не замечают. Иллюзия непрерывности, созданная половинчатыми изображениями или текстом, которые выглядят так, будто они продолжаются за пределами вертикального края экрана, является сильным сигналом карусели – пользователи быстро понимают, что они могут получить больше контента, выходя за пределы экрана. Еще одна проблема, из-за которой легко можно пропустить такие сигналы, как стрелки и точки, заключается в том, что они часто расположены поверх изображения карусели. Когда элементы интерфейса отображаются поверх загруженного фона, они могут иметь низкий контраст и смешиваться с окружающим изображением. Эта проблема особенно важна для мобильных устройств, когда блики на улице также могут влиять на качество контраста. Ниже приведены несколько примеров дизайна с сильными или слабыми сигналами. Сайт Zara.com не использовал значки карусели, чтобы указать пользователям, что они могут получить доступ к большему количеству контента, используя горизонтальный свайп. Карусель была анимированной, но люди, которые прокручивали вниз большое изображение, не замечали этого. NBC.com: стрелки над изображением карусели слились с самим изображением. Слабые сигналы карусели: Приложение «Акции» для iPhone показало низкоконтрастные точки под каруселью Сильные сигналы карусели: половина изображений (например, в приложении FilmStruck для iPhone – слева) и неполные слова (например, в приложении OpenTable для iPhone – справа) сигнализировали пользователям о том, что справа или слева было больше контента. Даже, если у каруселей хорошие сигналы люди могут не смотреть на последующие элементы, если первый элемент им неинтересен. Первый элемент в карусели выступает в качестве рекомендательного письма для остальной части контента и фактически является источником информационного запаха для других элементов – люди будут просматривать карусель, если первый элемент кажется связанным с их целью, и будет игнорировать, если это не так (хотя, на самом деле, другие элементы в карусели могут быть релевантными). Таким образом:

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

Управление каруселью

Когда люди хотят работать с каруселью на сенсорном экране, они использует свайп. Если вы не будете поддерживать этот жест для прокрутки карусели – это будет неожиданным для пользователей и создаст плохой пользовательский опыт. К настоящему времени большинство людей знакомы с этим жестом горизонтальной навигации. Убедитесь, что ваша карусель поддерживает свайп. Dropbox не позволял пользователям использовать свайп, чтобы прокручивать карусель; вместо этого люди должны были нажимать маленькие точки под ней. (Помимо того, что это незнакомая техника взаимодействия, проблематично попасть по крошечным точкам в любом интерфейсе из-за закона Фиттса, особенно это касается сенсорных экранов из-за проблем с толстыми пальцами). Использование свайпа для управления каруселью создает проблему двусмысленности свайпа на iOS. Под двусмысленностью свайпа подразумевается, что один и тот же жест свайпа может по-разному интерпретироваться в зависимости от того, где он выполняется. Начиная с iOS 7, двусмысленность свайпа становится постоянной угрозой для iOS. Например, в браузере Safari горизонтальный свайп по левому краю является синонимом кнопки «Назад»: он возвращает пользователей на предыдущую страницу. С iPhone X, горизонтальный свайп близко к нижнему краю экрана приведет к переключению приложений. К сожалению, этот же жест также используется для навигации по каруселям в немного другом месте на экране. Поскольку свайп не доступен на устройствах без сенсорных экранов, адаптивные дизайны предпочитают отказаться от него на мобильных устройствах и заменить каким-либо другим способом прокрутки карусели. Например, Dropbox ожидал, что люди нажмут на маленькие точки под изображением в карусели, чтобы прокручивать ее. Во-первых, хотя точки в каруселях на iOS всегда были кликабельны, подавляющее большинство пользователей даже не захотели на них нажимать – они не знали, что эти точки могут использоваться для управления каруселью. И, во-вторых, даже если бы они захотели использовать их, они настолько крошечные и близко расположенные друг к другу, что любая попытка выбрать одну из них будет бесполезной. Частичное решение проблемы, возникающей из-за двусмысленности свайпа, заключается в том, чтобы оставить поля вокруг карусели – по существу, немного пустого пространства, которое сообщает пользователю, что границы карусели не достигают краев экрана. Некоторые пользователи будут продолжать смахивать вплотную к краю экрана, чтобы прокручивать элементы карусели (и случайно покинут текущую страницу), но другие будут держать палец ближе к видимой границе карусели и, таким образом, не будут сталкиваться с двусмысленностью свайпа. Jcrew.com: карусель занимала всю ширину экрана; пользователи случайно возвращались к предыдущей странице браузера, когда использовали свайп. Net-a-porter.com (слева) и Macys.com (справа) упростили пользователям прокрутку изображений карусели, оставив некоторое пространство между каруселью и краями экрана. Стрелки на сайте Net-a-porter обеспечивали дополнительную страховку от неоднозначности свайпа (пользователи всегда могли нажать на стрелку вместо того, чтобы использовать свайп).

Вывод

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

---

Перевод статьи Raluca Budiu