Секрети ефективних тултипів: як допомогти користувачам краще взаємодіяти із застосунком

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

Привіт! Я Антон Чернічко, інтерфейсний письменник у ПУМБ, автор каналу про інтерфейсні тексти «Оплата пройшла успішно». Працюю з текстами 15 років, 4 останні з яких — інтерфейсним письменником у кількох застосунках.

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

Гайд буде корисний інтерфейсним та технічним письменникам, дизайнерам, розробникам, продакт-менеджерам та всім, хто пише тексти замість інтерфейсних письменників.

Як завжди, на вас чекають приклади тільки з українських застосунків.

Що таке тултіп

Тултіп — це спливаюча підказка з короткою додатковою інформацією.

Він допомагає, пояснює, підказує і спрямовує користувача в застосунку.

Тултіп ПУМБ підказує, що при натисканні на картку відкриються її налаштування

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

Тултіпи для вебу і застосунків відрізняються за кількома параметрами (наприклад, у вебі вони викликаються при наведенні курсору), тому мій фокус буде тільки на тултіпах для застосунків.

Перший тултіп в історії з’явився в Windows 95. Він відображав назву значків панелі інструментів під час наведення на них курсору миші.

Може, він виглядав приблизно так або ще древніше

Головне, що слід розуміти про тултіп — це додаткова інформація, а не основна. Уся важлива інформація має бути на екрані, адже тултіп це просто підказка, яку можна взагалі не помітити.

Розглянемо кілька основних видів тултипів.

Онбординг-тултіп

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

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

Google Планета. Серія тултипів під час онбордингу ніби проводить користувачеві міні-екскурсію застосунком

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

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

Тултіп Dropbox на онбордингу показує, що натиснувши на +, можна створити файли

Навігаційний тултіп

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

ПУМБ

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

Тепер завдяки тултіпу користувач хоча б дізнається про існування такої функції

Інформаційний тултіп

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

Тултіп від Нової Пошти, який вказує на функції в меню

Наприклад, у ПУМБ є можливість повернути на карту гроші, навіть якщо ви вже щось купили. І потім віддавати їх банку в розстрочку. Це може бути будь-яка купівля від 500 грн в супермаркеті, одяг, госптовари. Але як сказати про це користувачеві? Через комунікацію у соцмережах? Запустити пуш? Чи краще у двох реченнях легко й елегантно підказати йому в тултіпі де, що і як.

Тому ми запустили в розділі «Історія операцій» тултіп, який пояснює, що операції з конкретною іконкою можна переводити в розстрочку.

З цим тултіпом користувач знатиме, як розпізнавати потрібні йому купівлі

Тултіп про новинку

Навіть найактивніші користувачі застосунку не завжди помітять у ньому нову функцію. Тому можна повідомити їм про це спеціальним тултіпом.

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

Структура тултіпа

Структура тултіпа повторює структуру діалога або помилки:

• Заголовок (необов’язково).
• Основний текст.
• Кнопки (необов’язково).

Приват24 для бізнесу

Тултіп може містити заголовок, підзаголовок, кнопки та гіперпосилання.

А може бути без заголовка і кнопок. Або із заголовком, але без кнопок — тобто можливі різні варіанти.

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

Заголовки мають бути короткими, в ідеалі — не більше одного рядка.

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

OLX

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

Кнопки (необов’язково). У тултіпі може бути до двох кнопок. Вони мають бути стислими і відповідати повідомленню в основному тексті. Кнопки найчастіше відповідають за дії тултіпа — вони дають змогу підтверджувати, відхиляти або погоджуватися.

Підтверджувальні кнопки. Наприклад, «Видалити» або «Вийти».

Відхиляючі кнопки. Наприклад, «Скасувати», «Продовжити» або «Залишитися».

Підтверджувальні кнопки. Наприклад, «Зрозуміло» або «Добре».

Приват24 для бізнесу

Детально про кнопки у інтерфейсах я писав у іншій статті на DOU: «Пам’ятайте: ОК — це не ок. Та ще 12 правил, щоб покращити текст кнопки»

5 рекомендацій для створення ефективних тултіпів

1. Важливе — на екран, додаткове — в тултіп

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

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

iPhone. Завжди краще запитати себе: чи може користувач обійтися без тултіпу чи без нього він заплутається? Як ви думаєте, тут можна було без нього обійтися?

2. Лаконічність

Тултіп — це підказка, а не керівництво з експлуатації. Довгі тултіпи важко читати і це дратує. Тому в ідеалі не варто перевищувати обсяг в 1-3 речення.

Не дуже лаконічний тултіп від Shafa

Але що робити, якщо все-таки потрібно повідомити користувачеві важливу, але додаткову інформацію? Про це розповідає наступний пункт.

3. Приборкання великого обсягу тексту

Якщо інформації багато, можна створити серію тултіпів на одну тему.

16-17 травня, Київ. Квитки тут!👇

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

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

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

4. Відсікайте зайве

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

Половина тексту тут не потрібна — він нічого не дає користувачеві. Залишати потрібно тільки важливе і конкретне. Пройдемося прямо за словами. «Ви» — можна легко прибрати, нічого не втративши. «Зможете» — модальне дієслово — сміливо прибираємо. «Швидко» — це секунда, п’ять чи десять? Не конкретно, тому прибираємо. З решти виходить такий текст:

Висловлюйте емоції смайлами

Для настрою і індивідуальності у листах

Не ідеальний, але коротший. Те, що треба для тултіпа.

5. Пишіть в активному стані

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

Прибираємо пасивні та модальні конструкції: «Вибирайте картки для перегляду аналітики»

Наостанок

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

Я вже готую наступний про текстові поля. Буде цікаво! А поки що прочитайте мої інші гайди на DOU: як писати помилки, кнопки, діалоги та пуші.

Заходьте на мій телеграм-канал «Оплата пройшла успішно». Там ви побачите розбори вдалих і невдалих прикладів інтерфейсних текстів, опитування та інші корисності.

А також до української спільноти юікс-райтерів «UX-райтери» — там обговорюють, поширюють, радяться та нетворкаються.