Designing usable web applications (part 1) experience dynamics web seminar

transcript

An Experience Dynamics training

WEB SEMINAR

With Frank Spillers, MS

Designing Usable Web Applications (part 1)

About Your Speaker

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

Design Research firm

Agenda Web application projects need a solid understanding of what success criteria constitutes a usable web application. Teams deploying web applications should be utilizing emerging best practices in Interaction Design, such as how to design for "progressive disclosure" using dynamic interface techniques. This seminar will outline best practices, things to avoid in designing usable web applications as well as a review of recent client case studies.

1. The role of "Interaction Design" in a web application project 2. How do you measure usability of a web application? 3. The 10 common web application design mistakes (and what to do about

them) 4. Case studies: Real-world examples of web application usability 5. Q & A

1. The role of "Interaction Design" in a web application project

Types of Web apps

• Account mgmt• Services managed online• Administrator apps (editing etc)• Data and dashboard views• Web site log in areas (enhanced and

secure data)• Full software apps –web delivery

Why Interaction Design?

• Modeling user behavior• Task-centered design approach• Flow of user interactions• Better suited for web apps than

Information Architecture

Interaction Design: Focuses on how the user interacts with a page, application or product. Interaction design follows a task centered design approach ensuring the flow of the interaction as the central goal. Interaction design predates the Web world, and finds its roots in the wider field of Human Computer Interaction. Interaction design is a more general umbrella that many working on Web 2.0 interfaces and web applications prefer, since IA appears stuck in web-page centric paradigms.

Interaction Design moves you away from website centric paradigms and affords a focus on the mission critical component of a web app: helping users interact with controls quickly and efficiently.

Get a Free Poster if you attend Part 2 of this seminar!

Poster details: http://bit.ly/cHWLXu

Problems and Solutions

1. Progressive Disclosure

2. Task-centric3. Containership

1. User adoption2. Discoverability3. Navigation

Interaction design techniques:Design problems:

(Note: “Designing Usable Web Apps-Part 2” goes into specific detail of how to apply these)

2. How do you measure usability of a web application?

Web app usability metrics

Depends* on your industry but common metrics we use include:

-Ease of learning decreases-Ease of use increases-Ease of understanding decreases-Pleasurability or satisfaction increases-Call center traffic decreases-Sell-ability increases

*Context of use (other then Banking, consumers do not “want” to use web apps like they might mobile apps)

Two biggest challenges

#1: Users are less in control of a web app experience…

#2: Discoverability behavior is lacking (it’s not surfing it’s work)

3. The 10 common web application design mistakes (and what to do about them)

10 web app usability mistakes

1. Implicit knowledge required2. Navigation nested and deep (not flat)3. Task-Orientation missing

4. Too much Obscurity 5. Powerful features6. Metaphor overload7. Unhelpful forms8. Log-in confusion9. Work lost or loose track10. Wildly powerful controls

#1 Implicit knowledge required– Invisible Rules and logic (do this to

make this happen)

GOOD EXAMPLEBAD EXAMPLE

#2 Navigation nested and deep (not flat)

– Dropdowns, hover menus, “deep drilling”

GOOD EXAMPLEBAD EXAMPLE

#3 Task Orientation -- Start pages (wrong info)

17GOOD EXAMPLE

BAD EXAMPLE

4. Too much Obscurity– Icons or Labels

BAD EXAMPLE

GOOD EXAMPLE

5. Powerful features– Hidden deep within (or in parallel)

BAD EXAMPLE GOOD EXAMPLE

6. Metaphor overload

– Abstract concepts or processes

BAD EXAMPLEGOOD EXAMPLE

7. Unhelpful forms

– Help or Inline examples

GOOD EXAMPLE

8. Log-in confusion

– Multiple logins

22BAD EXAMPLE

9. Work lost or loose track

where left off; what working on

GOOD EXAMPLE

10. Wildly powerful controls

– Eg. dropdowns that open pop ups or disappear- AJAX tricks

BAD EXAMPLE GOOD EXAMPLE

4. Case studies: Real-world examples of web application usability

Providence Health & Services

Experience Dynamics work

Task-centric workflow

Visual Dashboard

Fuse Insight

Nike Golf

5. Q & A

Join us for Part 2

1. Web application engagement: increasing user adoption and discoverability.

2. 5 Common Web application mistakes and solutions.

3. What’s to know about Designing IA for Web apps: layout, navigation, progressive disclosure.

4. 12 practical tips for web app elegance from our extensive usability testing over 5 years.

5. Q & A

Get 50% OFF Enter Code WEBAPP2

(use anytime throughout 2011)

Agenda Seminar details: http://bit.ly/dXiH1i

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.