{"id":9253,"title":"\u0427\u0442\u043e \u0434\u0430\u0440\u0438\u0442\u044c \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043d\u0430\u0432\u0440\u0435\u0434\u0438\u0442\u044c \u043e\u043a\u0440\u0443\u0436\u0430\u044e\u0449\u0435\u0439 \u0441\u0440\u0435\u0434\u0435","url":"\/redirect?component=advertising&id=9253&url=https:\/\/vc.ru\/mos.ecology\/322605-chto-darit-klientam-sotrudnikam-i-partneram-chtoby-ne-navredit-okruzhayushchey-srede&placeBit=1&hash=f7f2e59c93d6bf99b4de7eb426299419c5e5dc01833ead4a2d9b746713d07b81","isPaidAndBannersEnabled":false}

Эффективный призыв к действию: какие кнопки стоит использовать на сайте Статьи редакции

Перевод статьи контент-дизайнера студии Deliveroo Рэйчел Макконнелл.

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

Действие — движение

Кнопка призыва к действию нужна, чтобы побудить что-то сделать. Текст кнопки должен указывать направление: чтобы пользователь двигался вперёд или назад по сайту. Также действием может быть подтверждение: «Понятно», «Хорошо» или «Я понял».

Если на странице одновременно размещены кнопки движения вперёд и назад, то текст на них должен согласоваться. Рассмотрим несколько примеров.

Непоследовательный текст

Здесь текст кнопок несогласован: «Предыдущая» — прилагательное, «Продолжить» — глагол. И ещё слово «Предыдущая» кажется слишком пассивным, оно не призывает к действию.

Лучше

Здесь текст согласуется лучше. Хотя «Следующая» подразумевает движение вперёд, всё же кнопка достаточно пассивна. «Предыдущая» звучит неестественно, лучше использовать здесь что-то менее формальное.

Лучший вариант

Это гораздо лучше, потому что здесь два глагола, это простые английские слова, которые хорошо согласуются друг с другом.

Объяснить следующий шаг

Пользователи хотят выполнить задачу с минимальными усилиями. Текст на кнопке призыва к действию должен быть ориентирован на задачу, так пользователь поймёт, каким будет следующий шаг.

Кнопка также должна помогать пользователю ориентироваться, подтверждать, что он находится там, где надо. Когда вы придумываете текст для кнопки, ведущей к следующей задаче, он должен согласовываться с заголовком следующего экрана.

Дезориентирует

Пользователь нажимает на «Оплатить», а на следующем экране видит — «Авторизоваться». Даже если нужно авторизоваться, чтобы заплатить, это всё равно путает пользователя. На этом этапе лучше написать «Авторизоваться, чтобы оплатить».

Лучше

В этой версии есть слово «Платёж» и на кнопке призыва к действию, и в заголовке следующего экрана, то есть этот вариант уже более последовательный. Но «Ваш платёж» в заголовке, всё ещё дезориентирует, особенно если пользователь ещё ничего не платил.

Лучший вариант

Эта версия последовательна, здесь пользователь будет чувствовать себя увереннее, потому что ясно: он оказался там, где и хотел, когда кликнул на кнопку призыва к действию.

Не создавайте загадки

Из текста на кнопке должно быть сразу понятно, что произойдёт, если на неё нажать.

Неясно

Новый пользователь не поймёт, зачем ему нажимать на эту кнопку. Он может предположить, что она перенаправит его на всё, что связано с личным кабинетом, но тут не понятно, зачем туда идти и потребуется ли там авторизация. Пользователь просто ничего не будет знать, пока не кликнет на кнопку.

Лучше

Это вариант лучше, уже понятно, что пользователя попросят авторизоваться, но всё ещё не понятно, зачем ему это делать.

Лучший вариант

Теперь пользователь точно знает, зачем ему кликать на эту кнопку — чтобы перейти к одной из задач, касающихся политики сайта. Текст не только ориентирован на задачу, но и понятен.

Опыт должен быть лёгким

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

Но если речь идёт о приложении для водителей, то в таком случае мы бы выбрали более функциональные тексты для кнопок.

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

Не вдохновляет

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

Лучше

Этот вариант уже более неформальный благодаря использованию первого лица. Но тут всё равно не хватает эмоциональности.

Лучший вариант

Это гораздо более эмоциональный вариант. Использование «Начнём!» говорит пользователю о том, что он не один, создаёт впечатление поддержки на всём пути пользователя.

Сделайте текст короче

Слишком длинный

Этот текст ориентирован на задачу, здесь используется первое лицо. Но слово «Сейчас» кажется лишним, а «Ввести заново» — слишком длинно. Текст сложно прочесть.

Лучше

Здесь мы избавились от всех лишних деталей, но если эта кнопка находится рядом с полем ввода пароля, то и слово «Пароль» может быть лишним.

Лучший вариант

Это сообщение короче, но оно по-прежнему ориентировано на задачу.

Избегайте двойного отрицания

Пользователь не должен волноваться, нажимая на кнопку. Двойное отрицание может запутать пользователя.

Путает

Что именно приведёт к действию «Отменить»: «Продолжить» или «Отменить»? Вариант «Отменить отмену» запутает пользователя.

Лучше

Здесь уже понятнее, потому что написаны простые «Да» и «Нет». Но здесь нет глаголов, поэтому не понятно, что произойдёт дальше.

Лучший вариант

Если здесь разместить «Сохранить» и «Отменить», то пользователь поймёт, что делает и что будет дальше.

Если действие закончено — отпразднуйте

Если пользователь подошёл к концу пути и вам нужно поставить здесь кнопку, почему бы не напомнить пользователю, что он успешно выполнил свою задачу? Давайте представим, что пользователь завершил регистрацию.

Стандартный

Текст часто используется, он очень пассивный.

Лучше

Благодаря использованию первого лица сообщение кажется более активным и показывает, каким будет следующий шаг (назад к домашней странице или на страницу личного кабинета). Это подходит, когда нужно сказать, что будет дальше. Но текст на кнопке слишком длинный.

Лучший вариант

Это короткий и говорящий о действии текст, а восклицание добавит ему индивидуальности. Здесь также есть ощущение достижения цели.

0
8 комментариев
Популярные
По порядку
Написать комментарий...

для тех кто не понимает на забугорном:

На кнопках лучше писать глаголы, например
- Подписаться на рассылку - хорошо
- Подписка на рассылку - плохо. Это заголовок блока, а не кнопка.

Войти - хорошо
Вход - хуже

Еще есть такая вещь как синхронизация действия на кнопках.
Войти и регистрация - плохая пара (Вход и зарегистрироваться тоже)
Вход и регистрация / Войти или зарегистрироваться - нормально.

Вообщем просто задавайте себе вопрос, когда делаете текст на кнопку - "Что сделать?"

И не забывайте про контраст кнопок и важность их рядом с друг другом, чтобы пользователь не запутался.

5

Sign ME up

Are YOU sure

Шёл XXI век, а разработчики 90% интерфейсов никак не могли решить, в каком лице обращаться к пользователю.

3

Шота о верстке слышно? Не всегда длинная понятная кнопка полезна для страницы в целом

2

Это не про кнопки на самом деле, а про ux копирайтинг. Популярная сейчас история в корпорациях.

А автор ни слова, ни пол-слова...

1

Странно, что в статье одновременно рекомендуют укорачивать призывы и (см скриншот) описывать подробнее привычные короткие слова.

1

Чем читать 500 таких статей, лучше раз прочитать книгу Максима Ильяхова "Пиши, сокращай"

0

reading done, whooooooooooooop!

0

Что с текстовым блоком в копках. Как верить этому тексту?)

0
Читать все 8 комментариев
Продавец eBay из Кургана стала победителем в финале Всероссийского конкурса «Молодой предприниматель России 2021»

27 ноября в Москве состоялся финал ежегодного конкурса «Молодой предприниматель России 2021». В нём приняли участие предприниматели и самозанятые в возрасте до 35 лет. Всего было подано более 300 заявок из 43 регионов страны.

Почта РФ не отдаёт посылку покупателю
Дайджест новостей Сбера: сайт Digital Пётр, сценарии для умного дома и платина от Forbes

Прошлый дайджест мы целиком посвятили 180-летию Сбера, поэтому новостей накопилось много. Среди них — запуск сайта по распознаванию рукописей Петра I, большое обновление на платформе умного дома Sber и другие. Рассказываем всё самое интересное.

Картинка, сгенерированная ruDALL-E по запросу «рыжий котик»
SkillFactory раздает подарки: повышенная ставка и новогодний марафон для вебмастеров

В преддверии Нового года мы решили порадовать своих настоящих и будущих партнеров — участников партнерской программы школ Skillfactory, Contented и Product LIVE. Это возможность получить денежный бонус и заодно увеличить прибыль от продажи наших курсов.

«Сбермегамаркет» и «Эльдорадо»: оплаченный заказ Xbox Series X выборочно отменен избранным покупателям

Итак, продолжение рассказа о ситуации с тем, как «Сбермегамаркет» и «Эльдорадо» приняли многочисленные оплаченные заказы на консоль Xbox Series X, выдали людям чеки об этом, а затем через несколько дней благополучно отменили заказы.

Откуда берут взрослые деревья для парков и улиц

А также сколько они стоят и почему выращивать их — неплохой бизнес.

И сотрудников тоже касается: кибербуллинг на рабочем месте
Design vector created by pikisuperstar - www.freepik.com
«Вещи должны быть не только функциональными, но и красивыми»: как устроена ландшафтная архитектура Карла Сёренсена

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

Овальные садовые участки в Неруме Metropolis
IPO HashiCorp и Nu Holdings

На бирже пролив уже вторую неделю подряд. Обычно компании переносят IPO в такие моменты до начала роста. Но две компании не побоялись выйти на биржу в нисходящем тренде, давайте их разберём.

Маленький стартап против гигантов: Kytch может починить ломающиеся машины для мороженого McDonald's — сети это не нужно Статьи редакции

Джереми О’Салливан и Мелисса Нельсон придумали устройство, которое предотвращает поломку автоматов для мороженого — проблемы с ними есть в 10% ресторанов McDonald’s. Несмотря на убытки франчайзи, сеть его запретила и почти уничтожила Kytch.

Wired
Как мы отправили 2000 распечатанных фото вашим мамам за 1 неделю после запуска

Как это получилось и сколько заработали. Без фейлов не обошлось.

Это моя сестра - Таня. Пришла на помощь, пока срочно искали еще одного менеджера
null