Проблема неактивной кнопки отправки формы

Недавно попалась мне на глаза рекомендация от коллег из Яндекса. Они делали аудит рекламы одного из моих клиентов и заодно дали советы по сайту. Меня как ux-дизайнера удивили несколько из этих советов, сегодня расскажу об одном:

«Рекомендуем сделать кнопку отправки формы не активной до тех пор, пока пользователь не заполнит все обязательные поля».

Сразу хочется спросить: «Зачем?»

Давайте попробуем сравнить два сценария.

Сценарий первый: кнопка отправки формы активна

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

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

Пользователям сразу понятно, что именно произошло и что надо делать дальше. Заполнили, отправили, сценарий завершён.

Сценарий второй: кнопка отправки формы неактивна

Пользователи смотрят на форму, смотрят на кнопку — и уже в этом месте начинают делиться на группы. Кто-то сразу понимает, что кнопка неактивна, и задаётся вопросом: а почему она неактивна? И точно ли она неактивна?

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

Двигаемся дальше. Кто-то изначально не понял, что кнопка неактивна (может у неё дизайн такой?), заполнил форму, кнопка активировалась, нажалась — и сценарий завершился успешно.

А кто-то вообще не обратил внимания на кнопку, заполнил форму, но не заполнил обязательные поля — и кликает по неактивной кнопке. Ничего не происходит. Сообщений об ошибках не возникает. Кнопка-то неактивна. Здесь какие-то пользователи пойдут искать инструкцию и разбираться, а какие-то просто покинут страницу.

Сразу сделаю оговорку: всё зависит от контекста. Если это какая-нибудь суперважная форма, которую обязательно нужно заполнить и отправить — пользователи будут биться об интерфейс, пока не разберутся. Им будет неудобно, но на конверсиях это не скажется. А если это очередная форма заказа чего-либо или записи куда-нибудь, где много конкурентных предложений, то можно и уйти.

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

Вывод

В среднем я бы рекомендовал не использовать в интерфейсах неактивных кнопок под формами. Вот причины:

• Дизайн неактивной кнопки не всегда позволяет идентифицировать её как неактивную

• Неактивная кнопка обычно не даёт подсказок, почему именно она неактивна

• Мы не боимся того, что пользователь нажмёт на кнопку «отправить», когда не все поля заполнены. Ну нажмёт и нажмёт. Всё, что произойдёт — он получит объяснение произошедшего и инструкцию, что делать

Но это в среднем. В каждом конкретном случае нужно принимать решение отдельно. И, в первую очередь, уметь ответить на вопрос: «Почему мы так делаем?».

—

Полезные ссылки:

Статья «Как я проектирую формы».

Мой Телеграм-канал. Про проектирование интерфейсов и работу на фрилансе.