Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
сервис динамического ремаркетинга
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
29
Эбиа

Эбиа

www.ebia.ru

24
Enlite

Enlite

enlited.ru

21
YAGLA

YAGLA

yagla.ru

15
Cookiezz

Cookiezz

cookiezz.com.ua

15
likearea

likearea

smm.li

15
SE Ranking

SE Ranking

seranking.ru

11
Relap

Relap

relap.io

11
Perezvoni.com

Perezvoni.com

perezvoni.com

11
Venyoo

Venyoo

venyoo.ru

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

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

332 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
Material Design хорошо подходит для верстки сложных enterprise форм

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