Невидимий UI або як custom haptics змінює сприйняття інтерфейсу

💡 Усі статті, обговорення, новини про Mobile — в одному місці. Приєднуйтесь до Mobile спільноти!

Привіт! Мене звати Марина Брижак, я Product Designer-ка в Nibble — освітньому застосунку компанії Headway Inc. Nibble — це продукт із короткими інтерактивними уроками на різні теми: від математики до мистецтва. Я працюю в кросфункційній Growth-команді, один із основних фокусів якої — активація користувача. Для нас важливі перше враження та утримання інтересу, тому ми постійно шукаємо способи покращити користувацький досвід.

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

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

Що таке custom haptics

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

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

Як стандартні haptics вплинули на поведінку користувачів

Під час одного з A/B-тестів ми додали стандартний для iOS вібровідгук «Tap» до повторюваної взаємодії з застосунком — кнопки «Continue». Вже за два тижні ми помітили, що ця зміна напряму впливає на LTV.

Наступним кроком ми додали варіації вібровідгуків «Success» і «Error» до правильних і неправильних відповідей в уроках. Це також відобразилося в метриках: зросли Retention і середня кількість уроків, які користувач проходив за одну сесію.

Це надихнуло експериментувати далі: якщо стандартні haptics дають такий ефект, чому б не спробувати щось більш кастомне?

Від стандартних до кастомізовних рішень

Після того, як бренд-команда створила аудіологотип (sound logo), ми вирішили інтегрувати його в продукт на місці екрана запуску (splash screen) та додати анімацію. Тоді ж виникла ідея підсилити її вібровідгуком.

Стандартні iOS-haptics не відповідали ані тривалості, ані характеру нашої анімації, яка має плавну, пульсуючу динаміку. Вони добре працюють як зворотний зв’язок на дію (наприклад, «кнопку натиснуто»), але для екрана запуску цього було замало. Нам хотілося створити емоційне залучення з першої секунди.

Як працюють custom haptics

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

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

Наприклад, у Nibble анімація екрана запуску триває 2,3 секунди. Логотип має чітку появу, потім ритмічно «стрибає», а фінальним акордом з’являється крапочка над літерою «і». У результаті формуються три фази анімації, з якими можна працювати окремо.

На основі цього ми зібрали патерн із трьох частин:

• Перший pulse (12 мс, 100% інтенсивності) — чітко позначає момент появи логотипу.
• Другий блок (кілька вібрацій по 30 мс з інтенсивністю 75%, і кілька пауз по 60 мс) — підсилює ритм «стрибків».
• Фінальний pulse (12 мс, 100% інтенсивності) — підкреслює появу крапки над «і» та завершує анімацію.

Мені було досить легко розставити акценти по готовій анімації, яку зробив мій колега — талановитий Motion Designer Єгор Кічко.

Що пішло не так і як ми це виправили

Проблема 1: перший pulse зникав. Після експорту патерну з Hapticlabs і інтеграції в застосунок перший pulse не відтворювався. Відтворення починалося з другого елементу патерну.

Рішення: ми додали коротку паузу (0.1 сек) на початок файлу. Так патерн починався з паузи, а фактичний перший pulse був другим елементом і стабільно відтворювався.

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

Фінальне рішення шукали разом із iOS-розробником. Таймінг підлаштовували безпосередньо в коді, змінюючи його на ±0,1–0,2 секунди й перевіряючи результат на мобільному пристрої.

Проблема 3: після розблокування телефона вібровідгук не відтворювався. Після згортання застосунка або блокування телефона haptics переставали відтворюватися при поверненні користувача.

Рішення: наш Engineering Manager Михайло Єрошенко зʼясував:

«Треба просто слухати івенти application lifecycle та, коли апка ’повертається’ в активний стан, робити CHHapticEngine рестарт.»

Вибір платформи для розробки

Мені потрібно було створити custom haptics, але не настільки комплексні, як у повноцінних ігрових механіках. Тому мої вимоги до платформи були такими:

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

Під час пошуку я не знайшла багато інструментів для створення custom haptics. Із тих, що були доступні безкоштовно, змогла повноцінно протестувати два:

1. Meta Haptic Studio — дозволяє перетворювати медіафайли на вібровідгуки за декілька секунд.
2. Hapticlabs — дозволяє створювати вібровідгуки для різних цілей, зокрема й для hardware. Має окрему версію для роботи з мобільними застосунками — Hapticlabs Studio, яку я й обрала.

Короткий огляд Hapticlabs Studio

Meta Haptic Studio — потужна платформа, але для простих UI-кейсів вона виявилася надто складною.

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

Водночас платформа Hapticlabs Studio дозволяє створювати вібробідгуки, комбінуючи кілька досить простих сутностей:

• Pulse — короткий імпульс. Важлива особливість: при максимальній інтенсивності (100%) він працює лише для вібрацій тривалістю до 1 секунди. Для довших ефектів система автоматично знижує інтенсивність до 80% і нижче.
• Vibration — вібрація без чіткого імпульсу.
• Pause — пауза між елементами патерну.
• Sound — аудіоелемент. Важлива особливість: звук додається послідовно до типів відгуку та не накладається на вібрацію. На практиці доводиться підлаштовувати haptics під звук — на мою думку, цей момент у платформі ще потребує доопрацювання.

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

Суперсила Hapticlabs Studio — мобільний застосунок. Його можна встановити на телефон, під’єднати платформу на комп’ютері й синхронізувати з застосунком через Bluetooth. Так можна створювати haptics на десктопі та одразу тестувати на телефоні.

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

Не менш цінною є функція експорту. Вібровідгуки можна вивантажити для iOS у форматі .ahap, для Android — у режимах Manual (per level) або Auto (all levels), а також як .wav-файл. Щоправда, Android-версію ми поки не тестували.

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

Як протестувати вібровідгук на iPhone без Hapticlabs Studio

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

Для стандартних iOS-haptics ми користувалися мобільним застосунком Haptic Heaven з базовими ефектами. Водночас є простий лайфхак, який дозволяє тестувати вібровідгуки без додаткових програм.

Щоб протестувати haptic-файл із розширенням .ahap, достатньо завантажити його в застосунок Files на iPhone. При натисканні на файл відтворюватиметься вібрація з параметрами, закладеними в цьому файлі.

Висновки

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

Кілька порад, які допоможуть в роботі з вібровідгуками:

• Почніть зі стандартних iOS-haptics. Спершу спробуйте додати стандартні вібровідгуки до ключових елементів взаємодії: кнопок основних дій (Continue, Submit, Done), правильних і неправильних відповідей у квізах або toggle-перемикачів. Це «дешево» в реалізації, але гарно підсилює момент усвідомлення дії користувачем. Навіть такі прості зміни можуть впливати на продуктові метрики.
• Переходьте до custom haptics, коли хочете створити вау-ефект. Кастомні вібровідгуки мають сенс там, де важливі ритм, емоція або акцент — наприклад, у splash screen, досягненнях чи ключових переходах. Так вони працюють не самі по собі, а як частина загального досвіду користувача з продуктом.
• Обов’язково тестуйте на реальних девайсах. Симулятор не покаже критичних речей: елементи можуть зникати після експорту, синхронізація розходитися з анімацією, а вібровідгуки не відтворюватися після певних сценаріїв. Закладайте час на калібрування разом із розробником і тестуйте на різних моделях пристроїв.

Дослідження custom haptics виявилося захопливим процесом, до якого долучилася вся команда. Найцікавішим було спостерігати реакції колег під час тестування: «Ооо, прикольно! Цей ще краще підходить!»

Якщо у вас є досвід роботи з custom haptics або поради, як їх ефективніше додавати в продукт, буду рада обговорити коментарях або в LinkedIn. Дякую за увагу!

Сподобалась стаття? Підписуйтесь на автора, щоб отримувати сповіщення про нові публікації на пошту.