Не Скучные Формы

Формы – это обычно те скучные элементы интерфейса, которые никто не любит заполнять.

Особенно если у них много полей ввода — тогда от обилия фреймов просто глаза разбегаются.

Давайте посмотрим на пример.

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

Не Скучные Формы

Небольшое отступление о браузерах.

Скриншот формы сделан в Opera. FF отображает поля ввода, которые гораздо приятнее для глаз:

Не Скучные Формы

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

Прежде всего, попробуем избавиться от рамок.

Для этого закрасим поля ввода бледным цветом, чтобы было понятно, что это все-таки поля ввода.

Если у вас хорошо откалиброванный монитор, вы заметите светло-серый фон на форме.

Это немного уменьшает контраст между фоном и полями, делая поля менее заметными.

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

Не Скучные Формы

Но лучшее еще впереди.

Вы, наверное, уже заметили, что в новом примере не закрашены два элемента? Это вторая часть предлагаемого улучшения.

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

Остается только текст. У этого решения есть два больших преимущества:

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

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

Не Скучные Формы

Вот и все, собственно.