search

klpdotorg / dubdubdub

Home of KLP. Houses *most* of the data and APIs.
MIT License
5 stars 4 forks source link

Recreate new SYS Web form #528

Closed batpad closed 9 years ago

batpad commented 9 years ago

with new questions and a bit of different design, using radios, etc.

meghaklp commented 9 years ago

web mobile

meghaklp commented 9 years ago

Back to the days of a hideous long form, but I can't see how we can capture this info in a more compact way. I could experiment if there are other suggestions. @batpad I have a few issues with the calendar widget, this page is tending to have multiple forms and the file -drag&drop uses something called dropzone, not sure if we should use the jquery plugin instead.

gkjohn commented 9 years ago

sigh @meghaklp what if we did a couple of things. Grouped the questions and made them accordions. And instead of radio boxes used drop downs?

meghaklp commented 9 years ago

Actually drop downs need more mouse clicks. And really for 3 choices a drop down maybe an overkill. Trying to find some legit articles on this.

Grouping & accordions are do-able. It's a daunting form still. By the time I get to the last 1/2, I may have lost it.

gkjohn commented 9 years ago

Is it worse than the earlier one? If not, is acceptable

Alternatively, what if we made it a wizard? Like a step by step thing?

  1. Personal Information
  2. Date of Visit
  3. Question Group 1
  4. Question Group 2
  5. Question Group 3
  6. Comments & Pictures
  7. Submit

And can skip sections/questions too.

Or accordion + wizard. So single page only but progressive disclosure. Will need visual indication too.

meghaklp commented 9 years ago

Wizard sounds nice actually! We can scroll to a part of the page on "Next" / "Continue". It'll be nice on the mobile. I'm yet to imagine this on the web form.

Also I thought, if we shortened the questions, say for example: Did you know if the school has: Toilets (with icon) ()Yes () No () Don't Know Playground ()Yes () No () Don't Know

Might look less daunting also.

gkjohn commented 9 years ago

Easy on web too. Like the a checkout on an eCom? Except you refresh the same div? Or move through divs or expand accordions? And progress indicator like: http://i.stack.imgur.com/SHuTx.jpg or http://i.stack.imgur.com/Z5UQV.jpg

Trouble with only icons is familiarity. Tool tip too?

Found http://www.tivix.com/blog/django-form-wizard/

meghaklp commented 9 years ago

step1 step1_mob step2 step4 step4_mob

gkjohn commented 9 years ago

@meghaklp This is looking great!

meghaklp commented 9 years ago

@batpad Bumping up this as well. Branch is called sys-form

batpad commented 9 years ago

done. deployed. closing.