Учимся делать веб-формы

Меня больше обеспокоили ссылки «Схема проезда» на той-же странице, а точнее то, что после клика на них всё, кроме шапки прячется и кажется что ты перешел на другую страницу, но если перейти назад, ясно дело, что попадешь не туда, куда предполагаешь.

Со старта — звездочки и обязательные поля, двоеточия после «Имя:», вопрос в заголовке. Точки после второй фразы нет. Ну и, как по мне, маленькое поле для ввода текста.
Вот, тоже 5.

Ха, да там «Контакты» еще написано :-)

Я бы вообще ограничился только заголовком типа «Напишите нам что-нибудь», но раз стоит вопрос и подзаголовок подразумевает ответ на этот вопрос, то, я думаю, нужна. Или двоеточие.
Если бы это и вопрос, и ответ был в заголовке, тогда не нужна.

Вот еще. Пока ни одно поле не заполнено, кнопка «отправить» лучше была бы неактивной.

Кнопка «Отправить» активна, когда ещё ничего не введено.

Ну и бесполезный скроллбар

Треугольное Созвездие Фидбека.

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

А карта сайта) А результаты поиска с пустым запросом))

Вообще, когда я читаю «проектирование и дизайн», мне становится дурно от мысли о том, что имеется в виду под «дизайном»

Какие вы все забавные :)

Илье не в обиду: вот мы какаем тут на форму фидбэка, на отсутсвие лэйблов, на незамороженую кнопку «Отправить» и т. п. Все верно.

Но в форме для комментариев, которую я в данный момент заполняю — те же косяки.

Кому-кому, а Илье — не простительно.

1. пояснение про звёздочку слишком близко к заголовку, отвлекает внимание, лучше вниз кинуть
2. пояснение про звёздочку не нуждается в звёздочке помоему, ну или в квадратик бы её запихнули как легенду
3. кнопочку на право поставил бы
   и фсё.

Не вижу проблем со ставлением вопроса в заголовок, двоеточий, скроллбара, неактивной кнопки и тп.
Автор бы за своей формой следил :)

Насчёт #7, внутрь тега <label> засовывается подпись к полю формы. При помощи атрибута for, прописывается связь между лейблом и полем. Таким образом, при клике на подпись, будет установлен фокус на самом поле.

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

Для Александра Зайцева>

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

Для Александра Зайцева>

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

Илья Бирман, вкладывать, конечно, намного круче, но это не работает в IE6. Можно забить, а можно использовать for, тогда будет работать даже в нем.

1. Попусту активная кнопка «Отправить»
2. Ненужные в принципе обязательные поля
3. Несвязанность лейблов с инпутами, ОК
4. Слово «звёздочкой» надо бы с большой буквы, но его тут вообще лучше убрать
5. После отправки сообщения выкидывает на главную без объяснений

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

Самый главный левак — звёздочка обязательного заполнения у поля «Сообщение». Я плакал :-)

Нормальная форма. Звездочку можно было убрать, не идиоты же вокруг. И расхождение горизонтального выравнивания в один пиксель. Но это объективная проблема для кроссбраузерной и кроссплатформенной верстки.

Двоеточия им не нравятся. Юзабилисты, блин.

1. Заголовок поменять на «Ваше сообщение» или что-то другое, что отражает суть формы.
2. Если никак не обойтись без пояснения, можно на месте подзоголовка поставить что-то вроде «Мы будем рады выслушать ваши предложения или ответить на возникшие вопросы». Это, конечно, тоже ужасно, но лучше диалога заголовка с подзаголовком.
3. Лейблы выровнять по левому краю.
4. Убрать звездочки и сделать неактивной кнопку.
5. Сделать все поля одинаковыми по ширине.
6. Увеличить расстояние между последним полем и кнопкой.

Опционально:

1. Убрать двоеточия.
2. Убрать лейбл «Сообщение».

Я бы сделал так: http://ugc.a42.ru/98856/31381.jpg

Учимся у Влада оформлять книги http://uibook2.usethics.ru/

А как вам такие соображения?
http://blog.studiomade.ru/articles/interface/form-check-and-disabled-button/

Для первой версии сайта у них получилось очень, очень неплохо. А то что форма имеет несомненные, хотя и мелкие, недостатки — они потратили на нее 5 минут, ровно столько сколько эта форма заслуживает.

Сергей 42 Подкорытов, эти соображения актуальны для больших форм с обязательными для заполнения полями. Действительно, если не заполнено одно из таких полей, без триггера (onFocus на соседнем с незаполненным поле или кнопка), который покажет, в чем ошибка, не обойтись.

В данном случае все и так очевидно, даже для Марьи Ивановны. Нет сообщения — не имеет смысл отправлять форму, не заполнены поля Имя и E-mail — не проблема, человек имеет право на анонимность.

Лейблы должны быть сверху от полей ввода. Чтобы область ввода сообщения растянуть на всю ширину.
Область ввода сообщения должна быть больше по высоте.
Объяснение красной звёздочки должно быть внизу или вверху, но не занимать ширину.
Объяснение красной звёздочки не нужно, все и так знают, что это обязательные поля.
Обязательные поля не нужны, все и так знают, что без обратного адреса им некуда будет отвечать, а без сообщения — не на что.
«Электронная почта» должна быть просто «почтой».

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

Юрий Хан,

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

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

На сайте uimodeling.ru написано, что они занимались созданием нового дизайна Хедхантера. Вероятно, огромная куча шума, дублирование элементов интерфейса и запутывание посетителей — фирменный стиль этих ребят. Посмотрите, сколько поисков сразу на одной странице: http://i25.tinypic.com/2d0cdqt.gif

Нет, созданием дизайна они не занимались, я ошибся. Только рекомендовали, как улучшить интерфейс.

http://usethics.ru/blog/lib/sushhestvuet-li-–-i-nuzhna-li-–-norma-v-etoj-professii/

Что такое ЛЕВАК? Кто его основные враги?

«Грамотный человек пишет без ошибок не потому, что у него слишком много времени на проверку орфографии.»
Илья, тут ты прав. И Влад был прав )

Дело в том, что надо один раз затратить 2 часа на то, чтобы сделать общую правильную форму. В том числе определиться для себя с общими принципами работы форм, которые будешь применять на всех разрабатываемых тобой сайтах, сделать набор скриптов, который бы проверял данные при заполнении и ещё что-нибудь, по вкусу ). А потом уже тратить 5 минут на внедрение таких форм.

Также следует относиться ко всем более-менее типовым элементам интерфейса. Это и время сократит на разработку, и даст дополнительные плюсы в удобстве работы для пользователей.

Нашли из-за чего бучу поднимать.