Forms usability design best practices experience dynamics web seminar

Forms Usability Design Best Practices

An Experience Dynamics training

WEB SEMINAR

With Frank Spillers, MS

About Your Speaker

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

Research firm

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?

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

1. Forms Usability Known Issues

People hate forms!

Intention/ Purpose leads form design

Please Ask for Less

Vertical is faster

This is horizontal!

Error checking requires focused attention

What is required here?

Will they know what you mean?

What are Tags and why should I use them?

Page Layout and Design matters

Reading adds stress to forms

Large, centered buttons help

2. 10 Best Practices for Designing Form Elements

Pre-populate and prompt content

Best Practice:

Provide rule deciphering

Best Practice:

Maintain Relevancy/ Connection

Best Practice:

Organize with visual grouping

Make it easy to find the form!

Best Practice:

Treat it as an Instructional Conversation

Best Practice:

Ask to leave page

Best Practice:

Provide expert help tools

Best Practice:

Use dynamic elements

Best Practice:

Dynamically Display Next Steps

Best Practice:

3. 5 Form Conversion Essentials

1. Text above textbox for rapid fill-out

2. Add visual cues; make form fun

3. Explain process/manage expectations

4. Provide a high touch way out

5. Reinforce Motivation

Bonus tip: Up-sell at purchase fields

4. Adding Desirability and Satisfaction to Forms

Make field boxes big, roomy

Use smart AJAX field logic

AJAX MaskedEdi

AJAX AutoSugge

AJAX PopupContr

Provide context of use features

Provide contextual help text

Integrate instuctions/ remove reading

Make Active action a button; passive a link

Avoid Clear or Reset buttons on

forms!

Use appealing visual design

5. Forms Accessibility

Make Forms Accessible

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.

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

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.

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

6. Q & A

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

Frank Spillers, MSFrank.Spillers@experiencedynamics.com

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

Usability 2009 J T Burns1 Usability & Usability Engineering.

Usability & Usability Engineering

Usability Engineering. 2 Contents Usability Engineering Know the user Task analysis Usability metrics The usability engineering process.

FINDING USABILITY PROBLEMS THROUGH HEURISTIC EVALUATION usability... · Usability problems, Usability expertise, Discount usability engineering, Telephone-operated interfaces. INTRODUCTION

Select and Implement a Customer Relationship Management ...€¦ · Maximizer: A vendor with exceptional usability and competitive pricing. Microsoft Dynamics: A CRM mainstay, Dynamics

Indiana World Usability Day 2012 November 8, 2012 Improving web forms usability Jenny Hertel User Experience Analyst Process eXperience Architecture Group.

Molecular dynamics-of-ions-in-two-forms-of-an-electroactive-polymer

Juhan’s Weight vs Freq of Sex. lots of books on design guidelines, apis, usability, forms, css...

Usability 2004 J T Burns1 Usability & Usability Engineering.

Usability Testing. What is usability testing for?

Forms Printer User Guide - Accountable Printer User Guide Version 10.51 for Dynamics GP 10 A Guide for the Administration, Installation & Implementation of Forms Printer Forms Printer

018 - Usability Geek - Website Usability Through Automated Usability Evaluation

Geoportal Usability Evaluation Geoportal Usability Evaluation

Microsoft dynamics ax2012 : forms and tables methods call sequences, How To?

Web Survey and Forms Usability Design & Testing

Avvo Forms Usability Study Presentation - Kyle Witt

Usability, Affordance, and Usability Principlesuser.ceng.metu.edu.tr/~tcan/se542_f1516/Schedule/week1... · 2015-09-30 · Usability, Affordance, and Usability Principles Visual affordances

MSDN Evening: Upgrading an existing Dynamics NAV ......Previous versions of Microsoft Dynamics NAV and the Classic client in Microsoft Dynamics NAV 2009 display data in forms, such

Usability and forms, KANA Europe customer summit

The Usability of Usability