Forms usability design best practices experience dynamics web seminar

All contents © Copyright 2010 Experience Dynamics Inc.

1

Forms Usability Design Best Practices

An Experience Dynamics training

WEB SEMINAR

With Frank Spillers, MS


2

About Your Speaker

Frank SpillersMasters Cognitive Science 11 years User Centered Design experienceFounder, Experience Dynamics- leading Usability Design

Research firm


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


What’s wrong with this form?

4


5

What’s wrong with this form?


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!)


7

1. Forms Usability Known Issues


8

People hate forms!


9

Intention/ Purpose leads form design


10

Please Ask for Less


11

Vertical is faster

This is horizontal!


12

Error checking requires focused attention

What is required here?


13

Will they know what you mean?

What are Tags and why should I use them?


14

Page Layout and Design matters


15

Reading adds stress to forms


16

Large, centered buttons help


17

2. 10 Best Practices for Designing Form Elements


18

Pre-populate and prompt content

Best Practice:

#1


19

Provide rule deciphering

Best Practice:

#2


20

Maintain Relevancy/ Connection

Best Practice:

#3


21

Best Practice:

#4

Organize with visual grouping


22

Make it easy to find the form!

Best Practice:

#5


23

Treat it as an Instructional Conversation

Best Practice:

#6


24

Ask to leave page

Best Practice:

#7


25

Provide expert help tools

Best Practice:

#8


26

Use dynamic elements

Best Practice:

#9


27

Dynamically Display Next Steps

Best Practice:

#10


28

3. 5 Form Conversion Essentials


29

1. Text above textbox for rapid fill-out


30

2. Add visual cues; make form fun


31

3. Explain process/manage expectations


32

4. Provide a high touch way out


33

5. Reinforce Motivation


34

Bonus tip: Up-sell at purchase fields


35

4. Adding Desirability and Satisfaction to Forms


36

Make field boxes big, roomy


37

Use smart AJAX field logic

AJAX MaskedEdi

t

AJAX AutoSugge

st

AJAX PopupContr

ol


38

Provide context of use features


39

Provide contextual help text


40

Integrate instuctions/ remove reading


41

Make Active action a button; passive a link

Avoid Clear or Reset buttons on

forms!


42

Use appealing visual design


43

5. Forms Accessibility


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.


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.


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.


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


48

6. Q & A


49

thank you!1-800-978-9183www.experiencedynamics.com

Frank Spillers, [email protected]


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.

Forms usability design best practices experience dynamics web seminar

Design

Transcript of Forms usability design best practices experience dynamics web seminar