Wiki source code of Forms Standards

Last modified by Vincent Massol on 2024/02/26 17:57

Show last authors
1 {{info}}
2 Discussed:
3 [Proposal][Standard][UX] Forms http://markmail.org/thread/5ya4iozbpl2c2kf2
4 [UX][Standards] Vertical Forms + (Primary / Secondary) Buttons http://xwiki.markmail.org/thread/4teq6ufymfhwan57
5 {{/info}}
6
7 {{warning}}
8 Forms Proposal: http://incubator.myxwiki.org/xwiki/bin/view/Standards/FormsProposal
9 Vertical Layout Usage: http://incubator.myxwiki.org/xwiki/bin/view/Standards/FormVerticalUsage
10 Inline Layout Usage: http://incubator.myxwiki.org/xwiki/bin/view/Standards/FormInlineUsage
11 {{/warning}}
12
13 = Style Standards for Forms =
14
15 * [[Layout>>Forms#layout]]
16 ** [[Vertical Layout>>Forms#vertical]]
17 ** [[Inline Layout>>Forms#inline]]
18 * [[Labels>>Forms#labels]]
19 * [[Fields>>Forms#fields]]
20 * [[Buttons>>Forms#buttons]]
21 * [[Errors / Success >>Forms#errors]]
22
23 * [[Other Considerations>>Forms#considerations]]
24
25 == (% id="layout" %)[[Layout>>Standards.FormLayout]](%%) ==
26
27 === (% id="vertical" %)[[Vertical Layout>>Standards.FormVerticalUsage]](%%) ===
28
29 [[[[image:verticalForms.png]]>>Standards.FormVerticalUsage]]
30
31 === (% id="inline" %)[[Inline Layout>>Standards.FormInlineUsage]](%%) ===
32
33 [[[[image:[email protected]]]>>Standards.FormInlineUsage]]
34
35 == (% id="labels" %) Labels(%%) ==
36
37 [[image:spaceExample.png]]
38
39 * Use **uppercase bold fonts for input field labels** (uppercase for Colibri)
40 * Use <label> tags to associate labels with inputs
41 * Do not put labels/hints inside fields on web forms, put it outside
42 * Consistent use of colons at the ends of labels (**no colons**)
43 * Consistent use of sentence ("Sentence case") or title case ("Title Case") (uppercase for Colibri)
44 * Required field indicator: Use the alt-text ?required?;
45 ** Always indicate required + miss for optional
46 ** If all fields are required don't mark them
47 * Use the tabindex attribute to provide a ?tabbing? path
48 * Provide hints with a secondary/non intrusive style
49
50 == (% id="fields" %) Fields (%%) ==
51
52 [[image:panelsExample.png]]
53
54 * Use fixed lengths for predefined fields or use 100% within the container (the container can have a fixed width)
55 ** Field lengths can provide valuable affordances (ex. credit card, telephone, etc.)
56 ** Random field lengths may add visual noise to a form
57 ** Make the default value for a drop-down list box the label
58 ** Use dl/dt/dd for forms structure
59
60 == (% id="buttons" %)[[Buttons>>Standards.Buttons]](%%) ==
61
62 [[image:buttonsExample.png]]
63
64 * Label the button with what it does
65 * [[Primary / Secondary Actions>>Standards.Buttons]]
66 ** Primary actions: the most important action on the form (completion) (?Submit?, ?Save?, or ?Continue?)
67 ** Secondary actions: are less utilized and most often allow people to retract the data they?ve entered (?Cancel?, ?Reset?, or ?Go Back?)
68 * Make sure that the SUBMIT button cannot be confused with destructive buttons
69 * [[Input (submitinput) vs. Link (ahref)>>http://markmail.org/message/imq62ugigeedi7sf]]:
70 ** Raluca: "Using buttons is mandatory for the cases where JavaScript is disabled. That's because by default a form can be submitted only through an input of type 'submit'. Links are usually used for redirecting to another page, not for submitting the form."
71 ** Sergiu: "Some buttons are done with links, since their action is not a submit action. I'm talking about most Cancel buttons, which shouldn't send the form content back to the server. Implementing them as submitinput will send the form content to the server. Sending the form content to the server means more transfer time (sending bytes through the network), more memory and processing time (allocating memory for holding the request data, allocating time for processing the request)."
72
73 == (% id="errors" %) Errors / Success (%%) ==
74
75 [[image:errorExample.png]]
76
77 * Clearly communicate the error that occurred
78 * Top placement, visual contrast
79 * After successful form completion confirm success
80
81 == (% id="considerations" %) Other Considerations (%%) ==
82
83 == Terminology ==
84
85 * Label: the text that stands for a question ("Phone")
86 * Hint/Description: an extra piece of text that helps to explain the label ("(XXX) XXXX - XXXX")
87 * Default: a value that is already entered for the user ("(990) 8972 - 1234")
88
89 == Conclusions ==
90
91 * Users often abandon forms or lie on them because of:
92 ** Questions that they don?t understand
93 ** Questions that they have no answer for
94 ** Intrusive questions that are inappropriate to the task
95 ** Validations that refuse their preferred or correct answer
96
97 == Resources ==
98
99 * [[[xwiki-devs] [PROPOSAL] Default look of dialog boxes in the WYSIWYG editor>>http://markmail.org/thread/heumt7ww3ayrtau4]]
100 * [[WYSIWYG Appendix>>http://dev.xwiki.org/xwiki/bin/view/Design/NewWysiwygEditorInterfaceAppendix]]
101
102 * Label placement in forms, by Caroline JARRETT, 2010, http://www.formsthatwork.com/files/Articles/labels-on-forms-for-uxlx-2010.pdf
103 * Best Practices for form design, by Luke WROBLEWSKI, 2008, http://www.lukew.com/resources/articles/WebForms_LukeW.pdf

Get Connected