Between Two Form Tags

@dgcooley #devup2017
<FORM> </FORM>
BETWEEN TWO
FORM TAGSBetween Two Form Tags
<Form> </Form>

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).

WHAT IF MY FORM
IS REALLY LONG?

Generally, stick with 1 column.

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.

Progress indicators are critical.

SHOULD I AUTO-
ADVANCE BETWEEN
FIELDS?

NEVER!
(Well, almost never.)

NOT EVEN FOR
PHONE NUMBERS.

WHAT ABOUT
SUBMISSION
BUTTONS?

What about submission buttons?
•  There is no data on button
*order*.
•  Primary vs. secondary is more
important.
•  Labels should be SPECIFIC.
Go to
Step 3 Cancel
Submit Cancel

WHERE SHOULD MY
ACTION BUTTONS
BE?

Align your buttons where your user’s
visual path ends.

WHERE SHOULD I
PUT FIELD
LABELS?

Field Labels: Not inside fields
No
Marginal
Good

Field Labels: close to fields
No
h#ps://zohosites.wiki.zoho.com/zoho-crm-web-forms.html

Field Labels: close to fields
Yes
h#ps://zohosites.wiki.zoho.com/zoho-crm-web-forms.html

Field Labels: Above is often better
Image from Luke Wroblewski’s Web Form Design.

WHAT ABOUT
REQUIRED FIELDS?

Why are you asking a
question if you don’t need
the answer?

No, really.
Why?

HOW ABOUT ERROR
HANDLING?

Error Handling: Bucket O’Problems
Image via h#ps://designmodo.com/15-6ps-for-crea6ng-awesome-web-forms-in-ﬂash/

Error Handling: Show at the field
Twi#er.com signup as captured in October 2017.

Error Handling: Dual-code Color
Twi#er.com signup as captured in October 2017.

Error Handling: Plain Language
h#p://dgcooley.com/home/2011/12/9/user-friendly-friday-safeco-insurance-web-site.html

OOH! CAPTCHA?

Step away from the Captcha.
h#ps://www.quora.com/Is-there-any-way-to-hack-CAPTCHA
h#ps://www.theinquirer.net/inquirer/news/3005704/security-researcher-breaks-google-recaptcha-with-google-tools
h#ps://designmodo.com/15-6ps-for-crea6ng-awesome-web-forms-in-ﬂash/
March
2017

The Big Questions
For EACH form question:
•  Who in the org uses this
information?
•  For what?
•  Is the answer required or
optional?
–  If required, what happens to
bogus answers?
h#p://bit.ly/2ym9X3Z

Between Two Form Tags

Recommended

Recommended

More Related Content

Similar to Between Two Form Tags

Similar to Between Two Form Tags (20)

More from Danielle Cooley

More from Danielle Cooley (20)

Recently uploaded

Recently uploaded (20)

Between Two Form Tags