Web forms Design
-
Upload
objetivo-negocio -
Category
Internet
-
view
313 -
download
1
description
Transcript of Web forms Design
![Page 1: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/1.jpg)
1
BEST PRACTICES FOR FORM DESIGN LUKE WROBLEWSKI AUTHOR, WEB FORM DESIGN 2008
![Page 2: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/2.jpg)
2
Luke Wroblewski
Yahoo! Inc. • Senior Director, Product Ideation & Design
LukeW Interface Designs
• Principal & Founder
• Product design & strategy services
Author
• Web Form Design: Filling in the Blanks (Rosenfeld Media)
• Functioning Form: Web applications, product strategy, & interface design articles
• Site-Seeing: A Visual Approach to Web Usability (Wiley & Sons)
Previously • eBay Inc., Lead Designer
• University of Illinois, Instructor
• NCSA, Senior Designer
http://www.lukew.com
![Page 3: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/3.jpg)
3
Web Form Design
• Web Form Design: Filling in the Blanks
• Rosenfeld Media, 2008
• http://www.lukew.com/resources/web_form_design.asp
• 15% OFF with Discount Code
• FOLUKE15
• http://rosenfeldmedia.com/books/webforms/
![Page 4: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/4.jpg)
4
WHY DOES FORM DESIGN MATTER?
![Page 5: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/5.jpg)
5
SHOPPING
http://www.flickr.com/photos/stitch/187139723/ http://www.flickr.com/photos/radiofree/150535853/
![Page 6: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/6.jpg)
6
SHOPPING ONLINE
![Page 7: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/7.jpg)
7
ACCESS
Images from Flickr users katielips, pealco, and *nathan
![Page 8: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/8.jpg)
8
ACCESS ONLINE
![Page 9: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/9.jpg)
9
DATA INPUT
![Page 10: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/10.jpg)
10
DATA INPUT ONLINE
![Page 11: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/11.jpg)
11
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
• Engagment • User: Enable information entry & manipulation
• Business: Accumulate content & data
![Page 12: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/12.jpg)
12
65,000 videos per day –July 2006
![Page 13: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/13.jpg)
13
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 14: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/14.jpg)
14
• Repeatable design solutions to common problems
• Work “positively” for specific problems in specific contexts
• Capture best practices that solve real user needs
• Between principles & guidelines
• A design vocabulary
DESIGN PATTERNS
![Page 15: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/15.jpg)
15
• If your goals are… , try solution…
• If your constraints are…, try solution…
“IT DEPENDS”
![Page 16: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/16.jpg)
16
Data Sources
• Usability Testing
• Errors, issues, assists, completion rates, time spent per task, satisfaction scores
• Field Testing • Sources used, environment, context
• Customer Support • Top problems, number of incidents
• Web Conventions Survey
• Common solutions, unique approaches
• Site Tracking
• Completion rates, entry points, exit points, elements utilized, data entered
• Eye Tracking
• Number of eye fixations, length of fixations, heat maps, scan paths
BUSINESS OF DESIGN, EBAY INC. APRIL 2004
![Page 17: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/17.jpg)
17
• Isolate individual best practices
• Look at simple examples of each
ONE AT A TIME
![Page 18: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/18.jpg)
18
INFORMATION
![Page 19: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/19.jpg)
19
Information
• Layout • Label positioning • Content groupings
• Input Affordances • Formats, required fields
• Actions • Primary & secondary
• Help & Tips
• Visual Hierarchy
![Page 20: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/20.jpg)
20
Top Aligned Labels
• When data being collected is familiar
• Minimize time to completion
• Require more vertical space
• Spacing or contrast is vital to enable efficient scanning
• Flexibility for localization and complex inputs
![Page 21: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/21.jpg)
21
Top-aligned Labels
![Page 22: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/22.jpg)
22
Right Aligned Labels
• Clear association between label and field
• Requires less vertical space
• More difficult to just scan labels due to left rag
• Fast completion times
![Page 23: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/23.jpg)
23
Right-aligned labels
![Page 24: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/24.jpg)
24
Left Aligned Labels
• When data required is unfamiliar
• Enables label scanning
• Less clear association between label and field
• Requires less vertical space
• Changing label length may impair layout
![Page 25: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/25.jpg)
25
Left-aligned labels
![Page 26: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/26.jpg)
26
Eye-tracking Data
• July 2006 study by Matteo Penzo
• Left-aligned labels • Easily associated labels with the
proper input fields • Excessive distances between
labels inputs forced users to take 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 capture both labels & inputs with a single eye movement’
• Fastest completion times
![Page 27: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/27.jpg)
27
• For reduced completion times & familiar data input: top aligned
• When vertical screen space is a constraint: right aligned
• For unfamiliar, or advanced data entry: left aligned
BEST PRACTICE
![Page 28: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/28.jpg)
28
Required Form Fields
• Indication of required fields is most 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 is most useful when • Very few fields are optional
• Neither is realy useful when • All fields are required
![Page 29: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/29.jpg)
29
All fields required
![Page 30: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/30.jpg)
30
All fields required
![Page 31: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/31.jpg)
31
Most fields required
![Page 32: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/32.jpg)
32
Few fields optional
![Page 33: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/33.jpg)
33
![Page 34: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/34.jpg)
34
![Page 35: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/35.jpg)
35
• Try to avoid optional fields
• If most fields are required: indicate optional fields
• If most fields are optional: indicate required fields
• Text is best, but * often works for required fields
• Associate indicators with labels
BEST PRACTICE
![Page 36: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/36.jpg)
36
Field Lengths
• Field lengths can provide valuable affordances
• Appropriate field lengths provide enough space for inputs
• Random field lengths may add visual noise to a form
![Page 37: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/37.jpg)
37
![Page 38: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/38.jpg)
38
![Page 39: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/39.jpg)
39
![Page 40: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/40.jpg)
40
• When possible, use field length as an affordance
• Otherwise consider a consistent length that provides enough room for inputs
BEST PRACTICE
![Page 41: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/41.jpg)
41
Content Grouping
• Content relationships provide a structured way to organize a form
• Groupings provide • A way to scan information
required at a high level
• A sense of how information within a form is related
![Page 42: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/42.jpg)
42
Lots of content grouping
![Page 43: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/43.jpg)
43
Excessive visual noise
![Page 44: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/44.jpg)
44
Minimum amount necessary
![Page 45: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/45.jpg)
45
![Page 46: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/46.jpg)
46
Minimum amount necessary
![Page 47: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/47.jpg)
47
![Page 48: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/48.jpg)
48
• Use relevant content groupings to organize forms
• Use the minimum amount of visual elements necessary to communicate useful relationships
BEST PRACTICE
![Page 49: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/49.jpg)
49
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 match their importance
![Page 50: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/50.jpg)
50
![Page 51: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/51.jpg)
51
![Page 52: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/52.jpg)
52
![Page 53: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/53.jpg)
53
![Page 54: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/54.jpg)
54
![Page 55: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/55.jpg)
55
![Page 56: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/56.jpg)
56
• Avoid secondary actions if possible
• Otherwise, ensure a clear visual distinction between primary & secondary actions
• Align primary actions with input fields for a clear path to completion
BEST PRACTICE
![Page 57: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/57.jpg)
57
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 a form if overused
• In these cases, you may want to consider a dynamic solution • Automatic inline exposure
• User activated inline exposure
• User activated section exposure
![Page 58: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/58.jpg)
58
Help Text
![Page 59: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/59.jpg)
59
Lots of Help/Tips
![Page 60: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/60.jpg)
60
![Page 61: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/61.jpg)
61
Automatic inline exposure
![Page 62: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/62.jpg)
62
Automatic inline exposure
![Page 63: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/63.jpg)
63
User-activated inline exposure
![Page 64: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/64.jpg)
64
User-activated inline exposure
![Page 65: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/65.jpg)
65
User-activated dialog exposure
![Page 66: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/66.jpg)
66
User-activated section exposure
![Page 67: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/67.jpg)
67
• Minimize the amount of help & tips required to fill out a form
• Help visible and adjacent to a data request is most useful
• When lots of unfamiliar data is being requested, consider using a dynamic help system
BEST PRACTICE
![Page 68: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/68.jpg)
68
INTERACTION
![Page 69: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/69.jpg)
69
Interaction
• Path to Completion • “Tabbing” • Progressive Disclosure • Exposing dependencies
![Page 70: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/70.jpg)
70
Path to Completion
• Primary goal for every form is completion
• Every input requires consideration & action • Remove all unnecessary data requests
• Enable flexible data input
• Provide a clear path
• Enable smart defaults
![Page 71: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/71.jpg)
71
Remove Unnecessary Inputs
![Page 72: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/72.jpg)
72
Flexible Data Input
(555) 123-4444
555-123-4444
555 123 4444
555.123.4444
5551234444
![Page 73: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/73.jpg)
73
Smart Defaults
![Page 74: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/74.jpg)
74
Path to Completion
![Page 75: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/75.jpg)
75
Clear Path to Completion
![Page 76: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/76.jpg)
76
Path to completion
![Page 77: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/77.jpg)
77
• Remove all unnecessary data requests
• Enable smart defaults • Employ flexible data
entry • Illuminate a clear path
to completion • For long forms, show
progress & save
BEST PRACTICE
![Page 78: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/78.jpg)
78
Tabbing
• Many users interact with a form by “tabbing” between fields
• Proper HTML markup can ensure tabbing works as expected
• Multi-column form layouts may conflict with expected tabbing behavior
![Page 79: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/79.jpg)
79
![Page 80: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/80.jpg)
80
• Remember to account for tabbing behavior
• Use the tabindex attribute to control tabbing order
• Consider tabbing expectations when laying out forms
BEST PRACTICE
![Page 81: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/81.jpg)
81
Progressive Disclosure
• Not all users require all available options all the time
• Progressive disclosure provides additional options when appropriate • Advanced options
• Gradual engagement
![Page 82: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/82.jpg)
82
Exposing Options
![Page 83: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/83.jpg)
83
Exposing Options
![Page 84: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/84.jpg)
84
Dialog
![Page 85: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/85.jpg)
85
Progressive Disclosure
![Page 86: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/86.jpg)
86
Gradual Engagement
![Page 87: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/87.jpg)
87
![Page 88: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/88.jpg)
88
![Page 89: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/89.jpg)
89
![Page 90: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/90.jpg)
90
• Map progressive disclosure to prioritized user needs
• Most effective when user-initiated
• Maintain a consistent approach
BEST PRACTICE
![Page 91: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/91.jpg)
91
Selection Dependent Inputs
• Sometimes an initial data input requires or enables additional inputs • More options become available because of
an initial input
• Further clarification required due to initial input
![Page 92: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/92.jpg)
92
Selection Dependent Inputs
![Page 93: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/93.jpg)
93
Page Level
![Page 94: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/94.jpg)
94
Section Tabs
![Page 95: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/95.jpg)
95
Section Finger Tabs
![Page 96: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/96.jpg)
96
Section Selectors
![Page 97: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/97.jpg)
97
Expose Below
![Page 98: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/98.jpg)
98
Expose Within
![Page 99: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/99.jpg)
99
Inactive Until Selected
![Page 100: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/100.jpg)
100
Exposed & Grouped
![Page 101: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/101.jpg)
101
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 102: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/102.jpg)
102
![Page 103: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/103.jpg)
103
![Page 104: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/104.jpg)
104
• Maintain clear relationship between initial selection options
• Clearly associate additional inputs with their trigger
• Avoid “jumping” that disassociates initial selection options
BEST PRACTICE
![Page 105: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/105.jpg)
105
FEEDBACK
![Page 106: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/106.jpg)
106
Feedback
• Inline validation • Assistance
• Errors • Indication & Resolution
• Progress • Indication
• Success • Verification
![Page 107: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/107.jpg)
107
Inline Validation
• Provide direct feedback as data is entered • Validate inputs
• Suggest valid inputs
• Help users stay within limits
![Page 108: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/108.jpg)
108
Password Validation
![Page 109: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/109.jpg)
109
Unique User Name Validation
![Page 110: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/110.jpg)
110
Valid Input Suggestions
![Page 111: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/111.jpg)
111
Maximum Character Count
![Page 112: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/112.jpg)
112
• Use inline validation for inputs that have potentially high error rates
• Use suggested inputs to disambiguate
• Communicate limits
BEST PRACTICE
![Page 113: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/113.jpg)
113
Errors
• Errors are used to ensure all required data 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 114: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/114.jpg)
114
Error Messaging
![Page 115: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/115.jpg)
115
Short Forms: too much?
![Page 116: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/116.jpg)
116
Short Forms
![Page 117: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/117.jpg)
117
Short Forms
![Page 118: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/118.jpg)
118
![Page 119: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/119.jpg)
119
• Clearly communicate an error has occurred: top placement, visual contrast
• Provide actionable remedies to correct errors
• Associate responsible fields with primary error message
• “Double” the visual language where errors have occurred
BEST PRACTICE
![Page 120: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/120.jpg)
120
Progress
• Sometimes actions require some time to process • Form submission
• Data calculations
• Uploads
• Provide feedback when an action is in progress
![Page 121: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/121.jpg)
121
Disable Submit Button
![Page 122: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/122.jpg)
122
• Provide indication of tasks in progress
• Disable “submit” button after user clicks it to avoid duplicate submissions
BEST PRACTICE
![Page 123: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/123.jpg)
123
Success
• After successful form completion confirm data input in context • On updated page
• On revised form
• Provide feedback via • Message (removable)
• Animated Indicator
![Page 124: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/124.jpg)
124
![Page 125: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/125.jpg)
125
![Page 126: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/126.jpg)
126
Animated Indication
![Page 127: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/127.jpg)
127
• Clearly communicate a data submission has been successful
• Provide feedback in context of data submitted
BEST PRACTICE
![Page 128: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/128.jpg)
128
Additional Tips
• Avoid changing inputs provided by users • With later inputs
• After an error has occurred
• Let users know if difficult to obtain information is required prior to sending them to a form
![Page 129: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/129.jpg)
129
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 additional keyboard support
• Direct access to associated input fields
• Consider <fieldset> to group related form fields
![Page 130: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/130.jpg)
130
Web Form Creation Tools
• Wufoo • http://www.wufoo.com
• Form Assembly • http://www.formassembly.com
• icebrrg • http://www.icebrrg.com
![Page 131: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/131.jpg)
131
PUTTING IT ALL TOGETHER…
![Page 132: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/132.jpg)
132
![Page 133: Web forms Design](https://reader034.fdocuments.us/reader034/viewer/2022052508/5597e4db1a28ab000f8b4827/html5/thumbnails/133.jpg)
133
For more information…
• Web Form Design: Filling in the Blanks • http://www.lukew.com/resources/
web_form_design.asp
• Functioning Form • www.lukew.com/ff/
• Site-Seeing: A Visual Approach to Web Usability • Wiley & Sons
• Drop me a note • [email protected]