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

Битрикс24

www.bitrix24.ru

30
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Логомашина

Логомашина

logomachine.ru

11
Devicerra

Devicerra

devicerra.com

11
Flowlu

Flowlu

flowlu.ru

10
GIFTD

GIFTD

giftd.tech

9
Aword

Aword

Приложение для изучения английских слов

9
ADN Digital Studio

ADN Digital Studio

adn.agency

9
Eczo.bike

Eczo.bike

www.eczo.bike

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

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

313 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/
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать