В дизайн-сообществе встречаются аргументы в пользу разных вариантов размещения CTA-кнопок. Давайте рассмотрим несколько лучших практик, которые помогут вам свести к минимуму возможные проблемы.
Кнопки — важные элементы, которые помогают пользователям перемещаться в цифровом пространстве и совершать различные действия. Правильное расположение кнопок улучшает опыт взаимодействия, в то время как неправильное — может вызвать у аудитории разочарование.
Сегодня я расскажу вам о некоторых хороших практиках и спорных моментах, касающихся размещения кнопок. 🤔
Кнопка подтверждения должна быть первой или последней?
(1) Кнопка подтверждения идет первой: такой подход соответствует естественному порядку чтения. Он повышает точность взаимодействия и лишает пользователя необходимости первоначально сканировать второстепенные действия. Кроме того, это удобнее для людей, которые используют клавиатуру и перемещаются по интерфейсу при помощи клавиши Tab.
(2) Но... когда кнопка подтверждения идет последней, диалог получается более логичным и завершенным.
Так какое же решение лучше?
Оба варианта имеют свои преимущества, и, как вы увидите ниже, в разных операционных системах кнопки размещаются по-разному.
Итак, если вы, например, разрабатываете приложение для MacOS, целесообразно следовать дизайн-стандартам Apple.
В остальных случаях я предпочитаю ставить кнопку подтверждения первой, так как считаю такой подход более согласованным и логичным.
В полностраничных формах используйте выравнивание по левому краю и располагайте кнопки от главной к второстепенной, слева направо. Именно здесь будет сосредоточено внимание пользователя согласно "естественным" паттернам чтения (для языков, в которых слова пишутся слева направо), что повысит процент заполненных форм*.
В небольших диалоговых окнах предпочтительнее выравнивать кнопки по правому краю, но здесь я бы сделал исключение из общего правила, поместив CTA-кнопку в конец.
Предполагается, что в модальных окнах внимание пользователя следует Z-образному паттерну (принцип Гутенберга), в отличие от F-образного паттерна на страницах.
По словам специалиста по формам Кэролайн Джаррет, когда у нас есть несколько кнопок, мы должны сделать деструктивные действия максимально труднодоступными (например, «Отменить» или «Удалить»).
Кнопка «Отменить» (или в других случаях кнопка «Назад») не имеет прямого отношения к самой форме, поэтому мы можем разместить ее под основными кнопками. У такого решения есть ряд преимуществ: нам не придется втискивать кнопки в один ряд, а пользователям будет проще разобраться в том, какие из них важнее.
Кнопки на мобильных устройствах
Большой размер не только делает кнопки более доступными, но и основное действие более заметным.
Чтобы пользователям не пришлось сканировать контент вверх-вниз, расположите главную кнопку последней. Так люди смогут добраться до нее, перемещая взгляд в одном направлении.
Резюме
В большинстве случаев я выравниваю кнопки по левому краю и размещаю главную кнопку слева. Исключения — дизайн для мобильных устройств и диалоговые окна, где я выравниваю кнопки по правому краю с главной кнопкой справа.
В конце концов, однозначного ответа не существует. Нам просто следует располагать кнопки там, где пользователи ожидают их найти. Но всегда помните о следующем:
Ключевой принцип вашего UI — согласованность. Если вы будете следовать ему, тестировать свои решения и прислушиваться к мнению пользователей, вы точно не ошибетесь!
.webp)
.webp)
