Эффективный призыв к действию: какие кнопки стоит использовать на сайте Статьи редакции
Перевод статьи контент-дизайнера студии Deliveroo Рэйчел Макконнелл.
Написать текст для кнопки непросто. Важно уметь не только подобрать верное слово, но и убрать лишнее из текста. Поэтому я решила дать несколько практических рекомендаций, как сделать текст дружелюбнее, чтобы на него хотелось кликнуть.
Действие — движение
Кнопка призыва к действию нужна, чтобы побудить что-то сделать. Текст кнопки должен указывать направление: чтобы пользователь двигался вперёд или назад по сайту. Также действием может быть подтверждение: «Понятно», «Хорошо» или «Я понял».
Если на странице одновременно размещены кнопки движения вперёд и назад, то текст на них должен согласоваться. Рассмотрим несколько примеров.
Непоследовательный текст
Здесь текст кнопок несогласован: «Предыдущая» — прилагательное, «Продолжить» — глагол. И ещё слово «Предыдущая» кажется слишком пассивным, оно не призывает к действию.
Лучше
Здесь текст согласуется лучше. Хотя «Следующая» подразумевает движение вперёд, всё же кнопка достаточно пассивна. «Предыдущая» звучит неестественно, лучше использовать здесь что-то менее формальное.
Лучший вариант
Это гораздо лучше, потому что здесь два глагола, это простые английские слова, которые хорошо согласуются друг с другом.
Объяснить следующий шаг
Пользователи хотят выполнить задачу с минимальными усилиями. Текст на кнопке призыва к действию должен быть ориентирован на задачу, так пользователь поймёт, каким будет следующий шаг.
Кнопка также должна помогать пользователю ориентироваться, подтверждать, что он находится там, где надо. Когда вы придумываете текст для кнопки, ведущей к следующей задаче, он должен согласовываться с заголовком следующего экрана.
Дезориентирует
Пользователь нажимает на «Оплатить», а на следующем экране видит — «Авторизоваться». Даже если нужно авторизоваться, чтобы заплатить, это всё равно путает пользователя. На этом этапе лучше написать «Авторизоваться, чтобы оплатить».
Лучше
В этой версии есть слово «Платёж» и на кнопке призыва к действию, и в заголовке следующего экрана, то есть этот вариант уже более последовательный. Но «Ваш платёж» в заголовке, всё ещё дезориентирует, особенно если пользователь ещё ничего не платил.
Лучший вариант
Эта версия последовательна, здесь пользователь будет чувствовать себя увереннее, потому что ясно: он оказался там, где и хотел, когда кликнул на кнопку призыва к действию.
Не создавайте загадки
Из текста на кнопке должно быть сразу понятно, что произойдёт, если на неё нажать.
Неясно
Новый пользователь не поймёт, зачем ему нажимать на эту кнопку. Он может предположить, что она перенаправит его на всё, что связано с личным кабинетом, но тут не понятно, зачем туда идти и потребуется ли там авторизация. Пользователь просто ничего не будет знать, пока не кликнет на кнопку.
Лучше
Это вариант лучше, уже понятно, что пользователя попросят авторизоваться, но всё ещё не понятно, зачем ему это делать.
Лучший вариант
Теперь пользователь точно знает, зачем ему кликать на эту кнопку — чтобы перейти к одной из задач, касающихся политики сайта. Текст не только ориентирован на задачу, но и понятен.
Опыт должен быть лёгким
Важно подумать над тоном сообщения. Например, согласно нашему руководству по стилю изложения материала, лучше выбрать более эмоциональный стиль для приложения, с помощью которого нужно вдохновить пользователей на покупку еды.
Но если речь идёт о приложении для водителей, то в таком случае мы бы выбрали более функциональные тексты для кнопок.
Ниже пример того, как сделать кнопку призыва к действию чуть более вдохновляющей.
Не вдохновляет
Она понятная и хорошо показывает, что будет дальше, но текст кажется формальным, ему не хватает эмоций.
Лучше
Этот вариант уже более неформальный благодаря использованию первого лица. Но тут всё равно не хватает эмоциональности.
Лучший вариант
Это гораздо более эмоциональный вариант. Использование «Начнём!» говорит пользователю о том, что он не один, создаёт впечатление поддержки на всём пути пользователя.
Сделайте текст короче
Слишком длинный
Этот текст ориентирован на задачу, здесь используется первое лицо. Но слово «Сейчас» кажется лишним, а «Ввести заново» — слишком длинно. Текст сложно прочесть.
Лучше
Здесь мы избавились от всех лишних деталей, но если эта кнопка находится рядом с полем ввода пароля, то и слово «Пароль» может быть лишним.
Лучший вариант
Это сообщение короче, но оно по-прежнему ориентировано на задачу.
Избегайте двойного отрицания
Пользователь не должен волноваться, нажимая на кнопку. Двойное отрицание может запутать пользователя.
Путает
Что именно приведёт к действию «Отменить»: «Продолжить» или «Отменить»? Вариант «Отменить отмену» запутает пользователя.
Лучше
Здесь уже понятнее, потому что написаны простые «Да» и «Нет». Но здесь нет глаголов, поэтому не понятно, что произойдёт дальше.
Лучший вариант
Если здесь разместить «Сохранить» и «Отменить», то пользователь поймёт, что делает и что будет дальше.
Если действие закончено — отпразднуйте
Если пользователь подошёл к концу пути и вам нужно поставить здесь кнопку, почему бы не напомнить пользователю, что он успешно выполнил свою задачу? Давайте представим, что пользователь завершил регистрацию.
Стандартный
Текст часто используется, он очень пассивный.
Лучше
Благодаря использованию первого лица сообщение кажется более активным и показывает, каким будет следующий шаг (назад к домашней странице или на страницу личного кабинета). Это подходит, когда нужно сказать, что будет дальше. Но текст на кнопке слишком длинный.
Лучший вариант
Это короткий и говорящий о действии текст, а восклицание добавит ему индивидуальности. Здесь также есть ощущение достижения цели.
для тех кто не понимает на забугорном:
На кнопках лучше писать глаголы, например
- Подписаться на рассылку - хорошо
- Подписка на рассылку - плохо. Это заголовок блока, а не кнопка.
Войти - хорошо
Вход - хуже
Еще есть такая вещь как синхронизация действия на кнопках.
Войти и регистрация - плохая пара (Вход и зарегистрироваться тоже)
Вход и регистрация / Войти или зарегистрироваться - нормально.
Вообщем просто задавайте себе вопрос, когда делаете текст на кнопку - "Что сделать?"
И не забывайте про контраст кнопок и важность их рядом с друг другом, чтобы пользователь не запутался.
Are YOU sure
Шёл XXI век, а разработчики 90% интерфейсов никак не могли решить, в каком лице обращаться к пользователю.
Шота о верстке слышно? Не всегда длинная понятная кнопка полезна для страницы в целом
Это не про кнопки на самом деле, а про ux копирайтинг. Популярная сейчас история в корпорациях.
А автор ни слова, ни пол-слова...
Странно, что в статье одновременно рекомендуют укорачивать призывы и (см скриншот) описывать подробнее привычные короткие слова.
Чем читать 500 таких статей, лучше раз прочитать книгу Максима Ильяхова "Пиши, сокращай"
reading done, whooooooooooooop!
Что с текстовым блоком в копках. Как верить этому тексту?)