- Статьи
- 4 мин на чтение
- 17
8 правил для переноса названия поля внутрь поля и его выравнивания по верхнему краю
Будущее полей формы
В формах вы выравниваете названия полей по левому или верхнему краю? Если да, то вы лишаете пользователей лучшего опыта взаимодействия. Названия, выровненные по левому и верхнему краю, провоцируют большее количество фиксаций и перемещений взгляда. Другими словами, они замедляют и затрудняют процесс сканирования информации.
Будет гораздо лучше, если вы перенесёте названия полей внутрь поля и выровняете их по верхнему краю. Близкое расположение названия поля и текста ввода создаёт более тесную взаимосвязь. Обводка поля объединяет текстовые элементы и тем самым чётче группирует данные.
Поэтому, чтобы оптимизировать сканирование для пользователей, дизайнерам стоит перенести названия полей внутрь и выравнивать их по верхнему краю поля. Однако без каких-либо рекомендаций это сделать не так просто. Возникает множество вопросов относительно правильного выбора размеров и отступов между элементами поля. В этой статье мы рассмотрим восемь правил, которые помогут безболезненно осуществить этот перенос.
1. Высота текстового поля должна составлять 60px
Оптимальная высота текстовых полей составляет ровно 60px, не больше и не меньше. При такой высоте вокруг названия поля и текста ввода останется достаточно свободного пространства. Если высота будет меньше 60px, то названию поля и тексту ввода будет слишком тесно внутри поля.
2. Вертикальный отступ между элементами текстового поля равен 12px
Отделите название поля от текста ввода с помощью вертикального отступа между текстовыми элементами. В противном случае текст будет сливаться, что приведёт к тому, что пользователю будет трудно различать текстовые элементы.
3. Все внутренние отступы текстового поля равны 12px
Размер всех внутренних отступов, которые окружают текстовые элементы внутри поля, должен быть равен 12px. Неравномерные внутренние отступы приведут к тому, что название поля и текст ввода будут выглядеть странно и непоследовательно.
4. Обводка текстового поля серая, а её размер равен 2px
Слабовидящие пользователи не увидят поля с обычной серой обводкой размером в 1px, а чёрная обводка слишком контрастная. Поэтому гораздо лучше использовать обводку, размер которой равен 2px, и выбрать для неё серый цвет. В таком случае все пользователи увидят её, и она не будет отвлекать внимание от текста.
5. Жирным должен быть текст ввода, а не название поля
Ввод данных для пользователя важнее, чем название поля, поскольку именно на этот текст он будет ориентироваться, когда ему понадобится отредактировать поле. Поэтому используйте начертание bold для текста ввода, а не для названия поля.
6. Размер шрифта для текста ввода равен 16px
Размер шрифта для текста ввода должен быть равен не менее 16px. Если он меньше этого значения, то когда пользователь будет выбирать поля ввода, мобильные браузеры будут увеличивать его масштаб. Увеличение масштаба может привести к тому, что они будут видеть только левую часть формы.
7. Размер шрифта для названия поля меньше на два пункта
Когда размеры шрифтов для названия поля и текста ввода одинаковые, пользователям трудно их различать. Размер шрифта для названия поля должен быть на два пункта меньше, чем размер шрифта для текста ввода.
8. Текст ввода — чёрный, а название поля — серое
Пользователи с большей вероятностью введут неверный текст, если им будет трудно его прочитать. Поэтому текст ввода должен хорошо контрастировать по цвету и быть чёрным, а не серым.
Сравнение вариантов выравнивания для названия поля
После применения всех восьми правил к текстовым полям вы заметите большую разницу в наглядности при использовании названий полей, которые находятся внутри поля и выровнены по его верхнему краю.
• Текст ввода легче сканировать, не отвлекаясь на визуальные эффекты
• Название поля легче отличить от текста ввода
• Обводки каждого текстового поля легко различимы
• Каждое текстовое поле легко выделить
• Каждая группировка данных понятна
У вас есть всё необходимое для переноса названия поля внутрь и его выравнивания по верхнему краю. На дворе 2023 год. Пришло время оставить в прошлом выравнивания названий полей по левому и верхнему краям и подумать о будущем.
Перевод статьи 8 Rules for Switching to Infield Top-Aligned Form Labels из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
