UX обзор: Разработка правильных форм ввода информации

У поля ввода явное назначение — его нужно заполнить. Другими словами, поле ввода имеет аффорданс.
Иллюстрация Tai Nguyen: https://dribbble.com/shots/8996248-Ha-Giang-flower-field-illustration-ng-hoa-H-Giang

Вы читаете перевод статьи “Design Better Input Fields”. Над переводом работали Ольга Скулкинаи Ринат Шайхутдинов. При поддержке iSpring.

iSpring — решение для запуска дистанционного обучения.

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

В проектировании форм есть ряд рекомендаций, которых стоит придерживаться. Эта статья посвящена тому, как стиль самих полей влияет на эффективность формы.

Непонятный дизайн мешает действию

Поле ввода имеет явное назначение (аффорданс — от англ. affordance — самоочевидность, явное назначение предмета). Без очевидной визуальной подсказки пользователь может не понять, куда именно вводить информацию, и допустит ошибку при заполнении.

Ширина поля подсказывает, какую информацию нужно ввести

Размер поля ввода обычно соответствует объему информации, который необходимо ввести. На примере слева поле “Zip code” короткое, и сразу становится понятно, что нужно ввести простой индекс (в США это 5 цифр — прим.перев.). В дизайне справа поле очень длинное, и пользователю непонятно: вводить простой индекс или расширенный (например, 94778–3829 или просто 94887).

Дизайн слева заточен под адреса в США. Длину поля индекса нужно локализовать под конкретную страну. Если страна заранее неизвестна, лучше выбрать дизайн справа — с универсальным длинным полем. Если хотите узнать больше о локализации форм, почитайте эту статью.

Структура диктует формат

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

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

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

Текст заглушки путает пользователя

Текст заглушки ослабляет визуальный сигнал к действию. Кроме того, заглушка путает пользователя: такое поле кажется заполненным. Больше информации о заглушках в статье Alternatives to Placeholder Text.

Формы

Посты в категории UI-дизайн

Как стать веб-дизайнером – пошаговое руководство

Анастасия Свеженцева

30 сентября 2020

Кто такие UI-дизайнеры и чем они занимаются

Посты в категории UI-дизайн

Кто такие UI-дизайнеры и чем они занимаются

Анастасия Свеженцева

6 сентября 2020

Посты в категории UI-дизайн

Обзор 5 лучших UI курсов – обучение на дизайнера пользовательских интерфейсов

Анастасия Свеженцева

5 августа 2020

19 000+ участников – здесь ваши друзья, напарники и новые идеи

Присоединиться

Продуктовые дизайнеры
Продакты
UX/UI-дизайнеры
UX-аналитики
Веб-дизайнеры
Менеджеры проектов
Продуктовые аналитики
Бренд-менеджеры
Digital-стратеги
Арт-директора
Аналитики данных
UX-исследователи
Графические дизайнеры
Веб-разработчики
Дизайнеры интерфейсов