Как-то попалась мне на глаза рекомендация от коллег из Яндекса. Они делали аудит рекламы одного из моих клиентов и заодно дали советы по сайту. Меня как ux-дизайнера удивили несколько из этих советов, сегодня расскажу об одном:
«Рекомендуем настроить форму таким образом, чтобы при её открытии курсор ввода автоматически падал в первое поле формы».
Сразу хочется спросить: «Зачем?»
Давайте попробуем сравнить два сценария.
Сценарий первый: курсор ввода не установлен в первое поле формы
Пользователь может открыть десктопный интерфейс или мобильный.
Вне зависимости от сценария, пользователь сначала увидит загрузившуюся страницу, изучит форму (количество полей и какие из них обязательные), вне зависимости от того, где она нахолится, а затем кликнет по тому полю, с которого хочет начать её заполнять. Заполнит, отправит, готово.
Сценарий завершён без неожиданностей.
Сценарий второй: курсор установлен в первое поле при открытии страницы
Если интерфейс десктопный (настольный компьютер, ноутбук) — то возможны разные варианты. Если форма находится в первом экране, то можно спокойно с ней ознакомиться и приступить к её заполнению. Курсор в первом поле не помешает.
Если форма находится внизу, а над ней несколько экранов контента (например, лендинг с формой захвата данных в самом конце или форма обратной связи на странице контактов), то автофокус приведёт к резкому скроллу вниз при открытии страницы.
На мобилках — свои нюансы. На Андроиде (Chrome, Samsung Internet) сразу появится клавиатура, которая перекроет почти половину экрана. Если форма занимает по высоте много места, то клавиатура помешает с ней ознакомиться.
Обычно пользователи в таких случаях делятся на две категории: кто-то сворачивает клавиатуру и изучает форму, а кто-то старается изучить форму с открытой клавиатурой. Это может создать неудобства и затянуть процесс ввода данных.
Особенный конфуз может случиться, если первое поле не обязательное для заполнения. Или если форма структурирована таким образом, что пользователи привыкли заполнять её с конца.
Кстати, в мобильном Safari обычно клавиатура автоматически не открывается, даже если курсор в первом поле. Apple считают нежелательным такое выскакивание без явного действия пользователя.
Как итог: сценарий может быть завершён, доставив неудобства пользователю.
Вывод
Совет не универсальный, не стоит его слепо раздавать и применять. Если отбросить всякий контекст и опираться на статистику, я бы рекомендовал по умолчанию, наоборот, не использовать автофокуса в первом поле.
А теперь давайте порассуждаем над параметрами для принятия решения при настоящем аудите. Их немного:
На каких устройствах используется интерфейс? Не будет ли риска, что на мобилках выскочившая клавиатура помешает пользователю ознакомиться с формой?
Есть ли уверенность в том, что форму нужно заполнять именно с первого поля? Оно обязательно для заполнения?
В какой части страницы находится форма? Не приведёт ли автофокус к неожиданному скроллу?
Маркетологам надо, чтобы пользователь сначала ознакомился с формой, а потом её заполнял или наоборот? Я как UX-дизайнер категорически не поддерживаю подход «затянуть» пользователя в процесс, ограничивая его в информации, но как маркетолог понимаю.
Кстати, такое поведение форм обычно задаётся через html-параметр autofocus. И он работает только при первом рендере страницы. То есть, если форма или поле появляется после задержки (например, через JS), autofocus уже не сработает. И в этом случае его придётся устанавливать программно. И при этом на мобильных устройствах такой способ тоже часто игнорируется (в зависимости от системы) до взаимодействий пользователя — из соображений безопасности и UX.
Коллеги из Яндекса попытались дать универсальный совет, который на самом деле универсальным не являлся. Тем более что речь шла об интернет-магазине, где форма была только на странице оформления заказа. И она динамическая — с выбором региона, способов доставки и прочего. Первое текстовое поле, в которое бы упал фокус, находится ближе к её концу. То есть очевидно, что советчик на сайт даже не смотрел.
В интерфейсах почти не бывает универсальных решений. Даже такой, казалось бы, безобидный совет, как автофокус в первом поле формы, может сыграть против пользователя или бизнеса. Поэтому важно не только следовать рекомендациям, но и понимать, почему они даны — и в каких случаях они работают.
Полезные ссылки:
Статья «Как я проектирую формы»
Мой Телеграм-канал про проектирование интерфейсов и работу на фрилансе
Комментарии (24)
miksoft
19.07.2025 10:20Если форма занимает по высоте много места, то клавиатура помешает с ней ознакомиться.
Если форма занимает по высоте много места, то и со скрытой клавиатурой нужно ее скроллить, чтобы с ней ознакомиться. А индикацию скролла/возможности скролла иногда забывают сделать.
Ekamelev Автор
19.07.2025 10:20Да, известная проблема. Причём, часто даже не забывают про скролл, а делают его по-дизайнерски тонким и незаметным.
Grav
19.07.2025 10:20«Особенный конфуз может случиться, если первое поле не обязательное для заполнения. Или если форма структурирована таким образом, что пользователи привыкли заполнять её с конца» — это уже какие-то совсем экстремальные случаи. Если дизайнер сделал форму, в которой первое поле необязательное, вопрос к этому дизайнеру.
Ekamelev Автор
19.07.2025 10:20Представь форму, где собирают email и телефон. Обязательно для заполнения одно любое из них.
Grav
19.07.2025 10:20Это уже вопрос терминологии. В данном случае первое поле действительно может по факту оказаться необязательным. Но оно таковым оказывается только после того, как второе поле становится заполненным. То есть по умолчанию первое поле не необязательное, а «условно обязательное».
Если в форме два условно обязательных поля, дизайнер скорее всего поставит на первое место поле какое-то особое поле: либо то, которое бизнес хочет чаще видеть заполненным, либо то, которое по факту чаще заполняют пользователи.
Таким образом рекомендация помещать фокус в первое поле в форме кажется вполне разумной.
MonkAlex
19.07.2025 10:20Как пользователь пк просто шлю лучи неодобрения тем, кто фокус не ставит на поле.
Ekamelev Автор
19.07.2025 10:20Если форма находится внизу страницы из трёх экранов (например, на лендинге с формой захвата в конце), вы же не будете слать лучи неодобрения тем, кто не поставит автофокус в её первое поле?
MonkAlex
19.07.2025 10:20Я тут не знаю как должно быть хорошо. Даже вон страница хабра - поле ввода комментария по идее первое поле ввода, нужно ли оно в фокусе? Скорее нет. Но с клавиатуры в него легко хотелось бы попадать, когда дочитал статью, без мыши.
Mike-M
19.07.2025 10:20Хм, что-то не доводилось с таким сталкиваться. Можете привести пример в виде ссылки?
Ekamelev Автор
19.07.2025 10:20Мы прямо сейчас находимся на странице с примером. Под статьёй — список комментариев. Под списком комментариев — форма добавления нового комментария. Если поставить в неё автофокус, то страница будет автоматически быстро пролистываться до формы, мешая вам читать статью.
Ekamelev Автор
19.07.2025 10:20А так-то вы правы — на десктопе автофокус в первом поле действительно чаще помогает, чем мешает. И если бы форма располагалась сразу в первом экране (и это был бы десктоп, плюс в силе все те нюансы, которые я перечислил в статье), я бы, скорее всего, сам поставил автофокус.
Но если форма, например, находится внизу длинной страницы, автофокус может неожиданно перехватывать управление и мешать дочитать текст до конца.
Важно не то, что он чаще помогает — важно, что вариант без автофокуса безопаснее в большем числе контекстов.Спасибо вам — благодаря вашему комментарию и моему ответу я понял, что в статье не хватало этого нюанса, и дополнил её. Статья стала лучше.
nin-jin
19.07.2025 10:20Самое веселье, когда на экране вдруг оказалось две формы и каждая, считая себя единственной и неповторимой, пытается перетянуть всё внимание на себя. Особенно бесит, когда вставил приложение во фрейме, и внезапно у тебя внешнее приложение начинает скроллиться при загрузке фрейма.
HardWrMan
19.07.2025 10:20Самое зло это автофокус приложений в Windows вообще. Особенно, если ему внезапно вздумалось всплыть. Как обстоит дело с этим в Линуксе я не знаю.
ABowser
19.07.2025 10:20Я далек от UX и пр., хотя эта тема всегда привлекала меня и я часто соприкасался и ругался, когда видел, что можно сделать лучше и т.д.
Есть ли уверенность в том, что форму нужно заполнять именно с первого поля?
По работе занимался несколько раз, в том числе, обработкой бумажных форм, заполненных от руки. Два раза формы были задизайнены так, что часто (статистики нет) имя и фамилия были не заполнены.
В одном случае сразу после имени и фамилии шел некий цифровой ID, в другом - условное название группы.
Для себя я сделал вывод, что проблема возникла так: человек сразу перед заполнением мог видеть, что надо вписывать то, что он не знал или не помнил , и это следовало сразу после имени. Он лез в телефон, интернет , т.е. отвлекался на поиск и последующее вписывание этих данных. После чего продолжал заполнять форму и забывал про имя.
Если бы я мог, я бы наперво вынуждал заполнять поле номера телефона или почты. В этом случае можно связаться и уточнить что-то другое пропущенное.
Зная же имя, но не зная контактных данных , связаться с человеком труднее или невозможно.
Вывод прост: заполнять первым (курсор в) надо то что наиболее важно с точки зрения последующей обработки данных формы. И это необязательно имя...
Кстати, на работе сделал ещё наблюдение: в бумажных газетах за последние примерно 150 лет (при ручном наборе) в первом выпуске нового года очень часто забывали изменить год :)
HardWrMan
19.07.2025 10:20... Яндекса ... при её открытии курсор ввода автоматически падал в первое поле формы».
После того, как они своим ИИ (и за год до его внедрения какими-то свистоперделками-виджетами) убили автофокус на единственное поле ввода на своей же страничке ya.ru дальше можно даже и не читать.
До появления ИИ приходилось явно тыкать мышкой, сейчас помогает однократное нажатие ESC. А раньше я просто вводил в адресе ya.ru, жал ентер и тут же мог начать вводить запрос. На вопрос "зачем" отвечу что санкции выдавили поиск яндекса из мозилы и поэтому строка поиска браузера не работает с яндексом, а русское в рунете яндекс ищет лучше гуголя (но гуголь лучше ищет ангельское в ангельском нете).
Mike-M
19.07.2025 10:20Только что проверил Ваш сценарий в настольных Edge и Firefox — автофокус работает без проблем.
HardWrMan
19.07.2025 10:20Сейчас оно работает через раз. ESC жать приходится только если пробивается баннер "Срочно установите Я.Б!!!1111". Он ещё с затемнением страницы такой, наглый. Пользуюсь FF+uBlock.
ionicman
Универсальных советов вообще нет.
Но совет в большинстве случаев правильный, так как обычно начинают таки заполнять форму именно с первого поля, так как грамотная форма должна быть спроектирована так, чтобы все важные и обязательные поля шли первыми и не заполнить их физически нельзя.
Ну а более грамотный совет - ставить фокус на первое обязательное к заполнению поле.
И все равно, вот всех равных лучше поставить фокус, чем нет. TABом всегда будет понятно, куда дальше пойдёт фокус.
Сейчас это бич очень многих интернет-банков, когда ты заходишь на страницу логина, а фокуса на нем нет (конечно, я зашёл на страницу авторизации в интернет-банк не для того чтобы авторизоваться, а чтобы фоном полюбоваться). Например Сбер победил это наконец около года назад.
И да, это верно и для мобилок, хоть и с оговорками, особенно для часто заполняемых форм, ибо большинство пользователей уже знает что там заполнять.
Ekamelev Автор
Я исхожу вот из чего: если рекомендация не навредит в большем количестве сценариев — она более универсальна.
ionicman
Да, именно так и поэтому автофокус первого поля формы лучше делать, чем нет - в большинстве сценариев (особенно небольших форм, коих большинство) это работает, однако вы как раз в ваших выводах с этим не соглашаетесь)
nin-jin
Проведите анализ по этой системе и тоже не согласитесь: https://page.hyoo.ru/#!=gtd2ko_de25zy
Grav
Согласен, универсальных правил нет. Но есть базовые рекомендации — такие решения, которые обычно хорошо работают в своей сфере (я бы разделил массовые и профессиональные интерфейсы). Эти базовые рекомендации можно применять по умолчанию, но не считать догмой. Стоит каждый раз задумываться, есть ли в конкретном случае факторы, из-за которых придётся от базового правила отступить.
Заголовок статьи, как мне кажется, как раз подсвечивает, что у базового решения есть свои недостатки, о которых полезно знать.
Femistoklov
"В большинстве случаев правильных" советов можно и бесплатно найти вагон и маленькую тележку. А если платишь - ожидаешь получить как раз то, про что автор пишет: учёт всех параметров и контекста.