Как-то попалась мне на глаза рекомендация от коллег из Яндекса. Они делали аудит рекламы одного из моих клиентов и заодно дали советы по сайту. Меня как ux-дизайнера удивили несколько из этих советов, сегодня расскажу об одном:
«Рекомендуем настроить форму таким образом, чтобы при её открытии курсор ввода автоматически падал в первое поле формы».
Сразу хочется спросить: «Зачем?»
Давайте попробуем сравнить два сценария.
Сценарий первый: курсор ввода не установлен в первое поле формы
Пользователь может открыть десктопный интерфейс или мобильный.
Вне зависимости от сценария, пользователь сначала увидит загрузившуюся страницу, изучит форму (количество полей и какие из них обязательные), вне зависимости от того, где она нахолится, а затем кликнет по тому полю, с которого хочет начать её заполнять. Заполнит, отправит, готово.
Сценарий завершён без неожиданностей.
Сценарий второй: курсор установлен в первое поле при открытии страницы
Если интерфейс десктопный (настольный компьютер, ноутбук) — то возможны разные варианты. Если форма находится в первом экране, то можно спокойно с ней ознакомиться и приступить к её заполнению. Курсор в первом поле не помешает.
Если форма находится внизу, а над ней несколько экранов контента (например, лендинг с формой захвата данных в самом конце или форма обратной связи на странице контактов), то автофокус приведёт к резкому скроллу вниз при открытии страницы.
На мобилках — свои нюансы. На Андроиде (Chrome, Samsung Internet) сразу появится клавиатура, которая перекроет почти половину экрана. Если форма занимает по высоте много места, то клавиатура помешает с ней ознакомиться.
Обычно пользователи в таких случаях делятся на две категории: кто-то сворачивает клавиатуру и изучает форму, а кто-то старается изучить форму с открытой клавиатурой. Это может создать неудобства и затянуть процесс ввода данных.
Особенный конфуз может случиться, если первое поле не обязательное для заполнения. Или если форма структурирована таким образом, что пользователи привыкли заполнять её с конца.
Кстати, в мобильном Safari обычно клавиатура автоматически не открывается, даже если курсор в первом поле. Apple считают нежелательным такое выскакивание без явного действия пользователя.
Как итог: сценарий может быть завершён, доставив неудобства пользователю.
Вывод
Совет не универсальный, не стоит его слепо раздавать и применять. Если отбросить всякий контекст и опираться на статистику, я бы рекомендовал по умолчанию, наоборот, не использовать автофокуса в первом поле.
А теперь давайте порассуждаем над параметрами для принятия решения при настоящем аудите. Их немного:
На каких устройствах используется интерфейс? Не будет ли риска, что на мобилках выскочившая клавиатура помешает пользователю ознакомиться с формой?
Есть ли уверенность в том, что форму нужно заполнять именно с первого поля? Оно обязательно для заполнения?
В какой части страницы находится форма? Не приведёт ли автофокус к неожиданному скроллу?
Маркетологам надо, чтобы пользователь сначала ознакомился с формой, а потом её заполнял или наоборот? Я как UX-дизайнер категорически не поддерживаю подход «затянуть» пользователя в процесс, ограничивая его в информации, но как маркетолог понимаю.
Кстати, такое поведение форм обычно задаётся через html-параметр autofocus. И он работает только при первом рендере страницы. То есть, если форма или поле появляется после задержки (например, через JS), autofocus уже не сработает. И в этом случае его придётся устанавливать программно. И при этом на мобильных устройствах такой способ тоже часто игнорируется (в зависимости от системы) до взаимодействий пользователя — из соображений безопасности и UX.
Коллеги из Яндекса попытались дать универсальный совет, который на самом деле универсальным не являлся. Тем более что речь шла об интернет-магазине, где форма была только на странице оформления заказа. И она динамическая — с выбором региона, способов доставки и прочего. Первое текстовое поле, в которое бы упал фокус, находится ближе к её концу. То есть очевидно, что советчик на сайт даже не смотрел.
В интерфейсах почти не бывает универсальных решений. Даже такой, казалось бы, безобидный совет, как автофокус в первом поле формы, может сыграть против пользователя или бизнеса. Поэтому важно не только следовать рекомендациям, но и понимать, почему они даны — и в каких случаях они работают.
Полезные ссылки:
Статья «Как я проектирую формы»
Мой Телеграм-канал про проектирование интерфейсов и работу на фрилансе
