Формы существуют уже давно, упрощая задачи по составлению жалоб и различных других юридических заявлений. Поскольку печатные формы были прародителями веб-форм, узнаем секреты их дизайна.
Инпуты позволяют пользователям вводить текст. Обычно они появляются в формах и диалогах. Дизайн составных частей инпута должен быть заметным для пользователям, доступным и эффективным для заполнения.
Большинство из них основаны на базовом инпуте и были изменены, чтобы лучше работать с разными типами информации, например, номера карт. Вот лишь несколько примеров типов ввода, которые наиболее часто используются во всех создаваемых нами UI:
(Мы намеренно не упоминаем о чекбоксах и радиобаттонах, поскольку рассмотрим их позже в отдельной статье):
Это поможет пользователям вводить информацию в нужном формате и избежать ощибок
Это можно сделать с помощью визуальных подсказок, которые будут сообщать состояние инпута. Существует несколько состояний: inactive, hover, disabled, focused, validation, error. Все состояния должны четко различаться и быть единообразными на всех шагах взаимодействия с пользователем.
Есть три основных варианта позиционирования лейбла: сверху, слева и справа. Выбирайте стиль, основываясь на целях и размере формы, библиотеке компонентов и платформы, для которой вы проектируете. Все они имеют некоторые преимущества и недостатки.
Инпут в виде подчеркивания не является лучшим вариантом. Они уже были пересмотрены на основе большого исследования "Эволюция дизайна материалов", которое я рекомендую вам прочитать. Это исследование также показало, что пользователи предпочитают инпуты с закругленными углами.
Подходят, если запрашиваемые данные неизвестны пользователям.
Преимущества: Легко масштабируемые лейблы, правильное использование вертикального пространства
Недостатки: Расстояние между лейблом и соответствующим инпутом усложняет обработку информации пользователем.
Заполняются быстрее почти в 2 раза
Преимущества: Лейбл и вводимые данные расположены близко друг к другу, что упрощает сканирование информации глазом, инпут заполнится быстро.
Недостатки: Сложнее быстро отсканировать форму и понять, какая информация для ввода требуется.
Самое быстрое время заполнения и лучший выбор для большинства случаев. Эффективны на мобильных устройствах, так как не требуют много горизонтального пространства
Преимущества: Позволяет быстрее всего увидеть лейбл и вводимый текст, самое быстрое время заполнения.
Недостатки: Требуется больше пространства по вертикали.
Можете узнать боьше по этой теме в источниках “Лучшие практики для дизайна форм-Люк Вроблевский” и в "Размещение лейблов в формах-Матео Пенцо”
Использование одинаковой длины всех инпутов визуально приятней, но затруднит их заполнение пользователем.
Исчезающий заполнитель напрягает кратковременную память пользователей. Без лейблов пользователи не могут проверить всю предоставленную ими информацию перед отправкой формы. Если требуется минималистичный инпут, то используйте плавающие лейблы.
"Встроенная проверка онлайн" - это проверка достоверности вводимых данных пользователя в режиме реального времени по мере прохождения пользователем форму, в отличие от проверки вводимых данных после отправки формы. Реализуйте ее правильно, чтобы не сделать хуже:
Это уменьшит зрительную нагрузку, и упростит вид.
Раскрывайте информацию только самое необходимое, предоставьте возможность пользователю управлять сложностью, когда это необходимо.
Условная логика позволяет автоматически показывать или скрывать поля, пропускать страницы в форме, основанной на ответах посетителя. Такой подход не только сократит количество полей, но и сделает процесс заполнения более персонализированным и похожим на разговор.
Одним из самых простых способов упрощения сложных форм является группировка родственных полей. Существует несколько принципов группировки в гештальт-психологии, которые помогают элементам чувствовать себя связанными: Близость, Сходство, Непрерывность, Замкнутость и Связанность. Группировка десятков неструктурированных полей в несколько управляемых значительно повысит удобство использования форм.
Расположение в одну колонку создает четкий путь к завершению для пользователя. При компоновки формы из нескольких столбцов пользователи пропускают поля, в которых нужно вводить данные, вводят данные в неправильные поля или просто останавливаются, что может привести к отказу от заполнения формы.
Иногда даже после удаления всего ненужного некоторые формы могут выглядеть огромными. Разбиение огромных задач на ряд более мелких выглядит намного проще и мотивирует к выполнению процесса до конца.
Если форма достаточно велика, чтобы разбить её на несколько шагов, она заслуживает отдельного четко сфокусированного пространства для работы с ней. Вывод общей навигации или любых ссылок, которые могут нарушить процесс, просто создаст путаницу. Я бы также не советовал использовать многошаговые формы в маленьких всплывающих окнах.
Android или iOS предоставляет несколько различных типов клавиатур, каждая из которых предназначена для упрощения различного типа ввода. Чтобы упростить ввод данных, клавиатура, отображаемая при редактировании текстового поля, должна соответствовать типу содержимого в этом поле. Будьте внимательны к тому, где появится клавиатура. Чтобы не вводить прокрутку без необходимости, расположите текстовые поля в верхней области.
Иногда даже после удаления всего ненужного некоторые формы могут выглядеть огромными. Разбиение огромных задач на ряд более мелких выглядит намного проще и мотивирует к выполнению процесса до конца.