Инпуты в веб-дизайне. Как сделать текстовое поле
Пользователи вводят текст и другим образом взаимодействуют с web-сайтом при помощи инпутов. Обычно эти элементы в дизайне имеют вид форм или диалоговых окон. Составные части инпутов должны быть заметными, понятными и доступными для пользователей.
Из каких элементов состоит инпут
- Container - область, в которую пользователь вводит текст.
- Input text - текст, вводимый пользователем.
- Label Text (лейбл) - название поля, поясняющее, какие данные необходимо внести.
- Placeholder text - пример текста, который заменяется информацией, вводимой пользователем. Вспомогательный текст не может заменить лейбл. Он исчезает во время заполнения поля и напрягает кратковременную память. Без лейбла человек не сможет проверить всю введенную информацию перед ее отправкой. Если у вас очень минималистичный инпут в дизайне, то можно применять плавающие лейблы.
- Helper (Validation text) - дополнительная информация о текстовом поле.
- Иконка перед полем - описывает тип текстового поля.
- Иконка после поля - помогает дополнительно контролировать ввод (скрывать / показывать текст и т. д.).
Типы полей
- Текстовая строка.
- Текстовое поле.
- Дата.
- Поисковая строка.
- Всплывающий список выбора.
- Телефонный или карточный номер.
- Мультивыбор.
- Выбор цвета.
- Чекбокс.
- Радиокнопки.
При использовании правильного типа ввода пользователь не допускает ошибок и эффективнее взаимодействует с сайтом.
Инпуты могут находиться в активном или неактивном состоянии. Например, поле текстового ввода может быть недоступным до тех пор, пока человек не ввел номер своего телефона. У инпутов есть различные состояния и стили, которые мы рассмотрим на рисунках.
Любое подчеркивание не считается самым удобным вариантом в дизайне. Об этом мы расскажем чуть ниже.
Как выравниваются лейблы (заголовки инпутов)
Выровненный по левому краю лейбл подходит, если данные, которые пользователь должен ввести, ему неизвестны. Текст на таких лейблах проще масштабируется, но расстояние между ним и соответствующим полем ввода усложняет для пользователя обработку информации.
Лейблы, выровненные по правому краю, заполняются пользователем быстрее в 2 раза.
Лейбл с выравниваем по верхнему краю эффективен на мобильных устройствах, так как не требует большого горизонтального пространства. Заголовок поля - это первое, что видит пользователь, поэтому заполнение происходит максимально быстро.
Как определиться с длиной инпута
Длина поля должна соответствовать информации, которую ожидаемо будет вводить пользователь. Но если полей несколько - визуально приятнее использовать инпуты одинаковой длины.
Как помочь пользователю при заполнении инпута
- Используйте автозаполнение в полях ввода, чтобы сократить время пользователя на