Luke W
-
Upload
mobiletester -
Category
Technology
-
view
2.040 -
download
1
Transcript of Luke W
1
BEST PRACTICES FORFORM DESIGNLUKE WROBLEWSKIIA SUMMIT 2007
2
Luke Wroblewski
Yahoo! Inc.• Senior Principal Designer
LukeW Interface Designs• Principal & Founder• Product design & strategy services
Author• Site-Seeing: A Visual Approach to Web Usability
(Wiley & Sons)• Functioning Form: Web applications, product
strategy, & interface design articlesPreviously
• eBay Inc., Lead Designer• University of Illinois, Instructor• NCSA, Senior Designer
http://www.lukew.com
3
WHY DOES FORMDESIGN MATTER?
4
SHOPPING
http://www.flickr.com/photos/stitch/187139723/
5
SHOPPINGONLINE
6
ACCESS
Images from Flickr users katielips, pealco, and *nathan
7
ACCESSONLINE
8
DATA INPUT
9
DATA INPUTONLINE
10
Why Forms Matter
• How customers “talk” to companies online• Commerce ($)
• User: Enable purchasing• Business: Maximize sales
• Access (membership)• User: Enable participation• Business: Increase customers & grow communities
• Engagement• User: Enable information entry & manipulation• Business: Accumulate content & data
11
Design Principles
• Minimize the pain• No one likes filing in forms• Smart defaults, inline validation, forgiving inputs
• Illuminate a path to completion
• Consider the context• Familiar vs. foreign• Frequently used vs. rarely used
• Ensure consistent communication• Errors, Help, Success• Single voice despite many stakeholders
12
Analyzing Performance
• Usability Testing• Errors, issues, assists, completion rates, time spent per
task, satisfaction scores
• Eye Tracking• Completion times, fixations, saccades
• Customer Support• Top problems, number of incidents
• Best Practices• Common solutions, unique approaches
• Site Tracking• Completion rates, entry points, exit points, elements
utilized, data entered
13
Design Patterns
Information
Interaction
Feedback
+
+
Visual Communication
Affordances
Engagement
Disclosure
Response
Verification
14
INFORMATION
15
Information
• Layout• Label positioning• Content groupings
• Input Affordances• Formats, required fields
• Actions• Primary & secondary
• Help & Tips• Visual Hierarchy
16
Top Aligned Labels
• When data beingcollected is familiar
• Minimize time tocompletion
• Require more verticalspace
• Spacing or contrast isvital to enableefficient scanning
• Flexibility forlocalization andcomplex inputs
17
Top-aligned Labels
18
Right Aligned Labels
• Clear associationbetween label andfield
• Requires less verticalspace
• More difficult to justscan labels due toleft rag
• Fast completiontimes
19
Right-aligned labels
20
Left Aligned Labels
• When data required isunfamiliar
• Enables labelscanning
• Less clear associationbetween label andfield
• Requires less verticalspace
• Changing label lengthmay impair layout
21
Left-aligned labels
22
Eye-tracking Data
• July 2006 study by MatteoPenzo
• Left-aligned labels• Easily associated labels with
the proper input fields• Excessive distances between
labels inputs forced users totake more time
• Right-aligned labels• Reduced overall number of
fixations by nearly half• Form completion times were
cut nearly in half• Top-aligned labels
• Permitted users to captureboth labels & inputs with asingle eye movement’
• Fastest completion times
23
• For reducedcompletion times &familiar data input: topaligned
• When vertical screenspace is a constraint:right aligned
• For unfamiliar, oradvanced data entry:left aligned
BEST PRACTICE
24
Required Form Fields
• Indication of required fields ismost useful when• There are lots of fields• But very few are required• Enables users to scan form to see
what needs to be filled in
• Indication of optional fields ismost useful when• Very few fields are optional
• Neither is realy useful when• All fields are required
25
All fields required
26
All fields required
27
Most fields required
28
Few fields optional
29
30
31
• Try to avoid optionalfields
• If most fields arerequired: indicateoptional fields
• If most fields areoptional: indicaterequired fields
• Text is best, but * oftenworks for requiredfields
• Associate indicatorswith labels
BEST PRACTICE
32
Field Lengths
• Field lengths canprovide valuableaffordances
• Appropriate fieldlengths provide enoughspace for inputs
• Random field lengthsmay add visual noise toa form
33
34
35
36
• When possible, usefield length as anaffordance
• Otherwise consider aconsistent length thatprovides enough roomfor inputs
BEST PRACTICE
37
Content Grouping
• Content relationshipsprovide a structuredway to organize a form
• Groupings provide• A way to scan
information required at ahigh level
• A sense of howinformation within a formis related
38
Lots of content grouping
39
Excessive visual noise
40
Minimum amount necessary
41
42
Minimum amount necessary
43
44
• Use relevant contentgroupings to organizeforms
• Use the minimumamount of visualelements necessary tocommunicate usefulrelationships
BEST PRACTICE
45
Actions
• Not all form actions are equal• Reset, Cancel, & Go Back are secondary actions: rarely
need to be used (if at all)• Save, Continue, & Submit are primary actions: directly
responsible for form completion
• The visual presentation of actions should matchtheir importance
46
47
48
• Avoid secondaryactions if possible
• Otherwise, ensure aclear visual distinctionbetween primary &secondary actions
BEST PRACTICE
49
Help & Tips
• Help & Tips are useful when:• Asking for unfamiliar data• Users may question why data is being requested• There are recommended ways of providing data• Certain data requests are optional
• However, Help & Tips can quickly overwhelm aform if overused
• In these cases, you may want to consider adynamic solution• Automatic inline exposure• User activated inline exposure• User activated section exposure
50
Help Text
51
Lots of Help/Tips
52
53
Automatic inline exposure
54
Automatic inline exposure
55
User-activated inline exposure
56
User-activated inline exposure
57
User-activated section exposure
58
• Minimize the amount ofhelp & tips required tofill out a form
• Help visible andadjacent to a datarequest is most useful
• When lots of unfamiliardata is beingrequested, considerusing a dynamic helpsystem
BEST PRACTICE
59
INTERACTION
60
Interaction
• Path to Completion• “Tabbing”• Progressive Disclosure• Exposing dependencies
61
Path to Completion
• Primary goal for every form iscompletion
• Every input requires consideration &action• Remove all unnecessary data requests• Enable flexible data input
• Provide a clear path• Enable smart defaults
62
Remove Unnecessary Inputs
63
Flexible Data Input
(555) 123-4444555-123-4444555 123 4444555.123.44445551234444
64
Smart Defaults
65
Path to Completion
66
Clear Path to Completion
67
Path to completion
68
• Remove allunnecessary datarequests
• Enable smart defaults• Employ flexible data
entry• Illuminate a clear path
to completion• For long forms, show
progress & save
BEST PRACTICE
69
Tabbing
• Many users interact with a form by“tabbing” between fields
• Proper HTML markup can ensuretabbing works as expected
• Multi-column form layouts may conflictwith expected tabbing behavior
70
71
• Remember to accountfor tabbing behavior
• Use the tabindexattribute to controltabbing order
• Consider tabbingexpectations whenlaying out forms
BEST PRACTICE
72
Progressive Disclosure
• Not all users require all availableoptions all the time
• Progressive disclosure providesadditional options when appropriate• Advanced options• Gradual engagement
73
Exposing Options
74
Exposing Options
75
Dialog
76
Progressive Disclosure
77
Gradual Engagement
78
79
• Map progressivedisclosure toprioritized user needs
• Most effective whenuser-initiated
• Maintain a consistentapproach
BEST PRACTICE
80
Selection Dependent Inputs
• Sometimes an initial data input requiresor enables additional inputs• More options become available because of
an initial input• Further clarification required due to initial
input
81
Selection Dependent Inputs
82
Page Level
Section Tabs
Section Finger Tabs
Expose Below
Section Selectors
Expose Within
83
Inactive Until Selected Exposed & Grouped
84
Exposing Dependent Inputs
• Page Level• Requires additional step
• Section Tabs• Often go unnoticed• Require smart defaults
• Finger Section Tabs• Follow path to completion scan line
• Section Selectors• Effectively Group information• Hide some options
• Expose Below & Expose Within• Potential for confusion
• Inactive Until Selected & Exposed within Groups• Association between primary selection is impaired
85
• Maintain clearrelationship betweeninitial selection options
• Clearly associateadditional inputs withtheir trigger
• Avoid “jumping” thatdisassociates initialselection options
BEST PRACTICE
86
FEEDBACK
87
Feedback
• Inline validation• Assistance
• Errors• Indication & Resolution
• Progress• Indication
• Success• Verification
88
Inline Validation
• Provide direct feedback as data isentered• Validate inputs• Suggest valid inputs• Help users stay within limits
89
Password Validation
90
Unique User Name Validation
91
Valid Input Suggestions
92
Maximum Character Count
93
• Use inline validation forinputs that havepotentially high errorrates
• Use suggested inputsto disambiguate
• Communicate limits
BEST PRACTICE
94
Errors
• Errors are used to ensure all requireddata is provided and valid• Clear labels, affordances, help/tips &
validation can help reduce errors
• But some errors may still occur• Provide clear resolution in as few steps
as possible
95
Error Messaging
96
Short Forms: too much?
97
Short Forms
98
Short Forms
99
100
• Clearly communicatean error has occurred:top placement, visualcontrast
• Provide actionableremedies to correcterrors
• Associate responsiblefields with primaryerror message
• “Double” the visuallanguage where errorshave occurred
BEST PRACTICE
101
Progress
• Sometimes actions require some time toprocess• Form submission• Data calculations• Uploads
• Provide feedback when an action is inprogress
102
Disable Submit Button
103
• Provide indication oftasks in progress
• Disable “submit”button after user clicksit to avoid duplicatesubmissions
BEST PRACTICE
104
Success
• After successful form completionconfirm data input in context• On updated page• On revised form
• Provide feedback via• Message (removable)• Animated Indicator
105
106
107
Animated Indication
108
• Clearly communicate adata submission hasbeen successful
• Provide feedback incontext of datasubmitted
BEST PRACTICE
109
Additional Tips
• Avoid changing inputs provided byusers• With later inputs• After an error has occurred
• Let users know if difficult to obtaininformation is required prior to sendingthem to a form
110
Accessibility & Mark-up
• Use <label> tags to associate labels with inputs• Properly read by screen readers• Most browsers treat text with <label> tags as
clickable: larger actions• Use the tabindex attribute to provide a “tabbing” path
• Provides control over tabbing order• Enables forms to be navigated by keyboard
• Consider the accesskey attribute for additionalkeyboard support• Direct access to associated input fields
• Consider <fieldset> to group related form fields
111
Web Form Creation Tools
• Wufoo• http://www.wufoo.com
• Form Assembly• http://www.formassembly.com
• icebrrg• http://www.icebrrg.com
112
For more information…
• Functioning Form• www.lukew.com/ff/
• Site-Seeing: A VisualApproach to Web Usability• Wiley & Sons
• Drop me a note• [email protected]