Формы существуют уже давно, упрощая задачи по составлению жалоб и различных других юридических заявлений. Поскольку печатные формы были прародителями веб-форм, узнаем секреты их дизайна.
Анатомия инпута
Инпуты позволяют пользователям вводить текст. Обычно они появляются в формах и диалогах. Дизайн составных частей инпута должен быть заметным для пользователям, доступным и эффективным для заполнения.
Ключевые элементы инпута:
- Container — область интерактивного ввода
- Input text — вводимый пользователем текст
- Label Text — наименование, которое говорит пользователям какую информацию нужно заполнить в поле.
- Placeholder text — это пример информации, который заменяется текстом, который вводит пользователь.
- Helper or Validation text (необязательный) — вспомогательный текст, который дает дополнительную информацию о текстовом поле./li>
- Leading icon (необязательный) — визуальное отображение целей инпута (в виде иконки)
- Trailing icon (необязательный) — дополнительный элемент управления по вводимому тексту, например, очистить, скрыть/показать и т.д.
Типы текстового поля
Большинство из них основаны на базовом инпуте и были изменены, чтобы лучше работать с разными типами информации, например, номера карт. Вот лишь несколько примеров типов ввода, которые наиболее часто используются во всех создаваемых нами UI:
(Мы намеренно не упоминаем о чекбоксах и радиобаттонах, поскольку рассмотрим их позже в отдельной статье):
Используйте соответствующий тип ввода для сбора данных
Это поможет пользователям вводить информацию в нужном формате и избежать ощибок
Инпуты должны меняться в зависимости от состояния и от взаимодействия с пользователем
Это можно сделать с помощью визуальных подсказок, которые будут сообщать состояние инпута. Существует несколько состояний: inactive, hover, disabled, focused, validation, error. Все состояния должны четко различаться и быть единообразными на всех шагах взаимодействия с пользователем.
Выбор стиля инпута
Есть три основных варианта позиционирования лейбла: сверху, слева и справа. Выбирайте стиль, основываясь на целях и размере формы, библиотеке компонентов и платформы, для которой вы проектируете. Все они имеют некоторые преимущества и недостатки.
Инпут в виде подчеркивания не является лучшим вариантом. Они уже были пересмотрены на основе большого исследования "Эволюция дизайна материалов", которое я рекомендую вам прочитать. Это исследование также показало, что пользователи предпочитают инпуты с закругленными углами.
Лейбл, выровненный по левому краю
Подходят, если запрашиваемые данные неизвестны пользователям.
Преимущества: Легко масштабируемые лейблы, правильное использование вертикального пространства
Недостатки: Расстояние между лейблом и соответствующим инпутом усложняет обработку информации пользователем.
Лейбл, выровненный по правому краю
Заполняются быстрее почти в 2 раза
Преимущества: Лейбл и вводимые данные расположены близко друг к другу, что упрощает сканирование информации глазом, инпут заполнится быстро.
Недостатки: Сложнее быстро отсканировать форму и понять, какая информация для ввода требуется.
Лейбл, выровненный по верхнему краю
Самое быстрое время заполнения и лучший выбор для большинства случаев. Эффективны на мобильных устройствах, так как не требуют много горизонтального пространства
Преимущества: Позволяет быстрее всего увидеть лейбл и вводимый текст, самое быстрое время заполнения.
Недостатки: Требуется больше пространства по вертикали.
Можете узнать боьше по этой теме в источниках “Лучшие практики для дизайна форм-Люк Вроблевский” и в "Размещение лейблов в формах-Матео Пенцо”
Длина инпута должна быть пропорциональна ожидаемой вводимой информацией.
Использование одинаковой длины всех инпутов визуально приятней, но затруднит их заполнение пользователем.
Вспомогательный текст в инпутах не являются заменой лейбла
Исчезающий заполнитель напрягает кратковременную память пользователей. Без лейблов пользователи не могут проверить всю предоставленную ими информацию перед отправкой формы. Если требуется минималистичный инпут, то используйте плавающие лейблы.
Помогайте пользователям заполнить инпут
- Пользуйтесь автозаполнением в инпуте, что решить частичные запросы.
- Используйте автоматическое предложение из практически неограниченного списка связанных ключевых слов и фраз в виде раскрывающегося списка.
- Предварительно заполните поля и используйте настройки по умолчанию. Часто можно легко определить страну и город пользователя по IP-адресу или геолокации. А на основе наиболее распространенных сценариев и аналитики вы можете определить, что должно быть выбрано по умолчанию. Электронная коммерция является исключением, не выбирайте заранее какие-либо предпочтения, связанные с покупкой, такие как размер или цвет.
- Предоставьте контекстную информацию. Если для того, чтобы принять правильное решение или избежать ошибок, пользователям понадобится некоторая дополнительная информация, например, баланс счета при совершении перевода, не стесняйтесь ее представлять. Используйте встроенную валидацию.
Используйте встроенную проверку
"Встроенная проверка онлайн" - это проверка достоверности вводимых данных пользователя в режиме реального времени по мере прохождения пользователем форму, в отличие от проверки вводимых данных после отправки формы. Реализуйте ее правильно, чтобы не сделать хуже:
- Сообщения о проверке должны выводиться рядом с инпутом
- Не кричите на пользователей, сообщения об ошибках должны подсказывать, как исправить проблему, а не обвинять их.
- Избегайте "преждевременной проверки" до того, как пользователь закончит набор текста.
- Рассмотрите возможность использования “положительной валидации”, она может добавить обрадобвать пользователя.
Уменьшайте количество полей
Это уменьшит зрительную нагрузку, и упростит вид.
- Не разбивайте инпуты, как Полное имя и Дата, на несколько полей.
- Не запрашивайте одну и ту же информацию несколько раз.
- Максимально сокращайте лейблы и вспомогательный текст
- Рассмотрите возможность использования “положительной валидации”, она может добавить обрадобвать пользователя.
Скрывайте нередевантные инпуты
Раскрывайте информацию только самое необходимое, предоставьте возможность пользователю управлять сложностью, когда это необходимо.
Используйте условную логику
Условная логика позволяет автоматически показывать или скрывать поля, пропускать страницы в форме, основанной на ответах посетителя. Такой подход не только сократит количество полей, но и сделает процесс заполнения более персонализированным и похожим на разговор.
Группировка связанных полей
Одним из самых простых способов упрощения сложных форм является группировка родственных полей. Существует несколько принципов группировки в гештальт-психологии, которые помогают элементам чувствовать себя связанными: Близость, Сходство, Непрерывность, Замкнутость и Связанность. Группировка десятков неструктурированных полей в несколько управляемых значительно повысит удобство использования форм.
Избегайте использования многоколоночных компоновок
Расположение в одну колонку создает четкий путь к завершению для пользователя. При компоновки формы из нескольких столбцов пользователи пропускают поля, в которых нужно вводить данные, вводят данные в неправильные поля или просто останавливаются, что может привести к отказу от заполнения формы.
Разбивайте сложные формы на несколько простых шагов
Иногда даже после удаления всего ненужного некоторые формы могут выглядеть огромными. Разбиение огромных задач на ряд более мелких выглядит намного проще и мотивирует к выполнению процесса до конца.
- Отображайте шаги и визуально сообщайте о прогрессе, который делает пользователь, это дает мотивирует двигаться вперед
- Слишком много шагов не помогут, только будут раздражать пользователей.
- Делайте сводку ключевой информации, чтобы уменьшить тревоги, а также, чтобы иметь обзор в конце всей введенной информации.
Сведите к минимуму возможность навигации за пределами формы
Если форма достаточно велика, чтобы разбить её на несколько шагов, она заслуживает отдельного четко сфокусированного пространства для работы с ней. Вывод общей навигации или любых ссылок, которые могут нарушить процесс, просто создаст путаницу. Я бы также не советовал использовать многошаговые формы в маленьких всплывающих окнах.
Показывайте соответствующий тип клавиатуры
Android или iOS предоставляет несколько различных типов клавиатур, каждая из которых предназначена для упрощения различного типа ввода. Чтобы упростить ввод данных, клавиатура, отображаемая при редактировании текстового поля, должна соответствовать типу содержимого в этом поле. Будьте внимательны к тому, где появится клавиатура. Чтобы не вводить прокрутку без необходимости, расположите текстовые поля в верхней области.
Прекратите создавать нелепые дизайны создания паролей
Иногда даже после удаления всего ненужного некоторые формы могут выглядеть огромными. Разбиение огромных задач на ряд более мелких выглядит намного проще и мотивирует к выполнению процесса до конца.
- Позвольте пользователям снимать маску с пароля вместо того, чтобы просить их ввести его 2 раза, это также работает лучше в приложениях, генерирующих пароли
- Постоянно отображайте требования к паролям и показывайте прогресс пользователей в выполнении всех критериев. Постарайтесь упростить требования к пользователю.
- Используйте измерители силы, побуждающие пользователей создавать более надежные пароли.
