За последние 10 лет дизайн форм на сайтах поменялся. Раньше названия полей ставили слева, а теперь они почти всегда сверху. Понятно, что сервисы реагируют на то, что большинство людей заходит с телефона, но я по умолчанию продолжала считать, что сложные формы удобнее и короче, если название поля стоит слева от поля.
Решила разобраться, есть ли какие-то объективные исследования и нашла 5 научных статей про дизайн форм, дальше перескажу, что у них получилось измерить.
Для пожилых
62 пожилых человека и 58 людей помладше просили заполнять форму с разным расположением лейблов и мерили их скорость и удовлетворенность.
Говорят различия не значительны. Когда спрашивали, что пользователи предпочитают, 43% выбирали инлайн лейблы, 42% лейблы сверху, 14% лейблы слева (левым флагом) и 11% лейблы слева (правым флагом).
Optimal Designs of Text Input Fields in Mobile Web Surveys for Older Adults, 2019
Для студентов
Исследователи меняли форму для подачи в тайский институт. Форму заполняли 312 студентов
Пользователи быстрее всего замечают лейбл, когда он слева (4c против почти 8с). Но с таким расположением они проводят примерно одинаковое время, глядя на лейбл и на инпут, и чаще переводят глаза на лейбл. То есть примерно одинаковое количество времени человек смотрит на лейбл и в поле ввода.
Если название внутри или сверху, то пользователь на треть меньше смотрит на него, и на треть больше на инпут. Предположу, что это значит, что человек быстрее соображает, что от него хотят и начинает вводить данные.
Online Forms: An Eye Tracking Exploration into Fixation across Three Label Alignments, 2018
Статья на которую ссылался гугл
65 человек проверяли на айтрекере, когда они пользовались двумя вариантами форм. Но тут есть проблема, в этих двух вариантах меняли не только выравнивание форм, а вообще все подряд. Изменили количество полей (убрали ненужные), где-то изменили формат инпута, улучшили сообщения об ошибках и еще 15 рекомендаций.
Это вообще фигня какая-то, а не исследование, на его основании можно сказать только что форма, над которой поколдовали дизайнеры лучше, чем та, над которой никто не дал себе труда подумать.
Designing usable web forms: empirical evaluation of web form improvement guidelines, 2014
Исследование, где еще померили ошибки
33 взрослых заполняли формы. Разницы в скорости не замечено, в количестве ошибок тоже
Людям больше всего нравились варианты с лейблом слева (опять же, видимо привычнее было в 2014). Если мерить время, когда люди просто смотрят в пустое место между названием поля и полем — оно довольно большое у всех, кроме варианта с названием над инпутом.
Eye Tracking and Usability Testing in Form Layout Evaluation, 2014
Антикварное
Маленькое, но что уж делать.
11 человек проверяли на айтрекере. Форму лейблами слева, но правым выравниванием пользователи заполняли быстрее всего, потом шел вариант с названиями сверху и потом уже вариант с дыренью между лейблом и инпутом.
Когда спрашивали личные предпочтения, 6 выбрали первый вариант, только 1 человек предпочел с лейблами сверху (2008 год все-таки, непривычно было, наверное), 2 с лейблами слева.
Using eye-tracking to evaluate label alignment in online forms, 2008
Выводы
Скорость заполнения или количество ошибок в большинстве исследований никак не зависят от расположения лейблов.
С точки зрения создания дизайн-системы проще делать названия над полем, чтобы проще адаптировать мобильные-десктопные дизайны. Такие поля сейчас уже более привычны для пользователей, потому что большинство сервисов используют их.
Если форма длинная и пользователь будет с высокой вероятностью к ней возвращаться (пересматривать уже заполненную, например), то поля слева позволят быстрее находить нужное место.
Не совсем понятный для меня параметр — то, что пользователи чуть дольше смотрят на лейбл и чуть меньше на инпут, если поле стоит слева. Я думаю, человек пытается вроде как запомнить, что от него хотят, прежде чем надо будет «прыгнуть» на следующее поле.
В любом случае, общее время остается плюс-минус одинаковым, возможно в инпутах с лейблами сверху люди так же задумываются, просто глаза сразу соскальзывают вниз.
Комментарии (6)
Shortki
05.02.2026 14:22Идеальным представляется использование плавающих меток, когда плейсхолдер внутри поля превращается в метку сверху непосредственно в момент фокусировки.
Конечно для полей со строгим форматом это не работает, так как плейсхолдер в них должен показывать ожидаемый формат ввода, а не название.
Также полезно использование акцентов в виде небольшой иконки слева от поля, но только для важных полей (точно не для всех) и там, где у поля есть чёткая визуальная метафора.
В целом же, правильное выравнивание по сетке, размер шрифта, цвета и выверенные отступы часто влияют больше, чем выбор места меток. Хороший вкус никто не отменял!
korolevalizaveta
05.02.2026 14:22Для небольших форм, вроде авторизации и регистрации это и правда идеальный вариант, но вот когда идёт речь о каких-нибудь платёжных формах, то здесь я бы всё-таки пришла к тому, что бы лейблы всё-таки находились сверху, потому что при таком расположении эти инпуты будут выглядеть одинаково и на дектопах и на мобильных устройствах.
Shortki
05.02.2026 14:22Согласен, от назначения форм и их объёма действительно многое зависит.
Но ещё важнее — целевой пользователь. Для клиентов, которые заполняют форму один раз или эпизодически (часто забывая предыдущий опыт), подходит один подход. Для корпоративного сотрудника, заполняющего формы десятки раз в день, — уже совсем другой, с иными принципами и приёмами (уж точно без анимаций).При этом в любом случае я убеждён, что для мобильных устройств нужен отдельный, адаптированный дизайн форм — возможно, со своей логикой, ориентированной на мобильные сценарии использования.
UniInter
05.02.2026 14:22Название инпута внутри сереньким мне долгое время раздражала. Сначала я не мог врубиться, что это не заполненный еще инпут, потом я забывал название инпута после его исчезновения с началом заполнения... Самое неудачное решение.
Передо мной товарищ предложил выносить внутреннее название вверх после старта заполнения. Это уже лучше. Но проще же сразу вверху его писать.
dmitriym09
05.02.2026 14:22Внутри input все же не label должен быть, а placeholder. И в нем хорошо бы пример заполнения указать, чтобы пользователь понял, что хотят.
ImagineTables
На картинках из опросов видна только топология, а на ней далеко не уедешь. Лично я бы обязательно делал цветовую зебру / пузыри и очень чётко обозначал подписи (например, прилепляя к краю экрана), потому, что в реальности некоторые пользователи просто путают поля. Читают (или, вернее, не читают) подпись от одного поля, а пишут в другое. А если ещё расстояние между подписями и полями при вертикальном лэйауте более-менее одинаковое, вероятность путаницы повысится.
И это не только к формам относится. Прямо сегодня видел, как в приложении для СМС человек пропустил скромно-серый заголовок «10:20», отбивающий последнее сообщение от более ранних, и решил, что сообщение выше (чей заголовок «3 февраля, 20:30» не влез на экран) — тоже сегодняшнее. Точнее, решил, что всё это одно сообщение. Потому что фон одинаково белый, а заголовки чисто для красоты. Если бы использовалась зебра или каждое сообщение отображалось в светлом пузыре на тёмном фоне (или наоборот), юзеру было бы понятно, что это два разных сообщения. А если бы подпись «3 февраля, 20:30» была приклеена к верхней части экрана, а подпись «10:20» развёрнута до «Сегодня • 10:20», то было бы ещё понятнее.