Мікровзаємодія в UX: секретна зброя для постійного залучення та утримання користувачів

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

По суті, будь-яке візуальне представлення певного процесу можна назвати МІКРОВЗАЄМОДІЄЮ. Вони діють як будівельні блоки, які зрештою покращують UX. Якщо UX — це клітина, мікровзаємодія — це ДНК.

Давайте розберемо це:

Мікровзаємодія – що це таке?

Як невід'ємна частина UX, мікровзаємодія – це процес, який передає функцію, яку виконує додаток/програмне забезпечення за вказівками користувача. Приклади: завантаження, буферизація тощо.

Крім того, він покращує візуальні елементи, пов’язані з невеликими функціями. Ви знаєте, як світиться кнопка «Подобається», перш ніж натиснути її. І як він реагує, коли ви нарешті натискаєте на нього. Те саме можна застосувати до розділу коментарів, кнопок спільного доступу, кнопок підписки тощо.

Якщо вам потрібен більш фізичний приклад, то немає кращого прикладу, ніж ліфт. Що ти бачиш? Ряд кнопок? Так. Але що відбувається, коли ви натискаєте один? Це вірно! Воно світиться. Це мікровзаємодія.

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

Те саме можна зробити з додатком/веб-інтерфейсом, щоб створити задовільний UX.

Кілька ілюстрацій, щоб розвіяти ваші сумніви

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

• Коли ви збираєтеся натиснути «Подобається», кнопка світиться синім кольором. Коли ви нарешті натискаєте кнопку, вона злегка натискається, чи не так? Це вказує на те, що дію було здійснено.
• Коли ви відвідуєте веб-сайт, ви бачите «Про нас», «Послуги», «Блог», «Зв’яжіться з нами» тощо. Коли ви наводите курсор на один із них, він стає кольором (зазвичай у відповідності до кольору веб-сайту, щоб уникнути різких контрастів). Якщо ви переміщуєте курсор ліворуч і праворуч, окремі розділи виділяються окремо. Це теж приклад мікровзаємодії.
• Увімкнувши або вимкнувши функцію, ви побачите, як кнопка переміщується вперед і назад між двома параметрами. Коли ви натискаєте ВИМК., маленька смужка (біла/чорна тощо) переміщується до ВИМК. Те саме з частиною ON. Це мікровзаємодія на основі функціональності.

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

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

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

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

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

Отже, чому це важливо для дизайну UX?

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

• Ви створюєте архітектуру та базовий робочий процес за допомогою IA, але це марно, якщо користувач не захоплюється дрібними деталями, пов’язаними з кожним кроком. Мікровзаємодія допомагає вам заповнити ці найдрібніші деталі.
• Клієнти люблять контролювати інтерфейс, який вони використовують. Хоча IA допомагає в плавній навігації та перебігу процесів, MI дає їм відчуття контролю, візуально відображаючи окремі процеси, що проводяться.
• Мало того, MI окремо виділяє кожен розділ, до якого наближається користувач, створюючи певне візуальне задоволення на дуже внутрішньому рівні.
• Це, у свою чергу, підвищує цінність цього конкретного розділу в розумовій драбині користувача, а також одночасно підвищує рівень інтересу з боку користувача, спонукаючи його натискати на нього з упевненістю та задоволенням.

Як бачите, мікровзаємодія допомагає підвищити цінність бренду програми/веб-сайту. Співпрацюючи з IA, це допомагає створити загальний пакет для забезпечення правильного UX.

Які чотири фундаментальні кроки найкраще визначають мікровзаємодію?

Ви просто не можете писати про мікровзаємодію, не познайомившись із цими чотирма кроками, розробленими гуру мікровзаємодії Деном Саффером. У своїй книзі «МІКРОІНТЕРАКЦІЯ» Саффер класифікує весь процес за такими етапами:

• Тригерний елемент: будь-яка дія, яка запускає процес мікровзаємодії, зараховується як тригерний елемент. Наприклад, натискання на кнопку, яка запускає процес.
• Елемент правил: визначає саму функцію. Наприклад, ви натискаєте кнопку, і ви переходите на відповідну сторінку.
• Елемент зворотного зв'язку: це інформує користувача про те, що процес розпочато. Наприклад, ви натискаєте щось, і воно натискається або виділяється.
• Елемент циклів: користувач, який перебуває під впливом мікровзаємодії, має тенденцію насолоджуватися повторним використанням цієї конкретної функції. Мікровзаємодії реалізовані таким чином, що психіка користувача зачіпляється за це. Це спонукає користувача повертатися частіше. Це елемент циклу, коли користувач потрапляє в поведінковий цикл повторюваної взаємодії.

Отже, як створити хороше середовище мікровзаємодії для вашого інтерфейсу?

Припустімо, ви плануєте створити додаток. Або, можливо, ви вже на етапі розробки. Але ви поки що не плануєте включати мікровзаємодію. Ви читаєте цю статтю і бажаєте включити її. Але як це зробити? Якщо ви перебуваєте на етапі IA, ось що ви можете зробити:

• Під час розробки певного розділу інтерфейсу, наприклад, розділу «Про нас», попросіть свого розробника створити код (програмування), який може розпізнавати розташування курсора на зазначеному елементі та автоматично підсвічувати його для кращої візуальної привабливості. Крім того, при натисканні він повинен виглядати як би злегка натиснутим.

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

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

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

• Спільним для більшості сучасних інтерактивних програм є розділ «подобається, коментує, ділиться». Припустімо, програма, яку ви розробляєте, допомагає користувачеві переглядати різні туристичні місця по всьому світу та вибирати улюблені.

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

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

  [Примітка: кольори, що використовуються в усіх трьох розділах, мають бути схожими, щоб уникнути занадто сильного візуального контрасту]

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

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

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

Як мікровзаємодії впливають на свідомість користувача та як вони реагують?

До цього часу ми розглянули, які є різні типи мікровзаємодій і як ви як підприємець можете їх включити. Але це лише одна сторона медалі. Інша сторона – клієнт. Розуміння того, як вони реагують на різні типи мікровзаємодій, може допомогти вам ефективніше керувати процесом. Подивіться, який вплив мають мікровзаємодії на підсвідомість:

• Коли користувач вступає в контакт з певною мікровзаємодією, це викликає тонкий сигнал у його нервовій системі, який спонукає його використовувати його більше. Це призводить до циклу звички.
• Як наслідок, користувач постійно повертається знову і знову, щоб взаємодіяти з продуктом. Отже, ви бачите, що він утримує користувача/клієнта на невизначений період.
• Візуальні елементи – це те, що використовує кожен маркетинговий стратег, оскільки вони знають про величезні переваги, які вони приносять. А мікровзаємодія як візуальний елемент може маніпулювати психікою користувача для створення конверсій.
• Елемент зворотного зв’язку мікровзаємодії створює відчуття комфорту в свідомості користувача, і ми всі знаємо, як клієнти насолоджуються ексклюзивним контролем під час навігації по бажаному продукту.
• Самі рухи, пропоновані мікровзаємодіями, створюють відчуття комфорту, яке пов’язує з користувачем на внутрішньому рівні. Це призводить до привабливості клієнтів і швидкого збільшення бази користувачів.

Заключні думки

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

Важливо, щоб ви звернули увагу на ті дрібні підсвідомі зміни, які є результатом цього процесу, незалежно від того, наскільки малими чи здавалося б незначними вони здавалися. Пам’ятайте, що ці невеликі ефекти зрештою призводять до успішного UX. Як сказав Лао Цзи: «Подорож у тисячу миль починається з одного кроку».