Как создать интуитивно понятный слайдер для категорий

Лучший способ просмотра категорий

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

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

Обрезанные по краям слайды

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

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

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

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

Кнопка «Посмотреть всё»

Ещё один элемент, который должен быть понятен пользователям, — кнопка «Посмотреть всё» («View All»). Она переводит покупателей на страницу категории, где они смогут посмотреть весь контент. Важно добавить эту кнопку, потому что не каждый захочет прокручивать слайдер.

Слайдер нужен тем пользователям, которые ещё не выбрали категорию и хотят посмотреть её. Однако кнопка «Посмотреть всё» предназначена для тех, кто готов выбрать категорию. Обе функции необходимы, поскольку на сайте будут оба типа покупателей.

Лучше всего разместить кнопку «Посмотреть всё» рядом с заголовком категории. Однако после того, как пользователи прокрутят до конца слайдера, кнопка со стрелкой станет неактивной. В таком случае следующим шагом будет просмотр всего контента данной категории, но кнопку «Посмотреть всё» нелегко заметить. Чтобы найти её, пользователям придётся переместить взгляд от строки контента к правому верхнему углу.

Чтобы ускорить доступ к странице категорий, можно заменить кнопку с правой стрелкой на кнопку «Посмотреть всё» , которая будет появляться, когда элементы для просмотра закончатся. Таким образом, пользователь не будет случайно нажимать на неактивную кнопку и сможет перейти непосредственно на страницу категории.

Индикатор строки состояния

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

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

Прогресс можно оценить более точно, если использовать индикатор строки состояния. Она будет постепенно заполняться по мере того, как человек будет нажимать на правую стрелку. Такая схема даст покупателям лучшее представление о прогрессе и побудит их прокрутить страницу до конца.

Отображение слайдов

Распространенная ошибка при использовании слайдера для категорий — недостаточное количество новых слайдов в ряду. Появление только одного нового слайда каждый раз, когда пользователь нажимает на стрелку, может сделать прокрутку слайдера утомительной.

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

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

Перевод статьи How to Design an Intuitive Category Carousel из блога UX Movement

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!