Як писати якісні текстові поля для інтерфейсу

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

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

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

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

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

Текстове поле

Текстове поле — це елемент інтерфейсу, що допомагає користувачам вводити та редагувати текст.

Текстове поле з текстом «Що у вас на думці?» у Facebook

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

Наприклад, текстове поле у Glovo з текстом «Номер телефону» підказує, який саме текст потрібно ввести.

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

Текстове поле Facebook підказує, що робити

Текстове поле з текстом Пошук у Telegram підказує, що робити

Авторка книги Strategic Writing for UX Torrey Podmajersky каже, що найкращий спосіб допомогти людям ввести точні дані — попередньо заповнити їх від імені застосунку. Це заощадить час користувача. А якщо дані не актуальні, їх можна легко виправити.

Текстове поле в UKLON одразу задає правильну адресу, тому що застосунок уже знає цю геолокацію

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

Основні елементи текстового поля

Текстове поле — це не просто контейнер, куди потрібно ввести текст.

Це невелика інтерфейсна інфраструктура з декількох текстових компонентів. Наприклад, на скрині OLX нижче одразу чотири текстових елементи, що утворюють текстове поле. Впізнаєте їх усі?

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

Текст мітки

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

В OLX текст мітки «Опис» підказує, що саме потрібно ввести в текстовому полі нижче

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

Наприклад, на скрині Bolt нижче немає тексту мітки над текстовим полем. Але є допоміжний текст «Куди прямуємо?», який пояснює (хоч і не прямо), що в поле потрібно ввести адресу. Чи можна тут додати мітку на кшталт «Напрям» або «Адреси»? Цілком. Але в Bolt вирішили, що їхнім користувачам буде зрозуміло і без неї. Тим паче, що заголовок екрана «Ну що, поїхали!» теж додає контекст.

Bolt

Не варто в тексті мітки писати слова на кшталт «ваш», «введіть» тощо — вони зайві, бо не несуть додаткового сенсу. Наприклад, «Ваша електронна пошта» —> «Електронна пошта».

Також не варто ставити двокрапку — вона забруднює інтерфейс. Усе буде зрозуміло і без неї.

Допоміжний текст (плейсхолдер)

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

Допоміжний текст «Ім’я» та «Прізвище» в Telegram

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

ОLX

Допоміжний текст розташовується в текстовому полі або поруч із ним і слугує ніби чернеткою і підказкою для користувача, який текст йому вводити. Ось, напевно, найпопулярніший допоміжний текст в історії — «Пошук».

Telegram

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

Тут текст у верхньому текстовому полі бачимо не повністю — краще так не робити

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

Відображається всередині текстового поля введення світло-сірим текстом. Зникає під час введення будь-якого тексту. Повертається, якщо користувач видалив введені дані.

Telegram

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

Ось три варіанти для допоміжного тексту:

• Назва інформації, яку потрібно ввести.
• Приклад інформації, яку потрібно ввести.
• Інструкція з введення, що починається з дієслова.

Інструкція з введення, що починається з дієслова в mono

Текст помилки

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

Помилка «Некоректна адреса» в mono

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

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

Тому необхідно помістити все необхідне в один рядок: повідомити, що трапилося та/або запропонувати рішення, як усе виправити. Adobe рекомендує писати текст помилки так, ніби ви пропонуєте підказку або пораду, щоб допомогти людині зрозуміти, що потрібно написати в текстовому полі: «Введіть адресу електронної пошти» тощо.

Glovo

Довідковий текст

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

Довідковий текст у Shafa — «Вкажіть кількість товарів, яка є в наявності»

Довідковий текст у Viber — «Приклад: Уподобання»

Хороший довідковий текст — короткий, зрозумілий і корисний. Наприклад, замість «Будь ласка, введіть номер телефону у відповідному форматі» краще написати «Формат: +380 (XX) XXX-XX-XX». Якщо користувачі часто помиляються при введенні, значить довідковий текст не працює і його треба поліпшити або замінити.

У разі неправильного введення довідковий текст може перетворитися на текст помилки, замінивши його. Ось приклад:

Glovo

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

Буває, коли помилка з’являється не замість довідкового тексту, а поруч, як на прикладі нижче:

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

Префіксний текст

Це обов’язковий текст або символ, який відображається перед введеними даними й не редагується. Наприклад, код мобільного оператора +380 у текстовому полі — це префіксний текст перед номером телефону абонента.

Приват24

Ось ця частина url https:// — префіксний текст, який стоїть перед адресою сайту. Символ долара $ — це префіксний текст, який стоїть перед числом. А на прикладі нижче префіксний текст це UA.

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

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

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

ПУМБ. Тут можна прибрати при введенні

Суфіксний текст

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

ПУМБ

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

Ось ще приклади суфіксного тексту:

• Вартість: 500 грн. Грн — суфіксний текст, 500 — текст, що вводиться.
• Зріст: 182 см. См — суфіксний текст, 182 — текст, що вводиться.
• Площа: 45 м². М² — суфіксний текст, 45 — текст, що вводиться.

Наостанок

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

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

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

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