@dgcooley

<FORM> </FORM>

BETWEEN TWOFORM TAGS

@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

WHAT IF MY FORM IS

REALLY LONG?

@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

Progress indicators are

critical when paging.

@dgcooley

SHOULD I AUTO-ADVANCE

BETWEEN FIELDS?

@dgcooley

Never!

(Well,  almost  never.)  

@dgcooley

Not even for phone numbers.

@dgcooley

WHAT ABOUT

SUBMISSION BUTTONS?

@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

WHERE SHOULD MY

ACTION BUTTONS BE?

@dgcooley

Align your buttons to where your

user’s visual path ends.

@dgcooley

WHERE SHOULD I PUT

FIELD LABELS?

@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

WHAT ABOUT REQUIRED

FIELDS?

@dgcooley

Why are you asking a question

if you don’t need the answer?

@dgcooley

No really.

Why?

@dgcooley

AND NOW:

YOUR QUESTIONS

@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  

@dgcooley

Books!