Это перевод статьи Адама Сильвера — «Always use a label».
Это перевод статьи Адама Сильвера — «Always use a label»
Иногда дизайнеры слишком сильно упрощают форму, убирая подпись к полю (примечание переводчика: здесь и далее имеется в виду тег label). Проблема в том, что минимализм не всегда означает простоту в использовании, а это, безусловно, и происходит с подписями.
На самом деле, подпись к полю является важной частью для создания лёгких в использовании форм. Вот почему:
1) Зрячие пользователи смогут видеть инструкции и будут знать, что делать. Без подписей к полям в лучшем случае это будет сложно.
2) Незрячие пользователи смогут **услышать инструкции** благодаря использованию скринридеров. Без подписей к полям это будет невозможно.
3) Пользователи с моторными нарушениями смогут легче найти и активировать элементы с помощью мышки или пальца благодаря увеличению размеров активной области. Это происходит потому, что клик и нажатие пальцем по подписи работает так, будто пользователь кликнул по самому элементу управления.
Но для меню выбора вида/размера/цвета/количества не нужны подписи, не так ли?
Нужны, и, к сожалению, довольно часто подписей нет в формах выбора товаров. ASOS страдает этой проблемой, как вы видите.
Вместо подписей здесь используется первое значение из раскрывающегося списка. Пока значение не выбрано это допустимо для хорошо видящих пользователей, но создаёт трудности для пользователей с нарушением зрения или моторных функций. Если значение выбрано, как в примере выше с выбором цвета, сложности возникают уже у всех типов пользователей.
House of Fraser показывает подпись к раскрывающемуся списку выбора количества вещей, улучшая удобство использования всем пользователям.
Простая форма поиска не нуждается в подписях, не так ли?
Нуждается, но, к сожалению, формы поиска часто разрабатываются без подписей. В качестве примера можно посмотреть на Selfridges.
Чтобы объяснить назначение формы, вместо подписи здесь используется подсказка для поля и кнопка отправки (иконка лупы). Но это чересчур сложно для использования людьми с ограниченными возможностями — и, конечно — подсказки полей не должны использоваться как замена подписям.
Smashing Magazine показывает, как использование подписей может быть красивым и функциональным одновременно.
Итог
Использование подписей к полям может нести дополнительные сложности в дизайне, но уход от этих проблем — это не решение. Принимайте этот вызов, и не стоит чересчур упрощать. И конечно, всегда используйте тег label.