Дизайн форм: когда использовать поля ввода с несколькими ячейками

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

Это делается для того, чтобы помочь пользователям более легко прочитать свой ответ небольшими фрагментами или чтобы помочь пользователям выполнить определенные требования к форматированию чего-то вроде справочного номера.

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

Сейчас я объясню, почему так происходит, и покажу вам, как помочь пользователям проверить свои ответы и выполнить требования к форматированию без использования нескольких входных данных.

Я дам рекомендации о том, когда на самом деле полезно использовать несколько полей ввода.

Проблемы полей с несколькими входами:

• Они мешают пользователям легко вставлять данные

Слева: вставка в ячейку с несколькими полями означает, что значение попадает только в первую и дальше обрезается. Справа: вставка в одно поле работает соответствующим образом.

Использование нескольких полей ввода не позволяет пользователям легко вставлять свои значения.

Можно использовать JavaScript для того, чтобы пользователям вставлять значение в несколько ячеек данных.

Однако данное решение не всегда реализуются таким образом – даже если бы они были, то сложно понять, что это можно заполнить копированием.

• Они требуют больше усилий при использовании

Это требует усилий, чтобы двигаться от поля к полю. Вам приходится постоянно запоминать где вы находитесь, а также исправление ошибок, все это увеличивает когнитивную нагрузку.

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

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

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

Во-вторых, во многих случаях фокус Вашего внимания смещается слишком рано. То, что технически завершено, скажем первые 2 числа кода сортировки но в итоге может быть неполной по мнению пользователя.

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

Если вы сделаете это одним полем, то все эти проблемы исчезнут, потому что они могут печатать свободно или двигаться назад без перемещения фокуса и потери контекста.

• Их бывает трудно обозначить осмысленно

Слева: многовходовое поле с бессмысленными надписями, которые трудно разложить. Справа: одно поле ввода не нуждается в дополнительных метках.

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

Например, отдельные входные данные кода сортировки будут чем-то вроде «цифр 1 и 2». Это не совсем правильно.

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

Вы можете визуально скрыть метки, но это решает проблему только для зрячих пользователей – это все еще создает ненужный шум для пользователей использующих программы для чтения с экрана.

Если Вам сложно написать значимую метку, то, это должно быть одно поле в любом случае.

Плохие причины использовать несколько полей для ввода информации и что делать вместо этого

Есть 2 проблемы удобства использования, которые могут быть решены с помощью нескольких полей для ввода. Однако вы можете обойти эти проблемы другими способами.

• Чтобы помочь пользователям избежать ошибок

Слева: поле вызывает ошибку при использовании пробелов вместо тире. Справа: поле прощает использование пробелов вместо тире.

Несколько полей используются именно для того, чтобы помочь пользователям избежать ошибок.

Например, представьте, что пользователю нужно ввести ссылочный номер длиной 10 цифр в формате 3-3-4, разделенный тире.

Использование нескольких полей ввода побуждает пользователя отказаться от ненужного форматирования, такого как пробелы или тире. Это снижает вероятность появления сообщений об ошибках, таких как «номер должен быть в формате 123-123-1234».

Но лучше простить такие ошибки, игнорируя дополнительные пробелы или тире, что позволяет пользователям вводить значение так, как им нравится.

• Чтобы помочь пользователям проверить свои ответы

Слева: несколько полей, используемых для написания ответа частями. Справа: одно поле с ответом, с подсказкой в виде частей.

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

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

Маски ввода являются проблематичными

Маски ввода предназначены для того, чтобы помочь пользователям избежать ошибок и проверить свои ответы.

Они работают, автоматически помещая символы во входные данные в качестве типов пользователя, например, помещая тире после того, как пользователь вводит первые 3 числа номера.

Но я не рекомендую их, потому что они могут запутать пользователей, когда появляется новый символ (визуально или слышно в программе чтения с экрана), и они ограничивают пользователей определенным форматом.

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

Когда же использовать несколько полей ввода информации

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

Несколько полей следует использовать, если одно поле вызывает у пользователей трудности с ответом на вопрос или означает, что невозможно проверить ответ.

Например даты. То, как пользователь записывает даты, зависит от того, откуда они берутся – 10/9/12 может означать 10 сентября или 9 октября (при условии, что год всегда последний).

Слева: одно поле даты, что можно понять неоднозначно и невозможно проверить. Справа: поле даты многократного ввода, что ясно и может быть точно проверено.

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

Вывод

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

Если вам нужно воспроизвести ответ частями, сделайте это под полем или отдельно на странице проверки ответов.

Несколько полей обычно совершенно не нужны. Лучше дать контроль пользователям и простить простые ошибки форматирования.

Перевод: Academ-study.ru

Оригинал статьи: adamsilver.io