Skvot Mag

Як написати якісний UX-ТЕКСТ

Основні правила та рекомендації.

Як написати якісний UX-ТЕКСТ
card-photo

Настя Прудка

Автор у SKVOT

26 грудня, 2019 Дизайн Стаття

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

Розберемося, що таке UX-тексти, якими вони мають бути, як їх покращити і коли легко зафейлити.

 

Що таке UX-текст

UX-текст — увесь текст, з яким користувач стикається при навігації на сайті/в додатку/програмі. Це невеликі ярлики, CTA-кнопки та значки, слогани, повідомлення про помилки, пуші, підказки та інструкції.

Задача UX-текстів — допомогти користувачеві дійти до мети та направити, попередити чи підбадьорити його на цьому шляху. «Ура! Ви досягли своєї цілі активності» на Apple Watch — це воно. Повідомлення про нові фішки при оновленні програми monobank — також.

UX-текст — частина і дизайну, і досвіду користувача. Тому важливо, щоб він був:

  • ЗРОЗУМІЛИМ — чітким і простим для швидкого зчитування
  • КОРОТКИМ — без зайвих слів і в межах своєї сфери
  • КОРИСНИМ — інформативним та відповідати на запитання користувача
  • РІВНОМІРНИМ — з єдиною термінологією та стилем у всьому інтерфейсі
  •  

Тексти в UI/UX дизайні часто називають «копі» за аналогією з рекламою, а самих UX-райтерів — копірайтерами. Часто маркетинговий та UX-текст у компанії пише одна й та сама людина, тому терміни використовують як синоніми. Але UX-райтинг — не копірайтинг.

Копірайтеру важливо придумати ідею і перетворити її на слова, які зачеплять цільову авдиторію. Завдання UX-райтера — спростити взаємодію користувачів із продуктом.

UX-тексти підтримують продукт та допомагають отримувати максимум від роботи з інтерфейсом. Копірайтинг — частина реклами та маркетингу. Його завдання — залучати потенційних клієнтів або утримувати наявних.

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

Автори UX-текстів працюють у зв'язці з UX-дизайнерами для розуміння потреб та больових точок цільової авдиторії. Щоб написати корисну і зв'язану мікрокопі, їм потрібно думати, як дизайнери, розуміти динаміку і структуру інтерфейсів користувача.

Ще UX-райтеру корисно спостерігати за людьми та прислухатися до них — щоб тонко розуміти їхню поведінку. Так вдасться підштовхувати їх до потрібної дії правильними словами в продукті.

 

Види UX-текстів

UX-тексти бувають інформаційними та інтерактивними. Інформаційні розповідають користувачеві про щось, а інтерактивні допомагають пересуватися сайтом або застосунком.

Інформаційні UX-тексти — це:

ЗАГОЛОВКИ

Доставляють та підкреслюють ключове повідомлення сторінки. Заголовки в UX, як і скрізь, повинні бути яскравими та виразними, щоб привернути увагу та поінформувати.

ПІДЗАГОЛОВКИ

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

ТІЛО ТЕКСТУ

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

Ось як виглядає заголовок, підзаголовок та основний текст на головній сторінці сайту PR-агентства PublicKitchen:

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

Інтерактивні UX-тексти — це:

МЕНЮ

Базовий компонент навігації будь-якого інтерфейсу. Зазвичай, це кнопки з одним-двома словами для кожної дії або розділу. Наприклад, як в анімованому меню на сайті диджитал-агентства Clock Creative Lab:

ФОРМА РЕЄСТРАЦІЇ

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

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

ІНСТРУКЦІЯ З ВИКОРИСТАННЯ

Коротко та чітко описує переваги продукту. Складається тільки з ключових чи неочевидних, але корисних порад.

СТА-КНОПКИ

Заклик до дії мінімальною кількістю слів на кшталт «Додати в кошик», «Сплатити», «Повторити замовлення». Чіткі та прямі інструкції подальших дій.

СПОВІЩЕННЯ

Короткі повідомлення, які закликають повернутися до продукту, нагадують про оновлення або повідомляють новини.

Сповіщення не повинні дратувати або вибиватись з tone of voice. І обов'язково мають бути лаконічними. Команда сервісу відкладеного постингу Buffer з'ясувала, що текст на 25 символів і менше працює краще, ніж довгий.

ПОМИЛКИ

Коротка текстова підказка, що робити, коли щось іде не так. Повідомлення про помилку має бути чітким і прикладним, а ще доброзичливим та заспокійливим.

Можна спробувати розрядити обстановку жартом, якщо немає сумнівів, що його зрозуміють. Ось кумедна сторінка помилки 404 на waaffle.com:

ПІДКАЗКИ (спливні повідомлення)

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

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

ПІДПИСИ (титри)

Короткий текст із описом зображення.

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

Крім того, важливо, щоб підпис не просто описував картинку, а ніс інформаційну цінність. Так виглядають титри тренувань на сайті спортклубу smartass:

ПРОДУКТОВІ ІМЕЙЛИ

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

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

Як готувати UX-текст

UX-текст — частина інтерфейсу, отже, він повинен інтегруватися в нього правильно і легко читатися користувачем. Для цього потрібно:

Впроваджувати реальний текст на перших етапах розробки.

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

Щоб уникнути подвійної роботи, райтеру важливо брати участь у розробці із самого початку.

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

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

Чіпляти увагу цифрами та мітками. Якщо в тексті є число, головне написати його цифрами, а не словами. Це економить місце та привертає увагу.

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

Значні смислові точки у тексті можна виділяти жирним шрифтом і маркером. Але треба пам'ятати: що більше такого «важливого» буде, тим менше уваги дістанеться кожному фрагменту.

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

Слідкувати за регістром — використовувати один стиль для набору заголовків та інших речень.

Є три варіанти:

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

Головне — вибрати один із них та дотримуватися на всій вебсторінці та на всіх вікнах застосунка.

Приклади використання різного регістру в повідомленнях на iOS та Android. Джерело: medium.com

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

Чекліст якісного UX-тексту

БЕЗШОВНІСТЬ. Текст повинен вести користувача інтерфейсом ненав'язливо та непомітно. Як монтаж у кіно дає плавну послідовну картину, так якісний UX-текст не змушує витрачати зайвий час на читання та розуміння.

СТЕРЕОТИПНІСТЬ. Важливо інтегрувати свій тон оф войс у звичну картину світу користувача. Для цього користуйся шаблонами сприйняття — це корисно.

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

ТУРБОТА. Не давай користувачеві засмучуватися через неправильно введений пароль або сторінку, якої не існує. Натомість запропонуй рішення та/або обіграй ситуацію жартом.

ПРОСТОТА. Красиві слова краще замінити на базові та точні. Щоб перевірити себе, подумай, чи зрозуміє текст шестирічна дитина.