- Статьи
- 4 мин на чтение
- 8
Слайдеры с коллекциями: новый мобильный паттерн для устранения ошибок при свайпе
Улучшенные мобильные слайдеры
Слайдеры — отличный способ повысить вовлечённость пользователей. Они позволяют непринуждённо просматривать контент без лишней загрузки страниц и навигации «туда-сюда». Однако если в мобильных интерфейсах использовать такой же дизайн слайдера, как в десктопных версиях, это вызовет проблемы с юзабилити.
Когда люди просматривают мобильный слайдер, при пролистывании часто возникают ошибки. Если они проводят пальцем от края экрана, то могут случайно вернуться на предыдущую страницу. В браузерах свайп от самого края — жест, который выполняет функцию кнопки «Назад». На некоторых мобильных устройствах свайп от нижнего края экрана приводит к переключению приложений.
Жесты свайпа для прокрутки слайдера могут конфликтовать с нативными жестами свайпа. В качестве решения может прийти на ум применение кнопок со стрелками. К сожалению, такие кнопки играют роль слабых визуальных подсказок — их легко пропустить и на них трудно нажать, потому что они сливаются с фоном контента. Кроме того, они маленькие, поэтому нажатие на них требует точного прицеливания.
Слайдер с коллекциями
Вместо того чтобы делать слайдер в мобильном интерфейсе точно таким же, как и в десктопной версии сайта, лучше использовать слайдер с коллекциями. Этот новый паттерн интерфейса упростит просмотр содержимого категорий.
В таком слайдере элементы укладывают друг на друга, а не располагают горизонтально. Пользователю больше не нужно свайпать или касаться крошечных объектов. Всё, что ему нужно сделать, это коснуться стопки элементов, чтобы открыть модальное окно без загрузки страницы.
Модальное окно отображает каждый элемент в полном размере и занимает всю ширину экрана. Пользователи смогут прокручивать страницу по вертикали, чтобы посмотреть товары данной категории. Когда они достигнут нижней части страницы, их будет ждать кнопка «Посмотреть всё», если они захотят перейти на страницу категории, чтобы увидеть остальные товары. Однако если они захотят вернуться назад, то смогут нажать на кнопку «X» в углу, чтобы закрыть модальное окно.
Важно отметить, что эти взаимодействия — привычны для пользователей. В управлении модальными экранами и вертикальной прокруткой нет ничего необычного. Поэтому применение этого нового паттерна не потребует от пользователя длительного обучения.
Также важно отметить, что модальный экран не требует загрузки страницы. В результате просмотр каждого элемента стопки происходит быстро. Модальный экран отображает только несколько элементов, а не все. Только при нажатии кнопки «Просмотреть всё», пользователь увидит все элементы данной категории на новой странице.
Лучшее визуальное восприятие
Обычный слайдер требует уменьшения масштаба текста и изображений для размещения элементов в ряд. Проблема в том, что в этом случае пользователю сложно просматривать информацию и некоторые детали.
Слайдер с коллекциями обеспечивает лучшее визуальное восприятие, поскольку он отображает элементы в полном размере, а не в уменьшенном. Поэтому пользователи не будут испытывать трудности при рассматривании ярких элементов на изображениях и чтении текста. Это также позволит им сосредоточиться на определенной категории и не отвлекаться на несущественные элементы.
Детали дизайна
Слайдер с коллекциями работает благодаря трёхмерной иллюзии сложенных в стопку предметов. Пользователи могут отличить ближайший элемент от самого дальнего. Чтобы они воспринимали слайдер с коллекциями как визуальную подсказку, необходимо правильно определить размер, место и укладку каждого элемента.
Следует менять высоту каждого элемента в стопке с равным шагом. Так, если высота ближайшего элемента равна 132 px, то высота следующего за ним будет равна 126 px. Высота элемента за ним составит 120 px. Этот шаблон расчёта размеров соответствует изменениям размера с шагом в шесть пикселей.
После определения размера элементов выровняйте их по горизонтали и расположите равномерно так, чтобы были видны только их правые края. Разместите их веером, как карточки, чтобы пользователи могли увидеть визуальную глубину. Добавьте элементам падающую тень, чтобы сделать эффект укладки более очевидным.
После того как пользователь нажмёт на стопку, откроется модальная страница с элементами из этой категории. На ней следует разместить заголовок категории, кнопку «Х» в углу, полосу прокрутки и контент. Модальная страница не должна вызывать загрузку страницы.
По мере того как пользователи будут прокручивать страницу вниз, заголовок с названием категории и кнопка закрытия останутся закреплёнными наверху. Когда люди достигнут нижней части страницы, они увидят кнопку «Посмотреть всё», которая перекинет их на главную страницу категории. При нажатии на кнопку должна произойти загрузка страницы.
Улучшенные мобильные слайдеры
Со слайдерами в мобильных интерфейсах возникает больше проблем, связанных с юзабилити, чем на экранах компьютеров. Не следует использовать один и тот же дизайн слайдера в обеих версиях: десктопной и мобильной.
Слайдеры с коллекциями — лучший вариант для мобильных интерфейсов. Ширина мобильных экранов ограничена, но их высота безгранична. Вместо того, чтобы располагать элементы горизонтально, логичнее сложить их в стопку и отображать в модальном окне.
В результате пользователи не будут сталкиваются с ошибками при пролистывании слайдеров с коллекциями. Вместо этого они получат лучший опыт просмотра, который стоит каждого нажатия и прокрутки.
Перевод статьи Collection Carousel: A New Mobile Pattern to End Swipe Errors из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
