Кнопка подтверждения: должна она идти первой или последней?

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

Сегодня я расскажу вам о некоторых хороших практиках и спорных моментах, касающихся размещения кнопок. 🤔

Кнопка подтверждения должна быть первой или последней?

(1) Кнопка подтверждения идет первой: такой подход соответствует естественному порядку чтения. Он повышает точность взаимодействия и лишает пользователя необходимости первоначально сканировать второстепенные действия. Кроме того, это удобнее для людей, которые используют клавиатуру и перемещаются по интерфейсу при помощи клавиши Tab.

(2) Но... когда кнопка подтверждения идет последней, диалог получается более логичным и завершенным.

Так какое же решение лучше?

Оба варианта имеют свои преимущества, и, как вы увидите ниже, в разных операционных системах кнопки размещаются по-разному.

Итак, если вы, например, разрабатываете приложение для MacOS, целесообразно следовать дизайн-стандартам Apple.

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

В полностраничных формах используйте выравнивание по левому краю и располагайте кнопки от главной к второстепенной, слева направо. Именно здесь будет сосредоточено внимание пользователя согласно "естественным" паттернам чтения (для языков, в которых слова пишутся слева направо), что повысит процент заполненных форм*.

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

Предполагается, что в модальных окнах внимание пользователя следует Z-образному паттерну (принцип Гутенберга), в отличие от F-образного паттерна на страницах.

По словам специалиста по формам Кэролайн Джаррет, когда у нас есть несколько кнопок, мы должны сделать деструктивные действия максимально труднодоступными (например, «Отменить» или «Удалить»).

‍

Кнопка «Отменить» (или в других случаях кнопка «Назад») не имеет прямого отношения к самой форме, поэтому мы можем разместить ее под основными кнопками. У такого решения есть ряд преимуществ: нам не придется втискивать кнопки в один ряд, а пользователям будет проще разобраться в том, какие из них важнее.

Кнопки на мобильных устройствах

Большой размер не только делает кнопки более доступными, но и основное действие более заметным.

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

Резюме

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

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

Ключевой принцип вашего UI — согласованность. Если вы будете следовать ему, тестировать свои решения и прислушиваться к мнению пользователей, вы точно не ошибетесь!