Как лучше разместит чекбокс в форме?

Question

[Григорий Перетяка]

Вид формы, где подпись находится слева, а инпут справа. Как в такой форме размещать чекбокс?


Варианты, которые я смог выделить:

Вариант №1:


Используется повсеместно, в том числе и на сайте Гугла. Существенный минус — чекбокс кажется контекстно привязанным к предыдущему полю, а это не всегда так.

Вариант №2:


Выглядит аккуратно и ход вполне логичный. Но расположение подписи слева меня сильно смущает.

Вариант №3:


Рушится сетка, потому выглядит грязно.

Вариант №4:


Все хорошо, но интерфейс становится перегруженным, вместо лаконичного чекбокса — два радио с подписями. Возможно, субъективно: у меня всплывает ассоциация с перегруженными формами, накиданными на Delphi, было писком моды в 90-е :)

Нужен ваш совет:

Каким из минусов, можно пренебречь? Или есть и другие, бескомпромисные варианты?


П.С.

Сферическая форма в вакууме, будет применяется повсеместно в интерфейсе, так что, схитрить и упразднить чекбокс либо заменить его чем-то не выйдет. Не стоит рассчитывать и на то, что чекбокс всегда будет стоять после названия (с натяжкой контекстно подходит).

UPD:

Просмотрел формы из портфолио Лебедева, нашел такой вариант, пускай будет вариант №5:


Мне кажется, что-то в этом есть, что скажете?

Answer 1

[Григорий Перетяка]

Подведу итог:

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

Во-вторых, я думаю, что третий вариант будет смотреться лучше, если подписи будут выровнены по левой стороне.

В-третьих, если вы используете первый вариант, то можно вынести все чекбоксы в один или несколько блоков и оделить их горизонтальной линией или другим фоном, так они не будут сливаться с предыдущем полем. Хотя, на мой взгляд, это сделает форму тяжелей для восприятия.

Я остановился на 2-м варианте, без двоеточий. Рекомендовать этот вариант не могу, рассматривайте вопрос как набор вариантов.

Благодарность Riateche за самый содержательный и вдумчивый ответ.
Еще несколько идей от tick. Я не считаю их хорошими, и объяснил почему в обсуждении этого ответа, но человек старался, возможно вам они придутся по душе.

Answer 2

[girichev]

Первый вариант: элементы управления находятся на одной линии, можно ещё выбор поместить последним.

Comments

[girichev]

И да, уберите кнопку «Закрыть» внизу формы.

[Григорий Перетяка]

Не всегда возможно поместить последним, однако большинство форм с первым вариантом, именно так и делали. Голос за вариант №1 засчитан :)

И да, уберите кнопку «Закрыть» внизу формы.

Это демо-кнопки, а так, они назначаются программистом в каждой конкретной форме. И это не модальное окно, так что что-то вроде кнопки закрыть вполне уместно. Значение этих кнопок: «Сохранить и закрыть», «Отменить и закрыть». Но это пока накидано как получилось, я еще не разбирал это место и к линчу не готов :)

Answer 3

[Riateche]

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

Четвертый вариант ничем не лучше второго. Только надписи «да» и «нет» делают ситуацию еще больше похожей на вопрос. Двоеточие здесь явно неуместно, здесь просится вопросительный знак: «Выделить в списке? Да». В принципе, второй и четвертый вариант имеют право на жизнь, но с точки зрения русского языка выглядят неуклюже (не знаю, что насчет других языков).

Третий вариант, на мой взгляд, наиболее неудачен.

Comments

[Григорий Перетяка]

Да, не по-русски получается, очень уместное замечание: еще один звоночек, что логика нарушена. Попробую еще подумать с позиции формирования предложения, часто помогает найти новые удачные решения, я забыл про этот метод, спасибо что напомнили.

Чтобы чекбокс не казался относящимся к предыдущему полю, нужно увеличить расстояние между строками, либо отделить строки друг от друга горизонтальными линиями.

Пробовал:

Отступы не помогают, подпись слева смотрится как начало раздела, и не зависимо от отступов раздел продолжается до следующей подписи.

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

Answer 4

[Lakewake]

Мне кажется второй вариант оптимален — чекбокс четко отделен

Comments

[Lakewake]

ой, имел ввиду вариант №1

[Григорий Перетяка]

Да, не зря этот вариант популярен, но есть недостаток.

Answer 5

[sdevalex]

Можно визуально «объединить» название товара и чекбокс… тип такого… сори за карявость, фотошоп под вайном захотел запускаться.


Либо можно перенести чекбокс в зону кнопок слева.

Comments

[Григорий Перетяка]

Нужно сделать как раз совсем наоборот :)
Что бы чекбокс не казался объединенным с предыдущим инпутом.

Answer 6

[Milfgard]

А можно сделать окно шире и поставить чекбокс из варианта №1 в строку после дроплиста выбора товара?

Comments

[Григорий Перетяка]

Боюсь не совсем вас понял, по вашему описанию у меню получилось вот это:
habrastorage.org/storage1/0fee0af0/233e4e5c/4c396de1/4301b69a.png

Answer 7

[insanex]

Первый вариант или habrastorage.org/storage1/0fee0af0/233e4e5c/4c396de1/4301b69a.png

тут еще много разных форм for inspiration patterntap.com/tap/collection/8/1/90

Comments

[Григорий Перетяка]

Первый вариант или habrastorage.org/storage1/0fee0af0/233e4e5c/4c396de1/4301b69a.png

Да ну, это если наоборот нужно привязать чекбокс к какому-нибудь полю, а задача сделать совершенно наоборот: что бы чекбокс не казался привязанным к предыдущему полю.

тут еще много разных форм for inspiration patterntap.com/tap/collection/8/1/90

Для данного случая ничего не нашел, но полистать в образовательных целях очень даже полезно, спасибо.

Answer 8

[MikhailEdoshin]

Попробуйте поместить подписи над полями.

Comments

[Григорий Перетяка]

Это очевидный вариант, но «хотелось бы получить именно такую компактную, легкую для восприятия форму».

Answer 9

[simplecode]

Вариант 2. Хотя можно еще 1 или 4.

Answer 10

[Искандер Гиниятуллин]

Мне нравится вариант 4 и мы стараемся использовать его на наших проектах.

Да, может выглядит тяжеловато, зато обеспечивает 100% понимание пользователем.

Comments

[Григорий Перетяка]

Не знаю, чекбокс классический и широко используемый элемент интерфейса, не думаю, что у кого-то могут возникнуть проблемы с пониманием значения галочки или ее отсутствия. Вы с таким сталкивались? С какой ЦА, если не секрет?

Answer 11

[lodar]

Чекбокс не нужен

Comments

[Григорий Перетяка]

Это значит, что вы за вариант №4? Или у вас свой вариант? Или вы считаете, что чекбокс всегда можно заменить другим элементом? Или ...?

Это я так «тонко» намекаю, что не мешало бы поподробнее расписать.

Answer 12

[tick]

А такой вариант не хотите?


i30.fastpic.ru/big/2011/1115/75/a3ca8e91d8094e93f3e09b9695759e75.jpg

Comments

[Григорий Перетяка]

«Это очевидный вариант, но «хотелось бы получить именно такую компактную, легкую для восприятия форму».

[tick]

тогда вар. 2 или 4, по вкусу.
хотя на мой вкус, надписи вверху — это тоже компактно и легко. к тому же есть место для манёвра — можно расширить поля ввода и дропбокса до краев окна.

[tick]

еще вариант

[Григорий Перетяка]

Нет и не делайте так, пожалуйста :)

Это уместно разве что в форме поиска и то, если там рядом лупа нарисована.

Answer 13

[somneart]

Обязательно первый вариант, и чекбокс по возможности в конец списка