UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Давайте сделаем это! Как написать лучший призыв к действию в интерфейсе
Редакція
Редакція

Опубліковано • Оновлено

Давайте сделаем это! Как написать лучший призыв к действию в интерфейсе

#ux

Надписи для кнопок – это же просто, да? Ведь нет ничего сложного, в том, чтобы составить вместе пару слов. На самом деле, придумать текст для кнопки очень сложно. Поэтому я решила поделиться некоторыми советами о том, как сделать это правильно, как мы делаем это в Deliveroo!

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

«Призыв к действию» означает вдохновить на действие, вдохновить сделать что-то. Это означает, что надпись на кнопке должна быть направленной. Направление, как правило, движение вперед, но оно также может быть обратным. Иногда действие может быть подтверждением глагола – например, «Got it» или «OK», что по сути означает «я понял». Если метки, означающие действие вперед и назад сосуществуют, то они должны дополнять друг друга. Давайте посмотрим на некоторые примеры: Непоследовательность: Эти надписи не похожи на согласованные термины, а слово «Previous» (предыдущий) слишком пассивно, чтобы быть призывом к действию. Эти надписи не похожи на согласованные термины, а слово «Previous» (предыдущий) слишком пассивно, чтобы быть призывом к действию. Лучше: Эти два слова ощущаются более последовательно, но хотя слово «Next» (Следующий) намекает на движение вперед, оно все еще довольно пассивно. Эти два слова ощущаются более последовательно, но хотя слово «Next» (Следующий) намекает на движение вперед, оно все еще довольно пассивно. «Previous» здесь звучит неестественно, было бы лучше использовать что-то менее формальное и более дружелюбное. Наилучший вариант: Это намного лучше, у нас есть два глагола, и у нас есть простые английские термины, которые ощущаются более согласованными друг с другом.

Поясните следующий шаг

Пользователи хотят выполнять задачи с минимальными усилиями. Призыв к действию должен быть ориентирован на задачу, чтобы задать ожидания от следующего этапа. Он также служит ориентиром, поэтому должен заверить пользователей, что они находятся в нужном месте. Это означает, что при маркировке кнопки следующей задачи она должна соответствовать названию следующего экрана. Дезориентирующе: Это дезориентирует, пользователь нажимает «Совершить платеж», но первое, что он увидит на следующем экране, - «Войти в аккаунт». Это дезориентирует, пользователь нажимает «Совершить платеж», но первое, что он увидит на следующем экране, - «Войти в аккаунт». Даже если ему нужно войти в систему, чтобы заплатить, это может ввести в заблуждение. В этом случае было бы лучше, если бы призыв к действию был: «Войдите, чтобы платить». Лучше: Эта версия имеет слово «платеж» как в призыве к действию, так и в заголовке на следующей странице, поэтому существует большая согласованность. Эта версия имеет слово «платеж» как в призыве к действию, так и в заголовке на следующей странице, поэтому существует большая согласованность. Однако метка «Ваш платеж» все еще может немного дезориентировать пользователя, если он еще не сделал платеж. Наилучший вариант: Эта версия полностью последовательна, поэтому она должна успокоить пользователя Эта версия полностью последовательна, поэтому она должна успокоить пользователя – он понимает, что будет дальше, а еще он находится в правильном месте после того, как нажал на призыв к действию.

Не создавайте тайну

По призыву к действию сразу должно быть кристально ясно, что будет дальше и что этот клик позволит вам сделать. Другими словами, зачем пользователь должен кликать на кнопку? Давайте посмотрим на примеры ниже: Не понятно: Пользователь, впервые зашедший на сайт, понятия не имеет, почему он должен нажать эту ссылку.  Он может предположить, что это приведет его в некую область учетной записи, но нет никаких намеков относительно того, зачем вам туда переходить или, что вас попросят залогиниться. Пока он не нажмет на нее, он не узнает. Также надпись на кнопке существительное, а не глагол и у нее отсутствует чувство прогресса. Лучше: пользователю будет предложено войти в систему, но до сих пор не ясно, зачем ему это делать. Это лучше, понятно, что пользователю будет предложено войти в систему, но до сих пор не ясно, зачем ему это делать. Наилучший вариант: Теперь пользователь точно знает, почему ему нужно нажать на этот призыв к действию – чтобы согласиться с их политикой конфиденциальности. Это не только целенаправленная задача, но и понятная.

Сделайте его простым

Призывы к действию должны помочь облегчить онлайн-опыт. Они должны быть убедительными (если наша цель – убедить пользователя), беспроблемными (если наша цель состоит в том, чтобы обеспечить легкое завершение задачи) или праздничными (если мы заверяем пользователя, что он только что достиг чего-то). Действительно важно думать о тоне, который вы используете. Например, следуя нашим рекомендациям касательно тона выражений, мы бы выбрали более страстный язык в приложении, в котором мы вдохновляем кого-то покупать еду. Но в приложении для поездок, где нам просто нужно как можно быстрее отправить пользователя в дорогу, мы бы выбрали более функциональные надписи для кнопок. Вот пример того, как вы можете сделать призыв к действию немного более вдохновляющим: Скучно: Это ясно и направлено, но ощущается довольно формальным и лишенным эмоций. Лучше: Эта версия кажется немного более личной, с использованием формы первого лица. Но это всё еще немного не то. Наилучший вариант: Это гораздо интереснее. Слово «let’s» (давайте) говорит пользователю, что он не одинок, и уверяет его, что у него также будут указания к действию.

Сделайте его коротким

Место на кнопке ограничено, поэтому вам нужно составить свое сообщение, как можно короче. Удаление лишних слов поможет сделать ваши призывы к действию короткими и симпатичными. Слишком длинно: Этот призыв ориентирован на задачи и использует форму первого лица. Но слово «now» (сейчас) на самом деле не нужно, и «re-enter» (повторно введите) слишком длинная и трудночитаемая фраза. Лучше: Мы потеряли большую часть лишних деталей, однако, слово «пароль» может даже не понадобиться, если кнопка рядом с полем пароля. Наилучший вариант: Это более короткий, но при этом ориентированный на задачи и обучающий, вариант.

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

Пользователь не должен беспокоиться о нажатии на призыв к действию. Нет ничего более запутанного, чем двойное отрицание. Запутывающе: Избегайте двойного отрицания Хммммм, кнопка «Continue» (продолжить) отменяет действие или отменяет отмену? Отмена отмены может сильно запутать пользователя. Лучше: Это понятнее, просто «да» или «нет». Но это не глаголы, поэтому нет намека на то, что будет дальше. Наилучший вариант: Добавляя слова «Keep it» (оставить) и «Cancel» (отменить) вы развеиваете сомнения пользователя, а также четко указываете, что произойдет дальше.

Если это конец, отпразднуйте это!

Если пользователь находится в конце своего путешествия, и вам нужен призыв к действию, почему бы не использовать его, как напоминание, что пользователь успешно выполнил свою задачу? Представьте себе, что в этом случае пользователь выполнил одно из многочисленных заданий: Стандартный вариант: Это распространенное название кнопки, но оно не соответствует тону нашего бренда, а еще оно очень пассивно. Лучше: Использование формы первого лица намного более активно и показывает следующий шаг (возврат на домашнюю страницу или страницу учетной записи в этом случае) – это хороший намек на то, что будет дальше. Однако, это все еще длинный призыв к действию. Наилучший вариант: Это короткий и основанный на действии призыв, но добавление радостного возгласа «whoop» и восклицательного знака также добавляет индивидуальность бренда, в то же время указывая на достижение цели. Cпасибо за прочтение – теперь займитесь своими призывами к действию! Если вы любите писать призывы к действию и прочий микротекст, мы ищем такого человека! Спасибо, Becky Hirsch и Charlotte Clancy.


Перевод статьи Rachel McConnell

Топ коментарі (0)