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

Влад Головач утверждает, что сайт uimodeling.ru дивен. Давайте вместе подивимся тому, как люди не умеют делать веб-формы:

Веб-форма с сайта uimodelling.ru

Кто посчитает, сколько тут левака? Я сходу насчитал 5.

Добавлено 15 июля в 17:02: Влад развёрнуто и интересно отвечает мне (нет, не на вопрос из предыдущего абзаца).

Подписаться на блог
Отправить
Запинить
Дальше
33 комментария
Александр Карпинский 2009

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

Олег Томенко 2009

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

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

Илья Бирман 2009

Три совпадения :-)

Вторую фразу можно считать подзаголовком, нужна ли ей точка в этом случае?

Олег Томенко 2009

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

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

Чепраков Андрей 2009

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

Даниил 2009

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

Александр Зайцев 2009

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

Илья Бирман 2009

:-)

Астасенко Евгений 2009

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

Илья Бирман 2009

Поясните?

Женя Арутюнов 2009

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

Илья Бирман 2009

Поиск жжёт, да.

Женя Арутюнов 2009

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

Александр Хмелевский 2009

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

Алексей Черенкевич 2009

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

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

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

Илья Бирман 2009

Всё справедливо, моя форма тоже плоха. Она станет нормальной, когда я сделаю Эгею.

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

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

Александр Зайцев 2009

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

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

Илья Бирман 2009

Атрибут for — это мусор. Намного круче делать вот так:

%%%%

Не нужно ни id, ни for городить, и читается легче.

Михаил Алфёров 2009

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

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

Роман Верник 2009

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

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

Антон Вернигор 2009

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

Илья Бирман 2009

Пользователи ИЕ6 терпят от этого браузера и не такое.

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

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

Павел Ушаков 2009

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

Павел 2009

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

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

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

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

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

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

Илья Бирман 2009

Вы победили два главных левака, да :-)

Дима Плотников 2009

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

Сергей 42 Подкорытов 2009

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

Илья Бирман 2009

Как-то очень размазанно всё и невнятно.

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

Влад Головач 2009

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

Илья Бирман 2009

Грамотный человек пишет без ошибок не потому, что у него слишком много времени на проверку орфографии.

Арсен 2009

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

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

Юрий Хан 2009

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

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

Илья Бирман 2009

За мета-левак спасибо :-)

Арсен 2009

Юрий Хан,

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

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

Илья Бирман 2009

Забить на них.

Николай Гурьянов 2009

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

Николай Гурьянов 2009

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

Илья Бирман 2009

Добавил ссылку в заметку, спасибо.

Дмитрий Борман 2009

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

Сергей 42 Подкорытов 2009

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

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

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

Александр 2009

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

Мои книги