Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

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

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

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

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

Добавлено 15 июля в 17:02: Влад развёрнуто и интересно отвечает мне (нет, не на вопрос из предыдущего абзаца).
Подписаться на блог
Поделиться
Отправить
 106   2009   веб-формы   дизайн
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 — это мусор. Намного круче делать вот так:

<label><input type="checkbox" /> Пыц-пыц</label>

Не нужно ни 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
Нашли из-за чего бучу поднимать.
Популярное