Укрощение листинга (перевод с англ.)

Исходная статья: http://uxmovement.com/navigation/avoid-the-pains-of-pagination/

Надеюсь, проф.сообщество простит мне использование слова «листинг» вместо слов «пагинация» и «постраничная навигация».

Хотя бы раз каждый из нас скролил до конца страницы, чтобы увидеть ряд цифр, который называют листингом. Листинг — это шаблон пользовательского интерфейса, позволяющий разделить контент на равнозначные блоки (страницы). Он жизненно необходим некоторым сайтам, чтобы страницы с большим объемом информации не становились бесконечно длинными и перенасыщенными. Но то, как дизайнеры рисуют листинг сейчас, мучает пользователей при его использовании. Настал час перевернуть страницу истории, и попрощаться с мучительным листингом.

Не превращайте свои страницы в карликов
Веб-страница — не печатная книга. У книжного разворота контент ограничен форматом страницы, а страница сайта имеет неограниченную высоту и может содержать или подгружать столько информации, сколько нужно, или сколько позволит сервер. Единственный очевидный минус такого использования веб-страницы — более долгая загрузка и отображение контента. Однако большинство современных сайтов способно отображать большое количество информации без потери времени на загрузку. Проблема в обратном, большинство сайтов показывают слишком мало информации на страницах-коротышках. Сделав свои страницы длиннее вы дадите пользователю больше информации без ущерба времени загрузки, тем самым сократив ваш листинг.



Гораздо приятнее плавно скролить, чем кликать и ждать загрузки (построения) новой страницы. Колеса мыши, тачпады и тачскрины сегодняшнего дня делают прокручивание страницы удобным и быстрым, в отличие от позиционирования курсора на мелкой цифре листинга и клика с последующим ожиданием загрузки страницы. Это лишняя трата энергии. А теперь представьте пользователя, который делает это снова и снова из-за коротких страниц. А для скроллинга пользователю достаточно лишь легкого шевеления пальцем для перемещения как вперед, так и назад. Новый контент появляется моментально, без ожиданий и с затратой минимальных усилий. Перестаньте резать свои страницы. Позвольте пользователю поглощать их в большом объеме.



Легкий способ оценить, являются ли ваши страницы слишком короткими — посмотреть на высоту скролл-бара. Короткая страница имеет длинный скролл-бар, а длинная, соответственно, более короткий. Он не должен быть длинным, как и не должен быть слишком коротким. Нужно что-то среднее — золотая середина. Этот баланс даст пользователю больше информации и полезного контента с меньшей затратой энергии.

Чтобы не потеряться на длинных страницах, предложите пользователям фильтры содержимого
Некоторые листинги так разрастаются, что значения страниц достигают трехзначных чисел. Мало пользы просматривать страницы с 1 по 100. Вот почему не стоит подавать свой контент как бесконечный архив древней информации. Наоборот, предложите пользователю несколько фильтров, которые отсортируют и выдадут информацию по специфическим категориям и атрибутам. Это позволит видеть только тот контент, который важен пользователю в текущий момент. Без перенасыщения общей информацией.



Цели для кликов должны быть крупнее
Многие сайты недооценивают важность размера ссылки в листинге. Это мишени для кликов, и они не должны быть мучительно малы для попадания. Переход к следующей странице должен быть простым, и как можно менее трудоемким. Сделайте их более крупными и наглядными, чтобы пользователь захотел на них кликнуть. Для этого превратите ваши «следующая» и «предыдущая» в большие кнопки. Пусть пользователи попадают в них с меньшими усилиями.



Не используйте ссылки на первую и последнюю страницу
Некоторые листинги имеют ссылки на первую и последнюю страницы. Это лишнее. Данные ссылки лишь сбивают пользователя. Иногда эти ссылки выполнены в виде двойных стрелок направления. И пользователи нажимают их, принимая за навигацию к следующей странице. Наименование «первая» и «последняя» также может приводить к ошибочному нажатию по той же причине.



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

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

Когда стоит нумеровать страницы листинга
Не стоит всегда отображать линию листинга с номерами страниц. Если в листинге много двухзначных и трехзначных номеров страниц, пользователь, увидев их, может захотеть уйти. Так как понимает, что не сможет прочитать их все. Однако, если ваш листинг не превышает пары-тройки десятков страниц или даже меньше, отображение нумерованного листинга может вдохновить пользователя просмотреть все страницы. Показывайте нумерацию страниц, когда их мало, и заменяйте нумерацию кнопками «следующая» и «предыдыдущая», когда они превышают разумный предел.



Есть одно исключение из этого правила. Если мы имеем дело с интернет-магазином, лучше показывать номера страниц. Чтобы пользователь мог вернуться на заинтересовавшую его страницу с понравившимся товаром. Нумерация страниц позволяет более тщательно выбирать товары: видеть, какие страницы уже пройдены, и понимать, каков прогресс просмотра. А так же при сохранении ссылки в избранном виден номер страницы, что позволяет пользователю легко вернуться к интересующим его товарам. Или продолжить с места, на котором он закончил просмотр.



Как эффективно пользоваться бесконечным скроллом
Существует несколько случаев, когда бесконечный скролл эффективен. Когда ваш контент открывается в модальном окне или новой вкладке, бесконечный скролл – полезный прием. Но, если ваш контент открывается в том же окне, бесконечный скролл может не понравиться пользователю. Когда пользователь возвращается назад, он теряет прогресс и место в потоке информации, и ему придется скроллить с самого начала страницы. Открытие контента в новой вкладке или модальном окне позволяет пользователю сохранить его место-прогресс и продолжить прокрутку без возвращения в начало страницы. Примером бесконечной прокрутки с открыванием контента в модальном окне является Pinterest. Примером бесконечной прокрутки с открыванием контента в новой вкладке является Inbound.



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

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



Укротите листинг
Листинг может приносить большие проблемы. Сложность использования листинга способна отпугнуть многих пользователей от дальнейшего изучения ресурса. Если страницы вашего сайта, расположенные в глубине структуры, не видят «дневного света», у вас проблемы с листингом. В Сети сегодня много плохих листингов. Внесите свой вклад в улучшение работы с листингом, и убедитесь в том, что ваш листинг укрощен и поставлен на службу пользователя и ресурса.

0 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.