Как добиться удобной пагинации
Все когда-то прокручивали веб-страницу до конца и видели внизу строку цифр. Этот ряд символов называется пагинацией сайта. Пагинация – механизм в рамках пользовательского интерфейса, разделяющий информацию на отдельные страницы.
Его наличие на сайте позволяет избежать ситуации, когда страницы кажутся пользователям слишком длинными или даже бесконечными. Однако существующие блоки навигации по страницам вызывают у пользователей определенные сложности.
Веб-страница не похожа на книгу. Объём книги ограничен вместительностью одного листа. В отличие от неё веб-страница имеет бесконечную длину и может вмещать или подгружать столько информации, сколько содержит сайт. Единственный недостаток, не позволяющий размещать на одной странице слишком много контента – увеличение времени загрузки.
Однако большинство сайтов обладают высокой пропускной способностью, которой достаточно, чтобы размещать на странице большое количество информации без сокращения скорости загрузки. Проблема заключается в том, что большинство сайтов предлагает пользователям скудный контент на коротких страницах. Увеличивая объем страницы, вы обеспечиваете пользователей большим количеством информации и избавляете их от необходимости постоянно переключаться между страницами. Они могут легко прокручивать колёсико мыши, просматривая большее количество информации за меньшее время.
Пользователям проще прокручивать страницу, чем щелкать кнопкой мыши. Колёсико и современные сенсорные панели и экраны делают прокрутку быстрее и проще кликанья мышью.
Для перехода на следующую страницу с помощью блока навигации пользователю нужно найти необходимую кнопку, навести на неё курсор, щелкнуть по ней и дождаться загрузки новой страницы. Все эти действия требуют определенных усилий, и посетители не всегда доходят до конца. Представьте, что из-за коротких страниц пользователю приходится выполнять эти действия снова и снова.
Для прокрутки ему нужно лишь дотронуться пальцем до колёсика мыши, сенсорной панели или экрана. Не нужно ждать, новая информация появляется в результате минимальных усилий. Не делайте свои страницы очень короткими, избавьте пользователей от нажатия на кнопки – сделайте доступным скроллинг.
Простой способ выяснить, не слишком ли коротки страницы – это посмотреть на размер полосы прокрутки. У небольшой страницы будет длинный скроллбар, у более объёмной – короткий.
Вам не нужен ни короткий, ни длинный: нужна золотая середина. С ней пользователи получат больше контента, при этом скорость загрузки не упадёт.
Некоторые блоки навигации содержат столько страниц, что их количество измеряется трехзначными цифрами. Ни один пользователь не станет пролистывать все страницы с первой по сотую, поэтому не следует отображать контент в виде огромного архива.
Вместо этого, предложите пользователям фильтры, которые организуют и отображают весь массив информации в виде отдельных категорий. Это позволит пользователям воспринимать нужную им информацию, не испытывая перегрузки.
На многих сайтах недооценивают значение крупных ссылок. Для пользователй эти цели нажатия – единственный способ перейти на другую страницу. Сделайте элементы навигации крупными и легко заметными, чтобы ничто не мешало читателям переходить со страницы на страницу.
Это значит, что ссылки «Следующая» и «Предыдущая» нужно увеличить или превратить в кнопки. Крупную ссылку легче заметить и нажать.
Некоторые блоки навигации содержат ссылки на первую и последнюю страницы, которые позволяют пользователям перейти в начало или в конец выдачи. Необходимости в этой функции нет, и обычно она сбивает посетителей с толку. Иногда ссылки на первую и последнюю страницу отображаются в виде двойных стрелок, которые пользователи ошибочно принимают за ссылки на предыдущую и следующую страницу.
Названия «Первая» и «Последняя» не могут исправить дело: пользователи случайно нажимают на них из-за близкого расположения к кнопкам «Следующая» и «Предыдущая».
Ссылки на первую и последнюю страницу – не обязательная функция: большинство пользователей предпочитают просматривать контент в хронологическом порядке. Они не станут начинать чтение с последней страницы, если только не стремятся найти уже знакомую информацию. Для таких случаев в навигации сайта нужен поиск.
В то же время, у пользователей должна быть возможность вернуться на первую страницу. Зачастую на ней размещают самую важную и свежую информацию. Вероятно, что пролистав несколько страниц, пользователь захочет вернуться к началу, не нажимая на ссылку «Предыдущая». Ссылка на первую страницу должна иметь вид цифры с многоточием: «1…». В этом случае её будет трудно перепутать с кнопками «Следующая» и «Предыдущая».
Ряд номеров в блоке навигации нужен далеко не всегда. Если число страниц достигает двузначных цифр и выше, пользователям лучше не видеть их общее количество: изучить их все они не смогут. Однако если в нумерации указаны лишь несколько страниц в пределах небольших двузначных или однозначных цифр, это мотивирует пользователей листать до конца.
Номера страниц нужны только в том случае, если их количество невелико, в остальных случаях лучше использовать кнопки «Следующая» и «Предыдущая».
Из этого правила есть одно исключение. На сайте интернет-магазина номера нужны для того, чтобы пользователи могли вернуться на определенную страницу и изучить товары, которые планируют купить. Нумерация страниц позволяет им более внимательно изучать предложение: они видят, какие страницы уже просмотрены, и где они находятся сейчас.
Кроме того, когда пользователи делают закладку, страница сохраняется с названием, номером и категорией продукта (рисунок ниже) – что позволяет пользователям начать оттуда, где они закончили, и помнить о том, что они искали.
Есть лишь несколько случаев, в которых оправдано использование бесконечного скроллинга. Так, бесконечный скроллинг эффективен в случаях, когда контент открывается в новой вкладке или модальном окне. Если информация открывается в том же окне, бесконечный скроллинг сбивает с толку. Нажав «Назад», пользователь попадает на предыдущую страницу, но теряет место, где остановился, и ему приходится вновь прокручивать страницу. В случае с новой вкладкой или модальным окном пользователь может сохранить то место, где остановился, и продолжать скроллинг, не обновляя страницу и не возвращаясь к началу. Примером сайта с бесконечным скроллингом и контентом, открывающимся в модальном окне, может быть Pinterest. Пример сайта с бесконечным скроллингом и контентом, открывающимся в новой вкладке – Inbound.
Другая проблема заключается в том, что пользователи, встретившие в потоке контента важную информацию, не могут сделать закладку и вернуться к этому месту позже. Покидая сайт, они теряют нужное место, и, чтобы добраться до него позже, должны заново прокручивать страницу.
Вот почему бесконечный скроллинг не подходит для интернет-магазинов. Покупатели онлайн могут захотеть вернуться к тому месту, где остановились в прошлый раз, и продолжить шопинг оттуда. У них может возникнуть естественное желание сохранить страницы с товарами, которые они сравнивают. Бесконечный скроллинг эффективен только в определённых условиях.Все когда-то прокручивали веб-страницу до конца и видели внизу строку цифр. Этот ряд символов называется пагинацией сайта. Пагинация — механизм в рамках пользовательского интерфейса, разделяющий информацию на отдельные страницы. Его наличие на сайте позволяет избежать ситуации, когда страницы кажутся пользователям слишком длинными или даже бесконечными. Однако существующие блоки навигации по страницам вызывают у пользователей определенные сложности.
Сайтов, которые используют навигацию с помощью стрелок, не так уж много. Эта уникальная технология дает пользователям возможность свободного перемещения по сайту без нажимания кнопок в блоке навигации.
Простое нажатие правой стрелки отправляет их на следующую страницу, левой — на предыдущую.
Однако пользователи не узнают об этой возможности, если не указать на неё отдельно. Примером использования технологии служит Dribbble.
Сложная пагинация может испортить впечатление от сайта. Большинство пользователей прекращают изучение ресурса, если им неудобно переключаться между страницами. Если на последние страницы вашего сайта никто не заглядывает, это значит, что вы используете неудобную пагинацию. Сейчас в сети полно неудачных шаблонов постраничной навигации. Внесите свою лепту в борьбу с неудобной разметкой страниц — сделайте так, чтобы на вашем сайте у пользователей не было проблем с пагинацией.
Автор: Энтони Тсенг, перевод: Proactivity и cmsmagazine.ru
Оригинал: http://uxmovement.com/navigation/avoid-the-pains-of-pagination/
Его наличие на сайте позволяет избежать ситуации, когда страницы кажутся пользователям слишком длинными или даже бесконечными. Однако существующие блоки навигации по страницам вызывают у пользователей определенные сложности.
Не делайте страницы слишком короткими
Веб-страница не похожа на книгу. Объём книги ограничен вместительностью одного листа. В отличие от неё веб-страница имеет бесконечную длину и может вмещать или подгружать столько информации, сколько содержит сайт. Единственный недостаток, не позволяющий размещать на одной странице слишком много контента – увеличение времени загрузки.
Однако большинство сайтов обладают высокой пропускной способностью, которой достаточно, чтобы размещать на странице большое количество информации без сокращения скорости загрузки. Проблема заключается в том, что большинство сайтов предлагает пользователям скудный контент на коротких страницах. Увеличивая объем страницы, вы обеспечиваете пользователей большим количеством информации и избавляете их от необходимости постоянно переключаться между страницами. Они могут легко прокручивать колёсико мыши, просматривая большее количество информации за меньшее время.
Пользователям проще прокручивать страницу, чем щелкать кнопкой мыши. Колёсико и современные сенсорные панели и экраны делают прокрутку быстрее и проще кликанья мышью.
Для перехода на следующую страницу с помощью блока навигации пользователю нужно найти необходимую кнопку, навести на неё курсор, щелкнуть по ней и дождаться загрузки новой страницы. Все эти действия требуют определенных усилий, и посетители не всегда доходят до конца. Представьте, что из-за коротких страниц пользователю приходится выполнять эти действия снова и снова.
Для прокрутки ему нужно лишь дотронуться пальцем до колёсика мыши, сенсорной панели или экрана. Не нужно ждать, новая информация появляется в результате минимальных усилий. Не делайте свои страницы очень короткими, избавьте пользователей от нажатия на кнопки – сделайте доступным скроллинг.
Простой способ выяснить, не слишком ли коротки страницы – это посмотреть на размер полосы прокрутки. У небольшой страницы будет длинный скроллбар, у более объёмной – короткий.
Вам не нужен ни короткий, ни длинный: нужна золотая середина. С ней пользователи получат больше контента, при этом скорость загрузки не упадёт.
Предложите пользователям фильтры
Некоторые блоки навигации содержат столько страниц, что их количество измеряется трехзначными цифрами. Ни один пользователь не станет пролистывать все страницы с первой по сотую, поэтому не следует отображать контент в виде огромного архива.
Вместо этого, предложите пользователям фильтры, которые организуют и отображают весь массив информации в виде отдельных категорий. Это позволит пользователям воспринимать нужную им информацию, не испытывая перегрузки.
Увеличьте цели нажатия
На многих сайтах недооценивают значение крупных ссылок. Для пользователй эти цели нажатия – единственный способ перейти на другую страницу. Сделайте элементы навигации крупными и легко заметными, чтобы ничто не мешало читателям переходить со страницы на страницу.
Это значит, что ссылки «Следующая» и «Предыдущая» нужно увеличить или превратить в кнопки. Крупную ссылку легче заметить и нажать.
Не используйте ссылки «Первая» и «Последняя»
Некоторые блоки навигации содержат ссылки на первую и последнюю страницы, которые позволяют пользователям перейти в начало или в конец выдачи. Необходимости в этой функции нет, и обычно она сбивает посетителей с толку. Иногда ссылки на первую и последнюю страницу отображаются в виде двойных стрелок, которые пользователи ошибочно принимают за ссылки на предыдущую и следующую страницу.
Названия «Первая» и «Последняя» не могут исправить дело: пользователи случайно нажимают на них из-за близкого расположения к кнопкам «Следующая» и «Предыдущая».
Ссылки на первую и последнюю страницу – не обязательная функция: большинство пользователей предпочитают просматривать контент в хронологическом порядке. Они не станут начинать чтение с последней страницы, если только не стремятся найти уже знакомую информацию. Для таких случаев в навигации сайта нужен поиск.
В то же время, у пользователей должна быть возможность вернуться на первую страницу. Зачастую на ней размещают самую важную и свежую информацию. Вероятно, что пролистав несколько страниц, пользователь захочет вернуться к началу, не нажимая на ссылку «Предыдущая». Ссылка на первую страницу должна иметь вид цифры с многоточием: «1…». В этом случае её будет трудно перепутать с кнопками «Следующая» и «Предыдущая».
Когда нужны номера страниц
Ряд номеров в блоке навигации нужен далеко не всегда. Если число страниц достигает двузначных цифр и выше, пользователям лучше не видеть их общее количество: изучить их все они не смогут. Однако если в нумерации указаны лишь несколько страниц в пределах небольших двузначных или однозначных цифр, это мотивирует пользователей листать до конца.
Номера страниц нужны только в том случае, если их количество невелико, в остальных случаях лучше использовать кнопки «Следующая» и «Предыдущая».
Из этого правила есть одно исключение. На сайте интернет-магазина номера нужны для того, чтобы пользователи могли вернуться на определенную страницу и изучить товары, которые планируют купить. Нумерация страниц позволяет им более внимательно изучать предложение: они видят, какие страницы уже просмотрены, и где они находятся сейчас.
Кроме того, когда пользователи делают закладку, страница сохраняется с названием, номером и категорией продукта (рисунок ниже) – что позволяет пользователям начать оттуда, где они закончили, и помнить о том, что они искали.
Когда стоит использовать бесконечный скроллинг
Есть лишь несколько случаев, в которых оправдано использование бесконечного скроллинга. Так, бесконечный скроллинг эффективен в случаях, когда контент открывается в новой вкладке или модальном окне. Если информация открывается в том же окне, бесконечный скроллинг сбивает с толку. Нажав «Назад», пользователь попадает на предыдущую страницу, но теряет место, где остановился, и ему приходится вновь прокручивать страницу. В случае с новой вкладкой или модальным окном пользователь может сохранить то место, где остановился, и продолжать скроллинг, не обновляя страницу и не возвращаясь к началу. Примером сайта с бесконечным скроллингом и контентом, открывающимся в модальном окне, может быть Pinterest. Пример сайта с бесконечным скроллингом и контентом, открывающимся в новой вкладке – Inbound.
Другая проблема заключается в том, что пользователи, встретившие в потоке контента важную информацию, не могут сделать закладку и вернуться к этому месту позже. Покидая сайт, они теряют нужное место, и, чтобы добраться до него позже, должны заново прокручивать страницу.
Вот почему бесконечный скроллинг не подходит для интернет-магазинов. Покупатели онлайн могут захотеть вернуться к тому месту, где остановились в прошлый раз, и продолжить шопинг оттуда. У них может возникнуть естественное желание сохранить страницы с товарами, которые они сравнивают. Бесконечный скроллинг эффективен только в определённых условиях.Все когда-то прокручивали веб-страницу до конца и видели внизу строку цифр. Этот ряд символов называется пагинацией сайта. Пагинация — механизм в рамках пользовательского интерфейса, разделяющий информацию на отдельные страницы. Его наличие на сайте позволяет избежать ситуации, когда страницы кажутся пользователям слишком длинными или даже бесконечными. Однако существующие блоки навигации по страницам вызывают у пользователей определенные сложности.
Навигация с помощью стрелок клавиатуры
Сайтов, которые используют навигацию с помощью стрелок, не так уж много. Эта уникальная технология дает пользователям возможность свободного перемещения по сайту без нажимания кнопок в блоке навигации.
Простое нажатие правой стрелки отправляет их на следующую страницу, левой — на предыдущую.
Однако пользователи не узнают об этой возможности, если не указать на неё отдельно. Примером использования технологии служит Dribbble.
Избегайте сложной пагинации
Сложная пагинация может испортить впечатление от сайта. Большинство пользователей прекращают изучение ресурса, если им неудобно переключаться между страницами. Если на последние страницы вашего сайта никто не заглядывает, это значит, что вы используете неудобную пагинацию. Сейчас в сети полно неудачных шаблонов постраничной навигации. Внесите свою лепту в борьбу с неудобной разметкой страниц — сделайте так, чтобы на вашем сайте у пользователей не было проблем с пагинацией.
Автор: Энтони Тсенг, перевод: Proactivity и cmsmagazine.ru
Оригинал: http://uxmovement.com/navigation/avoid-the-pains-of-pagination/
0 комментариев