between two form tags
TRANSCRIPT
@dgcooley
What forms questions do you get? 1. Size and shape of the form dialog/page. 2. Size of multi-line text fields
3. Conditionally required fields (a tough issue)
4. Required field indicator
5. Size of field
6. Error correction (sometimes as you exit a field, sometimes not until you finish a form if you are doing high-frequency forminput)
7. Workflow in the form
8. Use of acronyms and abbreviations.
9. Location of labels
10. Spacing between labels and controls
11. Spacing between different items.
12. Translation/text expansion (no, the rule is not to allow for 100% more space)
13. Allowed formats in field
14. Hints and where to put them
15. Dealing with accented characters
16. Keyboard shortcuts inside a form
17. Tab order
18. Accessibility of forms
19. Density of the form (you might or might not want a lot of white space)
20. Designing for the one-shot form versus designing for a form where someone is entering data many times a day.
21. Should every text field be a different size? (No).
22. Should every text form be the same size (No).
23. What are some "rules of thumb" for sizing text fields
24. Do you use a colon after a label?
25. What buttons do you use?
26. Where do you put the buttons (depends on de facto standards AND workflow).
27. How do you decide the order of fields?
28. How do you choose the right control for choosing a value (e.g., radio button versus drop-down list)?
29. What rules do you follow in ordering menus in dorms?
30. When do you use tabs in forms?
31. How do you display long lists in forms?
32. How do you provide user assistance at the control and form level?
33. What does it mean to design your form for evolvability
34. When do you choose dynamic versus static controls (list box versus radio buttons)
35. What are the common errors associated with fields in a form or dialog.
36. What does consistency mean when applied to forms (layout, control consistency, etc.)?
37. What are the guidelines for spacing between buttons (e.g., if you have a DELETE FOREVER button, you may not want to have it 10 pixels
from the SAVE button).
38. How will you deal with Hebrew , Chinese, and Arabic forms?
39. How can you apply Gestalt principles (proximity, closure, figure-ground) to form design?
40. What capitalization style do you use for labels and text?
41. How do you indicate that a button is immediate action versus one that generates a sub-form of sub-dialog.
42. When do you use an Apply button?
43. When do you save data in a form (as you go or when you click OK, Submit, Apply....)?
44. What techniques can you use to indicate whether you have a workflow that aids the user?
45. How do scanning order and hierarchy act in your form?
46. How do eye scanning patterns (e.g., Gutenberg diagram/F-Pattern ) affect the design of your form?
47. What kind of grid layout would be must useful for your form?
48. Why is microlayout important for form design?
49. Can you input and navigate with voice input systems (e.g., Dragon NS)
50. What kind of feedback do you provide to let the user know that he/she is successful at the item and the form level?
51. How do you expose dependency in a form?
52. What color principles should you consider when designing a form?
53. How do you assess the relative complexity of a form?
54. How do "balance" and "symmetry" play together in form design?
55. In designing a form, what constitutes "noise" and what constitutes "signal" (e.g., avoid extraneous lines, multiple fonts, etc.).
56. What are the general rules of "grouping"?
57. How can you use the principles of "abstraction" in form/dialog design?
58. Should you concatenate fields so entry fields/control items read like sentences (could be bad for translation).
59. How flexible should input fields be?
60. How wide should common fields like Email be?
61. What is the best way to align radio buttons?
62. Do you provide a progress indicator for long forms?
63. Language consistency (e.g., don't say "Fill Pattern" in once place and "Pattern" in another when those refer to the same thing.
64. Remove words that don't add any value in labels and text).
@dgcooley
2-columns aren’t usually the way to go.
h"p://baymard.com/blog/avoid-‐mul5-‐column-‐forms
@dgcooley
Paging vs. Scrolling – it depends.
• How often do users fill out
this form?
• Do they need to save for
later?
• Information chunking is
important regardless.
• Progressive disclosure is also an option.
@dgcooley
What about submission buttons?
• There is no data on button
-order-.
• Primary actions should be
more prominent than
secondary actions.
• Labels should be SPECIFIC.
Go to Step 3 Cancel
Submit Cancel
@dgcooley
• DO NOT put them inside the fields
• DO make sure the label is next to
the thing it is labeling.
• Above fields is typically best.
h"p://www.uxma"ers.com/mt/archives/2006/07/label-‐placement-‐in-‐forms.php Image from Luke Wroblewski’s Web Form Design.
@dgcooley
The Most Important Questions
For EACH form question:
• Who in the org uses this
answer?
• What do they use it for?
• Is the answer required or
optional?
– If required, what happens to
bogus answers?
h"p://www.uxma"ers.com/mt/archives/2010/06/the-‐ques5on-‐protocol-‐how-‐to-‐make-‐sure-‐every-‐form-‐field-‐is-‐necessary.php