Hi-Tech

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

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

В закладки

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

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

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

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

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

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

Лучше

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

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

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

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

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

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

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

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

Лучше

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

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

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

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

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

Неясно

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

Лучше

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

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

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

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

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

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

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

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

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

Лучше

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

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

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

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

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

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

Лучше

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

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

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

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

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

Путает

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

Лучше

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

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

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

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

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

Стандартный

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

Лучше

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

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

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

Показать больше

Похожие публикации

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»