Geoportal Usability Evaluation Geoportal Usability Evaluation
Forms usability design best practices experience dynamics web seminar
-
Upload
experience-dynamics -
Category
Design
-
view
108 -
download
2
description
Transcript of Forms usability design best practices experience dynamics web seminar
![Page 1: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/1.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
1
Forms Usability Design Best Practices
An Experience Dynamics training
WEB SEMINAR
With Frank Spillers, MS
![Page 2: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/2.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
2
About Your Speaker
Frank SpillersMasters Cognitive Science 11 years User Centered Design experienceFounder, Experience Dynamics- leading Usability Design
Research firm
![Page 3: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/3.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
3
Agenda Forms are a foundational element of web and web application user experience. Users interact with forms when performing subscribe, sign-up or ecommerce check-out actions. Forms are used for data-entry and to make things happen on search interfaces, in pop-up windows and more. How easily and comfortably can your users interact with and complete your forms? In short, how annoying are your forms?
1. Forms Usability Known Issues2. 10 Best Practices for Designing Form Elements3. 5 Form Conversion Essentials4. Adding Desirability and Satisfaction to Forms5. Forms Accessibility 6. Q & A
![Page 4: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/4.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
What’s wrong with this form?
4
![Page 5: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/5.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
5
What’s wrong with this form?
![Page 6: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/6.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
6
The Business of Forms
Yesterday’s forms• Long• Tedious• Rude• Unhelpful• Demanding• Error handling centric
Today’s forms• Shorter• Breathable• Context-sensitive help• Interactive• Engaging• Rewarding (no mistakes!)
![Page 7: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/7.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
7
1. Forms Usability Known Issues
![Page 8: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/8.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
8
People hate forms!
![Page 9: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/9.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
9
Intention/ Purpose leads form design
![Page 10: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/10.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
10
Please Ask for Less
![Page 11: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/11.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
11
Vertical is faster
This is horizontal!
![Page 12: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/12.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
12
Error checking requires focused attention
What is required here?
![Page 13: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/13.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
13
Will they know what you mean?
What are Tags and why should I use them?
![Page 14: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/14.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
14
Page Layout and Design matters
![Page 15: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/15.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
15
Reading adds stress to forms
![Page 16: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/16.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
16
Large, centered buttons help
![Page 17: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/17.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
17
2. 10 Best Practices for Designing Form Elements
![Page 18: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/18.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
18
Pre-populate and prompt content
Best Practice:
#1
![Page 19: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/19.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
19
Provide rule deciphering
Best Practice:
#2
![Page 20: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/20.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
20
Maintain Relevancy/ Connection
Best Practice:
#3
![Page 21: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/21.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
21
Best Practice:
#4
Organize with visual grouping
![Page 22: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/22.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
22
Make it easy to find the form!
Best Practice:
#5
![Page 23: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/23.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
23
Treat it as an Instructional Conversation
Best Practice:
#6
![Page 24: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/24.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
24
Ask to leave page
Best Practice:
#7
![Page 25: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/25.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
25
Provide expert help tools
Best Practice:
#8
![Page 26: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/26.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
26
Use dynamic elements
Best Practice:
#9
![Page 27: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/27.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
27
Dynamically Display Next Steps
Best Practice:
#10
![Page 28: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/28.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
28
3. 5 Form Conversion Essentials
![Page 29: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/29.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
29
1. Text above textbox for rapid fill-out
![Page 30: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/30.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
30
2. Add visual cues; make form fun
![Page 31: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/31.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
31
3. Explain process/manage expectations
![Page 32: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/32.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
32
4. Provide a high touch way out
![Page 33: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/33.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
33
5. Reinforce Motivation
![Page 34: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/34.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
34
Bonus tip: Up-sell at purchase fields
![Page 35: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/35.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
35
4. Adding Desirability and Satisfaction to Forms
![Page 36: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/36.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
36
Make field boxes big, roomy
![Page 37: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/37.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
37
Use smart AJAX field logic
AJAX MaskedEdi
t
AJAX AutoSugge
st
AJAX PopupContr
ol
![Page 38: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/38.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
38
Provide context of use features
![Page 39: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/39.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
39
Provide contextual help text
![Page 40: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/40.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
40
Integrate instuctions/ remove reading
![Page 41: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/41.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
41
Make Active action a button; passive a link
Avoid Clear or Reset buttons on
forms!
![Page 42: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/42.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
42
Use appealing visual design
![Page 43: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/43.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
43
5. Forms Accessibility
![Page 44: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/44.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
Make Forms Accessible
44
Access Tip:1.Form elements need to be labeled with <label> tag. Also include instructions.2.Radio buttons need a fieldset. 3.Use fieldsets and legends to group related form elements.
Note: all labeling should be semantic.
![Page 45: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/45.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
45
Support Screen Readers, Keyboard access
Access Tip:1.Use tabindex attribute so users can tab across fields.2.Set up shortcut keys using accesskey.
![Page 46: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/46.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
Make Script Accessible
46
Access Tip:1.Provide <noscript> option for JavaScript.2.Let users select (link, keyboard select etc) an event. 3.Make scripts actionable via keyboard commands.
![Page 47: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/47.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
47
Accessible Error Handling
Access Tip:1.Indicate what happened and what needs to be done. 2.Use script prompts for incorrect field data re-entry. --or--3. Link to error form fields from top of page.
*WebAIM.org tip
![Page 48: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/48.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
48
6. Q & A
![Page 49: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/49.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
49
thank you!1-800-978-9183www.experiencedynamics.com
Frank Spillers, [email protected]
![Page 50: Forms usability design best practices experience dynamics web seminar](https://reader035.fdocuments.net/reader035/viewer/2022070304/54c7eeed4a7959a7608b45c4/html5/thumbnails/50.jpg)
All contents © Copyright 2010 Experience Dynamics Inc.
About Experience Dynamics: Experience Dynamics is a professional usability design research firm. Through its User Centered Design services, Experience Dynamics assists organizations with removing the frustration and confusion that plagues most website and software development projects. Companies benefiting from Experience Dynamics actionable usability recommendations include AutoNation, IBM, Hewlett Packard, Intel, Verizon, Microsoft, Four Seasons, Washington Mutual, Bank One, Target, Land Rover, Providence Health System and KeyBank.
About Experience Dynamics web seminars:Experience Dynamics offers a recurring set of usability web seminars on hot usability topics. The web seminars provide an overview and quick review of key issues and opportunities related to best practices in usability research.
The seminars are presented by Frank Spillers, MS, a recognized expert in the field of usability engineering and user experience design. Experience Dynamics seminars are complimentary and are attended by companies including Intel, Citigroup, KeyBank, The Hartford, Fujitsu, Intuit, EMC Corp, Chase, US Bank, Apple, Amazon.com, Business Objects, Mentor Graphics, GM, Toyota and others.