- Статьи
- 3 мин на чтение
- 18
Делаем поля формы адаптивными с помощью двухколоночной сетки
Дизайн формы под мобильные экраны
Одна из самых важным проблем, связанная с удобством использования форм — отсутствие адаптивности под размеры мобильных экранов. Пользователи лишь частично видят поля, а остальное обрезается краем экрана. Разумеется, это не самый приятный опыт при заполнении формы.
С помощью двухколоночной сетки в форме вы сможете предоставить пользователям полный обзор каждого поля на всех устройствах. Эта сетка хорошо делится и позволяет легко разместить все поля на мобильном экране.
Почему две колонки
Оптимальное количество колонок — две, потому что в большинстве форм есть поля, близкие по смыслу. Например, Имя (First Name) и Фамилия (Last Name) связаны между собой. Поэтому их лучше размещать рядом друг с другом, чтобы пользователи могли сразу увидеть эту связь, сканируя форму по горизонтали.
Другие примеры связанных данных — поле Почтовый индекс (Postal Code), Город (City) и Штат (State). Поскольку люди привыкли видеть их в логической связке, важно объединить их в одной строке. Поля для ввода даты рождения (месяц, день и год) — тоже связанные данные, которые логично расположить рядом.
Блоки полей
В десктопных версиях двухколоночная сетка состоит из двух колонок и трёх межколонников. В мобильных интерфейсах она включает одну колонку и два межколонника. В колонке поля аккуратно расположены друг над другом, сохраняя правильные интервалы.
В каждой колонке есть блоки полей, которые занимают всю её ширину. Базовый блок поля может ограничиться левым краем или свернуться в одну колонку при изменении размера экрана.
Блоки полей также могут растягиваться и сжиматься. Например, в десктопной версии поле Адрес электронной почты (Email Address) занимает две колонки. Однако на мобильных экранах превращается в одну.
Кроме того, каждый блок можно разделить на два поля с межколонником между ними. Это позволяет сэкономить место в ширину в случае полей с коротким вводом и объединить связанные данные в одной колонке.
Обратите внимание, как поля Город (City) и Штат (State) делят блок поля. Поля для ввода дня и года рождения также разделены в рамках одного блока. В результате эти поля всегда будут расположены горизонтально и выглядеть как близкая пара.
При выборе типа блока поля для данных ориентируйтесь на следующее:
• Если текст ввода длинный, используйте растянутый блок поля
• Если текст ввода короткий, делите блок поля
• Если длина ввода средняя, применяйте базовый блок поля
Место для сообщений об ошибках
Ещё одна особенность этой сетки — наличие места для сообщений об ошибках. Под каждым блоком поля расположена горизонтальная пустая строка, которая всегда больше вертикального межколонника. Это предотвращает резкое растяжение и сдвиг макета при появлении сообщений об ошибках.
В примере вы видите вертикальные межколонники, равные 18 пикселям, и горизонтальные пустые строки, равные 24 пикселям. Большие горизонтальные пустые строки позволяют размещать сообщения об ошибках под каждым полем. Каждое сообщение об ошибке должно занимать всю ширину блока поля. Если текст длиннее ширины поля, его следует переносить на следующую строку.
У адаптивной двухколоночной сетки есть множество преимуществ. Прежде всего, она значительно упрощает изменение размеров и группировку полей. Используйте эту сетку при проектировании формы, чтобы создать для пользователей последовательный и приятный опыт взаимодействия на любых устройствах.
Перевод статьи This 2-Column Grid Will Make Your Form Fields Responsive из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
