«Дай палець і почнемо». Як писати діалоги в інтерфейсах

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

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

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

Тут не все добре з текстом, нижче розкажу, чому

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

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

Дай палець і почнемо

Ми стикаємося з діалогами щоразу, коли заходимо в банк із Touch ID.

Цей діалог повідомляє нам, що далі ми не пройдемо, якщо не проскануємо палець. Ну, він цього не повідомляє прямо, але ви зрозуміли.

Діалог при вході в ПУМБ

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

Ми бачимо діалоги, коли закриваємо незбережений документ у Ворді.

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

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

Словник.юа

Або зареєструвалися, щоб користуватися всіма функціями застосунку.

Instagram

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

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

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

Діалог після спроби закриття публікації на Фейсбуці

Структура діалогу

У діалогу класична структура: заголовок, основний текст і кнопки.

OLX

Як правило, заголовки діалогів пишуться у вигляді запитань. Адже на те він і діалог: нас запитують, ми відповідаємо. Але не обов’язково — стверджувальні заголовки також гарні, все за ситуацією.

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

Кнопки — це дії користувача, якими він відповідає на запитання заголовка. Одну з них кнопка має підтверджувати, іншу, як правило, скасовувати.

Тепер трохи докладніше про кожен елемент діалогу.

Заголовок

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

Запитання в заголовку — чудовий приклад діалогу між користувачем і застосунком, коли застосунок запитує (заголовком), а користувач відповідає (кнопками).

Фейсбук

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

Наприклад, на скрині нижче в заголовку два запитання. Це робить його двозначним і може збити користувача. Краще прибрати «впевнені», залишивши тільки «вийти з магазину?»

iHerb

Основний текст

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

Chrome

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

Ліміту на основний текст немає, але бажано вкластися в 1-3 рядки

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

iHerb

Кнопки

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

Підтверджувальні кнопки

Наприклад, «Видалити» або «Вийти».

Відхиляючі кнопки

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

Підтверджувальні кнопки

Наприклад, «Зрозуміло» або «Добре».

Ось кілька рекомендацій щодо кнопок у діалозі.

1. Не слід називати кнопки «Так» або «Ні»

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

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

2. У діалогах має бути максимум дві дії

Одна відповідає за підтвердження, друга — за відхилення. Якщо дія одна, то вона має бути дією підтвердження. Три дії це вже багато і може заплутати користувача.

3. Кнопки повинні відповідати повідомленню заголовка

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

Слово в заголовку «Видалити» узгоджується з кнопкою «Видалити»

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

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

У заголовку ми використовуємо запитання, а в запитанні слово, що відповідає за дію — «Вийти».

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

У кнопках ми даємо користувачеві варіанти, як відповісти на цей діалог: «Вийти» та «Продовжити».

Наостанок

Дякую, що прочитали цей гайд, — я вже готую наступний про пуш-повідомлення. Буде цікаво! А поки що прочитайте гайд, як писати помилки та кнопки. Заходьте на мій телеграм-канал «Оплата пройшла успішно». Там я розбираю вдалі і невдалі приклади інтерфейсних текстів та всяке різне про тексти в інтерфейсах.

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

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