LPgenerator - професійна Landing Page платформа для збільшення продажів вашого бізнесу
МАГАЗИН Лендінзі НАВЧАЛЬНИЙ КУРС АКЦІЇ ВІД ПАРТНЕРІВ
Відображення стану системи входить в десятку фундаментальних стандартів юзабіліті, залишаючись одним з найбільш важливих і універсальних принципів UI-дизайну.
Прогрес-індикатори впроваджуються з метою своєчасного надання зворотного зв'язку про функціонування системи / інтерфейсу. Відповідно до теорії інтеракції Нормана (Norman's interaction theory), ці елементи також повинні допомагати користувачам оцінювати стан системи.
Однією з найбільш часто використовуваних форм зворотного зв'язку про роботу системи є анімаційний індикатор прогресу - цей елемент відображає завантаженість системи / ресурсу при обробці інформації або завантаженнями.
Сьогодні ми пропонуємо вашій увазі переклад статті Кейті Шервин (Katie Sherwin), фахівця юзабіліті NNG (Nielsen-Norman Group, група Нільсена-Нормана), в якій вона розповіла про різні типи індикаторів прогресу і представила рекомендації щодо їх застосування.
Сила зворотного зв'язку - дайте користувачам відчути, що ви їх чуєте
Прогрес-індикатори не є одним з останніх трендів веб-дизайну. проте їх впровадження гарантовано покращує користувальницький досвід - отримуючи зворотний зв'язок на свої дії, користувачі переконуються, що система прийняла їх запит і обробляє його.
На жаль, більшість сайтів і систем не відображують інформацію про стан процесу, поки він не завершиться - це дратує користувачів, оскільки вони не знають, чи виконується їх команда і чи працює система взагалі. Більш того, необізнаність про стан системи є причиною повторних замовлень і безлічі зайвих кліків.
Висока швидкість завантаження є загальною вимогою для всіх ресурсів, але іноді сервери обробляють дані довше звичайного, і виправити це можна навіть за рахунок їх модернізації. У таких випадках споживачів слід поінформувати, що система працює і їх команда виконується. Якщо завантаження вимагає більше 10 секунд, рекомендується вказувати приблизний час до її закінчення - в іншому випадку, багато користувачів просто не стануть чекати.
Як приклад зворотного зв'язку про стан системи Кейті розповіла про свій дзвінок в Каліфорнійський департамент транспорту (DMV, Department of Motor Vehicles):
- Передбачувано, Шервин поінформували, що всі оператори зайняті.
- Через кілька хвилин було включено повідомлення про те, що Кейті все ще на лінії.
- Наступний запис свідчила, що приблизний час очікування становить 15-20 хвилин - це дозволило фахівця NNG зайнятися своїми справами без побоювання пропустити чергу.
- Після закінчення 15 хвилин Кейті було запропоновано залишити контактний номер, щоб оператор зміг зв'язатися з нею, коли звільниться. Більш того, Шервин запевнили, що вона не втратить своє місце в черзі.
Використовувані DMV інструменти зворотного зв'язку полегшили очікування з'єднання з оператором - Кейті не тільки інформувати про стан її дзвінка, а й запропонували зручну альтернативу очікуванню. До слова, впровадження подібної системи утримання обходиться набагато дешевше, ніж розширення штату call-центру.
Індикатори завантаження інформують користувачів, що система вимагає більше часу на виконання команди (якою може бути завантаження файлу, встановлення оновлення і т. Д.) І відображають приблизний час очікування.
Щоб зрозуміло донести властивості цих елементів, Кейті описала їх переваги, провівши паралель із дзвінком в Каліфорнійський департамент транспорту:
- Індикатори усувають сумніви користувачів про коректність роботи системи, відображаючи її стан - це було досягнуто за допомогою повідомлення про зайнятість операторів.
- Дані елементи надають об'єкт, спостереження за яким полегшує очікування - при утриманні дзвінка таким є музика.
- Вони мають у своєму розпорядженні користувачів до очікування, відображаючи якийсь процес - Шервин поінформували, що всі представники департаменту зайняті, і що оператор звільниться протягом 15 хвилин, тому вона була готова почекати.
- Індикатори прогресу послаблюють почуття часу, так як користувачі, концентруючись на зворотний зв'язок, приділяють менше уваги самому процесу очікування - слухаючи музику, фахівець NNG забула, як утомливо чекати з'єднання з оператором.
Метою одного з досліджень, проведених в університеті Небраски-Лінкольна (University of Nebraska-Lincoln), було визначення часу, протягом якого користувачі готові чекати завантаження сайту. Одній групі респондентів була представлена версія сторінки з індикаторами прогресу (анимированной смугою завантаження), а другий - без.
В результаті ті, кому відображалася веб-сторінка з індикатором, були більш задоволені призначеним для користувача досвідом і чекали в середньому в 3 рази довше, ніж ті, кому не був показаний елемент зворотного зв'язку.
Анімовані індикатори завантаження
Незважаючи на те, що швидкість цифрового з'єднання збільшується з кожним роком, проблема повільно завантажуються ресурсів досі актуальна. А як відомо, низька продуктивність веб-сайтів дратує відвідувачів і нерідко стає причиною їх відходу.
Схильність користувачів до очікування завантаження визначається декількома факторами:
Маркетологи не в силах вплинути на ці фактори, однак, слідуючи представленим нижче рекомендаціям, можуть значно збільшити готовність користувачів до очікування:
Завжди відображуйте якусь зворотний зв'язок
Оскільки очікування починається відразу ж після виконання дії (наприклад, кліка на CTA-елемент), система повинна моментально показати, що запит прийнятий і обробляється: наприклад, може змінитися колір кнопки, на яку клікнув користувач, або з'явитися смуга завантаження.
Статичність інтерфейсу після відправки запиту сприймається багатьма користувачами як помилка, тому вони часто пробують виконати команду повторно, що, в свою чергу, може привести до негативних наслідків.
Відображуйте прогрес будь-якого процесу, що тягнеться довше 1 секунди
Увага користувачів починає розсіюватися після декількох секунд очікування, що може привести до їх догляду. Тому для відображення прогресу процесів, чия тривалість довше секунди, слід використовувати циклічну анімацію або процентний індикатор.
Далі ми ознайомимося з різними типами індикаторів і рекомендаціями щодо їх застосування.
1. Циклічна анімація
Графічний елемент з циклічної анімацією вказує на те, що система працює, але не дає інформації про приблизний час очікування завантаження.
Такі елементи варто використовувати для відображення статусу процесів, які тривають від 2 до 10 секунд. Якщо використовувати циклічну анімацію для запитів, обробляються менше секунди, то вона викличе ефект тертя - користувачів збентежить раптова поява і зникнення незрозумілого елемента.
З точки зору веб-розробки, використовувати циклічну анімацію в оформленні всіх індикаторів досить спокусливо, оскільки для цього не потрібно обчислювати тривалість завантаження. Проте циклічної анімацією не рекомендується відображати обробку процесів, які тривають більше 10 секунд - відсутність інформації про прогрес підштовхне користувачів до відходу. Більш того, за таким графічного елементу не можна визначити, чи працює система, що також збільшує можливість припинення цифровий інтеракції.
Учасник одного юзабіліті тесту чекав завантаження сторінки онлайн-видання більше 15 хвилин, а в кінцевому рахунку виявилося, що сталася помилка і додаток потрібно запустити знову. Очевидно, що реальний користувач не стане чекати так довго.
Варто зауважити, що циклічна анімація не підходить для відображення прогресу завантаження даних з серверів, оскільки якість з'єднання, що впливає на швидкість роботи, непідконтрольний розробникам. За стандартами, дані повинні завантажуватися не довше ніж 2 секунд, проте цей показник не завжди можна досягти.
2. Процентні індикатори
Індикатори, що відображають прогрес у відсотках, є найбільш інформативним типом анимированной зворотного зв'язку. Ці елементи дозволяють користувачам розрахувати приблизний час очікування (що дає їм можливість вирішити, будуть вони чекати чи ні), максимально усувають невизначеність щодо тривалості обробки даних і послаблюють почуття часу.
Кола і горизонтальні стовпці, які заповнюються від 0 до 100%, є прикладами такого типу прогрес-індикаторів.
Як правило, процентні індикатори слід використовувати для процесів, які тривають від 10 секунд - візуальний елемент, що відображає поступове завершення обробки, заспокоює і налаштовує на очікування. Однак ці елементи можна використовувати для відображення статусу процесів, що вимагають менше 10 секунд, якщо такі пов'язані з обробкою файлів або реєстру, оскільки відвідувачі розуміють, що система працює з певною кількістю записів.
До анімованим процентним індикаторами рекомендується додавати текст (наприклад, «Завантажено файлів: 17 з 50»), а до індикаторів тривалих процесів - кнопку скасування, на випадок, якщо користувач не захоче чекати. До слова, відсутність елемента скасування позбавляє користувачів контролю над системою, що шкодить користувача досвіду.
Процентні індикатори створюють уявлення про тривалість процесу, що робить зміни швидкості прогресу більш помітними, а це, в свою чергу, позитивно впливає на призначений для користувача досвід. Однак користувачів дратує, якщо індикатор заповнюється надто швидко, а потім, коли залишається кілька відсотків до завершення, зупиняється - це зводить позитивний вплив зворотного зв'язку нанівець.
Багато дизайнерів і розробники, які впроваджують індикатори завантаження, стикаються з проблемою обчислення швидкості виконання процесів. Щоб впоратися з цим завданням, дотримуйтеся наступних рекомендацій:
- Налаштуйте анімацію так, щоб індикатор почав заповнюватися повільно, а в міру наближення до завершення завантаження швидкість збільшувалася - це не створить у відвідувачів завищених очікувань щодо продуктивності сайту. Завжди краще перевершити очікування клієнтів, ніж розчарувати їх.
- Варто зауважити, що ця рекомендація актуальна тільки для індикаторів завантаження - дослідження показали, що прогрес-індикатори опитувань, швидкість заповнення яких знижується в міру проходження, знижують показник відмов.
- Вказуйте зразкову, не точне час очікування - в деяких випадках, завантаження напевно триватиме довше зазначеного часу, що негативно вплине на довіру споживачів.
- Простого тексту на кшталт «Це займе приблизно хвилину» або «Залишилося приблизно 3 хвилини» досить для інформування та утримання користувачів. Також додавайте до зазначеного значенням кількох зайвих секунд на випадок непередбачених затримок.
- Замість відображення загального прогресу, в деяких випадках оптимально відображати кількість виконаних і залишилися етапів - відвідувачі не будуть точно знати, скільки займе виконання того чи іншого кроку, проте кількість етапів допоможе їм сформувати приблизне уявлення і приверне до завершення процесу або очікування його закінчення.
- Призначений для користувача досвід і юзабіліті на сайтах eCommerce
3. Статичні прогрес-індикатори
Статичні індикатори, прикладом яких може бути текст «Зачекайте, результати завантажуються» без будь-яких анімованих елементів, є неефективними. Подібні індикатори відображають інформацію про прогрес системи та стан її роботи, тому їх варто замінювати на динамічні.
Найгірший спосіб запобігти випадкові повторні замовлення і зайві кліки - додати до CTA-кнопці попередження по типу «Повторне натискання може привести до повторного замовлення». По-перше, будь-які загрози суперечать базовим стандартам позитивного користувацького досвіду, а по-друге, подібні попередження просто неефективні, оскільки на них вкрай рідко звертають увагу.
Текст попередження: «Не клікайте двічі!».
Рекомендації ресурсів, цільовою аудиторією яких є діти
В ході дослідження «Діти у Всесвітній мережі» (Children on the Web), фахівці NNG зіткнулися з безліччю довго завантажуються інтерактивних інструментів та ігор.
Кейті представила кілька порад про те, як зберегти інтерес юних користувачів, не відволікаючи їх від основного заняття:
- Завжди використовуйте помітні процентні індикатори, щоб дітям було зрозуміло, що система вантажиться. Діти, як і дорослі, хочуть знати, чи працює система і як довго вона буде завантажуватися.
- Переконайтеся в тому, що проміжна анімація не затуляє індикатор і не схожа на ігровий процес.
- Використовуйте захоплюючі і прості анімації, релевантні основний активності - такі найбільш ефективні для утримання уваги і полегшення очікування.
- Юзабіліті для самих маленьких, або Як створити веб-ресурс, який сподобається дітям?
Надання зворотного зв'язку - одне з керівних вимог позитивного користувацького досвіду. Відкрито і прозоро відображаючи час, необхідний для завантаження, дизайнери можуть усунути необізнаність користувачів про стан системи і збільшити час, який вони готові витратити на очікування.
Циклічні індикатори слід використовувати для процесів, які тривають 2-9 секунд, а процентні - для затримок, які тривають більше 10 секунд. Але оскільки оцінити тривалість завантаження можна не завжди, вам варто збільшити затримку відображення процесу, що вимагає більше 10 секунд. Чим вища нестабільність часу завантаження, тим нижче повинен бути мінімальний поріг відображення точного прогресу.
Ефективні прогрес-індикатори розташовують користувачів до очікування і позитивно впливають на враження про сайт / додатку.
Високих вам конверсій!
УВАГА! Ви використовуєте застарілий браузер Internet Explorer
Даний сайт побудований на передових, сучасних технологіях і не підтримує Internet Explorer 6-ої і 7-ої версії.
