Лучшая вёрстка формы

[psywalker]

s0rr0w,Nekromancer, а если там в названии файла 256 символов? Да и на самом деле какой смысл?

И по поводу девяти девяток, в конце концов не пойло для буйволов готовится, никто столько и не будет вводить.

Ну да, я тоже считаю, что всё это уже дотошное придиралово, но в целом я соглашаюсь, ради удобства можно было и предусмотреть все эти недоделки.

s0rr0w, огромное тебе спасибо. Я становлюсь сильнее благодаря тебе

[s0rr0w]

Ошибка есть, потому что до этого она там была...

Была да сплыла. Не надо вводить пользователя в заблуждение. Достаточно было подчистить статус ошибочной формы при изменении любого из требуемых к заполнению полей.

Можно, нажми - попадешь

Нажимал, не попадаю

Браузер?

FF 6.0, Ubuntu

Файлы бывают разного размера...

Достаточно превращать название в что-то вроде такого: file_...1.png. И коротко и не вызывает проблем. Чтобы получить длинное название, нужно просто сделать title="Длинное название"

Разве непонятно, что это за кнопка?

Ты по себе не суди. Обычно крестиком обозначается закрытие. Зачем мне закрывать этот элемент? Уважай домохозяек, сделать title не так долго.

Колесо мыши я еще не знаю

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

Разве это косяк?

Подсветка элементов, на которые можно нажимать - правила хорошего тона.

Зачем cursor: pointer?

Потому что это управляющий элемент, а не просто текст.

На максимальной шкале...

Позиции не совпадают. Это будет вызывать у пользователя приступы паники.

s0rr0w,Nekromancer, а если там в названии файла 256 символов? Да и на самом деле какой смысл?

И по поводу девяти девяток, в конце концов не пойло для буйволов готовится, никто столько и не будет вводить.

Юзабилити составляется из мелочей.

[psywalker]

s0rr0w,

Можно, нажми - попадешь

Нажимал, не попадаю

Я понял. Всё верно. Изначально нельзя ходить по табам, пока ты не дойдёшь до последнего. Это моя идея, а не косяк. Уверен, что кнопка "Дальше" нажималась.

Зачем cursor: pointer?

Потому что это управляющий элемент, а не просто текст.

Это неуправляемый элемент. Это поле задизейблено вообще и ничего не делает. Делает только кнопка справа.

Браузер?

FF 6.0, Ubuntu

Поправил немного. Зацени.

На счёт остального, так же спасибо, буду мудрее и пойду читать книжки. И, если народ позволит, то всё исправлю на более удобную навигацию по форме, но уже завтра

[s0rr0w]

Я понял. Всё верно. Изначально нельзя ходить по табам, пока ты не дойдёшь до последнего. Это моя идея, а не косяк. Уверен, что кнопка "Дальше" нажималась.

Это неудобно. Если пользователь хочет знать, сколько времени ему еще нужно потратить на форму, то ему нужно давать такую возможность.

Это неуправляемый элемент. Это поле задизейблено вообще и ничего не делает. Делает только кнопка справа.

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

Не стоит вводить пользователя в заблуждение.

[SelenIT]

Честно говоря, лично мне как раз стереотип ломает cursor:pointer для нессылок. Когда я вижу "пальчик", я жду от него возможности открыть в др. вкладке (по мидл-клику) и/или специфического ссылочного контекстного меню. Нативные контролы — что select, что button/submit/reset, что checkbox/radio вместе с их label-ами — по дефолту отродясь мне пальцем не тыкали (равно как и подобные элементы интерфейса ОС), почему же их дизайнерские функциональные аналоги тычут? Я понимаю, когда pointer ставится на совсем неочевидные дизайнерские примочки в виде точечек и облачков, чтобы хоть как-то показать их интерактивную природу, но визуальной похожести на "беспойнтерные" нативные аналоги, имхо, достаточно и без этого. Хотя я уже привык, что по этому вопросу я вечно в меньшинстве, так что это я так... просто поворчать

[psywalker]

Я понял. Всё верно. Изначально нельзя ходить по табам, пока ты не дойдёшь до последнего. Это моя идея, а не косяк. Уверен, что кнопка "Дальше" нажималась.

Это неудобно. Если пользователь хочет знать, сколько времени ему еще нужно потратить на форму, то ему нужно давать такую возможность.

Это неуправляемый элемент. Это поле задизейблено вообще и ничего не делает. Делает только кнопка справа.

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

Не стоит вводить пользователя в заблуждение.

Понял тебя, дружище. Когда закончится конкурс, всё постараюсь доделать, чтобы форма была на 100% удобна во всём!

[Nekromancer]

Это неудобно. Если пользователь хочет знать, сколько времени ему еще нужно потратить на форму, то ему нужно давать такую возможность.

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

Если уж делать их активными, что спорный вопрос ещё, то естественно шаг на который переключаешься вперёд должен быть неактивным (в данном случае именно шаг, то есть активность формы, а не кнопки).

[s0rr0w]

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

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

Если уж делать их активными, что спорный вопрос ещё, то естественно шаг на который переключаешься вперёд должен быть неактивным (в данном случае именно шаг, то есть активность формы, а не кнопки).

Дизайнер не предоставил достаточно данных для понимания процесса наполнения. Поэтому все вопросы не к верстальщикам.

[Nekromancer]

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

Дизайнер не предоставил достаточно данных для понимания процесса наполнения. Поэтому все вопросы не к верстальщикам.

По этому я и не голосовал за этот дизайн. А вопросов кстати и нет, это скорее рассуждения, не думаю что кому то сейчас вообще нужны эти вопросы. Формы свёрстаны, остаётся лишь смотреть как было бы правильнее.

[Vlad]

Специально отметил, чтобы нижние картинки не были кнопками для упрощения работы. Но честно, они так и напрашиваются, чтобы по ним щёлкнуть. Поэтому многие и сделали картинки ссылками.

[psywalker]

s0rr0w,

Моя реализация такова, что валидация страницы происходит при попытке перейти на следующую страницу, а не во время заполнения каких либо полей. Во время заполнения полей, максимум, что происходит - это убирание предупреждающих подсказок, и то, вроде не везде.

Так что мою идею тоже можно понять, и вообще, Влад правильно сказал, изначально в задании вообще не было ничего сказано про валидацию и кнопки, поэтому я, например, и сделал так, как сделал. Т.е. изначально не было чёткого задания, как и что должно валидироваться.

[s0rr0w]

s0rr0w,

Моя реализация такова, что валидация страницы происходит при попытке перейти на следующую страницу, а не во время заполнения каких либо полей.

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

Есть несколько процессов, которые может выполнять пользователь: первоначальный ввод данных, исправление существующих данных, переход на следующую страницу. Результат валидации будет после перехода на следующую страницу. Но на момент редактирования результат валидации уже не соответсвует правде, ведь пользователь еще не переходил на следующий шаг.

Кстати, в данной форме нет такого понятия, как очистка. Если все неправильно на текущем шаге и нужно начать заново, то придется попотеть, особенно на заполнении ингридиентов.

[psywalker]

s0rr0w,

Моя реализация такова, что валидация страницы происходит при попытке перейти на следующую страницу, а не во время заполнения каких либо полей.

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

Есть несколько процессов, которые может выполнять пользователь: первоначальный ввод данных, исправление существующих данных, переход на следующую страницу. Результат валидации будет после перехода на следующую страницу. Но на момент редактирования результат валидации уже не соответсвует правде, ведь пользователь еще не переходил на следующий шаг.

Кстати, в данной форме нет такого понятия, как очистка. Если все неправильно на текущем шаге и нужно начать заново, то придется попотеть, особенно на заполнении ингридиентов.

Ну да, я с тобой полностью согласен. И на счёт простого убирание значка и на счёт кнопки очистки. Нужно её обязательно предусмотреть.

[RendeX]

Просматривал работы участников и змаетил что у psywalker подсказка была сделана сверху, а у многих других участников подсказка была по сути в текстовой форме...

как правильно? это первое...

второе, у того же psywalker'a заметил что сообщение о 'не введении названия коктейля' перекрывает подсказку из краткого описания, что затрудняет чтение...

Может быть кто-то учтет это при голосовании...

[psywalker]

RendeX,

Может быть кто-то учтет это при голосовании...

А ты случайно не мультиакк, не?

Просматривал работы участников и змаетил что у psywalker подсказка была сделана сверху, а у многих других участников подсказка была по сути в текстовой форме...

как правильно? это первое...

Это сделано специально, ради удобства пользователя, чтобы эта подсказка не перекрывала текст в <textarea>. В том-то и дело, что никто другой не догадался так сделать.

второе, у того же psywalker'a заметил что сообщение о 'не введении названия коктейля' перекрывает подсказку из краткого описания, что затрудняет чтение...

Согласен, записал в блокнот, на исправление.

p.s. я так понял, что ты чисто из-за меня акк себе сделал и чтобы потом два раза проголосовать, да?

[Nanto]

Раз уж JS по полной заюзали, могли бы и IE included сделать...

[Vlad]

Кому нужно это старьё вроде IE!

[psywalker]

Раз уж JS по полной заюзали, могли бы и IE included сделать...

А что это? Расскажи поподробнее плиз

Кому нужно это старьё вроде IE!

Ну да, в IE8 главное всё пашет отлично и всё.

[Nekromancer]

А что это? Расскажи поподробнее плиз

Ну это он понтанулся, что знает английский. Только перепутал incuded c supported

[Nanto]

Сентябрь 2011 по рунету:

IE7 - 4,8%

IE6 - 1,8%

Т.е. 6,5% юзеров идут лесом вообще! Им даже никакой затычки нет, хотя бы в виде стандартной формы...

А что это? Расскажи поподробнее плиз

Ну это он понтанулся, что знает английский. Только перепутал incuded c supported

Правда? А мне кажется что я ничего не перепутал, дорогой мой горе-модератор!

[s0rr0w]

Т.е. 6,5% юзеров идут лесом вообще!

И что?

[psywalker]

Nanto,

Сентябрь 2011 по рунету:

IE7 - 4,8%

IE6 - 1,8%

Т.е. 6,5% юзеров идут лесом вообще! Им даже никакой затычки нет, хотя бы в виде стандартной формы...

Дело в том, что перелопачивать ЖС код, ради этих браузеров я, например, уже не стану, но какую нибудь табличку в виде просьбы перейти на нормальные браузеры, поставлю обязательно. Учтено.

Просмотр сообщенияNekromancer (28 сентября 2011 - 12:35) писал:

Просмотр сообщенияpsywalker (28 сентября 2011 - 11:45) писал:

А что это? Расскажи поподробнее плиз

Ну это он понтанулся, что знает английский. Только перепутал incuded c supported

Правда? А мне кажется что я ничего не перепутал, дорогой мой горе-модератор!

Да харош вам уже, ты лучше объясни, что ты имел ввиду?

[xeLL]

Сентябрь 2011 по рунету:

IE7 - 4,8%

IE6 - 1,8%

Т.е. 6,5% юзеров идут лесом вообще! Им даже никакой затычки нет, хотя бы в виде стандартной формы...

А что это? Расскажи поподробнее плиз

Ну это он понтанулся, что знает английский. Только перепутал incuded c supported

Правда? А мне кажется что я ничего не перепутал, дорогой мой горе-модератор!

ие6 в жопу, а вот для ие7 можно было тупо пай накрутить.

[psywalker]

Сентябрь 2011 по рунету:

IE7 - 4,8%

IE6 - 1,8%

Т.е. 6,5% юзеров идут лесом вообще! Им даже никакой затычки нет, хотя бы в виде стандартной формы...

А что это? Расскажи поподробнее плиз

Ну это он понтанулся, что знает английский. Только перепутал incuded c supported

Правда? А мне кажется что я ничего не перепутал, дорогой мой горе-модератор!

ие6 в жопу, а вот для ие7 можно было тупо пай накрутить.

Какой пай? Вы чё, меня сегодня решили совсем ламером сделать чтоль?

[Nanto]

Да ничего не имел... Просто фраза запомнилась: яваскриптовцы как-то ругались по поводу кода, один и сказал "Хорошо, допустим надо IE included"... Уж не помню, что там IE не поддерживал...

По поводу поддержки. Табличка о просьбе обновиться - это безусловно хороший тон. Ноя вот сейчас делаю сложный макет (там кстати тоже есть "модерновые" элементы формы) - и пока даже до этих форм не дошёл, но в 6-7 Осле вёрстка валится... Что поделаешь - придётся вначале доводить до ума для нормальных браузеров, а затем подключать свой стиль для [if lte IE 7] и делать максимально упрощённым - чтобы сохранить основной функционал, но без "свистелок"...

Понятно, что конкурс не предполагает вылизивание до блеска, но и для продакшена такой вариант сыроват...