MOCKUP: Forms forms forms

codeforamerica / rva-screening-ui-prototypes

A repo for sketching and comparing user interface ideas for rva-screener

1 stars 2 forks source link

MOCKUP: Forms forms forms #23

Open mapsam opened 9 years ago

mapsam commented 9 years ago

Including iterations of form design here

mapsam commented 9 years ago

Currently working some standard fields/rows:

mapsam commented 9 years ago

Working on many-to-one (.form_multiform) sections!

bengolder commented 9 years ago

I like the first screenshot. I think the widths are a big improvement.

I think they could use just a few more pixels of space between labels and fields.
The horizontal spacing for name fields vs. SSN/DOB seems like it should be different. One is several closely related fields (What is your name?), while the other is two distinct questions.

Help text example on Gender looks too small. I can see it's the same size as SSN's optional, but it seems harder to read in paragraph form.

Here are some questions that come to mind:

What does it look like if the text is bumped up big?
Which questions are most likely to need help text? My impression from testing is that examples go further than explanations.
What states does a field go through? Unfocused, Focused, checking validation, validated, error?

mapsam commented 9 years ago

What does it look like if the text is bumped up big?

Are you talking about all of the text?

Which questions are most likely to need help text? My impression from testing is that examples go further than explanations.

I agree. Just putting the styles in here in case we need. I haven't been thinking about the form content at all at this point.

What states does a field go through? Unfocused, Focused, checking validation, validated, error?

I'll start exploring these right now - haven't done much thinking about them yet.

The horizontal spacing

I like this idea - related fields in a row should be close, while unrelated should be further.

mapsam commented 9 years ago

Just ran into this validation type on Kayak - seemed really slick!

bengolder commented 9 years ago

What does it look like if the text is bumped up big?

WWVS—"What Would Velvet See?" What would Velvet (who has poor vision) see when she bumps up the text size?

mapsam commented 9 years ago

Increased font size seems to work well with the forms thus far. I'd like to pair on this though, and get sizing working properly!

mapsam commented 9 years ago

Adding some form validation symbology. You can see focus, valid, and invalid. I'm curious if WTForms will let us edit our HTML as custom as these forms are turning out to be. Seems like a good thing to work on this week with @esmithayer