Веб-формы «Светофор»

[kvladimir]

надо попробовать в действии и желательно на большой форме, тогда будет понятней

[unquaker]

Сама идея унификации — хорошая, но вот деление на 3 цвета сильно напрягает.
Лично у меня сразу возникли вопросы по тому, какой и за что отвечает.

Можно было бы делать все зелеными, а когда переходишь в какое-то поле, о делать его желтым. как только ты ошибся — поле красное

предложенный вами вариант мне показался сложным для восприятия большинством людей

[zencd]

И мне это очень сложно воспринимать (последнюю картинку). Этот светофор настолько «выпирает» что моск задумывается о его природе даже если в этом нет необходимости.

По-моему стандартные значки («*», привычней не бывает) справа от полей — вполне себе хорошее решение, и никакой дизайн не попортит:

Email:    [email    ] v
Password: [         ] *
Name:     [         ]

Хотя для демонстрации ошибки ввода, красный фон я бы и рассмотрел. Но только его.

[Nikolay_Smeh]

Заливку, во всех случаях, имеет смысл сменить на обводку.

[zencd]

Обводка уже используется системой: по-крайней мере Сафари и Хром подсвечивают так текущее поле ввода. Каша, наверное, получится если их совместить.

[ska_zochnik]

ничего нового.

[ugarov]

Думаю, что будет достаточно красного, зеленого и серого

[zaartix]

а мне нравится так как предложил автор

[hornet]

и мне

[Ueasley]

Использовал только красную подсветку полей, надо остальные попробовать…

[alexrum]

Не надо пробовать. За всеми этими цветастыми фонами пользователь забудет, зачем он здесь оказался. Это как в типографике/дизайне — не надо использовать все доступные шрифты, выберите один-два, будет намного удобней для восприятия и профессиональней.

[rumkin]

Когда я всё ввёл правильно я тоже хочу об этом знать, чтобы не париться. Цветовое деление — самое выгодное, по-моему!

[Splurov]

Для этого давно придумали «галочки» справа от полей :-)

[haik_vm]

Хорошая идея. Но мне кажется что изначально раскрашивать в два цвета это не очень хорошая затея… В большой форме может быть почти через одно — обязательное/необязательное. И вся форма будет очень пестрая. Мне кажется что обязательные поля стоит оставлять со красными звездочками.
А остальное хорошо — при неправильном вводе перекрашивать в красный. При правильном вводе перекрашивать в зеленый. Т. е. по ходу заполнения формы она вся станет зеленой, что скажет пользователю что он прав.

[onthefly]

Превосходный концепт!

Слегка озадачила фраза «но даже Internet Explorer 7 не разрешает...», но это мелочи.

[onthefly]

Поймал себя на мысли, что ваше необязательной поле похоже на неативное. Может, стоит ограничиться белым фоном?

[Treg]

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

[PIT]

Психодел какой-то, представьте как такие формы детсадовских цветов будут выглядеть на серьёзном ресурсе.

Не стоит просто размещать бесполезных форм, только по делу и самое необходимое — тогда нет нужды помечать цветом обязательные для заполнения формы. А невалидным формам достаточно красной обводки, однако у себя на проекте добавил ещё и описание ошибки, т. к. формы расчитаны на работу с широкой аудиторией:

[VasilioRuzanni]

Вопрос отнюдь не в «детсадовости», а именно в сложности восприятия — разнообразие цветов может заслонить собою смысл того, ради чего пользователь вообще работает с формой.

[rumkin]

А причём тут серьёзность ресурса и цветовое деление? В данном примере цвета очень даже спокойные и мягкие и не будут восприниматься негативно!

[VasilioRuzanni]

Согласен, сами цвета вообще здорово подобраны.

[denver]

> Заголовок новости (Введите заголовок новости)

Зачем тут дублирование, все равно ясно к какому полю относится. Эдак можно вообще сделать стандартный шаблон «введите %s» и не мучаться :) А раз уж взялись писать отдельно, то почему бы не помочь советом несколько более НЕочевидым (например «Это обязательное поле» или «Нужен минимум один исполнитель чтобы завершить задачу» и т. д.), что-то что пользователь не знает (глядя на вашу изначальную форму), а не примитивно намекать ему что он не догадался о чем надо сам.

ЗЫ. А вообще, лично меня формы (обычные печатные), в которых изначально не помечены важные поля, повергают в летаргический сон :)

[k_s]

Это уже года 2-3 минимум используется. Возьмите даже какой-нибудь валидатор форм для jQuery, там будут те же цвета, так что я не пойму в чем идея. Еще часто что-бы не делать новогоднюю елку из полей рядом с каждым полем просто показывают зеленую/красную иконки.

[k_s]

Ну или вот как выше, меняют цвет только рамки.

[shiko_1st]

«но даже Internet Explorer 7 не разрешает расставлять какие-либо стили на свои любимые select'ы»

Я Вам более скажу — модифицировать внешний вид оных (если это ниспадающий список) при помощи win32api также почти невозможно (например, штатным средством убрать бордюр) :-)

[Xelaan]

Это баг IE, f связано это с нативной отрисовкой этого элемента управления.

[sgolubev]

Решение интересное, но совершенно не пригодно для людей с нарушенным восприятем цвета. Accessibility формы нарушено.

Давайте добавим небольшие иконки справа от полей ввода. Скажем, валидные поля — галочка, неправильные — крестик, изначальные можно обозначить звёздочкой.

[rumkin]

Про нарушение восприятия вы правы. А иконки можно добавлять и внутрь поля для наглядности!

[Axelerator]

«Не пригодно для людей с нарушенным восприятем цвета» — а также для собак :)

[sgolubev]

Не в тему, тем не менее «хабра-гав-гав» вам! :0)

[egorinsk]

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

Могу кстати предложить от себя идею выводить сначала обязательные поля, и отдельно — необязательные, если это не противоречит логике заполнения (например, имя и фамилию разносить не стоит)

[acy]

У меня сайте давно такое используется в несколько упрощенной форме, без подсказок:
Пролистай в самый низ

[acy]

Мда, пропала ссылка: moiklimat.ru/index.php?page=faq

[zerkms]

при невалидном емейле не нужно показывать кнопку отправить
а так — симпатично, понравилось

[no_smoking]

Почему то поле E-mail подсвечивается красным если там пусто, ведь это поле не обязательное.

[rumkin]

Добавьте ещё один пример с текстом для наглядности!

[Irokez]

не светофор, а венигрет

[denver]

С серым цветом вы или умолчали, или недодумали. Иногда и его нужно валидировать (e.g. icq). В этом случае он тоже станет например красным и смешается с другими красными. В итоге пользователь будет чувствовать себя дураком забыв какие поля обязательные, а какие нет.

[mrt]

если бы Вы были хорошим дизайнером, то неприменно знали бы о том, что:

«вся важная текстовая и графическая информация должна оставаться понятной при просмотре без цвета»
www.w3.org/TR/WCAG10/wai-pageauth.html#gl-color

[Gunger]

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

[Infidel]

В DokuWiki применяется подобный подход. Частично.

Например, при редактировании страницы необязательное (но очень желательное!) поле описания сути правок — красное, если пустое. Ни к чему не обязывает, но хорошо цепляет глаз.

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

[copenhagen]

По-моему, у Usethics был вариант получше. Там индикаторы стояли слева от поля (такие вертикальные прямоугольники). Если поле требовалось заполнить — они были желтыми. Если поле заполнялось правильно, индикаторы гасли. Если неправильно — загорался красный цвет.

[mrTempl]

Жутко удобно! перешёл в поле — обводка, не верно заполнил — красным.
Сейчас всем своим клиентам делаю. И кодерам дал команду, чтобы делали по умолчанию уже такие формы.
В phpBB3 это очень хорошо реализованно. Мне нравиться. Это действительно удобно.

[Fade]

Уже пару лет Uni-Form предлагают готовый CSS/JS-framework для создания «правильных» форм

[Lordneo]

Убираете одно не обязательное поле и ничего городить не надо.

[Throwable]

Почему у Вас поле «пароль» было желтым, а при проверке на валидацию становится белым?

[psyche]

Желтый цвет ворнинга убрать, звездочки на поле понятнее. Оставить только зеленый и красный, но или делать обводку полей или действительно, как в случае со светофором сделать после текстового поля аля лампочку, которая бы сигнализировала о результате верификации:)

[egorinsk]

А еще убрать зеленый, незачем лишние сложности городить