Перевод статьи от NNGroup. Больше переводов статей можно найти в нашем телеграм канале
Аннотация: Слайдеры — карусели на сенсорных экранах страдают от плохой видимости и последовательного доступа, и не все проекты используют свайп, как элемент управления карусели.
В декстопных версиях сайтов, карусель всегда была популярным способом объединить несколько фрагментов контента на главной странице, не занимая слишком много места. На мобильных устройствах, карусели стали популярными, после появления iPad.
Подобно меню и меню-гармошкам, карусели имеют важное преимущество на мобильных устройствах: они вмещают большое количество контента в относительно небольшой области. Однако карусели также обладают рядом важных недостатков:
- Они основаны на последовательном доступе: пользователи должны пройти все элементы в карусели один за другим, чтобы добраться до последнего. Это взаимодействие неэффективно.
- Их не всегда легко найти. Даже, если люди “узнают” карусель, у них часто не будет возможности узнать, какие элементы она содержит, не взаимодействуя с ней.
Кроме того, на сенсорных экранах не все средства управления каруселями реализованы правильно.
В этой статье мы рассмотрим несколько рекомендаций по юзабилити, предназначенных для решения этих проблем на мобильных устройствах.
Последовательный доступ
Совсем не весело просматривать элементы один за другим в надежде на то, что, возможно, найдется один интересный. Большинство людей останавливаются после просмотра 3−4 элементов в карусели. Из-за этого мы рекомендуем дать пользователям возможность достичь последнего элемента в карусели за 3−4 шага (т. е. тапа или свайпа).
Если у вас большое количество элементов, используйте вместо них список и разрешайте людям напрямую обращаться к любому элементу страницы.
Обратите внимание, что рекомендация использовать 3−4 шага для достижения последнего элемента не обязательно означает, что карусель должна иметь только 3 или 4 элемента. Если отображается несколько элементов на странице, то карусель может вмещать и больше. В приведенном ниже примере слайдер Netflix отображал только один элемент на странице и требовал 5 свайпов, чтобы добраться до 6-го элемента в карусели, но другие карусели отображали по 3 элемента на странице (таким образом, для достижения последнего элемента в списке на 50 элементов требовалось 16 свайпов).
Стремитесь расставить приоритеты элементов карусели, чтобы в первую очередь показывались наиболее интересные. Подумайте об использовании персонализации, чтобы первые несколько свайпов стали еще более релевантными для конкретного пользователя. С приоритизацией последовательный доступ не так утомителен, поскольку пользователям часто не нужно делать много шагов. Кроме того, если вы показываете сначала лучшие элементы, приоритетная последовательность может привлечь пользователей и побудить их дольше взаимодействовать с каруселью, чем при случайной последовательности.
Открытость
Озадаченный мобильный пользователь, который ищет конкретный контент, никогда не заметит карусель, даже если она анимированная. Мобильная страница настолько мала, что к тому времени, когда контент карусели изменится, пользователь, вероятно, уже проскролит страницу вниз и не заметит изменений.
Существует три типа сигналов, которые традиционно используются для обозначения каруселей на мобильных устройствах:
- Точки и линии
- Стрелки
- Иллюзия непрерывности
Некоторые сигналы карусели сильнее других. Точки, как правило, слабые сигналы: поскольку они маленькие, люди часто их не замечают. Иллюзия непрерывности, созданная половинчатыми изображениями или текстом, которые выглядят так, будто они продолжаются за пределами вертикального края экрана, является сильным сигналом карусели — пользователи быстро понимают, что они могут получить больше контента, выходя за пределы экрана.
Еще одна проблема, из-за которой легко можно пропустить такие сигналы, как стрелки и точки, заключается в том, что они часто расположены поверх изображения карусели. Когда элементы интерфейса отображаются поверх загруженного фона, они могут иметь низкий контраст и смешиваться с окружающим изображением. Эта проблема особенно важна для мобильных устройств, когда блики на улице также могут влиять на качество контраста.
Ниже приведены несколько примеров дизайна с сильными или слабыми сигналами.
Даже, если у каруселей хорошие сигналы люди могут не смотреть на последующие элементы, если первый им неинтересен. Первый элемент в карусели выступает в качестве рекомендательного письма для остальной части контента и фактически является подсказкой для других элементов — люди будут просматривать карусель, если первый элемент кажется связанным с их целью, и будет игнорировать, если это не так (хотя, на самом деле, другие элементы в карусели могут быть релевантными).
Таким образом:
- Элементы в карусели должны быть сильно связаны друг с другом, чтобы люди смогли предсказать тип контента, который они увидят, если будут взаимодействовать со слайдером.
- Важные элементы, используемые в каруселях, должны быть доступны каким-то другим способом, на случай, если пользователь полностью проигнорирует этот контент. Если контент является критически важным, важно обеспечить к нему другой путь.
Управление каруселью
Когда люди хотят взаимодействовать с каруселью на сенсорном экране, они использует свайп. Если вы не будете поддерживать этот жест для прокрутки карусели — это станет неприятным сюрпризом для пользователей и создаст плохой пользовательский опыт. К настоящему времени большинство людей знакомы с этим жестом горизонтальной навигации. Убедитесь, что ваша карусель поддерживает свайп.
Использование свайпа для управления каруселью создает проблему двусмысленности свайпа на iOS. Под двусмысленностью свайпа подразумевается, что один и тот же жест свайпа может по-разному интерпретироваться в зависимости от того, где он выполняется. Начиная с iOS 7, двусмысленность свайпа становится постоянной угрозой для iOS. Например, в браузере Safari горизонтальный свайп по левому краю является синонимом кнопки «Назад»: он возвращает пользователей на предыдущую страницу. С iPhone X, горизонтальный свайп близко к нижнему краю экрана приведет к переключению приложений.
К сожалению, этот же жест также используется для навигации по каруселям в немного другом месте на экране. Поскольку свайп не доступен на устройствах без сенсорных экранов, адаптивные дизайны предпочитают отказаться от него на мобильных устройствах и заменить каким-либо другим способом прокрутки карусели. Например, Dropbox ожидал, что люди нажмут на маленькие точки под изображением в карусели, чтобы прокручивать ее. Во-первых, хотя точки в каруселях на iOS всегда были кликабельны, подавляющее большинство пользователей даже не захотели на них нажимать — они не знали, что эти точки могут использоваться для управления каруселью. И, во-вторых, даже если бы они захотели использовать их, они настолько крошечные и близко расположенные друг к другу, что любая попытка выбрать одну из них будет бесполезной.
Частичное решение проблемы, возникающей из-за двусмысленности свайпа, заключается в том, чтобы оставить поля вокруг карусели — по существу, немного пустого пространства, которое сообщает пользователю, что границы карусели не достигают краев экрана. Некоторые пользователи будут продолжать смахивать вплотную к краю экрана, чтобы прокручивать элементы карусели (и случайно покинут текущую страницу), но другие будут держать палец ближе к видимой границе карусели и, таким образом, не будут сталкиваться с двусмысленностью свайпа.
Вывод
Искушение использовать карусель для экономии места на маленьком экране может быть велико, но элементы карусели могут быть слабо заметны, особенно, когда на них не указывают сильные сигналы, такие как иллюзия непрерывности или стрелки. Если на вашем мобильном сайте или в мобильном приложении есть карусель, убедитесь, что у нее нет избыточного количества элементов и она поддерживает свайп.
Источник: сайт designpub.ru
(1 оценок, среднее: 4,00 из 5)
Загрузка...
