- Статьи
- 3 мин на чтение
48
Лучший способ показать прогресс
Что представляют собой эти точки в слайдере? Некоторые пользователи могут иметь представление о них, но большинство не обратит никакого внимания. Во-первых, эти точки трудно заметить из-за их небольшого размера. Кроме того, они расположены под контентом, куда пользователи обычно не смотрят.
Если люди не обращают внимания на точки, им неясно, насколько они продвинулись при прокрутке слайдера. В результате они менее склонны прокручивать её до конца, потому что не уверены, сколько времени и усилий это потребует. Меньшая активность при прокрутке приводит к снижению вовлечённости в контент.
Точки должны служить индикатором прогресса, чтобы стимулировать пользователей прокрутить слайдер до конца. Но они плохо справляются с этой задачей. Чтобы видеть прогресс, пользователи вынуждены считать количество точек и распознавать, какая из них активная. Это требует значительных когнитивных усилий.
Людям также приходится переводить взгляд вниз, чтобы увидеть, где находятся точки. Это отвлекает их внимание от контента и создаёт дополнительную нагрузку на глаза. Точки настолько маленькие, что пользователи вынуждены искать их, но они не всегда это делают.
Кроме того, активную точку не всегда легко разглядеть. Всё зависит от контрастности цветов, поэтому пользователи могут не заметить её, если контраст недостаточно сильный. Людям с нарушениями зрения особенно трудно отличить активную точку от остального контента.
Пользователи просто хотят знать, насколько они близки к концу слайдера каждый раз, когда они его прокручивают. Индикатор, который лучше всего отражает прогресс пользователя — разделитель прогресса (progress divider).
Посмотреть прототип
Разделитель прогресса не только делит контент, но и отображает прогресс во время прокрутки. Он расположен внутри слайдера. В результате, вам не нужен отдельный элемент, изолированный от слайдера. Пользователи сразу видят прогресс при просмотре контента, потому что разделитель занимает всю ширину слайдера. Им больше не нужно опускать взгляд и искать точки.
Каждая прокрутка перемещает индикатор прогресса внутри разделителя. Количество сегментов прогресса зависит от количества прокруток. Например, если слайдер подразумевает всего четыре прокрутки, разделитель прогресса следует делить на четыре сегмента.
Кнопку «Показать все» (View All), как правило, сложно найти. Если пользователь не обратит внимание на правый край, он не увидит её, что часто бывает на широком экране компьютера. Разделитель прогресса делает кнопку «Показать все» более заметной, потому что она находится на одной линии с ним. По мере продвижения вправо, пользователь легко обнаружит кнопку.
Когда вы располагаете несколько слайдеров с категориями друг под другом, разделитель прогресса выступает в роли визуального разделителя между ними. Пользователи сразу поймут, что каждый разделитель прогресса связан с элементами, расположенными под ним. Без точек макет страницы выглядит более аккуратным и упорядоченным.
Также можно применять индикаторы прогресса к слайдерам с баннерами или слайдерами, в которых за раз отображается только один элемент Разница заключается в том, что вместо разделителя вы будете встраивать тонкую полосу под изображением. По мере прокрутки пользователи будут видеть, как полоса заполняется и достигает конца.
Посмотреть прототип
Обратите внимание, насколько хорошо виден индикатор прогресса, который при этом не отвлекает пользователей. Он настолько незаметный, что не мешает контенту, но при этом достаточно видимый, чтобы не пропустить его. Прежде всего, он более эффективно отображает прогресс при прокрутке, чем точки.
Точки — ужасные индикаторы для слайдеров. Долгое время дизайнеры использовали их для отображения прогресса. Однако пришло время заменить их новым и более лучшим компонентом. Вместо них используйте в слайдерах индикаторы прогресса и разделители.
Перевод статьи Why Dots Are Terrible Indicators for Carousels из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
Загрузка...
