Это перевод статьи Адама Сильвера — «Always use a label».

Это перевод статьи Адама Сильвера — «Always use a label»

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

На самом деле, подпись к полю является важной частью для создания лёгких в использовании форм. Вот почему:

1) Зрячие пользователи смогут видеть инструкции и будут знать, что делать. Без подписей к полям в лучшем случае это будет сложно.

Подпись к полю помогает зрячим пользователям понять, что нужно вводить

2) Незрячие пользователи смогут **услышать инструкции** благодаря использованию скринридеров. Без подписей к полям это будет невозможно.

Поле «Username» доступно для чтения скринридерами

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

Большая площадь поля помогает пользователям с моторными нарушениями активировать элемент

Но для меню выбора вида/размера/цвета/количества не нужны подписи, не так ли?

Нужны, и, к сожалению, довольно часто подписей нет в формах выбора товаров. ASOS страдает этой проблемой, как вы видите.

Форма выбора товаров на ASOS пренебрегает подписями у раскрывающихся списков

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

House of Fraser показывает подпись к раскрывающемуся списку выбора количества вещей, улучшая удобство использования всем пользователям.

House of Fraser имеет подпись у поля с выбором количества вещей

Простая форма поиска не нуждается в подписях, не так ли?

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

Форма поиска Selfridges пренебрегает подписью к полю

Чтобы объяснить назначение формы, вместо подписи здесь используется подсказка для поля и кнопка отправки (иконка лупы). Но это чересчур сложно для использования людьми с ограниченными возможностями — и, конечно — подсказки полей не должны использоваться как замена подписям.

Smashing Magazine показывает, как использование подписей может быть красивым и функциональным одновременно.

Форма поиска Smashing Magazine использует подпись у поля

Итог

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