Comments 50
надо попробовать в действии и желательно на большой форме, тогда будет понятней
Сама идея унификации — хорошая, но вот деление на 3 цвета сильно напрягает.
Лично у меня сразу возникли вопросы по тому, какой и за что отвечает.
Можно было бы делать все зелеными, а когда переходишь в какое-то поле, о делать его желтым. как только ты ошибся — поле красное
предложенный вами вариант мне показался сложным для восприятия большинством людей
Лично у меня сразу возникли вопросы по тому, какой и за что отвечает.
Можно было бы делать все зелеными, а когда переходишь в какое-то поле, о делать его желтым. как только ты ошибся — поле красное
предложенный вами вариант мне показался сложным для восприятия большинством людей
И мне это очень сложно воспринимать (последнюю картинку). Этот светофор настолько «выпирает» что моск задумывается о его природе даже если в этом нет необходимости.
По-моему стандартные значки («*», привычней не бывает) справа от полей — вполне себе хорошее решение, и никакой дизайн не попортит:
Хотя для демонстрации ошибки ввода, красный фон я бы и рассмотрел. Но только его.
По-моему стандартные значки («*», привычней не бывает) справа от полей — вполне себе хорошее решение, и никакой дизайн не попортит:
Email: [email ] v Password: [ ] * Name: [ ]
Хотя для демонстрации ошибки ввода, красный фон я бы и рассмотрел. Но только его.
UFO just landed and posted this here
Заливку, во всех случаях, имеет смысл сменить на обводку.
ничего нового.
Думаю, что будет достаточно красного, зеленого и серого
а мне нравится так как предложил автор
Использовал только красную подсветку полей, надо остальные попробовать…
Хорошая идея. Но мне кажется что изначально раскрашивать в два цвета это не очень хорошая затея… В большой форме может быть почти через одно — обязательное/необязательное. И вся форма будет очень пестрая. Мне кажется что обязательные поля стоит оставлять со красными звездочками.
А остальное хорошо — при неправильном вводе перекрашивать в красный. При правильном вводе перекрашивать в зеленый. Т. е. по ходу заполнения формы она вся станет зеленой, что скажет пользователю что он прав.
А остальное хорошо — при неправильном вводе перекрашивать в красный. При правильном вводе перекрашивать в зеленый. Т. е. по ходу заполнения формы она вся станет зеленой, что скажет пользователю что он прав.
Превосходный концепт!
Слегка озадачила фраза «но даже Internet Explorer 7 не разрешает...», но это мелочи.
Слегка озадачила фраза «но даже Internet Explorer 7 не разрешает...», но это мелочи.
Обязательные и необязательные поля проще и лучше группировать с соответствующей подписью, а не красить желтым.
Психодел какой-то, представьте как такие формы детсадовских цветов будут выглядеть на серьёзном ресурсе.
Не стоит просто размещать бесполезных форм, только по делу и самое необходимое — тогда нет нужды помечать цветом обязательные для заполнения формы. А невалидным формам достаточно красной обводки, однако у себя на проекте добавил ещё и описание ошибки, т. к. формы расчитаны на работу с широкой аудиторией:
Не стоит просто размещать бесполезных форм, только по делу и самое необходимое — тогда нет нужды помечать цветом обязательные для заполнения формы. А невалидным формам достаточно красной обводки, однако у себя на проекте добавил ещё и описание ошибки, т. к. формы расчитаны на работу с широкой аудиторией:
Вопрос отнюдь не в «детсадовости», а именно в сложности восприятия — разнообразие цветов может заслонить собою смысл того, ради чего пользователь вообще работает с формой.
А причём тут серьёзность ресурса и цветовое деление? В данном примере цвета очень даже спокойные и мягкие и не будут восприниматься негативно!
> Заголовок новости (Введите заголовок новости)
Зачем тут дублирование, все равно ясно к какому полю относится. Эдак можно вообще сделать стандартный шаблон «введите %s» и не мучаться :) А раз уж взялись писать отдельно, то почему бы не помочь советом несколько более НЕочевидым (например «Это обязательное поле» или «Нужен минимум один исполнитель чтобы завершить задачу» и т. д.), что-то что пользователь не знает (глядя на вашу изначальную форму), а не примитивно намекать ему что он не догадался о чем надо сам.
ЗЫ. А вообще, лично меня формы (обычные печатные), в которых изначально не помечены важные поля, повергают в летаргический сон :)
Зачем тут дублирование, все равно ясно к какому полю относится. Эдак можно вообще сделать стандартный шаблон «введите %s» и не мучаться :) А раз уж взялись писать отдельно, то почему бы не помочь советом несколько более НЕочевидым (например «Это обязательное поле» или «Нужен минимум один исполнитель чтобы завершить задачу» и т. д.), что-то что пользователь не знает (глядя на вашу изначальную форму), а не примитивно намекать ему что он не догадался о чем надо сам.
ЗЫ. А вообще, лично меня формы (обычные печатные), в которых изначально не помечены важные поля, повергают в летаргический сон :)
Это уже года 2-3 минимум используется. Возьмите даже какой-нибудь валидатор форм для jQuery, там будут те же цвета, так что я не пойму в чем идея. Еще часто что-бы не делать новогоднюю елку из полей рядом с каждым полем просто показывают зеленую/красную иконки.
«но даже Internet Explorer 7 не разрешает расставлять какие-либо стили на свои любимые select'ы»
Я Вам более скажу — модифицировать внешний вид оных (если это ниспадающий список) при помощи win32api также почти невозможно (например, штатным средством убрать бордюр) :-)
Я Вам более скажу — модифицировать внешний вид оных (если это ниспадающий список) при помощи win32api также почти невозможно (например, штатным средством убрать бордюр) :-)
Решение интересное, но совершенно не пригодно для людей с нарушенным восприятем цвета. Accessibility формы нарушено.
Давайте добавим небольшие иконки справа от полей ввода. Скажем, валидные поля — галочка, неправильные — крестик, изначальные можно обозначить звёздочкой.
Давайте добавим небольшие иконки справа от полей ввода. Скажем, валидные поля — галочка, неправильные — крестик, изначальные можно обозначить звёздочкой.
Уважаемый автор, последняя форма —это жесть. Я реально ничего не понял с первого взгляда. Думаю, стоит минимизировать число цветов, оставив только красный и серый.
Могу кстати предложить от себя идею выводить сначала обязательные поля, и отдельно — необязательные, если это не противоречит логике заполнения (например, имя и фамилию разносить не стоит)
Могу кстати предложить от себя идею выводить сначала обязательные поля, и отдельно — необязательные, если это не противоречит логике заполнения (например, имя и фамилию разносить не стоит)
У меня сайте давно такое используется в несколько упрощенной форме, без подсказок:
Пролистай в самый низ
Пролистай в самый низ
Добавьте ещё один пример с текстом для наглядности!
не светофор, а венигрет
С серым цветом вы или умолчали, или недодумали. Иногда и его нужно валидировать (e.g. icq). В этом случае он тоже станет например красным и смешается с другими красными. В итоге пользователь будет чувствовать себя дураком забыв какие поля обязательные, а какие нет.
если бы Вы были хорошим дизайнером, то неприменно знали бы о том, что:
«вся важная текстовая и графическая информация должна оставаться понятной при просмотре без цвета»
www.w3.org/TR/WCAG10/wai-pageauth.html#gl-color
«вся важная текстовая и графическая информация должна оставаться понятной при просмотре без цвета»
www.w3.org/TR/WCAG10/wai-pageauth.html#gl-color
В DokuWiki применяется подобный подход. Частично.
Например, при редактировании страницы необязательное (но очень желательное!) поле описания сути правок — красное, если пустое. Ни к чему не обязывает, но хорошо цепляет глаз.
Аналогично, в настройках, поля, значения которых соответствуют дефолтным, залиты серо-голубым (в цвет фона страницы), а измененные значения — обычного белого цвета и тоже цепляют глаз.
Например, при редактировании страницы необязательное (но очень желательное!) поле описания сути правок — красное, если пустое. Ни к чему не обязывает, но хорошо цепляет глаз.
Аналогично, в настройках, поля, значения которых соответствуют дефолтным, залиты серо-голубым (в цвет фона страницы), а измененные значения — обычного белого цвета и тоже цепляют глаз.
По-моему, у Usethics был вариант получше. Там индикаторы стояли слева от поля (такие вертикальные прямоугольники). Если поле требовалось заполнить — они были желтыми. Если поле заполнялось правильно, индикаторы гасли. Если неправильно — загорался красный цвет.
Жутко удобно! перешёл в поле — обводка, не верно заполнил — красным.
Сейчас всем своим клиентам делаю. И кодерам дал команду, чтобы делали по умолчанию уже такие формы.
В phpBB3 это очень хорошо реализованно. Мне нравиться. Это действительно удобно.
Сейчас всем своим клиентам делаю. И кодерам дал команду, чтобы делали по умолчанию уже такие формы.
В phpBB3 это очень хорошо реализованно. Мне нравиться. Это действительно удобно.
Уже пару лет Uni-Form предлагают готовый CSS/JS-framework для создания «правильных» форм
Убираете одно не обязательное поле и ничего городить не надо.
Почему у Вас поле «пароль» было желтым, а при проверке на валидацию становится белым?
Желтый цвет ворнинга убрать, звездочки на поле понятнее. Оставить только зеленый и красный, но или делать обводку полей или действительно, как в случае со светофором сделать после текстового поля аля лампочку, которая бы сигнализировала о результате верификации:)
Sign up to leave a comment.
Веб-формы «Светофор»