- Статьи
- 3 мин на чтение
- 14
Почему кнопка «Посмотреть ещё» лучше пагинации
Скажем «нет» пагинации
Легко ли пользователям просматривать контент на вашей странице? Если вы применяете пагинацию, то она замедляет и усложняет исследование сайта.
Пагинация — традиционный способ навигации и просмотра страниц. Однако большинство дизайнеров не знают о множестве UX-проблем, которые возникают при её использовании. Чтобы улучшить качество просмотра страниц, вместо пагинации отдавайте предпочтение кнопке «Посмотреть ещё».
Когда пользователи нажимают на кликабельные элементы пагинации, возникает проблема — это приводит к полной загрузке страницы. Каждый раз, когда люди кликают на разделы пагинации, на странице появляются новые элементы. В результате при загрузке страницы на экране будут мелькать небольшие участки свободного пространства. Этот эффект нарушает визуальное восприятие и лишает его целостности.
Ещё одна проблема с пагинацией заключается в том, что она часто содержит элементы, которые путают пользователей. Людям приходится решать, на что нажимать — на номер следующей страницы, кнопку со стрелкой или кнопку с двойной стрелкой. Если вы заставляете пользователей думать даже несколько секунд, это создаёт неприятную когнитивную нагрузку.
Также элементы пагинации трудно находить. Нажимать на них тоже сложно. У них небольшая область нажатия, поэтому пользователи могут легко промахнуться. Пытаясь нажать на номер следующей страницы, они случайно жмут на соседнюю, потому что области нажатия слишком малы, а элементы пагинации расположены близко друг к другу.
Большинство пользователей не переходят дальше пары первых страниц пагинации. Другими словами, пагинация снижает вовлечённость. Больше всего внимания привлекает первая страница, а страницы в конце пагинации пользователи, скорее всего, никогда не посетят.
У кнопки «Посмотреть ещё» нет таких UX-проблем. Её легко найти. Нажать на неё тоже просто. Кнопка расположена в нижней центральной части страницы, она широкая, а область нажатия у неё большая. Кроме того, кнопка одна, поэтому пользователям не приходится выбирать между вариантами, что снижает когнитивную нагрузку.
Вместо загрузки совершенно новой страницы для сохранения текущих элементов страницы используется AJAX*. В результате пользователь получает непрерывный поток нового контента без резких появлений свободного пространства и длительной загрузки.
*Примечание. AJAX — подход к построению интерактивных интерфейсов веб-приложений, который заключается в «фоновом» обмене данными браузера с веб-сервером.
Кнопка «Посмотреть ещё» — это не кнопка «Посмотреть всё», поэтому не нужно с её помощью загружать сразу весь контент. Вместо этого его следует отображать частями. Чтобы просмотреть следующую порцию элементов, пользователям нужно прокрутить страницу до самого низа и снова нажать на кнопку. Когда они дойдут до конца, сообщите им об этом в сообщении.
Если вы разместите сообщение над кнопкой «Посмотреть ещё», то сможете проинформировать пользователей о том, сколько элементов им осталось посмотреть. Например, можно написать: «Просмотрено 24 товара из 144». Так они будут понимать, насколько далеко прокрутили страницу.
Кроме того, можно предусмотреть кнопку «Вернуться к началу». Она возвращает пользователя в начало страницы. Если вы разместите её под кнопкой «Посмотреть ещё», пользователи смогут легко вернуться к первой порции контента, не прокручивая страницу вверх.
Преимущество пагинации состоит в том, что пользователи могут перейти на конкретную страницу, чтобы сохранить её или поделиться с другими. Однако это происходит редко, поскольку люди больше заинтересованы в ссылках на определённые элементы контента или категории, чем на номера страниц.
Кнопка «Посмотреть ещё» — новый способ постраничной навигации. Если вы хотите, чтобы пользователи изучали ваш контент, упростите и ускорьте им задачу — уменьшите время загрузки страниц, сложность кликов и когнитивную нагрузку.
Перевод статьи Why You Should Never Split Text Field Inputs из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
