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

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

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

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

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

Пользователь может открыть десктопный интерфейс или мобильный.

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

Сценарий завершён без неожиданностей.

Сценарий второй: курсор установлен в первое поле при открытии страницы

Если интерфейс десктопный (настольный компьютер, ноутбук) — то возможны разные варианты. Если форма находится в первом экране, то можно спокойно с ней ознакомиться и приступить к её заполнению. Курсор в первом поле не помешает.

Если форма находится внизу, а над ней несколько экранов контента (например, лендинг с формой захвата данных в самом конце или форма обратной связи на странице контактов), то автофокус приведёт к резкому скроллу вниз при открытии страницы.

На мобилках — свои нюансы. На Андроиде (Chrome, Samsung Internet) сразу появится клавиатура, которая перекроет почти половину экрана. Если форма занимает по высоте много места, то клавиатура помешает с ней ознакомиться.

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

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

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

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

Вывод

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

А теперь давайте порассуждаем над параметрами для принятия решения при настоящем аудите. Их немного:

• На каких устройствах используется интерфейс? Не будет ли риска, что на мобилках выскочившая клавиатура помешает пользователю ознакомиться с формой?

• Есть ли уверенность в том, что форму нужно заполнять именно с первого поля? Оно обязательно для заполнения?

• В какой части страницы находится форма? Не приведёт ли автофокус к неожиданному скроллу?

• Маркетологам надо, чтобы пользователь сначала ознакомился с формой, а потом её заполнял или наоборот? Я как UX-дизайнер категорически не поддерживаю подход «затянуть» пользователя в процесс, ограничивая его в информации, но как маркетолог понимаю.

Кстати, такое поведение форм обычно задаётся через html-параметр autofocus. И он работает только при первом рендере страницы. То есть, если форма или поле появляется после задержки (например, через JS), autofocus уже не сработает. И в этом случае его придётся устанавливать программно. И при этом на мобильных устройствах такой способ тоже часто игнорируется (в зависимости от системы) до взаимодействий пользователя — из соображений безопасности и UX.

Коллеги из Яндекса попытались дать универсальный совет, который на самом деле универсальным не являлся. Тем более что речь шла об интернет-магазине, где форма была только на странице оформления заказа. И она динамическая — с выбором региона, способов доставки и прочего. Первое текстовое поле, в которое бы упал фокус, находится ближе к её концу. То есть очевидно, что советчик на сайт даже не смотрел.

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

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

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

• Статья «Проблема неактивной кнопки отправки формы»

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