Коротко про оптимістичний UI. Оптимістичні інтерфейси в картинках

Не так давно на сайті Smashing Magazine з'явиласястаття Дениса Мишунова, з перекладом якої можна ознайомитися на хабре.
Слідом за статтею Дениса Мишунова вийшла ще одна – «Optimistic UIs in under 1000 words» за авторством Ігоря Мандригина, в якій він зачіпає ту ж тему, доповнюючи її і ілюструючи великою кількістю прикладів. Пропонуємо вашій увазі переклад.




Коротко про оптимістичний UI.
Оптимістичні інтерфейси в картинках.


Давайте сьогодні поговоримо про оптимістичному UI дизайні.

В якому сенсі оптимістичному?

Оптимістичні інтерфейси не чекають завершення операції. Вони відразу ж переходять в кінцеве стан, показуючи фейковую інформацію, поки операція виконується.
На словах все це звучить досить заплутано, тому давайте краще звернемося до першого прикладу. Для наочності візьмемо вигаданий месенджер і назвемо його Cotton Candy.
Існує два підходи до представлення процесу відправлення повідомлення:


Не оптимістичний (ліворуч) проти оптимістичного (спрва)

Отже, оптимістичний UI дизайн показує кінцевий стан до того, як додаток до дійсності закінчує (або навіть починає) операцію.

тобто це просто фокус. Навіщо тоді це потрібно?

Ідея, яка ховається за хитромудрою назвою, дуже проста. Тим не менш, це може надати величезний вплив на враження ваших користувачів.
(або «задовольнити клієнта», якщо ви Apple).
По-перше, це створює відчуття, що програма працює швидше, як би «прискорюючи» ваш додаток. Користувач може зробити щось ще, поки програма завантажує потішну фотку з котиком або відправляє іронічний коментар в дискусію.
По-друге, це спрощує взаємодію з інтерфейсом, забираючи зайві стану та відволікаючі чинники. Додаток виглядає більш простим і доступним.
Та й UI дизайнерам доведеться менше екранів доводити до стану Pixel-Perfect.

Приклади з життя

Оптимістичний інтерфейс часто використовується в месенджерах і соціальних програмах. Messages для iOS або MacOS вдаються до цієї концепції, коли користувач надсилає повідомлення.


Негайне оновлення інтерфейсу в Messages на Mac.

Instagram застосовує таке ж рішення для додавання коментарів:


Коментарі в Instagram. Зверніть увагу на індикатор прогресу праворуч.

Давайте розглянемо приклад іншого плану: додаток Audible – плеєр для аудіокниг на iOS. Як тільки невеликий фрагмент запису довантажити, користувач відразу може почати прослуховування, поки інша частина треку догружается.


Як тільки частина книги завантажиться, з'являється напис «Ready to play». Оптимізм в чистому вигляді.

Ще один приклад — Trello: коли користувач переміщує карту, вона переміщується негайно, інтерфейс не чекає, поки сервер закінчить свою роботу.


Optimistic UIs are key to Trello's fluency
Оптимістичні інтерфейси – ключова фішка зручності Trello


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

Прогрес

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

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


Відображення прогресу поряд з повідомленням

Інший спосіб — додати маленьку іконку або ярлик, що демонструють статус відправки повідомлення поруч з ним.



Іконки статусу (Facebook Messenger)

Повідомлення на iOS того ж видають індикатор стану поверх вікна. Особливо він кидається в очі, коли завантажуєш потішну фотку з котиком (одну або багато).

Індикація прогресу в додатку Messages в iOS

Повідомлення про помилку
А якщо щось пішло не так?
При проектуванні повідомлення про помилку слід звернути увагу на наступне:
1. Помітність. Оповіщення повинно бути добре видно, щоб користувач ніяк не міг його пропустити (особливо в тих випадках, коли завантажує дані).
2. Причинність. Користувачеві має бути зрозуміло, яке саме з його дій викликало помилку. Адже інтерфейс вже оновився, а значить, операція сприймається як завершена.
Повідомлення про помилку — найскладніше завдання для дизайнера оптимістичних інтерфейсів.

Найпростіше рішення — це, звичайно, Good Old bLocking Error Message (GOLEM) — старе добре блокуючі віконце.

GOLEM в дії!

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


WhatsApp, не треба так!

Коли користувач натискає на неї, показуємо діалог GOLEM або намагаємося повторити дію без діалогу.


Діалог GOLEM викликається натисканням на індикатор помилки (додаток Messages в iOS)

Тут, навпаки, все в порядку з причинно-наслідковими зв'язками (пункт 2), але, на жаль, не досить помітно. Якщо юзер вже переключився на інший екран або прокрутив листування, залишивши повідомлення за межами екрана, оповіщення він не побачить.

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


Messages натякає нам, що щось пішло не так

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

Висновок
Оптимістичний UI може зробити роботу з вашим додатком швидше, простіше і приємніше для користувачів. Також це відмінний вихід з положення, якщо ваші сервери досить повільні (та ще й адмін звільнився минулого тижня).
Але разом з тим, оптимізм в оптимістичних інтерфейсах повинен бути обґрунтований.

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

Так що приймайте всі ці міркування до уваги і користуйтеся даним рішенням з розумом!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.