За последние 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
Выводы
Скорость заполнения или количество ошибок в большинстве исследований никак не зависят от расположения лейблов.
С точки зрения создания дизайн-системы проще делать названия над полем, чтобы проще адаптировать мобильные-десктопные дизайны. Такие поля сейчас уже более привычны для пользователей, потому что большинство сервисов используют их.
Если форма длинная и пользователь будет с высокой вероятностью к ней возвращаться (пересматривать уже заполненную, например), то поля слева позволят быстрее находить нужное место.
Не совсем понятный для меня параметр — то, что пользователи чуть дольше смотрят на лейбл и чуть меньше на инпут, если поле стоит слева. Я думаю, человек пытается вроде как запомнить, что от него хотят, прежде чем надо будет «прыгнуть» на следующее поле.
В любом случае, общее время остается плюс-минус одинаковым, возможно в инпутах с лейблами сверху люди так же задумываются, просто глаза сразу соскальзывают вниз.
