Где ставить название инпута — слева или сверху/внутри. Обзор научных статей

[ImagineTables]

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

И это не только к формам относится. Прямо сегодня видел, как в приложении для СМС человек пропустил скромно-серый заголовок «10:20», отбивающий последнее сообщение от более ранних, и решил, что сообщение выше (чей заголовок «3 февраля, 20:30» не влез на экран) — тоже сегодняшнее. Точнее, решил, что всё это одно сообщение. Потому что фон одинаково белый, а заголовки чисто для красоты. Если бы использовалась зебра или каждое сообщение отображалось в светлом пузыре на тёмном фоне (или наоборот), юзеру было бы понятно, что это два разных сообщения. А если бы подпись «3 февраля, 20:30» была приклеена к верхней части экрана, а подпись «10:20» развёрнута до «Сегодня • 10:20», то было бы ещё понятнее.

[Shortki]

Идеальным представляется использование плавающих меток, когда плейсхолдер внутри поля превращается в метку сверху непосредственно в момент фокусировки.

Конечно для полей со строгим форматом это не работает, так как плейсхолдер в них должен показывать ожидаемый формат ввода, а не название.

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

В целом же, правильное выравнивание по сетке, размер шрифта, цвета и выверенные отступы часто влияют больше, чем выбор места меток. Хороший вкус никто не отменял!

[korolevalizaveta]

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

[Shortki]

Согласен, от назначения форм и их объёма действительно многое зависит.
Но ещё важнее — целевой пользователь. Для клиентов, которые заполняют форму один раз или эпизодически (часто забывая предыдущий опыт), подходит один подход. Для корпоративного сотрудника, заполняющего формы десятки раз в день, — уже совсем другой, с иными принципами и приёмами (уж точно без анимаций).

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

[dmitriym09]

Внутри input все же не label должен быть, а placeholder. И в нем хорошо бы пример заполнения указать, чтобы пользователь понял, что хотят.