Вопрос на тему дизайна/юзабилити, но такого раздела форума нет, пишу сюда, думаю верстальщики с этом тоже сталкиваются: 

Вопрос только теоретический! 


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



Мне не нравится сложный вид формы. Все налеплено друг на друга, разобраться трудно.
А вот какой выход из ситуации? Если форму нельзя увеличивать по ширине, можно правда по высоте, но не на много. 

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

Форумчане, если вы сталкивались с такими задачами (или видели как это сделано на других сайтах) подскажите что можно придумать?

Спасибо!

можно форму "видимо" упростить. Оставить минимум обязательных полей (одно?)  и добавлять поля в зависимости от введенных значений. Правда вместо одной формы придется разрабатывать целое дерево форм, зато значительно более юзероолюбиво   

Тут все поля необязательные    можно сказать - добровольно обязательные)



По этому поводу у меня тоже была идея. 
Но как бы в конце, с появлением всех полей - будем иметь тот же результат)
Плюс не понятно к какому event`y цепляться blur/onchange/focus ведь человек может не знать заранее, что его ждет еще +100 полей, заполнит одно поле и сразу нажмет Submit, в общем такое поведение - не очевидно для пользователя ((

  

вот вариант компоновки...

или 1 строка - 1 спойлер...

Это сообщение отредактировал(а) Sinneren - 15.2.2011, 20:57

Sinneren, спасибо интересный вариант.

OK, будем думать дальше, что нибудь с группировкой полей и сокрытием дополнительных (sets, reps, weight). 
  

Как вариант, можно использовать табы.
ТЫК1
или вообще побродить так:
ТЫК2
в целом можно использовать JQuery UI Tools. Там есть слайдер чудный, простой и красивый. его можно использовать. 
ТЫК3