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

Question

[pqgg7nwkd4]

Предлагаю высказать свое мнение о расположении полей формы и подписей к ним. Плюсы, минусы, опыт. Какие больше нравится использовать, какие больше нравится делать.

4 варианта.

Первый: "Подписи слева"

.         __________________________
Имя:     |__________________________|
          __________________________
Фамилия: |__________________________|
          _____________________________
О себе:  |                             |
         |                             |
         |                             |
         |_____________________________|

Второй: "Подписи слева, выравнивание подписей справа"

.         __________________________
    Имя: |__________________________|
          __________________________
Фамилия: |__________________________|
          _____________________________
 О себе: |                             |
         |                             |
         |                             |
         |_____________________________|

Третий: "Подписи сверху, в одну колонку"

._Имя:_____________________
|__________________________|

 _Фамилия:_________________
|__________________________|

 _О себе:_______________________
|                               |
|                               |
|                               |
|_______________________________|

Четвертый: "Подписи сверху, плиткой"

._Имя:____________     _Фамилия:________
|_________________|   |_________________|

 _О себе:_______________________________
|                                       |
|                                       |
|                                       |
|                                       |
|_______________________________________|

Ваш вариант.

А также, в том же ключе поделитесь о методе отображать ошибки в полях ввода: как больше нравится пользоваться, как делаете.

Спасибо.

Answer 1

[Rou1997]

Если именно "Имя" - "Фамилия" - "О себе", то лучше 4 так как фамилия и имя - "семантически" единое целое, но в иных случаях лучше 3, он более гибкий, позволяет обеспечить любую длину надписей, да и проще он, не надо думать о контейнере, просто br, br, br - и готово. :)
А если выбирать между 1 и 2, то зависит от выравнивания (центр = 2) и от того сколько строчек (2 предотвращает путаницу глазами строчек с надписями).
Вывод: зависит от задачи, от того что вокруг формы, а в идеале надо иметь инструмент (компонент типа "layout manager"), который позволит быстро менять варианты.

По ошибкам, самый удобный - 3, можно и справа их выводить и сверху и снизу, а самый неудобный - 4, но если из практики, то поле "О себе" не должно проходить вообще никакую валидацию и не должно быть обязательным, "Имя" и "Фамилия" минимальную, так что в данном случае ошибок почти и не будет.

Answer 2

[tnc4401]

Всегда по-разному. Поищи хорошие статьи по юзабилити форм. Как правило лучше всего работает вариант 2 (глаза скользят ровно вниз по линии, заполняя формы и находя внизу кнопку отправить).
Если названия полей разнообразные по длине - можно использовать вариант 1 (глаза скользят елочкой, но нет проблем с непредказуемо-длинными полями)

В андроиде (узкий и длинный экран) - работает вариант 3.
Форма внизу сайта - вариант 4 смотрится аккуратнее (но юзабилити не повышает).

Веб, админка - выбирай надежный вариант 1.
Знаешь примерно размер полей, длинная форма заказа товара (как в интернет-магазине) - выбирай вариант 2.