Павел Моисеенко

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

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

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

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

Еще усложним. Добавим вложенность:
Group7@2x
Заголовок «Интересы» объединяет все пункты формы

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

Запутанные формулировки — частая беда форм. Антипример:
Снимок экрана 2016-03-28 в 13.02.19
Три раза сказали одно и то же, но понятнее не стало. Гугл Эдвордз

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

Мой вариант:
booking_form_after

2. Управляющие элементы скрыты пока не нажат чекбокс. Удобно когда надо спрятать необязательные функции.
screencast 2016-03-24 00-19-09
Формулировка начинается с действия (показать, расширить, указать, исключить)

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

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

По похожему принципу устроены настройки на Маке:
macos_setting
Все уже нормально работает, но, если надо, можно уточнить настройку

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

4. Чередование ритма. Эстетически мне нравится сбивать ритм однообразных чекбоксов и радиобатонов нестандартным контролом. Чтобы выделение было осмысленно, нужно взять наиболее важный пункт.
Group3@2x
Способ траты бюджета — важная опция. От нее существенно зависит ход рекламной кампании. Поэтому выделяем контролы выбора (по логике — это обычный радиобатон) и пишем подсказки

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

Поделиться
Отправить

  • В пункте два лучше показывать необязательные функции сразу, но в задизейбленном виде. Так пользователь сразу увидит, доступ к каким функциям он получит.

    • Павел

      Иногда имеет смысл, иногда нет. Если из формулировки ясно какие там внутри функции — можно смело скрыть их.

      • яугы

        согласен с Гусевым. Все поля должны быть видны.
        А в конкретно приведенном примере с датой вообще галка не нужна — пусть программер не ленится и определяет по заполненности полей.

        и что за дурак придумал сочинения на форме писать: слева от поля, над полем и в самом поле — если нужно пояснение — напишите его над полем в label и не нужно придумывать названия полей. Кто вообще читать будет «многА букАв нИАсилил»

        ох уж эти яндексоидные хипстеры в колготочках цветастых

        • Tirex

          а опишите максимальные атрибуты cell и минимальные?

        • GeFFest

          Согласен. К тому же, засовывать важную информацию в плейсхолдер — это вообще плохая идея. Если в дизайне предусмотрен текст в лейбле, то лучше вообще отказаться от плейсхолдера. Потому что текст в плейсхолдере пропадает, если инпут заполнен. А если человек начал заполнять форму, потом пошел пить кофе, вернулся, он может уже и не вспомнить, что там было в плейсхолдере. И что, ему, видимо придется вырезать текст, прочитать ваше важное пояснение и потом вставить текст обратно?

  • Я считаю, что прыгающие формы — зло.
    Интерфейс не должен меняться под курсором или пальцем пользователя.

  • Долго ломали голову над формой «выбора кусов на сайте образовательной платформы». Кажется вышло неплохо… что думаете? https://level90.net/flows/choose

    • Павел

      А где форма? Вижу только регистрацию

    • Марат

      Картинку на заднем фоне лучше бы оптимизировали, совсем о пользователях не думаете. А то заходишь на форму посмотреть а тебе картинка под 2 метра грузиться

  • Pingback: Идеальная форма для сайта. (чеклист) — Маленький блог()