photo 1587906697341 bfbde76785c7 800x440 - Проектирование форм: когда использовать поля ввода с несколькими ячейками

На эту тему был ряд комментариев в  Twitter.

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

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

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

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

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

Проблема полей ввода с несколькими ячейками

1. Они мешают пользователям легко вставлять скопированную информацию

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проектирование форм: когда использовать поля ввода с несколькими ячейками
Слева: вставка скопированной информации в поле ввода с несколькими ячейками приведет к тому, что она будет добавлена только в первую ячейку. Справа: вставка в одно поле ввода работает правильно

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

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

Однако данное решение используется далеко не всегда. А в тех случаях, когда оно используется, пользователи могут не осознавать, что в состоянии копировать и вставлять информацию.

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

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

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

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

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

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

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

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

3. Может быть сложно сделать для них содержательную метку

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проектирование форм: когда использовать поля ввода с несколькими ячейками
Слева: поле для ввода с несколькими ячейками, имеющее бессмысленные метки, которые трудно читать. Справа: отдельное поле ввода, не требующее дополнительных меток

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

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

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

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

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

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проектирование форм: когда использовать поля ввода с несколькими ячейками
Слева: поле выдает ошибку при использовании пробелов вместо тире. Справа: поле прощает использование пробелов вместо тире

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

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

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

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

2. Чтобы помочь пользователям проверить введенные ответы

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проектирование форм: когда использовать поля ввода с несколькими ячейками
Слева: несколько ячеек поля ввода, используемых для воспроизведения ответа по частям. Справа: одно поле ввода с ответом, который воспроизводится сразу под ним в виде фрагментов

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

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

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

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

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

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

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

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

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

Вам следует использовать их, если одно поле создает сложности с ответом на вопрос или не позволяет подтвердить ответ.

Даты являются хорошим примером. Формат написания даты пользователем зависит от того, откуда он родом – 10/9/12 может означать 10 сентября или 9 октября (при условии, что год всегда будет в конце).

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проектирование форм: когда использовать поля ввода с несколькими ячейками
Слева: одно поле ввода для даты является неоднозначным и его невозможно точно проверить. Справа: поле с несколькими ячейками понятно и может быть точно проверено

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

Вывод

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

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

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

Спасибо Emma Frith за редактуру статьи.

Свежие вакансии
                        Rightapplications Rightapplications UX дизайнер Офис Харьков
                        Emlid Emlid UX/UI Designer Офис Санкт-Петербург
                        Тинькофф Тинькофф Креативный веб-дизайнер Офис Москва
Все вакансии

Оригинал: adamsilver.io

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

Тренды UI/UX дизайна на 2020 год

Подборка основных трендов UI/UX дизайна, которые мы увидим в 2020 году

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование

Гамбургер-меню? Есть ли лучшая альтернатива? В этой статье я попытаюсь рассмотреть эти вопросы

О Доне Нормане, вандализации UX и широком подходе к дизайну

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