Як поліпшити користувальницький досвід з допомогою микровзаимодействий

9

Від автора: швидше за все, ви знаєте, що виробники автомобілів типу BMW наймають елітні команди звукорежисерів у свої підрозділи по дизайну автомобілів. Зрештою, машина – дуже гучне засіб пересування. Що більш дивно, так це, що ці команди часто витрачають більшу частину часу на налаштування видаваного автомобілем звуку, а не на ізоляцію.

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

І як дизайнери, ми розуміємо це, так адже? Все це можна віднести до користувача досвіду. Тут головне не просто закрити двері, а важливий сам процес. У BMW це один звук, звук безпеки, надійності і розкоші. Микровзаимодействия у веб-дизайні оперують схожими поняттями.

Що таке микровзаимодействия?

Микровзаимодействия – це майже непомітні моменти, зосереджені навколо досягнення однієї задачі. Як наприклад, натискання кнопки на формі для авторизації або додавання твіту в обране для залучення соціального уваги.

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

Как улучшить пользовательский опыт с помощью микровзаимодействий

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

Микровзаимодействия не рівні анімації

Микровзаимодействия – це більше, ніж просто анімація. Вам доведеться врахувати очевидність мети взаємодії і мову, використовуваний для відповіді. Потрібно більше думати про інтерфейсу досвіді, ніж про візуальної краси. Хоча анімація може внести істотний внесок у користувальницький досвід при правильному підході.

Найгірша причина використовувати анімацію у веб-дизайні – це «тому що вона круто виглядає». Особливо якщо єдина завдання микровзаимодействия – це показати сам ефект.

З виходом HTML5 і CSS3 інтернет користується перевагами нативної анімації і переходів. Однак безліч розробників до цих пір використовують їх просто, щоб додати ефектів в дизайн, не піклуючись про те, як це вплине на користувальницький досвід. Давайте розберемося, коли використовувати микровзаимодействия, і як з їх допомогою добитися оптимального користувацького досвіду.

Коли використовувати микровзаимодействия

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

Це статичний елемент, і щось додаткове приведе користувача в замішання (замішання = поганий користувальницький досвід). Давайте розберемо кнопку «надіслати». Це буде микровзаимодействие, так як нам необхідно візуально повідомити, що…

з кнопкою миші можна взаємодіяти зараз, або

з кнопкою можна буде взаємодіяти потім, або

з кнопкою вже ведеться взаємодія,

…щоб навести користувача на відправку форми.

Как улучшить пользовательский опыт с помощью микровзаимодействий

Микровзаимодействия як діалог

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

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

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

Проектування цілі/тригера

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

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

Как улучшить пользовательский опыт с помощью микровзаимодействий

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

Как улучшить пользовательский опыт с помощью микровзаимодействий

Як правила допомагають чітко формулювати відповідь

Отже, тригер схожий на тригер, і він був активований. Чудово! Тепер інтерфейс повинен якось відповісти. У формах це може бути досить складно, так як може бути дуже багато умов, які необхідно виконати перед відправкою даних. Тим не менш, навіть найпростіші запити (як перехід за посиланням на сторінку 404) можуть бути з помилками. І коли таке відбувається, інтерфейс повинен пояснити, що сталося, і спробувати допомогти вам рухатися далі. Корисний відповідь – використовує червоний колір для виділення і пояснює, що не так.

Как улучшить пользовательский опыт с помощью микровзаимодействий

Поганий відповідь – розпливчастий відповідь і незрозуміла кнопка.

Как улучшить пользовательский опыт с помощью микровзаимодействий

Корисний відповідь – пропонуються альтернативні напрями.

Как улучшить пользовательский опыт с помощью микровзаимодействий

Поганий відповідь – заводить у глухий кут.

Как улучшить пользовательский опыт с помощью микровзаимодействий

У випадках з формами не потрібно вказувати коди помилок типу «Error # 8418764: ваш запит не може бути виконаний». Набагато краще буде повідомлення «ви повинні погодитися з правилами сервісу», так як воно точно говорить користувачеві, що потрібно зробити, щоб виправити помилку. Передбачаючи місця, де користувач може помилитися, ви можете створити інтерфейс, який буде не просто хорошим, а буде приємним на людському рівні.

Відповідь з корисною зворотним зв’язком

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

Как улучшить пользовательский опыт с помощью микровзаимодействий

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

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

Как улучшить пользовательский опыт с помощью микровзаимодействий

Інформуйте користувачів під час очікування

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

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

Как улучшить пользовательский опыт с помощью микровзаимодействий

Как улучшить пользовательский опыт с помощью микровзаимодействий

Висновок

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

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