Пам’ятайте: ОК — це не ок. Та ще 12 правил, щоб покращити текст кнопки

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

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

Навіщо потрібна кнопка?

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

Sinsay

Але можна досягнути і зворотного ефекту — заплутати користувача:

iPhone. Тут не відразу розберешся, що потрібно робити, чи не так?

Ми не читаємо текст, а проглядаємо його. Дослідження Nielsen Norman Group стверджують, що люди зазвичай читають лише частину тексту на екрані — від 20% до 28% слів. Це підкреслює, наскільки важливий текст кнопок, адже вони остання сходинка переходу до бажаної дії користувача. Тому текст кнопок має бути максимально зрозумілим, чітким та містким. Ось що буде, якщо прибрати кнопку з інтерфейсу:

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

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

Google трохи змінив заголовок і покращив залучення користувачів на 17%! Усього два слова, але який комерційний ефект.

«Ми виявили, що із заголовком „Забронювати кімнату“ клієнти на цій стадії поки що не готові бронювати. Тому ми змінили текст на „Перевірити доступність“ і дізналися, що це було саме те, що їм потрібно», — кажуть у Google.

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

Текст кнопки так само важливий, як і текст заголовка

Google говорить, що текст — найважливіший елемент кнопки. Не форма, не колір, не розташування, не дизайн, а текст. Тому що текст описує дію, яка станеться, коли користувач натисне кнопку. Напевно, він навіть важливіший за основний текст. Адже, проглядаючи текст, ми найчастіше шукаємо кнопку «Оформити», «Поповнити» або «Скасувати», щоб одразу виконати дію, а не читати основний текст. Тому в ідеалі потрібно зробити так, щоб можна було подивитися на заголовок та кнопку і зрозуміти, що нам хоче сказати конкретний екран, не читаючи основного тексту.

Monobank. Це гарний приклад, тому що можна зрозуміти, про що цей екран, тільки по кнопці або/та заголовку

І навпаки — якщо ми дивимося на екран і не розуміємо, то кнопка та/або заголовок написані не зовсім вдало.

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

А тепер розглянемо методи, як написати гарний текст кнопки.

13 способів покращити текст кнопки

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

Щодня протягом двох місяців я маю проходити двофакторну перевірку, щоб отримати доступ до робочого комп’ютера:

Authenticator

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

Ще один приклад поганого збігу кнопки та основного тексту:

З першого прочитання я не зміг зрозуміти, що потрібно робити. В основному тексті два дієслова: «впевнені» та «вийти». Можна спростити до «Вийти з магазину?». А кнопки краще замінити: «Підтвердити» на «Вийти», «Скасувати» на «Залишитися». Так буде зрозуміліше.

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

Booking.com

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

Google. У теніс грають дієслова «придбати» в основному тексті та кнопці

2. Будьте точні та прямі в назві кнопки

Завдання кнопки — перевести користувача до наступного кроку.

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

Наочно перевірити зрозумілість кнопки можна так: закрийте весь екран, крім кнопки, та прочитайте лише текст кнопки. Якщо вам усе зрозуміло — бінго.

Shafa

3. Використовуйте дієслова

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

А ось тут уже треба на кілька секунд довше подумати:

Краще було б якось так:

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

Якщо ви хочете, щоб користувач додав товар до кошика, назвіть кнопку «Додати до кошика», а не «Кошик». Якщо хочете, щоб він увійшов, назвіть кнопку «Увійти», а не «Вхід». Якщо бажаєте, щоб він підібрав репетитора, назвіть «Підібрати репетитора», а не «Підбір репетитора».

Mathema.me

4. Пишіть лаконічно

Тут немає чіткої формули, крім ретельної ​​уважності до кожного слова: прибирайте все, що погано лежить і не має додаткового сенсу.

5. Не переносьте текст на другий рядок

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

Нова пошта

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

Ось ще один приклад. Можна змінити на «Запитати адміністрацію».

Booking.com

Чув, що на кнопці не слід писати більше як два-три слова. Однак Kinneret Yifrah у своїй книзі Microcopy: The Complete Guide пише, що ніхто не казав, що кнопки мають бути короткими. Мовляв, це нам, інтерфейсним письменникам, хочеться зробити довгі кнопки короткими. А користувачеві вони дають важливу інформацію, тому там, де треба, краще робити кнопки з максимальною користю і цінністю, а не скорочувати.

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

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

Приєднатися Іншим разом

6. Пам’ятайте: ОК — це не ок

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

Так, напевно, користувач зрозуміє, що «ОК» — це і є «Видалити». Але все ж таки саме «Видалити» буде ідеальним текстом для цієї кнопки, щоб не залишати користувачеві місце для сумнівів. Ну, і «ОК» можна замінити на «Зрозуміло», або «Добре», або ще щось.

7. Будьте послідовні в назві кнопок

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

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

Preply. Краще уніфікувати назву

8. Використовуйте текст замість іконки

Текст ефективніший за іконки. Це довело дослідження Wix, які вирішили змінити іконки на текст «Створити нову папку» замість:

.

У підсумку користувачі в рази частіше натискали на кнопку з текстом, ніж на кнопку з іконкою. Чому? Все просто: текст чітко повідомляє користувачеві, що на нього чекає. Іконку ще треба побачити та зрозуміти як слід. Тому іконка може доповнювати, але не замінювати текст кнопки.

9. Називайте кнопки позитивно

Не маніпулюйте та не викликайте почуття провини або FOMO, якщо користувач не натисне кнопку. Ось що я маю на увазі:

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

10. Не зловживайте «Докладніше» та «Дізнатися більше»

Загалом «Докладніше» — це зручний та легкий компроміс, щоб нам, інтерфейсним письменникам, не думати, як назвати кнопку. Є ж ось «Докладніше», начебто зрозуміло все пояснює. Натискайте на кнопку та читайте більше, які до нас запитання?

Helsi

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

За даними Nielsen Norman Group, «Докладніше» створює невизначеність, бо користувачі не знають, що саме відбудеться далі. А невизначеність може змусити користувачів сумніватися та не натиснути кнопку.

11. Не використовуйте всюди ланцюжок кнопок «Далі» або «Продовжити»

Тут схожа ситуація, як із кнопками «Докладніше» та «Дізнатися більше». Найкращі кнопки завжди дозволяють дізнатися, що відбудеться після їх натискання. Тому кнопки «Продовжити» та «Далі» не ідеальні. Подивіться: чи зрозумієте ви що-небудь, якщо залишити лише одну кнопку в цьому ланцюжку «Нової пошти»?

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

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

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

12. Прибирайте сумніви текстом уточнення

Текст уточнення — це текст поруч із кнопкою, яка доповнює її контекст.

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

Ось як зеленим текстом поруч із кнопкою «Обрати» Booking.com прибирає сумніви

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

13. Повідомляйте користувачеві результат дії, а не саму дію

Користувачі набагато охочіше натиснуть на кнопку, коли побачать, який результат чи вигода на них чекає. Kinneret Yifrah у своїй книзі Microcopy: The Complete Guide наводить приклад, що різниця в конверсії між кнопкою «Інформація про замовлення» та «Отримати інформацію» становить 40% на користь другого варіанта. А коли ми просто описуємо кнопку, користувачі згадують все, що тільки-но прочитали, і думають, чи варто їм її натискати.

Ще приклад: «Оформити кредит». Такою кнопкою ми говоримо, що на користувача чекає робота з оформлення, а це нудно і складно.

Приват24

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

English Prime. Тут краще було б назвати кнопку «Отримати безплатний урок», бо так ми кажемо, що даємо користувачеві вигоду, а не тяганину із записом

Однак ця рекомендація стосується переважно конверсійних кнопок:

Замовити пропозицію → Отримати пропозицію

Замовити страховий поліс → Отримати страховий поліс

Висновок

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

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

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

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