1 800x440 - Подробное руководство по дизайну текстовых полей и форм

Эти простые правила помогут вам создавать формы, которые пользователи захотят заполнить

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

Анатомия текстового поля

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Подробное руководство по дизайну текстовых полей и форм

Вот ключевые элементы обычного текстового поля:
1. Контейнер – интерактивная область ввода
2. Вводимый текст– текст, набираемый в текстовом поле
3. Текст метки – сообщите пользователям, какая информация принадлежит данному полю формы.
4. Текст-плейсхолдер – это описание или пример требуемой информации, которая заменяется текстом, напечатанным пользователем
5. Вспомогательный или проверочный текст (необязательно) – предоставляет дополнительный контекст или проверочное сообщение
6. Иконка перед полем (необязательно) – опишите тип ввода, который требуется для текстового поля
7. Иконка после поля (необязательно) – дополнительный контроль над вводимым текстом, например, скрыть / показать текст и т. д.

Типы текстовых полей

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Подробное руководство по дизайну текстовых полей и форм
(Мы специально не говорим о таких типах полей ввода, как флажки и переключатели, о которых мы расскажем позже в этой серии статей)

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Подробное руководство по дизайну текстовых полей и форм

Текстовые поля должны изменять внешний вид в зависимости от состояния и взаимодействий пользователя

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Подробное руководство по дизайну текстовых полей и форм

Выбор лучшего стиля текстового поля

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Подробное руководство по дизайну текстовых полей и форм

Подчеркнутое поле ввода, популяризированное рекомендациями Material design – не лучший выбор. Этот вариант был пересмотрен в результате большого исследования «Evolution of Material Design», которое я рекомендую вам прочитать. Это же исследование показало, что пользователи предпочитают поля ввода с закругленными углами.

Метки, выровненные по левому краю

Хороший выбор, когда запрашиваемые данные не знакомы пользователям.

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

Метки, выровненные по правому краю

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

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

Метки над полем ввода

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

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

Вы можете узнать больше по этой теме  в статье Люка Вроблевски «Лучшие примеры дизайна форм»  и публикации  Матео Пензо «Размещение меток в формах»

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Подробное руководство по дизайну текстовых полей и форм

Плейсхолдеры не являются заменой меток

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Подробное руководство по дизайну текстовых полей и форм

Помогите пользователям заполнить формы

  • Помогите решить часть запросов с помощью автозаполнения. Когда вы печатаете, вы можете нажать либо клавишу «Enter», либо клавишу «стрелка вправо», чтобы принять автозаполнение.
  • Найдите практически неограниченный список для связанных ключевых слов и фраз с помощью автозаполнения. Он отображается в виде списка с несколькими предложениями в виде раскрывающегося меню.
  • Предварительно заполните поля и используйте умные значения по умолчанию. Зачастую вы можете легко определить страну и город пользователя по IP или геолокации. И на основе наиболее распространенных сценариев, и аналитики вы можете определить, что должно быть выбрано по умолчанию. Электронная коммерция является исключением, не выбирайте никаких предпочтений, связанных с покупкой, например, размер или цвет товара.
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Подробное руководство по дизайну текстовых полей и форм
  • Предоставляйте контекстную информацию. Если вы знаете, что для того, чтобы принять правильное решение или избежать ошибок, пользователям потребуется дополнительная информация, например, баланс счета при совершении денежного перевода, отобразите ее.

Используйте встроенную проверку

«Проверка в реальном времени» – это проверка достоверности данных, введенных пользователем в режиме реального времени по мере заполнения формы, в отличие от одноразовой проверки данных при отправке формы. Реализуйте это правильно, чтобы не нанести вреда:

  • Отображайте сообщения проверки рядом с полем ввода
  • Не кричите на пользователей. Сообщения об ошибках должны сообщать пользователям, как решить проблему, а не обвинять их
  • Избегайте «преждевременной проверки», когда поле помечено как недействительное, до того, как пользователь закончит ввод.
  • Подумайте об использовании «положительной проверки», это может добавить чувство восторга и прогрессии.
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Подробное руководство по дизайну текстовых полей и форм

Уменьшите количество полей

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

  • Не разбивайте текст, например, полное имя и дату, на несколько полей
  • Не спрашивайте одну и ту же информацию несколько раз
  • Максимально сократите текст меток и подсказок
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Подробное руководство по дизайну текстовых полей и форм

Скрывайте нерелевантные поля

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Подробное руководство по дизайну текстовых полей и форм

Используйте условную логику

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Подробное руководство по дизайну текстовых полей и форм

Группируйте связанные поля

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Подробное руководство по дизайну текстовых полей и форм

Избегайте использования нескольких столбцов

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Подробное руководство по дизайну текстовых полей и форм

Разбейте сложные формы на несколько простых шагов

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

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

Минимизируйте возможность навигации за пределами мастера

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Подробное руководство по дизайну текстовых полей и форм

Показывайте соответствующий тип клавиатуры

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Подробное руководство по дизайну текстовых полей и форм

Правильный дизайн создания пароля

  • Разрешите пользователям снимать маску со своего пароля вместо того, чтобы просить ввести его 2 раза. Это также будет работать лучше для приложений, генерирующих пароли.
  • Постоянно отображайте требования к паролю и указывайте прогресс выполнения всех критериев. Попробуйте упростить требования для пользователя.
  • Использование измерителей надежности побуждает пользователей создавать более надежные пароли
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Подробное руководство по дизайну текстовых полей и форм
Свежие вакансии
                        GermanLanguage.ph LLC GermanLanguage.ph LLC German Language School – Product Designer (UX/UI) Удаленно Ереван
                        Региональная Академия делового образования Региональная Академия делового образования Технический дизайнер Удаленно Самарская область
                        BR LAb BR LAb UX/ UI web-designer Удаленно Москва 80 000 - 120 000 ₽
                        Rightapplications Rightapplications UX дизайнер Офис Харьков
                        Emlid Emlid UX/UI Designer Офис Санкт-Петербург
Все вакансии

Оригинал: uxdesign.cc

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

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

10 золотых правил UI дизайна

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

Как создавать темные темы. Руководство от Superhuman

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

Основы иерархии в дизайне интерфейса (UI)

Понятие иерархии, ресурсы и значение иерархии для дизайна интерфейсов