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

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

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

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

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

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

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

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

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

Добавлено 15 июля в 17:02: Влад развёрнуто и интересно отвечает мне (нет, не на вопрос из предыдущего абзаца).
Подписаться на блог
Поделиться
Отправить
33 комментария
Александр Карпинский
Меня больше обеспокоили ссылки «Схема проезда» на той-же странице, а точнее то, что после клика на них всё, кроме шапки прячется и кажется что ты перешел на другую страницу, но если перейти назад, ясно дело, что попадешь не туда, куда предполагаешь.
Олег Томенко
Со старта — звездочки и обязательные поля, двоеточия после «Имя:», вопрос в заголовке. Точки после второй фразы нет. Ну и, как по мне, маленькое поле для ввода текста.
Вот, тоже 5.

Ха, да там «Контакты» еще написано :-)
Илья Бирман
Три совпадения :-)

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

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

Чепраков Андрей
Кнопка «Отправить» активна, когда ещё ничего не введено. 
Даниил
Ну и бесполезный скроллбар
Александр Зайцев
Треугольное Созвездие Фидбека.
Илья Бирман
:-)
Астасенко Евгений
Говорить о внешнем виде формы не хочется, хотя выглядит она действительно плохо. Лучше посмореть на ее функциональность. Сразу обратил внимание на тег label, который не выполняет изначально возложенных функций и вставлен туда для декора (скорее всего скопирован в каком-нибудь блоге о «правильной» верстке ).
Илья Бирман
Поясните?
Женя Арутюнов
А карта сайта) А результаты поиска с пустым запросом))
Илья Бирман
Поиск жжёт, да.
Женя Арутюнов
Вообще, когда я читаю «проектирование и дизайн», мне становится дурно от мысли о том, что имеется в виду под «дизайном»
Александр Хмелевский
Какие вы все забавные :)
Алексей Черенкевич
Илье не в обиду: вот мы какаем тут на форму фидбэка, на отсутсвие лэйблов, на незамороженую кнопку «Отправить» и т. п. Все верно.

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

Кому-кому, а Илье — не простительно.
Илья Бирман
Всё справедливо, моя форма тоже плоха. Она станет нормальной, когда я сделаю Эгею.
Артём Курапов
1. пояснение про звёздочку слишком близко к заголовку, отвлекает внимание, лучше вниз кинуть
2. пояснение про звёздочку не нуждается в звёздочке помоему, ну или в квадратик бы её запихнули как легенду
3. кнопочку на право поставил бы
и фсё.

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

Это о том, что лейблы применяются не только для радиокнопок и чекбоксов, но и для текстовых полей тоже.
Илья Бирман
Атрибут for — это мусор. Намного круче делать вот так:

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

Не нужно ни id, ни for городить, и читается легче.
Михаил Алфёров
Для Александра Зайцева>

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

Не знал, что такое зашито в хтмл, спасибо :) Очень клевая фича после опыта работы с продуктами адобы.
Антон Вернигор
Илья Бирман, вкладывать, конечно, намного круче, но это не работает в IE6. Можно забить, а можно использовать for, тогда будет работать даже в нем.
Илья Бирман
Пользователи ИЕ6 терпят от этого браузера и не такое.
Сергей Педан
1. Попусту активная кнопка «Отправить»
2. Ненужные в принципе обязательные поля
3. Несвязанность лейблов с инпутами, ОК
4. Слово «звёздочкой» надо бы с большой буквы, но его тут вообще лучше убрать
5. После отправки сообщения выкидывает на главную без объяснений

Если фантазировать, можно было бы подумать об увеличении поля сообщения при его заполнении (как в Гмейле). И я бы поставил поле сообщения первым — ну это скорее вкусовщина, чем недоработка. 
Павел Ушаков
Самый главный левак — звёздочка обязательного заполнения у поля «Сообщение». Я плакал :-)
Павел
Нормальная форма. Звездочку можно было убрать, не идиоты же вокруг. И расхождение горизонтального выравнивания в один пиксель. Но это объективная проблема для кроссбраузерной и кроссплатформенной верстки.

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

Опционально:
1. Убрать двоеточия.
2. Убрать лейбл «Сообщение».
Аркон Елизаров
Я бы сделал так: http://ugc.a42.ru/98856/31381.jpg
Илья Бирман
Вы победили два главных левака, да :-)
Дима Плотников
Учимся у Влада оформлять книги http://uibook2.usethics.ru/
Сергей 42 Подкорытов
А как вам такие соображения?
http://blog.studiomade.ru/articles/interface/form-check-and-disabled-button/
Илья Бирман
Как-то очень размазанно всё и невнятно.

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

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

И мета-левак: форма связи не нужна, особенно на странице, где три раза написан почтовый адрес.
Илья Бирман
За мета-левак спасибо :-)
Арсен
Юрий Хан,
> И мета-левак: форма связи не нужна, особенно на странице, где три раза написан почтовый адрес.

А как быть тем, кто хочет сохранить анонимность, или тем, у кого в данный момент нет возможности запустить мэйл-клиент, или тем, кто пользуется веб-интерфейсом для работы с почтой и им лень копировать адрес, заходить в свою почту и оттуда писать сообщение?
Илья Бирман
Забить на них.
Николай Гурьянов
На сайте uimodeling.ru написано, что они занимались созданием нового дизайна Хедхантера. Вероятно, огромная куча шума, дублирование элементов интерфейса и запутывание посетителей — фирменный стиль этих ребят. Посмотрите, сколько поисков сразу на одной странице: http://i25.tinypic.com/2d0cdqt.gif
Николай Гурьянов
Нет, созданием дизайна они не занимались, я ошибся. Только рекомендовали, как улучшить интерфейс.
Илья Бирман
Добавил ссылку в заметку, спасибо.
Дмитрий Борман
Что такое ЛЕВАК? Кто его основные враги?
Сергей 42 Подкорытов
«Грамотный человек пишет без ошибок не потому, что у него слишком много времени на проверку орфографии.»
Илья, тут ты прав. И Влад был прав )

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

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

Пользовательский интерфейс
Доступны три раздела
электронного учебника

Популярное