UX-тексти відіграють важливу роль: вони допомагають користувачам орієнтуватися в інтерфейсі, знаходити потрібні функції та ефективно використовувати їх для виконання своїх завдань. У цій статті ви знайдете прості практичні поради, які допоможуть створювати лаконічні й зрозумілі мікротексти, що забезпечують зручний досвід взаємодії.
Писати ефективні мікротексти вміють не всі, та це й не завжди обов’язково. Проте, якщо ви UX-дизайнер, продакт-менеджер, аналітик або маркетолог у невеликій компанії, можливо, вам доведеться самостійно займатися UX-текстами. Якщо ви опинилися в такій ситуації і на вас лягло додаткове завдання зі створення UX-текстів, ці поради допоможуть вам впоратися!
Сприймайте текст в інтерфейсі як рольову гру
Це допоможе:
- Зробити комунікацію максимально доброзичливою;
- Виробити послідовні патерни взаємодії.
Уявіть інтерфейс як діалог між вашим продуктом і користувачем, де:
- Заголовки, основний текст, підказки тощо — це ваші «репліки».
- Підписи кнопок, поля введення, перемикачі, пункти меню та інші інтерактивні елементи — це репліки користувача.
Ідеально, якщо можна «розіграти» всі взаємодії в інтерфейсі за ролями. Наприклад, продукт просить користувача виконати певну дію — користувач виконує; продукт запитує інформацію — користувач вводить її в поле або вибирає потрібну опцію; продукт інформує чи попереджає користувача — користувач реагує.
Наприклад, якщо екран присвячений певному заходу, і ви пропонуєте користувачеві натиснути на кнопку для реєстрації, сформулюйте текст від першої особи. Не «Забронювати ваше місце», а «Забронювати моє місце». Так, коли користувач натискає кнопку, він ніби промовляє цю фразу сам, що відображає його думки та наміри.
Прозорість особливо важлива, коли мова йде про делікатні теми
Це допоможе зміцнити довіру та підвищити лояльність до вашого продукту.
Люди часто дуже чутливі та обережні, коли справа стосується персональних даних, здоров'я, фінансів та інших подібних аспектів. Якщо ваш продукт має будь-які обмеження або потенційні негативні наслідки, пов’язані з цими темами, ви повинні чітко та однозначно повідомити про них.
Ця інформація має бути видимою без додаткових дій з боку користувача (наприклад, не варто ховати її в підказках, які з’являються лише після натискання).
Ось приклад із мого досвіду. Я перевіряю домашні завдання студентів курсу з UX-копірайтингу, де всі вправи побудовані навколо вигаданої програми для власників собак. Одне із завдань полягає у створенні сценарію бронювання консультації з кінологом, яку потрібно сплатити заздалегідь.
Фактично гроші блокуються на картці користувача і списуються за три години до консультації. Скасувати зустріч безкоштовно можна не пізніше, ніж за три години до її початку. Більшість студентів додають цю інформацію на екран оформлення замовлення у вигляді підказки, через що, якщо користувач не натисне на неї, він не дізнається про можливу втрату коштів.
У реальній ситуації компанія стикнулася б з негативними відгуками та зіпсованою репутацією. Навіть якщо ви часом використовуєте темні патерни, переконайтеся, що можете дозволити собі такі ризики.
Тож, створюючи мікротексти на делікатні теми:
- Будьте прозорі й чесні щодо всіх процесів та умов. Наприклад, якщо ви створюєте фінтех-сервіс, який працює з іншими постачальниками послуг, і транзакції передбачають комісію, суму якої ви не можете точно назвати, поясніть користувачам, як розраховується комісія, який її приблизний діапазон (якщо це можливо) та де можна дізнатися точну інформацію.
- Запевніть користувачів, що з їхніми даними поводяться обережно. Поясніть, навіщо вам потрібні ці дані, як ви їх використовуєте, зберігаєте, захищаєте від витоків тощо.
- Якщо є обмеження, розкажіть, як їх можна зняти (якщо це можливо).
Підпис на кнопці має точно відображати, що відбудеться далі
Це допоможе:
- Зробити інтерфейс зрозумілим та надійним;
- Запобігти розчаруванню користувачів.
Підпис на кнопці повинен чітко інформувати, що саме станеться, коли користувач на неї натисне.
Чи варто вказувати тут цільову дію, якщо вона буде виконана трохи згодом? Наприклад, якщо продукт дозволяє бронювати житло для відпустки або ділових поїздок, на одному з екранів може з'явитися кнопка «Забронювати зараз». Однак, натиснувши на неї, користувач потрапляє на екран замовлення, де йому потрібно вибрати номер і заповнити особисті дані, тобто житло не буде заброньовано негайно. У такому випадку краще написати на кнопці «Показати номери», «Вибрати тариф» тощо, щоб вона точніше відображала наступні дії.
Більше того, формулювання на кшталт «Купити зараз» або «Забронювати зараз» можуть виглядати занадто нав'язливо і навіть відштовхувати, особливо коли йдеться про дорогі товари, купівлю яких складно вирішити. Це може спонукати користувачів залишити сайт або додаток. Важливо, щоб підписи створювали враження, що люди можуть спокійно переглядати сторінку, тому краще надати можливість спочатку «Вивчити», «Дізнатися більше», «Замовити дзвінок» або «Почати безкоштовну пробну версію».
Якщо у вас є досвід роботи в маркетингу, ви, можливо, захочете зробити підписи на кнопках максимально яскравими та інтригуючими для підвищення конверсії. Наприклад, на кнопці для відкриття брокерського рахунку в інвестиційному додатку можна написати "Стати інвестором". Хоча це може здатися привабливим, такий підхід може виглядати претензійним і дешевим. Після відкриття рахунку людям потрібно буде виконати багато дій, щоб дійсно стати інвесторами, що призведе до розчарування. Найкращий варіант – просто написати «Відкрити рахунок».
Не обіцяйте користувачам те, що не можете гарантувати або що не повністю залежить від вас. Наприклад, якщо сценарій передбачає одноразовий пароль, краще вибрати формулювання «Надіслати код», а не «Отримати код», оскільки компанія не може гарантувати відсутність проблем з мережею, які можуть заважати користувачеві отримати SMS або push-повідомлення.
Нарешті, не використовуйте типові кнопки «Так» або «Ні», оскільки вони не дають чіткого уявлення про те, що станеться далі. Користувачі можуть неправильно зрозуміти текст або не помітити заперечення, що призведе до несподіваних наслідків. Наприклад, якщо ви запитуєте: "Ви впевнені, що хочете вийти з гри?", краще написати на кнопках "Вийти" і "Залишитися", а не просто "Так" і "Ні".
Порада: Якщо вам важко придумати підпис для кнопки, це може свідчити про погану організацію екрану або про те, що конкретному сценарію бракує логіки та послідовності. Наприклад, якщо перед користувачем стоїть занадто багато завдань одночасно, вам буде складно звести їх до одного дієслова. Або наступний сценарій є занадто варіативним, що ускладнює опис дії, яку має виконати користувач.
У таких випадках спробуйте внести зміни в дизайн (наприклад, розбити екран на кілька екранів) або в сценарій користувача (наприклад, додати уточнююче питання, щоб він був менш складним).
Поясніть користувачу, чому потрібно виконати дію
Це допоможе:
- Забезпечити прозорість і зміцнити довіру;
- Підвищити конверсію.
Ідеальний інтерфейс зрозумілий сам по собі і не потребує додаткових пояснень. Однак іноді компаніям потрібно переконати користувачів виконати певну дію, найчастіше це пов'язано з наданням особистої інформації або взаємодією зі сторонніми продуктами.
Ви можете використовувати таку формулу: "Щоб [отримати це], зробіть [це] + UI-елемент". Наприклад: «Щоб отримати результати, вкажіть свій email», після чого слідує поле для введення.
Спочатку надайте обґрунтування («щоб отримати результати»), а потім інструкції («вкажіть свій email»): так є більше шансів, що цей заклик запам'ятається користувачу та плавно підведе його до дії. Якщо ви зміните порядок і спочатку дасте інструкції, а потім поясните доцільність дій, користувач може забути, що потрібно зробити, і доведеться перечитувати текст, що зробить досвід менш логічним і комфортним.
Мікротексти не повинні пояснювати, як взаємодіяти з UI-елементами
Якщо вам потрібно пояснювати, як взаємодіяти з UI-елементами, це може свідчити про те, що ваш інтерфейс не інтуїтивно зрозумілий. Таким чином, ви підвищуєте ризик пропустити більш важливі та корисні деталі.
Іноді я стикаюся з безглуздим плейсхолдерами та надмірними мікротекстами, які пояснюють, як взаємодіяти з певним елементом інтерфейсу. Найпоширеніший приклад – плейсхолдер «Пошук» у полі пошуку. Я також бачу написи на кнопках на кшталт "Натисніть, щоб продовжити".
Мобільні та веб-інтерфейси існують достатньо давно, і користувачі вже знають, як взаємодіяти з кнопками, полями та іншими UI-елементами. Тому пояснення на кшталт "натисніть", "введіть" тощо в більшості випадків є зайвими. Лише для групи чекбоксів можна додати інструкцію, наприклад: «Виберіть до 5 пунктів».
Вам може захотітися зробити свій мікротекст більш корисним. Наприклад, вкажіть у полі пошуку конкретні категорії товарів, які можуть зацікавити користувача. В інтернет-магазині модного одягу це можуть бути «худі оверсайз», «жіночі шорти» тощо. Переконайтеся, що підказка не є надто розпливчастою чи специфічною і дійсно допомагає користувачу отримати успішний результат.
Дотримуйтесь правила: "1 мікротекст = 1 ідея"
Це допоможе:
- Не створювати додаткове когнітивне навантаження чи плутанину.
- Забезпечити плавний і простий досвід.
Тривалість концентрації уваги обмежена. Користувачі сканують текст, не вчитуючись у кожне слово, і здатні обробляти лише кілька ідей одночасно. Тому важливо розбивати інформацію на прості для сприйняття фрагменти, а не намагатися втиснути всі інструкції в одну підказку.
Золоте правило — надавати користувачам тільки ту інформацію, яка необхідна на даному етапі для здійснення конкретної дії або ухвалення рішення. Інформація повинна рівномірно розподілятися на екрані, не перевантажуючи окремі елементи дизайну великою кількістю тексту.
Будьте обережні із заголовками типу «Готово», «Майже готове», «Увага» тощо.
Це допоможе:
- Не дратувати користувачів.
- Заощадити їх час.
- Не зловживати їхньою увагою.
- Не викликати занепокоєння.
Заголовки, набрані жирним шрифтом великого розміру, миттєво привертають увагу. Іноді це взагалі єдиний текст, який читачі читають. Заголовки краще запам'ятовуються, тому вони мають бути зрозумілими навіть без контексту.
Заголовки на кшталт «Дещо ще» або «Майже готове» можуть працювати добре, якщо вони відповідають тону продукту і з'являються у цілісних, зв'язкових сценаріях, які не перериватимуться. Але не забувайте, що користувачі можуть відволіктися.
Проведіть швидкий тест: залиште дизайн приблизно на 20 хвилин, займіться іншим, а потім відкрийте тільки той екран, для якого ви пишете заголовок. Чи зрозуміло, що відбувається на цьому екрані? Чи легко вам пригадати, що ви робили і що треба робити далі?
Уникайте абстрактних прикладів
Це допоможе:
- Зробити мікротексти більш точними та корисними.
- Спростити навігацію за продуктом.
- Зменшити когнітивне навантаження.
Деякі продукти (наприклад, B2B або фінансові) містять безліч правил та обмежень, які потрібно пояснити користувачам. Щоб зробити їх зрозумілішими, використовуйте максимально реалістичні приклади (з конкретними цифрами, датами тощо), які люди зможуть співвіднести зі своїми завданнями.
Уточніть у розробників, чи можна отримати конкретні дані для кожного користувача, і додайте змінні та умови, щоб відображати найбільш релевантні мікротексти. Наприклад, замість формулювання "Ви можете поповнити депозит максимум на 1000 $ протягом календарного місяця", використайте "До 31 січня ви можете поповнити рахунок на 400 $". Це заощадить час і зусилля користувача, адже йому не доведеться самостійно обчислювати дату закінчення терміну поповнення та залишкову суму.
Намагайтеся уникати заперечень.
Це допоможе:
- Скоротити когнітивне навантаження.
- Запобігти затримці та плутанині.
Коли ми використовуємо заперечення, користувачам доводиться виконувати додаткову логічну операцію — спочатку усунути заперечення, а потім спробувати вловити суть.
Наприклад, у вимогах до логіну, якщо зазначено «Не використовувати спеціальні символи та прогалини», людина починає ворожити, що дозволено. Це може викликати додаткові запитання про те, що саме вважається спеціальними символами. Замість цього краще написати: «Використовуйте лише цифри та літери».
Користувач може просто пропустити частинку "не" і неправильно зрозуміти ваше повідомлення. Крім того, заперечення часто сприймаються як обмеження або заборона, а такі формулювання зазвичай викликають підозру.
Використовуйте дієслова замість іменників.
Це допоможе:
- Уникнути використання зайвих слів.
- Зробити текст простішим для сприйняття.
Вибирайте для опису дій дієслова, а не іменники. Іменники ускладнюють читання і звучать надто формально. Наприклад, краще використовувати «Купити», а не «Здійснити покупку», «Скасувати», а не «Скасувати заявку» тощо.
Переконайтеся, що ви використовуєте лише одну позначку для кожної концепції.
Це допоможе: уникнути зайвого когнітивного навантаження та плутанини.
Один і той же об'єкт має мати однакове позначення на всіх сторінках чи екранах. Наприклад, замість взаємозамінного використання термінів «акаунт» і «профіль» виберіть один термін і дотримуйтеся його, щоб не вводити користувачів в оману.
Чим складніший ваш продукт, тим важливіше вибрати точне формулювання та забезпечити його відповідність юридичним термінам, довідковим матеріалам і відповідям служби підтримки.
Відмовтеся від формулювань на кшталт «Упс!» у повідомленнях про помилки.
Це допоможе:
- Зменшити роздратування користувачів.
- Заощадити місце для більш важливої інформації.
На перший погляд, формулювання на кшталт «Упс!» або "Ой!" можуть здатися неформальними і досить милими (хоча й з відтінком вибачення), і, в принципі, вони повинні знизити напругу. Однак у випадку з повторюваними або серйозними помилками ефект буде протилежним.
Використовуйте «Упс» та інші подібні слова тільки в тому випадку, якщо ви впевнені, що вони відповідають тону голосу вашого бренду і ви зможете майстерно вписати їх у сценарій користувача.
Хороші повідомлення про помилки пояснюють, що сталося або відбувається, чому (якщо причина відома) і що має зробити користувач. Крім того, слід вказувати у них будь-яку важливу інформацію, пов’язану зі сценарієм, у якому виникла помилка. Наприклад, якщо помилка виникла під час оплати, поясніть користувачам, що буде з грошима.
Відмовтеся від надмірної ввічливості.
Це допоможе: заощадити дорогоцінний простір для більш важливої інформації.
Я не пропоную прибирати всі ввічливі слова. Однак, коли ми працюємо з інтерфейсами, наше головне завдання — чітко та коротко донести до користувачів своє повідомлення і пояснити, що робити далі та чому. Часто, якщо ви почнете свій мікротекст зі слова "будь ласка", вам просто не вистачить місця, щоб передати суть.
Користувачі більше оцінять чіткі інструкції щодо виконання бажаної дії, ніж ввічливе витіювате повідомлення.
Відмовтеся від технічних термінів.
Це допоможе:
- Зробити інтерфейс зрозумілим для широкої аудиторії.
- Уникнути плутанини та забезпечити безперешкодний досвід.
Як фахівці в галузі технологій, ми часто відчуваємо «горе від розуму» — незважаючи на всі наші зусилля, технічні терміни час від часу все ж таки прокрадаються в наші тексти. Це особливо небезпечно, якщо продукт орієнтований на широку аудиторію, оскільки користувачі можуть бути недостатньо підковані, щоб зрозуміти, про що йдеться.
Швидкий та ефективний спосіб переконатися, що ваш інтерфейс не перевантажений професійним жаргоном — показати його людям, які не входять до продуктової команди. Якщо це неможливо, спробуйте знайти в тексті терміни, які ви часто використовуєте на робочих зустрічах або в назвах завдань в Jira (наприклад, авторизація, автентифікація), а також спеціальні абревіатури (наприклад, OTP, KYC, AML).
Переконайтеся, що порожні стани не залишають користувачів у засмучених почуттях.
Це допоможе:
- Поліпшити онбординг та навігацію.
- Підвищити доступність певних функцій.
- Стимулювати використання продукту.
- Зменшити когнітивне навантаження та занепокоєння з приводу наступних кроків.
Текст на екрані порожнього стану не повинен просто констатувати "тут нічого немає" — це і так очевидно. Ми повинні запропонувати людям вихід із ситуації, делікатно підштовхнувши їх до використання продукту чи конкретної функції. Продуманий порожній стан може навіть підвищити конверсію.
Звичайно, бувають винятки, наприклад, у реактивних інтерфейсах, таких як CRM-система для ресторану, що відображає статус замовлень для працівників. Якщо замовлень у обробці немає, немає сенсу мотивувати співробітників до створення нових замовлень, оскільки це залежить від них.
Розміщуйте всю важливу інформацію на початку.
Це допоможе:
- Утримати увагу користувачів.
- Не перевантажувати їх інформацією.
- Уникнути втрати даних.
Тривалість концентрації уваги обмежена, тому користувачі часто не фокусуються на тому, що читають. Намагайтеся розміщувати всю необхідну інформацію на початку тексту. Опустіть вступні слова та залиште менш важливі деталі на потім.
Заголовок та кнопки повинні бути зрозумілі без основного тексту.
Це допоможе:
- Зробити інтерфейс більш простим для сприйняття.
- Подолати ефект послідовного позиціонування.
- Переконатися, що інтерфейс, сценарій та наступні кроки зрозумілі користувачеві, навіть якщо він сканує, а не читає текст.
Ефект послідовного позиціонування полягає в тому, що люди схильні запам'ятовувати інформацію краще, якщо вона розташована на початку або наприкінці, і часто не беруть до уваги те, що знаходиться посередині. У UX/UI-дизайні цей ефект посилюється візуальною ієрархією (розмір шрифту, головні та другорядні кнопки тощо).
Чим довший основний текст, тим вищий ризик того, що користувачі залишать його поза увагою. Оскільки вони зазвичай сканують, а не читають, переконайтеся, що ваш заголовок і кнопки залишаються зрозумілими навіть без основного тексту.
Висновок
Знайти баланс між наданням користувачам всієї необхідної інформації та збереженням інтуїтивно зрозумілого, комфортного інтерфейсу – непросте завдання. Щоб полегшити цей процес, ви можете скористатися ChatGPT і плагінами Figma на основі AI, такими як Writer або Grammarly. Проте пам’ятайте, що їхні можливості не безмежні! Іноді створення текстового запиту, що включає всі необхідні деталі та контекст, може зайняти більше часу, ніж самостійне написання заголовка або підпису кнопки.
Важливо пам’ятати, що найкращий мікротекст — це той, який не лише відповідає потребам користувача, а й покращує загальний досвід взаємодії з продуктом.
Підсумковий чекліст
Загальне правило
✅ Сприймайте текст в інтерфейсі як рольову гру (заголовки, основний текст, підказки тощо — це ваші «репліки»; підписи кнопок, поля введення, перемикачі, пункти меню тощо — це «репліки» користувача).
Подання інформації
✅ Користувач отримує саме той обсяг інформації, який йому необхідний для виконання дії в конкретний момент часу — не більше і не менше.
✅ Важлива інформація розміщується на початку тексту.
✅ Користувачеві зрозуміло, чому йому потрібно виконати дію.
✅ Вся інформація, що стосується делікатних тем, завжди залишається видимою, статичною і не вимагає від користувача додаткових маніпуляцій (наприклад, не ховається у підказках).
✅ Ви надаєте користувачеві конкретну інформацію, а не загальні приклади.
✅ 1 мікротекст = 1 ідея.
✅ 1 об'єкт/концепція = 1 позначення.
✅ Порожні стани надають користувачам рекомендації про те, що робити далі (коли це можливо та доречно).
Стиль
✅ Жодних технічних термінів.
✅ Ніякої надмірної ввічливості, особливо на шкоду сенсу.
✅ Зменшіть використання заперечень.
✅ Описуйте дії дієсловами, а не іменниками.
Синтаксис
✅ Мікротексти не повинні пояснювати, як взаємодіяти з UI-елементами.
✅ Підпис на кнопці точно відображає, що буде далі.
✅ Менше заголовків типу «Готово», «Майже готове» та «Увага».
✅ Використовуйте «Упс!» у повідомленнях про помилки лише тоді, коли це узгоджується з тоном голосу бренда.
✅ Заголовки та кнопки зрозумілі без основного тексту.
