- Статьи
- 6 мин на чтение
- 25
Почему не стоит дробить поля для текстового ввода
Всегда используйте локализованные поля ввода
Качество входящих данных влияет на результат. Большинство дизайнеров и разработчиков понимают этот принцип и дробят текстовые поля, чтобы обеспечить правильный формат ввода. Однако это неправильный способ, который может привести к проблемам с восприятием информации и увеличить когнитивную нагрузку на пользователей.
К наиболее распространённым текстовым полям, которые дробят дизайнеры, относятся следующие: дата рождения, номер кредитной карты, номер телефона, имя и адрес. В этой статье мы покажем, как получить эти данные в правильном формате без необходимости дробить текстовые поля.
Имя/Фамилия
Пользователи, как правило, воспринимают разделённые поля ввода как единое целое. Например, личность пользователя — не только «Питер» или «Паркер», а сочетание имени и фамилии — «Питер Паркер».
Поэтому, когда люди вводят своё имя в разделённое текстовое поле «Имя», они часто случайно добавляют в него и фамилию. В результате им приходится тратить дополнительное время и усилия на исправление ошибки.
У некоторых пользователей есть не только имя и фамилия, но и отчество. Если разделить поля ввода имени, то в таком случае пришлось бы добавить поле «Отчество». Такой подход усложнит форму, увеличит трудоёмкость ввода данных и усилия на переключение между полями.
Ещё одна проблема с разделёнными полями ввода имени состоит в том, что имена пользователей из разных стран не всегда соответствуют стандартной структуре имени и фамилии. В некоторых культурах принято использовать несколько фамилий и имён. Поэтому разделённое поле ввода может сбить их с толку и сделать невозможным точный ввод их имени.
Более эффективный подход — применение единого поля под названием «Полное имя». Оно позволит учесть все интернациональные особенности и длину имён, существенно снижая когнитивную нагрузку.
В скобках вы даже можете добавить к названию поля «имя и фамилия» (first and last), чтобы уточнить тип данных, которые вам нужны. Если вы локализуете свою форму, вы можете указать формат фамилии или имени в зависимости от страны пользователя.
Люди могут ввести только своё имя в поле «Полное имя». Если вы хотите, чтобы они ввели и свою фамилию тоже, установите ограничение для проверки. Поле должно содержать две последовательности в строке, чтобы оно было допустимым. Другими словами их ввод должен включать по крайней мере один пробел.
Номер телефона
Разделённые поля для ввода номера телефона требуют большей когнитивной нагрузки, чем другие, потому что они содержат числа и три отдельных поля. Однако это относится только к Соединенным Штатам. Форматы отличаются в зависимости от страны, поэтому некоторым пользователям придётся заполнять более трёх полей.
Ввод номера телефона в отдельных полях может вызывать трудности в мобильных интерфейсах. При переходе к следующему текстовому полю пользователям придётся переключаться на цифровую клавиатуру. Но не только это — каждый раз клавиатура будет исчезать и появляться снова. Эти резкие появления и исчезания замедляют ввод и увеличивают время выполнения задачи.
Более эффективный подход — применение локализованной маски ввода для форматирования номера телефона в едином поле. Другими словами форма будет автоматически обнаруживать страну пользователя и форматировать поле для ввода номера телефона. В результате люди смогут вводить свои данные, не беспокоясь о наличии пробелов, скобок или дефисов.
Специальные символы и пробелы уже будут в поле по мере того, как пользователи будут вводить данные. Однако всё же стоит сохранить подсказку-заполнитель («XXX»), чтобы люди понимали, сколько цифр им ещё предстоит ввести. Подсказка будет исчезать по мере ввода данных.
Номер кредитной карты
Разделённое поле ввода для номера кредитной карты также состоит из трёх текстовых полей. Три поля усложняют пользователям редактирование текстового ввода, если они ошиблись.
Ведь в таком случае им придётся находить и кликать на поле, в котором они допустили ошибку, а также перемещать руки с клавиатуры на мышь. Если в отдельных полях есть опечатки, им придётся сделать ещё больше движений. На мобильных устройствах им каждый раз нужно будет открывать цифровую клавиатуру и переключаться на неё.
Чтобы решить эту проблему, для номера кредитной карты используйте маску ввода в одном поле. Маска автоматически добавит пробелы между каждыми четырьмя цифрами (статья). Это упростит проверку ввода на наличие опечаток и их корректировку.
Дата рождения
Если вы запрашиваете дату рождения пользователя в текстовой форме, вам придётся разделить поля, потому что название месяца станет вариантом выбора в выпадающем списке (статья). Однако если вы запрашиваете дату рождения в числовой форме, то весь текстовый ввод можно объединить в одно поле.
Маска ввода позволит вам управлять форматом, чтобы пользователи не беспокоились о нём. Она автоматически добавит косые чёрточки или дефисы между числами месяца, дня и года.
Также следует сохранить подсказку-заполнитель ДД/ММ/ГГГГГ по мере ввода данных пользователями, чтобы они знали, что идёт сначала: месяц или день. Подсказка-заполнитель не исчезнет, пока человек не начнёт вводить данные поверх неё. Это важно, потому что во многих странах сначала указывают день, а не месяц.
Будет ещё лучше, если вы локализуете маску ввода для отображения правильного формата в зависимости от страны пользователя. Таким образом, если пользователь не из Соединенных Штатов, маска ввода может отображаться в формате DD-MM-YYYY или YYYY-MM-DD. Большинство стран мира используют формат День-Месяц-Год. Однако только некоторые применяют формат Год-Месяц-День.
Адрес/Квартира
Хотите верьте, хотите нет, но нельзя дробить поля ввода адреса. Большинство форм отображают одно поле для основного адреса и ещё одно для номера квартиры. Однако второе поле для ввода адреса часто путает пользователей, у которых нет данных для того, чтобы туда что-то вводить.
Тестирование юзабилити показывает, что большинство людей, увидев это поле, часто останавливаются и начинают размышлять. Как правило, они не уверены, стоит ли им вводить полный адрес в первом поле или разделить его между обоими полями. Другими словами, разделённое поле для ввода адреса заставляет их переживать о том, точно ли они введут свой адрес правильно (Источник).
Проблема не только в этом. Некоторые могут случайно ввести свой адрес во втором поле. Легко допустить такую ошибку, потому что ширина поля «Квартира» такая же, как и у поля адреса и находится рядом. Оба названия также начинаются с буквы “А” (в английском варианте).
Ещё одна потенциальная ошибка — ввод адреса целиком в первом поле для ввода адреса. Пользователи понимают, что есть ещё одно отдельное поле для ввода номера квартиры только после того, как завершают ввод и переходят к следующему полю. В результате им приходится возвращаться, редактировать текст в первом поле и добавлять его во второе.
Чтобы избежать разделения полей для ввода адреса, используйте единое поле «Полный адрес» и к названию в скобках добавьте «номер квартиры». Когда пользователи увидят название «Полный адрес (квартира)», они поймут, что их просят ввести полный адрес, включая номер квартиры, если он есть.
Кроме того, используйте компонент текстовой области вместо обычного текстового поля. Пользователи привыкли записывать адрес, а номер квартиры указывать во второй строке. Текстовая область позволит им перейти на следующую строку в рамках текстового поля, что будет соответствовать знакомому формату ввода.
Как видите, объединение текстовых полей в единое поле снижает когнитивную нагрузку и улучшает пользовательский опыт. С помощью локализованных масок ввода вы можете лучше контролировать формат ввода для полей, которые нуждаются в форматировании. В результате пользователи будут вводить только правильные данные, а вы получите качественный результат.
Перевод статьи Why You Should Never Split Text Field Inputs из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
