Design of Forms

Jaromír Coufal jcoufal at redhat.com
Wed Aug 15 09:37:03 UTC 2012


> - I think the "?" for tooltips should be closer to the input. Maybe on
>    the other side of the label? Or maybe on the right of the input? It's
>    just where I would look for it.
There are 3 types of tooltips (except error messages):
* ?... for label (what this term/concept means - for hardly 
understandable terms)
* i... for input (what and how to fill, restrictions, etc.)
* note... always visible important note for this field

So I decided to move question mark on the left, because on the right it 
would break vertical alignment of labels and it is related to the 
content of the label (not input). Hovering label displays you this help 
information anyway (regardless the position of question mark).
Moving it to the right of input would collide with input hint :-/

> - While using a "*" to mark required inputs has a lot of precedent, it's
>    also sometimes used to denote fine print or a footnote. Would it be
>    clearer if we used bold text for required fields, maybe?
Yes, star symbol has lot of precedent, but I think that users are used 
to this type of marking required fields in forms.
For me is star symbol clearer, but it's just personal opinion. Anyway it 
is really easy to change, so we can change it in the future if needed.

But I played a little bit and forked the form, so you can look for 
another examples how to display required fields:
http://codepen.io/coufalj/pen/boBGa (bold label)
http://codepen.io/coufalj/pen/ngpvc (input background) - in this case 
not usable for checkboxes, radios, files, ...

> I wonder about the markup, though. Will a developer building a form need
> to deal with creating a .control_group that contains a .left_column and a
> .right_column? It seems like this could be error-prone. Or will the form
> library we discussed automate this?
As I remember, simple_form tool (which we were discussing before) can 
manage this easily (you can set up structure in initializer). I 
cooperate with Imre to ensure that it really does. But you are right in 
this and that's the main reason for using simple_form.
I tried to use it without left/right columns but then it's hard to 
position tooltips and messages correctly :-/

> The Date input does not work in my browser.
Yeah, some browsers still doesn't support HTML5 data types :(
http://caniuse.com/ check support here, this is really useful page.
--
http://caniuse.com/#feat=input-number (number input)
http://caniuse.com/#feat=input-datetime (date input)
http://caniuse.com/#feat=input-placeholder (placeholder)

E.g. placeholder for IE we can fix by using javascript.
For other special form types we need to figure out, how to deal with 
them in unsupported browsers. But if we don't, user is still able to 
fill them out in normal way (classic input) and complete form.

-- 
Jaromír Coufal

Interaction Designer
Red Hat Czech s.r.o.

Mobile: +420 724 595 508
E-mail: jcoufal at redhat.com
IRC: jcoufal at #cloudforms-ui, #aeolus, #brno

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.fedorahosted.org/pipermail/aeolus-devel/attachments/20120815/2a62577c/attachment.html>


More information about the aeolus-devel mailing list