SlideShare a Scribd company logo
BEST PRACTICES FOR
FORM DESIGN
LUKE WROBLEWSKI
IA SUMMIT 2007




                     1
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 articles
      Previously
         • eBay Inc., Lead Designer
         • University of Illinois, Instructor
         • NCSA, Senior Designer
      http://www.lukew.com



                                                             2
WHY DOES FORM
DESIGN MATTER?




                 3
SHOPPING




           http://www.flickr.com/photos/stitch/187139723/




                                                            4
SHOPPING
ONLINE




           5
ACCESS




         Images from Flickr users katielips, pealco, and *nathan




                                                                   6
ACCESS
ONLINE




         7
DATA INPUT




             8
DATA INPUT
ONLINE




             9
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




                                                      10
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




                                                          11
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




                                                                        12
Design Patterns

                      Visual Communication
        Information   Affordances


            +
                      Engagement
        Interaction   Disclosure


            +
                      Response
        Feedback      Verification




                                             13
INFORMATION




              14
Information
• Layout
  • Label positioning
  • Content groupings
• Input Affordances
  • Formats, required fields
• Actions
  • Primary & secondary
• Help & Tips
• Visual Hierarchy




                               15
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




                           16
Top-aligned Labels




                     17
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




                           18
Right-aligned labels




                       19
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




                           20
Left-aligned labels




                      21
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



                                     22
• For reduced
                  completion times &
                  familiar data input: top
                  aligned
BEST PRACTICE   • When vertical screen
                  space is a constraint:
                  right aligned
                • For unfamiliar, or
                  advanced data entry:
                  left aligned




                                             23
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




                                         24
All fields required




                      25
All fields required




                      26
Most fields required




                       27
Few fields optional




                      28
29
30
• Try to avoid optional
                  fields
                • If most fields are
                  required: indicate
                  optional fields
BEST PRACTICE   • If most fields are
                  optional: indicate
                  required fields
                • Text is best, but * often
                  works for required
                  fields
                • Associate indicators
                  with labels


                                              31
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




                            32
33
34
35
• When possible, use
                  field length as an
                  affordance
BEST PRACTICE
                • Otherwise consider a
                  consistent length that
                  provides enough room
                  for inputs




                                           36
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




                                37
Lots of content grouping




                           38
Excessive visual noise




                         39
Minimum amount necessary




                           40
41
Minimum amount necessary




                           42
43
• Use relevant content
                  groupings to organize
                  forms
BEST PRACTICE
                • Use the minimum
                  amount of visual
                  elements necessary to
                  communicate useful
                  relationships




                                          44
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

                                                             45
46
47
• Avoid secondary
                  actions if possible
BEST PRACTICE   • Otherwise, ensure a
                  clear visual distinction
                  between primary &
                  secondary actions




                                             48
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



                                                       49
Help Text




            50
Lots of Help/Tips




                    51
52
Automatic inline exposure




                            53
Automatic inline exposure




                            54
User-activated inline exposure




                                 55
User-activated inline exposure




                                 56
User-activated section exposure




                                  57
• Minimize the amount of
                  help & tips required to
                  fill out a form
                • Help visible and
                  adjacent to a data
BEST PRACTICE     request is most useful
                • When lots of unfamiliar
                  data is being
                  requested, consider
                  using a dynamic help
                  system




                                            58
INTERACTION




              59
Interaction
•   Path to Completion
•   “Tabbing”
•   Progressive Disclosure
•   Exposing dependencies




                             60
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




                                           61
Remove Unnecessary
Inputs




                     62
Flexible Data Input
                      (555) 123-4444
                      555-123-4444
                      555 123 4444
                      555.123.4444
                      5551234444




                                       63
Smart Defaults




                 64
Path to Completion




                     65
Clear Path to Completion




                           66
Path to completion




                     67
• Remove all
                  unnecessary data
                  requests
                • Enable smart defaults
BEST PRACTICE   • Employ flexible data
                  entry
                • Illuminate a clear path
                  to completion
                • For long forms, show
                  progress & save




                                            68
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




                                           69
70
• Remember to account
                  for tabbing behavior
                • Use the tabindex
BEST PRACTICE     attribute to control
                  tabbing order
                • Consider tabbing
                  expectations when
                  laying out forms




                                         71
Progressive Disclosure
• Not all users require all available
  options all the time
• Progressive disclosure provides
  additional options when appropriate
  • Advanced options
  • Gradual engagement




                                        72
Exposing Options




                   73
Exposing Options




                   74
Dialog




         75
Progressive Disclosure




                         76
Gradual Engagement




                     77
78
• Map progressive
                  disclosure to
                  prioritized user needs
BEST PRACTICE
                • Most effective when
                  user-initiated
                • Maintain a consistent
                  approach




                                           79
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




                                                    80
Selection Dependent Inputs




                             81
Section Selectors
Page Level




Section Tabs          Expose Below




                      Expose Within
Section Finger Tabs




                                           82
Inactive Until Selected   Exposed & Grouped




                                              83
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




                                                           84
• Maintain clear
                  relationship between
                  initial selection options
BEST PRACTICE
                • Clearly associate
                  additional inputs with
                  their trigger
                • Avoid “jumping” that
                  disassociates initial
                  selection options




                                              85
FEEDBACK




           86
Feedback
• Inline validation
  • Assistance
• Errors
  • Indication & Resolution
• Progress
  • Indication
• Success
  • Verification




                              87
Inline Validation
• Provide direct feedback as data is
  entered
  • Validate inputs
  • Suggest valid inputs
  • Help users stay within limits




                                       88
Password Validation




                      89
Unique User Name Validation




                              90
Valid Input Suggestions




                          91
Maximum Character Count




                          92
• Use inline validation for
                  inputs that have
                  potentially high error
BEST PRACTICE     rates
                • Use suggested inputs
                  to disambiguate
                • Communicate limits




                                              93
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




                                             94
Error Messaging




                  95
Short Forms: too much?




                         96
Short Forms




              97
Short Forms




              98
99
• Clearly communicate
                  an error has occurred:
                  top placement, visual
                  contrast
                • Provide actionable
BEST PRACTICE     remedies to correct
                  errors
                • Associate responsible
                  fields with primary
                  error message
                • “Double” the visual
                  language where errors
                  have occurred



                                           100
Progress
• Sometimes actions require some time to
  process
  • Form submission
  • Data calculations
  • Uploads
• Provide feedback when an action is in
  progress




                                           101
Disable Submit Button




                        102
• Provide indication of
                  tasks in progress
BEST PRACTICE   • Disable “submit”
                  button after user clicks
                  it to avoid duplicate
                  submissions




                                             103
Success
• After successful form completion
  confirm data input in context
  • On updated page
  • On revised form
• Provide feedback via
  • Message (removable)
  • Animated Indicator




                                     104
105
106
Animated Indication




                      107
• Clearly communicate a
                  data submission has
                  been successful
BEST PRACTICE
                • Provide feedback in
                  context of data
                  submitted




                                          108
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




                                             109
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




                                                           110
Web Form Creation Tools



              • Wufoo
                 • http://www.wufoo.com
              • Form Assembly
                 • http://www.formassembly.com
              • icebrrg
                 • http://www.icebrrg.com




                                                 111
For more information…

            • Functioning Form
              • www.lukew.com/ff/
            • Site-Seeing: A Visual
              Approach to Web Usability
              • Wiley & Sons
            • Drop me a note
              • luke@lukew.com




                                          112

More Related Content

What's hot

Complying with HIPAA Security Rule
Complying with HIPAA Security RuleComplying with HIPAA Security Rule
Complying with HIPAA Security Rule
complianceonline123
 
Web Form Design Best Practices
Web Form Design Best Practices Web Form Design Best Practices
Web Form Design Best Practices
Luke Wroblewski
 
Skeuomorphs & Visual Metaphors in UI Design
Skeuomorphs & Visual Metaphors in UI DesignSkeuomorphs & Visual Metaphors in UI Design
Skeuomorphs & Visual Metaphors in UI Design
Tactica Interactive
 
Information Management Basics
Information Management BasicsInformation Management Basics
Information Management Basics
Community IT Innovators
 
Graphic design. printing and publishing
Graphic design. printing and publishingGraphic design. printing and publishing
Graphic design. printing and publishing
Svetlana Postolachi
 
Leading workplace communication
Leading workplace communicationLeading workplace communication
Leading workplace communication
Jaleto Sunkemo
 
Business Process Automation
Business Process AutomationBusiness Process Automation
Business Process Automation
Aciron Consulting
 
Effective communication in the work place
Effective communication in the work placeEffective communication in the work place
Effective communication in the work place
Celeretaudax
 
Graphics communication
Graphics communicationGraphics communication
Graphics communication
Priya dharshini
 
Introduction to wireframes
Introduction to wireframesIntroduction to wireframes
Introduction to wireframes
piksels
 
User interface design
User interface designUser interface design
User interface design
Naveen Sagayaselvaraj
 
Virtual Meeting Etiquette
Virtual Meeting EtiquetteVirtual Meeting Etiquette
Virtual Meeting Etiquette
Jennifer Baron
 
It's Not Too Late: AAC For Older Students
It's Not Too Late: AAC For Older StudentsIt's Not Too Late: AAC For Older Students
It's Not Too Late: AAC For Older Students
Alex Koller
 
Lecture 1: Human-Computer Interaction Introduction (2014)
Lecture 1: Human-Computer Interaction Introduction (2014)Lecture 1: Human-Computer Interaction Introduction (2014)
Lecture 1: Human-Computer Interaction Introduction (2014)
Lora Aroyo
 
Training presentation on business communication
Training presentation on business communicationTraining presentation on business communication
Training presentation on business communication
Abhilash Surendran
 
HCI 3e - Ch 15: Task analysis
HCI 3e - Ch 15:  Task analysisHCI 3e - Ch 15:  Task analysis
HCI 3e - Ch 15: Task analysis
Alan Dix
 
Records management program
Records management programRecords management program
Records management program
Dhani Ahmad
 
Hci md exam
Hci md examHci md exam
Hci md exam
Desalegn Aweke
 
Lesson 1 computer safety and maintenance
Lesson 1   computer safety and maintenanceLesson 1   computer safety and maintenance
Lesson 1 computer safety and maintenance
School
 
Blueprint.pdf
Blueprint.pdfBlueprint.pdf
Blueprint.pdf
vee280482
 

What's hot (20)

Complying with HIPAA Security Rule
Complying with HIPAA Security RuleComplying with HIPAA Security Rule
Complying with HIPAA Security Rule
 
Web Form Design Best Practices
Web Form Design Best Practices Web Form Design Best Practices
Web Form Design Best Practices
 
Skeuomorphs & Visual Metaphors in UI Design
Skeuomorphs & Visual Metaphors in UI DesignSkeuomorphs & Visual Metaphors in UI Design
Skeuomorphs & Visual Metaphors in UI Design
 
Information Management Basics
Information Management BasicsInformation Management Basics
Information Management Basics
 
Graphic design. printing and publishing
Graphic design. printing and publishingGraphic design. printing and publishing
Graphic design. printing and publishing
 
Leading workplace communication
Leading workplace communicationLeading workplace communication
Leading workplace communication
 
Business Process Automation
Business Process AutomationBusiness Process Automation
Business Process Automation
 
Effective communication in the work place
Effective communication in the work placeEffective communication in the work place
Effective communication in the work place
 
Graphics communication
Graphics communicationGraphics communication
Graphics communication
 
Introduction to wireframes
Introduction to wireframesIntroduction to wireframes
Introduction to wireframes
 
User interface design
User interface designUser interface design
User interface design
 
Virtual Meeting Etiquette
Virtual Meeting EtiquetteVirtual Meeting Etiquette
Virtual Meeting Etiquette
 
It's Not Too Late: AAC For Older Students
It's Not Too Late: AAC For Older StudentsIt's Not Too Late: AAC For Older Students
It's Not Too Late: AAC For Older Students
 
Lecture 1: Human-Computer Interaction Introduction (2014)
Lecture 1: Human-Computer Interaction Introduction (2014)Lecture 1: Human-Computer Interaction Introduction (2014)
Lecture 1: Human-Computer Interaction Introduction (2014)
 
Training presentation on business communication
Training presentation on business communicationTraining presentation on business communication
Training presentation on business communication
 
HCI 3e - Ch 15: Task analysis
HCI 3e - Ch 15:  Task analysisHCI 3e - Ch 15:  Task analysis
HCI 3e - Ch 15: Task analysis
 
Records management program
Records management programRecords management program
Records management program
 
Hci md exam
Hci md examHci md exam
Hci md exam
 
Lesson 1 computer safety and maintenance
Lesson 1   computer safety and maintenanceLesson 1   computer safety and maintenance
Lesson 1 computer safety and maintenance
 
Blueprint.pdf
Blueprint.pdfBlueprint.pdf
Blueprint.pdf
 

Similar to Best Practices for Form Design

Best Practices For Form Design
Best Practices For Form DesignBest Practices For Form Design
Best Practices For Form Design
interactionpatterns.org
 
Luke W
Luke WLuke W
Luke W
mobiletester
 
Usabilidad y diseño para formularios
Usabilidad y diseño para formulariosUsabilidad y diseño para formularios
Usabilidad y diseño para formularios
alfonsogu
 
Web Forms Luke W
Web Forms Luke WWeb Forms Luke W
Web Forms Luke W
Mark Bardsley
 
Design Patterns: Defining and Sharing Web Design Languages
Design Patterns: Defining and Sharing Web Design Languages Design Patterns: Defining and Sharing Web Design Languages
Design Patterns: Defining and Sharing Web Design Languages
Luke Wroblewski
 
Design Patterns Lw
Design Patterns LwDesign Patterns Lw
Design Patterns Lw
interactionpatterns.org
 
Utilizing SharePoint to improve your business
Utilizing SharePoint to improve your businessUtilizing SharePoint to improve your business
Utilizing SharePoint to improve your business
Robert Crane
 
Executing for Every Screen: Build, launch and sustain products for your custo...
Executing for Every Screen: Build, launch and sustain products for your custo...Executing for Every Screen: Build, launch and sustain products for your custo...
Executing for Every Screen: Build, launch and sustain products for your custo...
Steven Hoober
 
Quick Cheap Insightful: Usability testing in the wild
Quick Cheap Insightful: Usability testing in the wildQuick Cheap Insightful: Usability testing in the wild
Quick Cheap Insightful: Usability testing in the wild
Dana Chisnell
 
Designing for Web 2.0: The Visual Ecosystem
Designing for Web 2.0: The Visual EcosystemDesigning for Web 2.0: The Visual Ecosystem
Designing for Web 2.0: The Visual Ecosystem
Luke Wroblewski
 
Social Media Model
Social Media ModelSocial Media Model
Social Media Model
Mary Wynne-Wynter
 
Web Application Page Hierarchy
Web Application Page HierarchyWeb Application Page Hierarchy
Web Application Page Hierarchy
Luke Wroblewski
 
a startup-like website powered by Drupal
a startup-like website powered by Drupala startup-like website powered by Drupal
a startup-like website powered by Drupal
Charles Chuang
 
Usability Engineering
Usability EngineeringUsability Engineering
Usability Engineering
Easypeasy
 
Collaboration Tools to Create Better Products
Collaboration Tools to Create Better ProductsCollaboration Tools to Create Better Products
Collaboration Tools to Create Better Products
Enthiosys Inc
 
Rapid Project Inception
Rapid Project InceptionRapid Project Inception
Rapid Project Inception
udairaj
 
Stop Worrying! And love the workflow
Stop Worrying! And love the workflowStop Worrying! And love the workflow
Stop Worrying! And love the workflow
Atlassian
 
Introduction to Web Survey Usability Design and Testing
Introduction to Web Survey Usability Design and TestingIntroduction to Web Survey Usability Design and Testing
Introduction to Web Survey Usability Design and Testing
Jennifer Romano Bergstrom
 
Agile Development Methodologies
Agile Development MethodologiesAgile Development Methodologies
Agile Development Methodologies
Nainil Chheda
 
Mpg Feb08 Gian Lorenzetto
Mpg Feb08 Gian Lorenzetto Mpg Feb08 Gian Lorenzetto
Mpg Feb08 Gian Lorenzetto
melbournepatterns
 

Similar to Best Practices for Form Design (20)

Best Practices For Form Design
Best Practices For Form DesignBest Practices For Form Design
Best Practices For Form Design
 
Luke W
Luke WLuke W
Luke W
 
Usabilidad y diseño para formularios
Usabilidad y diseño para formulariosUsabilidad y diseño para formularios
Usabilidad y diseño para formularios
 
Web Forms Luke W
Web Forms Luke WWeb Forms Luke W
Web Forms Luke W
 
Design Patterns: Defining and Sharing Web Design Languages
Design Patterns: Defining and Sharing Web Design Languages Design Patterns: Defining and Sharing Web Design Languages
Design Patterns: Defining and Sharing Web Design Languages
 
Design Patterns Lw
Design Patterns LwDesign Patterns Lw
Design Patterns Lw
 
Utilizing SharePoint to improve your business
Utilizing SharePoint to improve your businessUtilizing SharePoint to improve your business
Utilizing SharePoint to improve your business
 
Executing for Every Screen: Build, launch and sustain products for your custo...
Executing for Every Screen: Build, launch and sustain products for your custo...Executing for Every Screen: Build, launch and sustain products for your custo...
Executing for Every Screen: Build, launch and sustain products for your custo...
 
Quick Cheap Insightful: Usability testing in the wild
Quick Cheap Insightful: Usability testing in the wildQuick Cheap Insightful: Usability testing in the wild
Quick Cheap Insightful: Usability testing in the wild
 
Designing for Web 2.0: The Visual Ecosystem
Designing for Web 2.0: The Visual EcosystemDesigning for Web 2.0: The Visual Ecosystem
Designing for Web 2.0: The Visual Ecosystem
 
Social Media Model
Social Media ModelSocial Media Model
Social Media Model
 
Web Application Page Hierarchy
Web Application Page HierarchyWeb Application Page Hierarchy
Web Application Page Hierarchy
 
a startup-like website powered by Drupal
a startup-like website powered by Drupala startup-like website powered by Drupal
a startup-like website powered by Drupal
 
Usability Engineering
Usability EngineeringUsability Engineering
Usability Engineering
 
Collaboration Tools to Create Better Products
Collaboration Tools to Create Better ProductsCollaboration Tools to Create Better Products
Collaboration Tools to Create Better Products
 
Rapid Project Inception
Rapid Project InceptionRapid Project Inception
Rapid Project Inception
 
Stop Worrying! And love the workflow
Stop Worrying! And love the workflowStop Worrying! And love the workflow
Stop Worrying! And love the workflow
 
Introduction to Web Survey Usability Design and Testing
Introduction to Web Survey Usability Design and TestingIntroduction to Web Survey Usability Design and Testing
Introduction to Web Survey Usability Design and Testing
 
Agile Development Methodologies
Agile Development MethodologiesAgile Development Methodologies
Agile Development Methodologies
 
Mpg Feb08 Gian Lorenzetto
Mpg Feb08 Gian Lorenzetto Mpg Feb08 Gian Lorenzetto
Mpg Feb08 Gian Lorenzetto
 

More from Simone Ravaioli

La Magia degli Open Badges at Exploring elearning
La Magia degli Open Badges at Exploring elearningLa Magia degli Open Badges at Exploring elearning
La Magia degli Open Badges at Exploring elearning
Simone Ravaioli
 
Open Badges per il lavoro di domani
Open Badges per il lavoro di domaniOpen Badges per il lavoro di domani
Open Badges per il lavoro di domani
Simone Ravaioli
 
Milano City of Learning
Milano City of Learning Milano City of Learning
Milano City of Learning
Simone Ravaioli
 
The Prestige of Open Badges
The Prestige of Open BadgesThe Prestige of Open Badges
The Prestige of Open Badges
Simone Ravaioli
 
DOQUP final conference Bishkek
DOQUP final conference BishkekDOQUP final conference Bishkek
DOQUP final conference Bishkek
Simone Ravaioli
 
Project "Granaries of Memories" - University of Gastronomic Sciences
Project "Granaries of Memories" - University of Gastronomic Sciences Project "Granaries of Memories" - University of Gastronomic Sciences
Project "Granaries of Memories" - University of Gastronomic Sciences
Simone Ravaioli
 
Slow Food International
Slow Food International Slow Food International
Slow Food International
Simone Ravaioli
 
RS3G update at general assembly EUNIS 2011
RS3G update at general assembly EUNIS 2011RS3G update at general assembly EUNIS 2011
RS3G update at general assembly EUNIS 2011
Simone Ravaioli
 
Ignite EUNIS
Ignite EUNISIgnite EUNIS
Ignite EUNIS
Simone Ravaioli
 
Gli standard per l’interoperabilità dei sistemi studenti in ambito Europeo
Gli standard per l’interoperabilità dei sistemi studenti in ambito EuropeoGli standard per l’interoperabilità dei sistemi studenti in ambito Europeo
Gli standard per l’interoperabilità dei sistemi studenti in ambito Europeo
Simone Ravaioli
 
Course catalog RS3G
Course catalog RS3GCourse catalog RS3G
Course catalog RS3G
Simone Ravaioli
 
Standards Tutorial Eunis 2008
Standards Tutorial Eunis 2008Standards Tutorial Eunis 2008
Standards Tutorial Eunis 2008
Simone Ravaioli
 

More from Simone Ravaioli (12)

La Magia degli Open Badges at Exploring elearning
La Magia degli Open Badges at Exploring elearningLa Magia degli Open Badges at Exploring elearning
La Magia degli Open Badges at Exploring elearning
 
Open Badges per il lavoro di domani
Open Badges per il lavoro di domaniOpen Badges per il lavoro di domani
Open Badges per il lavoro di domani
 
Milano City of Learning
Milano City of Learning Milano City of Learning
Milano City of Learning
 
The Prestige of Open Badges
The Prestige of Open BadgesThe Prestige of Open Badges
The Prestige of Open Badges
 
DOQUP final conference Bishkek
DOQUP final conference BishkekDOQUP final conference Bishkek
DOQUP final conference Bishkek
 
Project "Granaries of Memories" - University of Gastronomic Sciences
Project "Granaries of Memories" - University of Gastronomic Sciences Project "Granaries of Memories" - University of Gastronomic Sciences
Project "Granaries of Memories" - University of Gastronomic Sciences
 
Slow Food International
Slow Food International Slow Food International
Slow Food International
 
RS3G update at general assembly EUNIS 2011
RS3G update at general assembly EUNIS 2011RS3G update at general assembly EUNIS 2011
RS3G update at general assembly EUNIS 2011
 
Ignite EUNIS
Ignite EUNISIgnite EUNIS
Ignite EUNIS
 
Gli standard per l’interoperabilità dei sistemi studenti in ambito Europeo
Gli standard per l’interoperabilità dei sistemi studenti in ambito EuropeoGli standard per l’interoperabilità dei sistemi studenti in ambito Europeo
Gli standard per l’interoperabilità dei sistemi studenti in ambito Europeo
 
Course catalog RS3G
Course catalog RS3GCourse catalog RS3G
Course catalog RS3G
 
Standards Tutorial Eunis 2008
Standards Tutorial Eunis 2008Standards Tutorial Eunis 2008
Standards Tutorial Eunis 2008
 

Recently uploaded

UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
jpupo2018
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
Federico Razzoli
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
fredae14
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 

Recently uploaded (20)

UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 

Best Practices for Form Design

  • 1. BEST PRACTICES FOR FORM DESIGN LUKE WROBLEWSKI IA SUMMIT 2007 1
  • 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 articles Previously • eBay Inc., Lead Designer • University of Illinois, Instructor • NCSA, Senior Designer http://www.lukew.com 2
  • 4. SHOPPING http://www.flickr.com/photos/stitch/187139723/ 4
  • 6. ACCESS Images from Flickr users katielips, pealco, and *nathan 6
  • 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 10
  • 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 11
  • 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 12
  • 13. Design Patterns Visual Communication Information Affordances + Engagement Interaction Disclosure + Response Feedback Verification 13
  • 15. Information • Layout • Label positioning • Content groupings • Input Affordances • Formats, required fields • Actions • Primary & secondary • Help & Tips • Visual Hierarchy 15
  • 16. 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 16
  • 18. 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 18
  • 20. 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 20
  • 22. 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 22
  • 23. • For reduced completion times & familiar data input: top aligned BEST PRACTICE • When vertical screen space is a constraint: right aligned • For unfamiliar, or advanced data entry: left aligned 23
  • 24. 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 24
  • 29. 29
  • 30. 30
  • 31. • Try to avoid optional fields • If most fields are required: indicate optional fields BEST PRACTICE • If most fields are optional: indicate required fields • Text is best, but * often works for required fields • Associate indicators with labels 31
  • 32. 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 32
  • 33. 33
  • 34. 34
  • 35. 35
  • 36. • When possible, use field length as an affordance BEST PRACTICE • Otherwise consider a consistent length that provides enough room for inputs 36
  • 37. 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 37
  • 38. Lots of content grouping 38
  • 41. 41
  • 43. 43
  • 44. • Use relevant content groupings to organize forms BEST PRACTICE • Use the minimum amount of visual elements necessary to communicate useful relationships 44
  • 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 match their importance 45
  • 46. 46
  • 47. 47
  • 48. • Avoid secondary actions if possible BEST PRACTICE • Otherwise, ensure a clear visual distinction between primary & secondary actions 48
  • 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 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 49
  • 52. 52
  • 58. • Minimize the amount of help & tips required to fill out a form • Help visible and adjacent to a data BEST PRACTICE request is most useful • When lots of unfamiliar data is being requested, consider using a dynamic help system 58
  • 60. Interaction • Path to Completion • “Tabbing” • Progressive Disclosure • Exposing dependencies 60
  • 61. 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 61
  • 63. Flexible Data Input (555) 123-4444 555-123-4444 555 123 4444 555.123.4444 5551234444 63
  • 66. Clear Path to Completion 66
  • 68. • Remove all unnecessary data requests • Enable smart defaults BEST PRACTICE • Employ flexible data entry • Illuminate a clear path to completion • For long forms, show progress & save 68
  • 69. 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 69
  • 70. 70
  • 71. • Remember to account for tabbing behavior • Use the tabindex BEST PRACTICE attribute to control tabbing order • Consider tabbing expectations when laying out forms 71
  • 72. Progressive Disclosure • Not all users require all available options all the time • Progressive disclosure provides additional options when appropriate • Advanced options • Gradual engagement 72
  • 75. Dialog 75
  • 78. 78
  • 79. • Map progressive disclosure to prioritized user needs BEST PRACTICE • Most effective when user-initiated • Maintain a consistent approach 79
  • 80. 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 80
  • 82. Section Selectors Page Level Section Tabs Expose Below Expose Within Section Finger Tabs 82
  • 83. Inactive Until Selected Exposed & Grouped 83
  • 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 84
  • 85. • Maintain clear relationship between initial selection options BEST PRACTICE • Clearly associate additional inputs with their trigger • Avoid “jumping” that disassociates initial selection options 85
  • 86. FEEDBACK 86
  • 87. Feedback • Inline validation • Assistance • Errors • Indication & Resolution • Progress • Indication • Success • Verification 87
  • 88. Inline Validation • Provide direct feedback as data is entered • Validate inputs • Suggest valid inputs • Help users stay within limits 88
  • 90. Unique User Name Validation 90
  • 93. • Use inline validation for inputs that have potentially high error BEST PRACTICE rates • Use suggested inputs to disambiguate • Communicate limits 93
  • 94. 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 94
  • 96. Short Forms: too much? 96
  • 99. 99
  • 100. • Clearly communicate an error has occurred: top placement, visual contrast • Provide actionable BEST PRACTICE remedies to correct errors • Associate responsible fields with primary error message • “Double” the visual language where errors have occurred 100
  • 101. Progress • Sometimes actions require some time to process • Form submission • Data calculations • Uploads • Provide feedback when an action is in progress 101
  • 103. • Provide indication of tasks in progress BEST PRACTICE • Disable “submit” button after user clicks it to avoid duplicate submissions 103
  • 104. Success • After successful form completion confirm data input in context • On updated page • On revised form • Provide feedback via • Message (removable) • Animated Indicator 104
  • 105. 105
  • 106. 106
  • 108. • Clearly communicate a data submission has been successful BEST PRACTICE • Provide feedback in context of data submitted 108
  • 109. 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 109
  • 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 additional keyboard support • Direct access to associated input fields • Consider <fieldset> to group related form fields 110
  • 111. Web Form Creation Tools • Wufoo • http://www.wufoo.com • Form Assembly • http://www.formassembly.com • icebrrg • http://www.icebrrg.com 111
  • 112. For more information… • Functioning Form • www.lukew.com/ff/ • Site-Seeing: A Visual Approach to Web Usability • Wiley & Sons • Drop me a note • luke@lukew.com 112