Luke W
-
Upload
mobiletester -
Category
Technology
-
view
2.040 -
download
1
Transcript of Luke W
![Page 1: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/1.jpg)
1
BEST PRACTICES FORFORM DESIGNLUKE WROBLEWSKIIA SUMMIT 2007
![Page 2: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/2.jpg)
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
![Page 3: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/3.jpg)
3
WHY DOES FORMDESIGN MATTER?
![Page 4: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/4.jpg)
4
SHOPPING
http://www.flickr.com/photos/stitch/187139723/
![Page 5: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/5.jpg)
5
SHOPPINGONLINE
![Page 6: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/6.jpg)
6
ACCESS
Images from Flickr users katielips, pealco, and *nathan
![Page 7: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/7.jpg)
7
ACCESSONLINE
![Page 8: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/8.jpg)
8
DATA INPUT
![Page 9: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/9.jpg)
9
DATA INPUTONLINE
![Page 10: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/10.jpg)
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
![Page 11: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/11.jpg)
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
![Page 12: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/12.jpg)
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
![Page 13: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/13.jpg)
13
Design Patterns
Information
Interaction
Feedback
+
+
Visual Communication
Affordances
Engagement
Disclosure
Response
Verification
![Page 14: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/14.jpg)
14
INFORMATION
![Page 15: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/15.jpg)
15
Information
• Layout• Label positioning• Content groupings
• Input Affordances• Formats, required fields
• Actions• Primary & secondary
• Help & Tips• Visual Hierarchy
![Page 16: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/16.jpg)
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
![Page 17: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/17.jpg)
17
Top-aligned Labels
![Page 18: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/18.jpg)
18
Right Aligned Labels
• Clear associationbetween label andfield
• Requires less verticalspace
• More difficult to justscan labels due toleft rag
• Fast completiontimes
![Page 19: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/19.jpg)
19
Right-aligned labels
![Page 20: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/20.jpg)
20
Left Aligned Labels
• When data required isunfamiliar
• Enables labelscanning
• Less clear associationbetween label andfield
• Requires less verticalspace
• Changing label lengthmay impair layout
![Page 21: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/21.jpg)
21
Left-aligned labels
![Page 22: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/22.jpg)
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
![Page 23: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/23.jpg)
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
![Page 24: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/24.jpg)
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
![Page 25: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/25.jpg)
25
All fields required
![Page 26: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/26.jpg)
26
All fields required
![Page 27: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/27.jpg)
27
Most fields required
![Page 28: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/28.jpg)
28
Few fields optional
![Page 29: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/29.jpg)
29
![Page 30: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/30.jpg)
30
![Page 31: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/31.jpg)
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
![Page 32: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/32.jpg)
32
Field Lengths
• Field lengths canprovide valuableaffordances
• Appropriate fieldlengths provide enoughspace for inputs
• Random field lengthsmay add visual noise toa form
![Page 33: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/33.jpg)
33
![Page 34: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/34.jpg)
34
![Page 35: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/35.jpg)
35
![Page 36: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/36.jpg)
36
• When possible, usefield length as anaffordance
• Otherwise consider aconsistent length thatprovides enough roomfor inputs
BEST PRACTICE
![Page 37: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/37.jpg)
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
![Page 38: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/38.jpg)
38
Lots of content grouping
![Page 39: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/39.jpg)
39
Excessive visual noise
![Page 40: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/40.jpg)
40
Minimum amount necessary
![Page 41: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/41.jpg)
41
![Page 42: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/42.jpg)
42
Minimum amount necessary
![Page 43: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/43.jpg)
43
![Page 44: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/44.jpg)
44
• Use relevant contentgroupings to organizeforms
• Use the minimumamount of visualelements necessary tocommunicate usefulrelationships
BEST PRACTICE
![Page 45: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/45.jpg)
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
![Page 46: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/46.jpg)
46
![Page 47: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/47.jpg)
47
![Page 48: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/48.jpg)
48
• Avoid secondaryactions if possible
• Otherwise, ensure aclear visual distinctionbetween primary &secondary actions
BEST PRACTICE
![Page 49: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/49.jpg)
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
![Page 50: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/50.jpg)
50
Help Text
![Page 51: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/51.jpg)
51
Lots of Help/Tips
![Page 52: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/52.jpg)
52
![Page 53: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/53.jpg)
53
Automatic inline exposure
![Page 54: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/54.jpg)
54
Automatic inline exposure
![Page 55: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/55.jpg)
55
User-activated inline exposure
![Page 56: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/56.jpg)
56
User-activated inline exposure
![Page 57: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/57.jpg)
57
User-activated section exposure
![Page 58: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/58.jpg)
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
![Page 59: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/59.jpg)
59
INTERACTION
![Page 60: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/60.jpg)
60
Interaction
• Path to Completion• “Tabbing”• Progressive Disclosure• Exposing dependencies
![Page 61: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/61.jpg)
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
![Page 62: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/62.jpg)
62
Remove Unnecessary Inputs
![Page 63: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/63.jpg)
63
Flexible Data Input
(555) 123-4444555-123-4444555 123 4444555.123.44445551234444
![Page 64: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/64.jpg)
64
Smart Defaults
![Page 65: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/65.jpg)
65
Path to Completion
![Page 66: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/66.jpg)
66
Clear Path to Completion
![Page 67: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/67.jpg)
67
Path to completion
![Page 68: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/68.jpg)
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
![Page 69: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/69.jpg)
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
![Page 70: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/70.jpg)
70
![Page 71: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/71.jpg)
71
• Remember to accountfor tabbing behavior
• Use the tabindexattribute to controltabbing order
• Consider tabbingexpectations whenlaying out forms
BEST PRACTICE
![Page 72: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/72.jpg)
72
Progressive Disclosure
• Not all users require all availableoptions all the time
• Progressive disclosure providesadditional options when appropriate• Advanced options• Gradual engagement
![Page 73: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/73.jpg)
73
Exposing Options
![Page 74: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/74.jpg)
74
Exposing Options
![Page 75: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/75.jpg)
75
Dialog
![Page 76: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/76.jpg)
76
Progressive Disclosure
![Page 77: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/77.jpg)
77
Gradual Engagement
![Page 78: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/78.jpg)
78
![Page 79: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/79.jpg)
79
• Map progressivedisclosure toprioritized user needs
• Most effective whenuser-initiated
• Maintain a consistentapproach
BEST PRACTICE
![Page 80: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/80.jpg)
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
![Page 81: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/81.jpg)
81
Selection Dependent Inputs
![Page 82: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/82.jpg)
82
Page Level
Section Tabs
Section Finger Tabs
Expose Below
Section Selectors
Expose Within
![Page 83: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/83.jpg)
83
Inactive Until Selected Exposed & Grouped
![Page 84: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/84.jpg)
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
![Page 85: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/85.jpg)
85
• Maintain clearrelationship betweeninitial selection options
• Clearly associateadditional inputs withtheir trigger
• Avoid “jumping” thatdisassociates initialselection options
BEST PRACTICE
![Page 86: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/86.jpg)
86
FEEDBACK
![Page 87: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/87.jpg)
87
Feedback
• Inline validation• Assistance
• Errors• Indication & Resolution
• Progress• Indication
• Success• Verification
![Page 88: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/88.jpg)
88
Inline Validation
• Provide direct feedback as data isentered• Validate inputs• Suggest valid inputs• Help users stay within limits
![Page 89: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/89.jpg)
89
Password Validation
![Page 90: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/90.jpg)
90
Unique User Name Validation
![Page 91: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/91.jpg)
91
Valid Input Suggestions
![Page 92: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/92.jpg)
92
Maximum Character Count
![Page 93: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/93.jpg)
93
• Use inline validation forinputs that havepotentially high errorrates
• Use suggested inputsto disambiguate
• Communicate limits
BEST PRACTICE
![Page 94: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/94.jpg)
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
![Page 95: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/95.jpg)
95
Error Messaging
![Page 96: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/96.jpg)
96
Short Forms: too much?
![Page 97: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/97.jpg)
97
Short Forms
![Page 98: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/98.jpg)
98
Short Forms
![Page 99: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/99.jpg)
99
![Page 100: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/100.jpg)
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
![Page 101: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/101.jpg)
101
Progress
• Sometimes actions require some time toprocess• Form submission• Data calculations• Uploads
• Provide feedback when an action is inprogress
![Page 102: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/102.jpg)
102
Disable Submit Button
![Page 103: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/103.jpg)
103
• Provide indication oftasks in progress
• Disable “submit”button after user clicksit to avoid duplicatesubmissions
BEST PRACTICE
![Page 104: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/104.jpg)
104
Success
• After successful form completionconfirm data input in context• On updated page• On revised form
• Provide feedback via• Message (removable)• Animated Indicator
![Page 105: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/105.jpg)
105
![Page 106: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/106.jpg)
106
![Page 107: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/107.jpg)
107
Animated Indication
![Page 108: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/108.jpg)
108
• Clearly communicate adata submission hasbeen successful
• Provide feedback incontext of datasubmitted
BEST PRACTICE
![Page 109: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/109.jpg)
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
![Page 110: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/110.jpg)
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
![Page 111: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/111.jpg)
111
Web Form Creation Tools
• Wufoo• http://www.wufoo.com
• Form Assembly• http://www.formassembly.com
• icebrrg• http://www.icebrrg.com
![Page 112: Luke W](https://reader033.fdocuments.us/reader033/viewer/2022052910/559ada001a28aba6548b46bc/html5/thumbnails/112.jpg)
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]