Нескінченний скролінг або пагінація

Уявити велика кількість інформації зручним для користувачів способом може бути досить непросто.

Чи варто використовувати нескінченну завантаження для даних або все-таки зупинитися на нумерованих сторінках? Таке питання мучить багатьох дизайнерів. І дійсно, вибір не з простих, адже у кожного з методів свої сильні і слабкі сторони, причому не завжди очевидні з першого погляду. Розглянемо обидва методи, щоб вам було простіше робити вибір.

нескінченний скролінг

Нескінченний скролінг - це механізм, що дозволяє користувачам переглядати масивний потік контенту як єдине ціле, без видимої фінішної межі. Додаток просто підвантажує нові дані, у міру того як користувач прокручує сторінку вниз. Як би спокусливо це не звучало, нескінченний скролінг не є універсальним рішенням для будь-якого сайту або програми.

Нескінченний скролінг або пагінація

Перевага 1: Залучення користувача і природне бажання глибше вивчати матеріал

Нескінченний скролінг або пагінація
Pinterest з його безмежним океаном «пинов»

Нескінченний скролінг або пагінація
Новинна стрічка Facebook практично змушує користувачів скролл ще і ще в пошуках контенту

Перевага 2: Скролл легше, ніж кликати

За допомогою колеса мишки або сенсорного екрану користувачам зручніше скролл, ніж кликати. Для довгої секції єдиного контенту - наприклад, гайдлайни - скролінг куди зручніше. ніж поділ тексту на кілька окремих сторінок. Крім того, скролінг вимагає меншої точності, ніж натискання на посилання або кнопку.

Нескінченний скролінг або пагінація
Коли контент розділений між кількома сторінками, кожен перехід між ними вимагає додаткового кліка і часу на завантаження нової сторінки. При скроллинге ж оновлення контенту проводиться безперервно, і для цього потрібно всього одну дію

Перевага 3: Скролінг добре підходить для мобільних пристроїв

Чим менше екран, тим довше скролл. Популяризація пристроїв з сенсорним екраном також виступає на користь скролінгу. Для сучасних користувачів скролінг став практично інтуїтивним дією. У випадку зі скроллингом дані, і чин за їх отримання (скролл) безпосередньо пов'язані один з одним, тому користувачі отримують по-справжньому чуйне взаємодія від інтерфейсу незалежно від використовуваного пристрою.

Недолік 1: Продуктивність сторінки і ресурси пристрою

Швидкість завантаження сторінки в чому визначає те, як додаток або сайт сприймає кінцевий користувач. Багато досліджень показують. що через повільну завантаження люди просто йдуть з сайту або видаляють додаток, а це веде до низькому коефіцієнту конверсій. І це погана новина для тих, хто використовує нескінченний скролінг.

Чим далі користувач прокручує сторінку вниз, тим більше контенту завантажується на одній сторінці. Це робить її помітно «важче» і в більшості випадків негативно позначається на працездатності браузера або програми.

Ще одна проблема - обмежені ресурси для користувача пристрої. На багатьох сайтах з нескінченним скролл, особливо на тих, де багато зображень, пристрої з обмеженими ресурсами, такі як iPad, починають працювати помітно повільніше через величезної кількості завантажених даних.

Недолік 2: Пошук і місце розташування об'єкта в потоці даних

Нескінченний скролінг або пагінація
В інтерфейсі сервісу Pinterest є опція закладок

Неможливість визначити своє становище при скролінгу викликає у користувачів незручності і в результаті псує весь досвід взаємодії з продуктом.

Нескінченний скролінг або пагінація
Інтерфейс пошуку з нескінченним скролінгом на Etsy. Поточна версія побудована на пагінацію

Дмитро Фадєєв відзначає. «Люди захочуть повернутися до результатів пошуку, щоб знову побачити речі, які вони вибрали раніше, і порівняти їх з тими, які знайшли після. Нескінченний скролінг не тільки порушує цю динаміку - він ускладнює пересування вниз і вгору за списком, особливо коли користувач повертається на сторінку в інший час і починає пошук з самого верху. Йому знову доводиться прокручувати вниз і чекати завантаження контенту. Тому інтерфейс з нескінченним скроллингом насправді повільніше, ніж з пагінацією ».

Недолік 3: нерелевантні скроллбар

Користувачів може дратувати те, що скроллбар не відображає реального обсягу доступних даних. Ви думаєте, що вже близькі до кінця, що саме по собі змушує прокрутити сторінку ще трохи вниз, - і коли ви вже практично «досягли дна», раптово бачите, що результати просто подвоїлися в кількості. З точки зору доступності і зрозумілості інтерфейсу це, м'яко кажучи, не дуже добре.

Нескінченний скролінг або пагінація
Смуга прокрутки повинна відображати справжню довжину сторінки

Недолік 4: Відсутність футера

«Підвали» існують не просто так - вони містять контент, який може бути корисний для користувачів. Якщо користувачі не можуть щось відшукати або їм потрібна додаткова інформація, найчастіше вони намагаються знайти це в футере. Але стрічка Скролл нескінченно: коли користувач добирається до футера, завантажується ще одна порція даних, і витіснений ними футер йде з поля зору.

Візьмемо, наприклад, сервіс Bing Images. Футер сервісу містить посилання Learn More і Help, але користувачам навряд чи вдасться перейти по ним, так як посилання будуть постійно «тікати» від них через завантаження контенту.

Нескінченний скролінг або пагінація

На сайтах з нескінченним скролл "підвал" повинен бути доступним для користувачів. Цього можна домогтися, зробивши його «липким» або взагалі перемістивши в шапку або бічну панель, як це зробив Facebook.

Нескінченний скролінг або пагінація
Facebook переніс всі посилання з підвалу (наприклад, Legal, Careers) в панель праворуч від новинної стрічки

Ще один варіант доступною подачі - завантаження контенту за запитом за допомогою кнопки Load More. У цьому випадку новий контент НЕ буде завантажуватися автоматично, поки користувач сам так не вирішить.

Нескінченний скролінг або пагінація
Instagram використовує кнопку Load More, щоб підвал був доступний користувачам

Пагінація - це механізм, який ділить контент на окремі сторінки. Якщо, проскроллів вниз сторінки, ви бачите ряд цифр - це і є пагінація сайту або програми.

Нескінченний скролінг або пагінація

Перевага 1: Хороша конверсія

Пагінація добре працює, коли користувач шукає в списку об'єктів щось певне, а не просто переглядає потік даних.

Нескінченний скролінг або пагінація
Дані результатів пошуку Google

Перевага 2: Відчуття контролю

Нескінченний скролінг схожий на нескінченну гру: неважливо, як далеко ви в підсумку пройдете, вас завжди буде переслідувати відчуття, що ви ніколи не дійдете до кінця. Коли користувачі заздалегідь знають кількість доступних результатів, вони можуть прийняти більш осмислене рішення. Девід кірас в своєму дослідженні «Психологія взаємодії людина - комп'ютер» зазначає: «Досягнення кінцевої точки дає відчуття контролю».

Дослідження також пояснює: коли у користувачів є обмежені, але при цьому релевантні результати, їм простіше зрозуміти, чи шукають вони то, що потрібно. Крім того, коли користувачі бачать загальна кількість результатів (зрозуміло, якщо він не нескінченний), їм простіше оцінити, скільки часу займуть пошуки потрібного матеріалу.

Перевага 3: Положення елемента

Постранічний інтерфейс дає можливість тримати в голові розташування елемента. Естесвенно, користувачі не обов'язково будуть пам'ятати точний номер сторінки, але вони будуть приблизно орієнтуватися в списку результатів, а пронумеровані посилання допоможуть швидше туди дістатися.

З пагінацією користувачі контролюють навігацію, тому що знають, яку сторінку вибрати, щоб потрапити в потрібне місце.

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

Нескінченний скролінг або пагінація
Онлайн-магазин MR Porter використовує пагінацію для представлення товарів

Недолік: Додаткові дії

Щоб перейти на нову сторінку, використовуючи пагінацію, користувач повинен знайти цільове посилання (наприклад, «Next»), навести на неї мишкою, клікнути і чекати, поки сторінка завантажиться.

Для отримання контенту потрібно клікнути

Основна проблема в тому, що велика частина сайтів в рамках однієї сторінки показує користувачам дуже обмежена кількість контенту. Зробивши сторінки довше без шкоди для швидкості завантаження, ви забезпечите користувачам більшу кількість контенту на сторінці і скоротіть кількість необхідних переходів між сторінками.

В яких випадках що використовувати

Є лише кілька випадків, коли нескінченний скролінг ефективний. Він найкраще підходить для сайтів і додатків з контентом, який генерують користувачі (Twitter, Facebook) або з візуальним контентом (Pinterest, Instagram). Пагінація ж надійна і добре підходить для сайтів і додатків, які задовольняють цілеспрямованим діям користувачів.

Сервіси компанії Google - наочне підтвердження цього правила. Google Images використовує нескінченний скролл, тому що сприйняття зображень відбувається набагато швидше, ніж читання текстових результатів пошуку. Це і є основна причина, чому результати Google Search досі відображаються в більш традиційній манері.

висновок

Дизайнери повинні зважувати плюси і мінуси нескінченного скролінгу і пагінацію, перед тим як зробити остаточний вибір. Цей вибір буде залежати як від контексту використання, так і від того, як буде поставлятися сам контент.

Нескінченний скролінг добре працює для проектів на кшталт Twitter, де користувачі поглинають нескінченний потік даних без пошуку чогось конкретного, в той час як пагінація підходить для сторінок результатів пошуку, де люди шукають щось конкретне і положення елементів має велику роль.