Основы дизайна¶

Узнайте, как создавать удобные формы.

В первом разделе вы узнали, как построить базовую форму. Этот раздел посвящен лучшим практикам. В этом модуле вы узнаете о пользовательском опыте (UX) и о том, почему хорошо реализованный пользовательский интерфейс (UI) может иметь большое значение.

Создание удобных интерфейсов¶

Заполнение форм может отнимать много времени и вызывать разочарование. Но это не так. Чтобы гарантировать отличный UX, убедитесь, что пользовательский интерфейс интуитивно понятен. Обеспечьте оптимальную структуру формы и графический дизайн (расположение, интервалы, размер и цвет шрифта), а также логичный пользовательский интерфейс (например, формулировки ярлыков и соответствующие типы ввода). Давайте посмотрим, как можно улучшить форму и сделать ее удобной в использовании.

Метки¶

Помните ли вы, для чего предназначен элемент <label>? Метка описывает элемент управления формой. Видимая и хорошо написанная метка помогает пользователю понять назначение элемента управления формы.

Использование метки для каждого элемента управления формы¶

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

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

Внимание

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

Подробнее о том, почему следует избегать placeholder'ов.

Формулировка ярлыка¶

Допустим, вы хотите описать поле электронной почты. Это можно сделать следующим образом:

<label for="email">Enter your email address</label>

Или можно описать это так:

<label for="email">Email address</label>

Какое описание вы выберете?

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

Положение метки¶

С помощью CSS можно расположить метку сверху, снизу, слева и справа от элемента управления формы. Где ее размещать?

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

Разработка форм¶

Хороший дизайн форм позволяет значительно снизить количество отказов от использования форм. Помогите пользователям вводить данные, используя соответствующий элемент и тип ввода Существуют различные элементы форм и типы ввода, из которых вы можете выбирать. Чтобы обеспечить наилучший пользовательский интерфейс, используйте наиболее подходящий элемент и тип ввода для вашего случая. Если пользователю необходимо заполнить несколько строк текста, используйте элемент <textarea>. Если пользователю необходимо принять условия и положения вашего сайта, используйте элемент <input type="checkbox">.

В зависимости от атрибута type или inputmode (подробнее об этом позже) на сенсорных устройствах отображается различная экранная клавиатура. При использовании type="tel" пользователи сенсорных устройств получают клавиатуру, на которой отображаются только символы, необходимые для ввода телефонного номера. При использовании type="email" на мобильном устройстве отображается клавиатура, оптимизированная для ввода адреса электронной почты.

Необходимо также визуально различать различные типы элементов управления формой. Кнопка должна выглядеть как кнопка. Ввод - как ввод. Сделайте так, чтобы пользователи могли легко распознать назначение элемента управления формы. К примеру, если что-то выглядит как ссылка, то при нажатии на нее должна открываться новая страница, а не отправляться форма.

Помочь пользователям ориентироваться в формах¶

Экстравагантный макет может быть интересным, но может и помешать заполнению формы.

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

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

Помочь пользователям взаимодействовать с формами¶

Чтобы избежать случайных нажатий и щелчков и помочь пользователям взаимодействовать с формой, сделайте кнопки достаточно большими. Рекомендуемый размер кнопки составляет не менее 48px. Во избежание случайных нажатий следует также добавлять достаточное расстояние между элементами управления формы с помощью CSS-свойства margin.

Размер элементов управления формы по умолчанию слишком мал, чтобы быть действительно удобным для использования. Следует увеличить размер, используя padding и изменив стандартный размер шрифта font-size.

Используйте в качестве font-size для элементов управления формы не менее 1rem (который для большинства браузеров по умолчанию равен 16px). Это предотвращает масштабирование страницы в iOS Safari, когда элемент управления формы находится в фокусе.

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

// pointer device, for example, a mouse
@media (pointer: fine) {
    input[type='checkbox'] {
        width: 15px;
        height: 15px;
    }
}

// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
    input[type='checkbox'] {
        width: 30px;
        height: 30px;
    }
}

Подробнее о функции pointer CSS media.

Показывать ошибки там, где они возникают¶

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

Убедитесь, что пользователям понятно, какие данные необходимо вводить¶

Убедитесь, что пользователи понимают, как вводить корректные данные. Нужно ли вводить не менее восьми символов для пароля? Скажите им об этом.

<label for="password">Password (required)</label>
<input
    required
    minlength="8"
    type="password"
    id="password"
    name="password"
    aria-describedby="password-minlength"
/>
<span id="password-minlength"
    >Enter at least eight characters</span
>

Дайте пользователям понять, какие поля являются обязательными для заполнения¶

<label for="name">Name (required)</label>
<input name="name" id="name" required />

Если поле является обязательным, сделайте это очевидным! В книге The Anatomy of Accessible Forms описаны альтернативные варианты указания обязательных полей. Если большинство полей в форме являются обязательными, то, возможно, лучше указать необязательные поля.

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

Ресурсы¶

Источник — Design basics