Главное Свежее Вакансии Образование
Выбор редакции:
1 733 1 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Приемы верстки сложных форм

Как сверстать сложную форму, чтобы она была лаконичной и интуитивно понятной? Рассмотрим в статье несколько приемов.

Павел Моисеенко — системный аналитик проектов reEnter и Releadgion.

Хотим раскрыть несколько приемов, которые он использует при работе с длинными формами. Эти приемы помогают сделать форму аккуратнее.

1. Форма читается как связное предложение. Такой подход помогает быстрее считывать содержимое. Еще это хорошо для порядка — все поля формы устроены одинаково.

b_57174148aadd7.jpgЕсли пункт начинается с предлога, пишем его с маленькой буквы

Усложним. Добавим инпут:

b_57174148e7f04.jpg

Еще усложним. Добавим вложенность:

b_5717414933bfc.jpgЗаголовок «Интересы» объединяет все пункты формы

Такую форму можно наращивать слой за слоем. Крепкая конструкция выдержит.

Запутанные формулировки — частая беда форм. Антипример:

b_571741497a0cd.jpgТри раза сказали одно и то же, но понятнее не стало. Гугл Эдвордз

b_57174149b2412.jpgРасплывчатая подпись к чекбоксу дезориентирует. Что произойдет по нажатию? Букинг

Вариант Павла:b_57174149e221d.jpg

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

b_5717414a290c0.jpgФормулировка начинается с действия (показать, расширить, указать, исключить)

Свитч-переключатель — это тот же чекбокс:b_571741eb91f49.jpg

3. По дефолту предзаполнены максимально широкие настройки. Протыкивая форму, человек уточняет параметры. Такую форму, вообще, можно не заполнять, если человек согласен с дефолтной настройкой.b_5717414a60da7.jpgМаксимально широкая настройка по дефолту. Если человеку надо, он уточнит пол и возраст

По похожему принципу устроены настройки на Маке:

b_5717414ab5ce3.jpgВсе уже нормально работает, но, если надо, можно уточнить настройку

Прием работает не во всех предметных сферах.

4. Чередование ритма. Эстетически мне нравится сбивать ритм однообразных чекбоксов и радиобатонов нестандартным контролом. Чтобы выделение было осмысленно, нужно взять наиболее важный пункт.

b_5717414b2235e.jpgСпособ траты бюджета — важная опция. От нее существенно зависит ход рекламной кампании. Поэтому выделяем контролы выбора (по логике — это обычный радиобатон) и пишем подсказки

Какие знаете примеры хорошо сделанных форм?

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
kmmbvnr 38459
Material Design хорошо подходит для верстки сложных enterprise форм

http://forms.viewflow.io/demo/bank/
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.