The Secrets of Building Intuitive Web Apps

The Secrets of Building Intuitive Web Apps User Interface 10 The Secrets of Building Intuitive Web Apps User Interface Engineering www.uie.com Re...
Author: Shannon Young
2 downloads 0 Views 595KB Size
The Secrets of Building Intuitive Web Apps

User Interface 10

The Secrets of Building Intuitive Web Apps

User Interface Engineering

www.uie.com

Reversing The Workstation

© Copyright 2001-2005, User Interface Engineering

Slides 1-2

www.uie.com

The Secrets of Building Intuitive Web Apps

User Interface 10

Secrets of Building Intuitive Apps

www.uie.com

Users desire web application interfaces to be intuitive Building an intuitive interface requires: Understanding the users' current knowledge Reducing the required target knowledge An iterative design process with the proper feedback loop

Everything A User Could Know

www.uie.com

All knowledge about a potential design

© Copyright 2001-2005, User Interface Engineering

All Potential Knowledge

Slides 3-4

www.uie.com

The Secrets of Building Intuitive Web Apps

User Interface 10

Current Knowledge

www.uie.com

What users know when they approach the design

Current Knowledge

Target Knowledge

www.uie.com

What users need to know to accomplish their goal

© Copyright 2001-2005, User Interface Engineering

Current Knowledge

Target Knowledge

Slides 5-6

www.uie.com

The Secrets of Building Intuitive Web Apps

User Interface 10

The Knowledge Gap

www.uie.com

What separates current knowledge from the required target knowledge Designs have to fill the knowledge gap

Gap Current Knowledge

Target Knowledge

www.uie.com

Two Kinds of Knowledge

© Copyright 2001-2005, User Interface Engineering

Tool Knowledge: what users know about how to use your app Domain Knowledge: what users know about the domain(s) related to that tool Some apps have more than one domain

Slides 7-8

www.uie.com

The Secrets of Building Intuitive Web Apps

User Interface 10

www.uie.com

H&R Block Online Tax Program

Tool Knowledge

www.uie.com

Tool Knowledge includes:

© Copyright 2001-2005, User Interface Engineering

Mouse tutorial Filling out a form Printing a PDF The mechanics of online filing Tool Knowledge

Novice

Expert Slides 9-10

www.uie.com

The Secrets of Building Intuitive Web Apps

User Interface 10

www.uie.com

H&R Block Online Tour

Domain Knowledge

www.uie.com

Domain Knowledge includes:

© Copyright 2001-2005, User Interface Engineering

Tax-specific terminology such as 'dependents' and 'exemptions' What qualifies as a deduction? How do you share expenses with a divorced spouse? Domain Knowledge

None

Expert Slides 11-12

www.uie.com

The Secrets of Building Intuitive Web Apps

User Interface 10

www.uie.com

H&R Block Marital Status

www.uie.com

H&R Block Acknowledges Both

© Copyright 2001-2005, User Interface Engineering

Slides 13-14

www.uie.com

The Secrets of Building Intuitive Web Apps

User Interface 10

Knowledge in Two Dimensions

Domain Knowledge

www.uie.com

Expert Little Tool Knowledge Lots of Domain Knowledge

Lots of Tool Knowledge Lots of Domain Knowledge

Little Tool Knowledge Little Domain Knowledge

Lots of Tool Knowledge Little Domain Knowledge Expert

None Tool Knowledge

www.uie.com

Is this ATM Intuitive?

© Copyright 2001-2005, User Interface Engineering

Slides 15-16

www.uie.com

The Secrets of Building Intuitive Web Apps

User Interface 10

Making an Application Intuitive Must satisfy one of two conditions:

www.uie.com

Either current knowledge and target knowledge are the same, OR Users don't notice they are bridging the gap

Current knowledge and target knowledge must be close together Taking advantage of convention leverages current knowledge Simplifying the interface reduces target knowledge

www.uie.com

Your Legacy System Is Showing (1)

© Copyright 2001-2005, User Interface Engineering

Slides 17-18

www.uie.com

The Secrets of Building Intuitive Web Apps

User Interface 10

www.uie.com

Your Legacy System Is Showing (2)

www.uie.com

Your Legacy System Is Showing (3)

© Copyright 2001-2005, User Interface Engineering

Slides 19-20

www.uie.com

The Secrets of Building Intuitive Web Apps

User Interface 10

www.uie.com

Your Legacy System Is Showing (4)

www.uie.com

Your Legacy System Is Showing (5)

© Copyright 2001-2005, User Interface Engineering

Slides 21-22

www.uie.com

The Secrets of Building Intuitive Web Apps

User Interface 10

www.uie.com

Your Legacy System Is Showing (6)

www.uie.com

Your Legacy System Is Showing (7)

© Copyright 2001-2005, User Interface Engineering

Slides 23-24

www.uie.com

The Secrets of Building Intuitive Web Apps

User Interface 10

No Consistency for Interaction (1)

www.uie.com

Something as common as date input is implemented uniquely every time

No Consistency for Interaction (2)

www.uie.com

Sometimes it's implemented differently on the same site

© Copyright 2001-2005, User Interface Engineering

On the home page

On the reservation page

Slides 25-26

www.uie.com

The Secrets of Building Intuitive Web Apps

User Interface 10

No Consistency for Interaction (3)

www.uie.com

Proflowers uses a pulldown Yahoo Group Calendar didn't even use a calendar when adding an event

www.uie.com

Uncontrollable Platform Issues (1)

© Copyright 2001-2005, User Interface Engineering

Slides 27-28

www.uie.com

The Secrets of Building Intuitive Web Apps

User Interface 10

www.uie.com

Uncontrollable Platform Issues (2)

'Page' Model Causes Problems

www.uie.com

GUI Design allows for dynamic interaction

© Copyright 2001-2005, User Interface Engineering

Validation and business rule enforcement handled without server contact

Users become baffled by confusing interaction sequences and obscure messages

Slides 29-30

www.uie.com

The Secrets of Building Intuitive Web Apps

User Interface 10

Why Can't I Do Both?

www.uie.com

User had two choices:

© Copyright 2001-2005, User Interface Engineering

Add to Bag Continue Shopping

Slides 31-32

www.uie.com

The Secrets of Building Intuitive Web Apps

User Interface 10

Page-Only Updating Causes Confusion

www.uie.com

User could potentially miss important information because they didn't "update"

© Copyright 2001-2005, User Interface Engineering

Slides 33-34

www.uie.com

The Secrets of Building Intuitive Web Apps

User Interface 10

Secrets of Building Intuitive Apps Anyone can build intuitive web applications

www.uie.com

It does require substantial effort

© Copyright 2001-2005, User Interface Engineering

You need to understand your users' current knowledge Focus on reducing the target knowledge Only possible with an iterative design process with the proper feedback loop AJAX, RIAs, and other new technologies will make things easier Slides 35-36

www.uie.com