Нескучные формы

Формы — это обычно такие скучные элементы интерфейса, которые никто не любит заполнять. Особенно если на них много полей ввода — тогда просто рябит в глазах от обилия рамочек.

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





Небольшое отступление о браузерах. Скриншот формы был сделан в Опере. ФФ рендерит гораздо более приятные для глаза поля ввода:



Вернемся к нашим формам.

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



Но лучшее еще впереди. Вы, наверное, уже обратили внимание на то, что два элемента на новом примере не закрашены? Это вторая часть предлагаемого улучшения. Идея заключается в том, что мы полностью убираем графическое обозначение поля ввода после того, как оно заполнено. Остается только текст. У такого решения есть два больших преимущества:

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

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



Вот, собственно, и все. Таким довольно простым способом можно сделать формы гораздо приятнее и интереснее для заполнения.