Шкатулка с секретами. Поля ввода
Это первая статья об элементах интерфейса из серии под названием «Шкатулка с секретами». Она посвящена очень простому на первый взгляд элементу, который есть практически на любом сайте и в любом приложении. Он — основа для получения обратной реакции от пользователя. То, как он сделан, сильно влияет на пользовательский опыт. Этот компонент — поле ввода.
Зачем я пишу эту статью? В процессе работы над интерфейсами я пыталась найти информацию о полях ввода и поняла, что это задача не из простых: информации крайне мало, она разбросана по источникам и почти не переведена на русский язык. Поэтому я решила, что такая статья точно будет полезной другим дизайнерам. Она отражает не только мой опыт, но и опыт моей любимой команды.
Начнем с определения
Input (поле ввода) — базовый компонент интерфейса, предназначенный для ввода небольшого объема текста.
Самое простое поле ввода содержит Label (лейбл или заголовок) и Text field (область для ввода текста). Чтобы пользователям было удобнее работать с полем ввода, базовый комплект может быть сильно расширен — об этом расскажу ниже.
Состав
Поле ввода — простой компонент, но он состоит из множества частей. Даже в базовом состоянии вам нужно будет определиться с:
- Лейблом. Его расположением, размером и цветом текста и отступами до других элементов.
- Рамкой поля. Ее толщиной, скруглениями, цветом, заливкой, высотой.
- Текстом в области ввода. Его размером, цветом, отступами.
Эти части создают единое целое, они задают ритм и задействуют все базовые элементы стиля.
Cостояния
На мой взгляд, самое важное при создании поля ввода — продумать все необходимые состояния. Об этом часто забывают: возможно, потому что знания о таких вещах доходят обрывками.
Статичное состояние
Базовое активное состояние поля ввода, когда пользователь с ним не взаимодействует, но может сделать это в любой момент.
Наведение курсором
Нужно только для веб-интерфейсов, где есть мышь или тачпад. Поле ввода может визуально реагировать на это событие. Например, немного менять цвет обводки в области для ввода текста.
Фокус
Это активное состояние поля ввода, когда пользователь с ним взаимодействует — заполняет данные. Фокус появится, если нажать на поле ввода или переключиться на него с помощью клавиатуры. По умолчанию в браузере уже встроен дизайн состояния фокуса, но его можно изменить.
Недоступное поле
Неактивное состояние, когда пользователь не может взаимодействовать с полем. Чаще всего у неактивного поля снижен контраст, а область ввода залита серым.
Ошибка
Состояние, которое показывает, что текст поля не проходит по требованиям и его нельзя отправить. Ошибки возникают, когда поле валидируется — проверяется, что все новые данные отвечают требованиям.
Если возникла ошибка, поле ввода должно среагировать на это событие — чаще всего обводка области ввода становится красной. Может измениться и заливка: например, стать розовой. Рядом с полем ввода появляется сообщение для пользователя: так он понимает, что произошло и как исправить ошибку.
Про доступность
Создавая доступный интерфейс, вы заботитесь о том, чтобы им мог пользоваться любой человек — независимо от того, какие у него особенности.
Что стоит учитывать дизайнерам:
- У поля ввода обязательно должен быть лейбл. Лучше, если он будет расположен над полем. Нельзя использовать подсказку вместо лейбла: она пропадает при фокусе и не читается вспомогательными программами для озвучивания текста.
- Короткие и информативные тексты для лейблов, подсказок и ошибок.
- Высокая контрастность. Лейбл и текст должны иметь высокий индекс контрастности по WCAG. Также не стоит делать обводку поля ввода слишком светлой.
- Не мельчить. Область поля ввода должна быть не меньше 40 пикселей, а шрифт не меньше 16 кегля.
- Не скрывать важные подсказки под информерами, показывая их только при наведении. Это делает подсказки труднодоступными для некоторых пользователей.
- Ярко выделять состояния ошибки. Еще лучше — кроме цвета использовать иконку, чтобы люди с цветовой слепотой легче её находили.
- Текст ошибки должно быть видно сразу, а не только при фокусе на элемент.
- Как можно реже использовать недоступное для заполнения состояние. И только по самым веским причинам.
Документация для поля ввода
С этими знаниями вы сможете грамотно подготовить компонент. Ваша документация должна содержать все необходимые состояния для передачи в разработку.
Дополнительные компоненты в поле ввода
Кроме базовых элементов, о которых я говорила в начале статьи, у поля ввода может быть большое количество вспомогательных. В статье я не могу охватить все, но постараюсь рассказать о самых распространенных и полезных.
Пример заполнения (placeholder)
Предзаполненный текст внутри поля ввода показывает, что можно написать. Этот текст пропадает при начале ввода, поэтому его нельзя (даже если очень хочется) использовать вместо лейбла.
Подсказка
Дополнительная текстовая строка — самый частый спутник поля ввода. Используется, если нужно дать пользователю больше информации.
Подсказки могут быть примитивными или более сложными по структуре. Сложные варианты встречаются при создании логина или пароля, когда надо учесть много условий: например, может появиться шкала сложности и надежности пароля.
Информер
Короткое сообщение для дополнительной информации. Информер показывается, если навести на иконку (обычно это ? или i). Он помогает пользователям, которые находятся в нестандартной для себя ситуации, и им нужно больше информации, чтобы со всем разобраться. Важно не путать с подсказкой, в которой отображается важная информация для всех пользователей.
Маска
Текстовый скелет, который помогает людям понять, в каком формате вводить данные. Часто маску можно встретить на полях для ввода даты, номера карты или телефона. Маска может самостоятельно ставить пробелы, точки или другие символы, чтобы упростить и ускорить процесс заполнения.
Защита данных
Чаще всего защиту делают в виде иконки глаза, при клике на который можно скрыть или показать заполненные данные. Такая иконка почти всегда есть около поля с вводом пароля.
Саджест
Технология автозаполнения поисковой строки работает по статистике самых популярных запросов. Это очень распространенное дополнение, поэтому его можно встретить на сайте любого поисковика. Варианты подтягиваются из базы данных вертикальным списком — пользователь может выбрать что-то из этого списка, а может и не выбирать. После клика на любой пункт открывается новая страница.
Автозаполнение
Очень похоже на саджест, так как по сути у них одна цель. В отличие от саджеста, автозаполнение просто заполняет строку текстом. Показательный пример — автоматическое заполнение полного адреса, когда человек ввел только одну основную часть.
Есть случаи, когда саджест и автозаполнение применяются одновременно.
В этой ситуации при клике на словосочетание откроется новая страница — сработает саджест. Если кликнуть на иконку справа, поле ввода автоматически заполнится — сработает автокомплит.
Есть и другие дополнительные опции для полей ввода: например, виртуальная клавиатура или возможность голосового ввода. Они применяются редко, но бывают крайне полезны в определенных обстоятельствах.
Браузерные дополнения
Браузеры научились помогать людям быстрее и проще взаимодействовать с полями ввода. Они могут добавлять различные дополнительные элементы управления внутрь поля. Важно помнить об этом, потому что такие дополнения могут влиять на размер поля ввода и перекрывать его элементы.
Как это работает?
Это зависит от конкретного браузера и даже от его версии. Когда frontend-разработчик делает поле ввода, он может задать ему определенное назначение. Полный список элементов можно посмотреть тут. Есть поля, предназначенные для пароля, даты, телефона, цифр и прочего. Все браузеры реагируют на поля ввода по-разному, внешний вид этих вспомогательных элементов от вас не зависит — только от операционной системы и браузера. В некоторых браузерах на эти элементы можно влиять, в других — нет.
На картинке выше показаны примеры одного и того же поля ввода <input type=”number”> в разных операционных системах и браузерах.
Если в вашем поле ввода уже есть иконка, но для поля установлено назначение, то вы можете наблюдать разные интересные ситуации, например, дублирование.
Предзаполнение
Это самый распространенный пример дополнения, который так любят пользователи, — он заполняет сохраненные данные и экономит время. Обычно это заливка поля ввода светло-желтым или светло-голубым цветом, а в некоторых браузерах можно встретить еще и иконку. По умолчанию эта опция отключена, но ее можно и нужно включать, когда польза очевидна. Например, такая опция очень полезна для ввода сохраненного логина, пароля, ФИО, телефона или почты.
Виды полей ввода
Из примеров выше вы могли заметить, что поля ввода сильно отличаются — я постараюсь рассказать о плюсах и минусах каждого.
Поля ввода в стиле старого Material с плавающим лейблом без контура
Это поля без замыкающего контура в области ввода, проще говоря, подчеркнуты только снизу. Часто встречаются в мобильных приложениях под Android и на сайтах.
Material уже ушел от этого варианта, и вам советую последовать примеру. Вот несколько причин: маленький размер шрифта в лейбле делает его некомфортным для чтения; длинные лейблы не всегда нормально умещаются при адаптиве; не всегда понятно, к чему относится лейбл, так как с областью ввода его почти ничего не связывает.
Такие поля ввода подходят только для небольших форм, где не требуется заполнять большое количество данных.
Поля ввода с плавающим лейблом и контуром по гайдам Material
Это поля, в которых лейбл расположен внутри области ввода. При начале ввода он уменьшается и ползет вверх, освобождая место для заполнения данных, но остается в рамках поля ввода. Решение изящное и любимое многими, но проблемы с мелким шрифтом и длинными лейблами никуда не исчезают.
Отличная статья на эту тему на английском языке по ссылке.
Классика. Поля с вынесенным лейблом
В эпоху раннего интернета такие поля были единственным вариантом, но с развитием front-технологий у дизайнеров и разработчиков появилось больше возможностей для стилизации. Все устали от них, и мало какой дизайнер применял поля с вынесенным лейблом в своих интерфейсах. Но как показывают многочисленные исследования, это самый понятный вариант для пользователей (почитать об этом можно в статье от nngroup). Именно поэтому сейчас, уже вполне осознанно, многие к нему возвращаются.
На этом я хочу закончить статью. Надеюсь, она была вам полезна. Делайте свои поля ввода удобными и пишите, о каких элементах интерфейса было бы еще интересно узнать.
