Peter Stahl Josh Damon WilliamseBay Hot Studio

Checking the Feel of your UI with an Interaction Audit

What’s in this for you

• Discover why “Feel” matters

• Find out what an Interaction Audit is

• Learn our ground-breaking methodology

• See scintillating Feel findings

• Marvel at what an Audit can do for you

• Ponder exciting future advancements

“Who are these guys?”

• Peter Stahl– Lead User Experience Designer at eBay– Design patterns, holistic design– Led the interaction audit– Plays oboe

• Josh Damon Williams– Senior User Experience Designer at Hot Studio– Wide variety of projects and roles– Key strategist for interaction audit– Plays turntables

Interaction Audit team

eBayDeborah Adams Estrada, Jennifer Anderson, Jennifer Kelly, Preston Smalley , Peter Stahl, Karenina Susilo

Hot StudioJon Littell, David Paige, Josh Damon Williams

Persistent SystemsPrasad Bartakke, Chaitrali Dhole, Rajesh Gode

Part 1

Why audit interactions?

Look & Feel

Look & Feel

silk

water

[photo of mouse and/or trackpad and/or Wacom tablet ]

Feel: How you operate it with your hands

Q:What interactive elements to use?

Q:What interactive elements to use?

A: All of them

Q:What interactive elements to use?

A: Hmmm…

Feel affects:

• Learning curve

• Mental bandwidth needed to operate UI

• User success (or errors)

• Site personality

• Brand promise

• Adoption (or abandonment)

eBay Site Experience: a Holistic View

Feel

Part 2

What we did

Project phases

1. Strategy

2. Data Collection

3. Analysis

4. Recommendations

Project phase 1:

STRATEGY

Ark of the Covenant

A “compelling artifact”

Example flow:New user finds an item, bids for it, registers as member

Example flow: User bids on a Watched item, is outbid, rebids

Example flow:New seller lists item for sale, creates Seller account

Audit checklist

Project phase 2:

DATA COLLECTION

FILE MAKER

ΩOur FileMaker Pro database

Database Fields (partial list)

Very relevant:• Task & subtask• Step description• Page & URL• Action (syntactic)• Screen shot close-up• Instructional text• Click/keystroke record

Less relevant:• Region on page• Icons

– symbol, meaning, behavior

• Interface elements– label, type, style, notes

• Comments on Feel

Project phase 3:

ANALYSIS

Roll of Paper

Scrolls unrolled

Flows as storyboards

Ideas for presenting findings

Radial charts to track Feel metrics

Emotional flow to track Feel effects

A course correction

Project phase 4:

RECOMMENDATIONS

[DOCUMENT FORMAT SLIDE (FROM MY NOTEBOOK)]

“Affordance”A visual cue that some interaction is offered

“Affordance Inconsistency”A single visual cue offering multiple

interactions

Affordance Inconsistencies: Hyperlink

QuickTime™ and a decompressor

are needed to see this picture.QuickTime™ and a

decompressorare needed to see this picture.

QuickTime™ and a decompressor

are needed to see this picture.

QuickTime™ and a decompressor

are needed to see this picture.

User action… System response…

Affordance Inconsistencies: Hyperlink

Loads new page

Clicks link… Immediate in-line response

Clicks link…

QuickTime™ and a decompressor

are needed to see this picture.

Affordance Inconsistencies: Hyperlink

User action… System response…

Opens modal dialog box

Clicks link… Expands/collapses in-line page content

QuickTime™ and a decompressor

are needed to see this picture.

QuickTime™ and a decompressor

are needed to see this picture.

QuickTime™ and a decompressor

are needed to see this picture.

Affordance Inconsistencies: Hyperlink

Clicks link…

Affordance Inconsistencies: Hyperlink

Clicks link… Jump to anchor elsewhere on page

Clicks link… Opens content in new browser window

QuickTime™ and a decompressor

are needed to see this picture.

QuickTime™ and a decompressor

are needed to see this picture.

QuickTime™ and a decompressor

are needed to see this picture.

QuickTime™ and a decompressor

are needed to see this picture.

Affordance Inconsistencies: Hyperlink

User action… System response…

QuickTime™ and a decompressor

are needed to see this picture.

Affordance Inconsistencies: Hyperlink

Clicks link… Closes a popup layer

Clicks link…

QuickTime™ and a decompressor

are needed to see this picture.

QuickTime™ and a decompressor

are needed to see this picture.

Adds assistance frame to window

User action… System response…

Affordance Inconsistencies: Hyperlink

Affordance Inconsistencies: TabAffordance Inconsistencies: Tab

“Task”A path to accomplish an immediate goal

“Task Inconsistency”A single goal accomplished via

multiple paths

Task Inconsistencies: Filtering Data

1. Submit a form

2. Click tabs

3. Click criteria links

4. Click “toggle” link

Task Inconsistencies: Filtering Data

5 x Enable/Disable Form Section InconsistenciesTask Inconsistencies: Enable/Disable Section of a Form

1. Checkbox

2. Tabs

3. Dropdown menu

4. Radio buttons

“Data Object”A representation of a data record or other

piece of data

“Data Object Inconsistency”A single data object represented

multiple ways

Data Object Inconsistencies: Members CAPTURESData Object Inconsistencies: eBay Member

Data Object Inconsistencies: MembersData Object Inconsistencies: eBay Member

The Interaction Audit report

Part 3

Actions & Future Directions

A page from the Interaction Audit

Interaction goals

• Low learning curve, due to…

• Consistent cues for actions

• Predictable behavior of affordances

• Instant recognition of interface elements

• Allow eBay member content to shine

Clean-up teams

The Clickers links and buttons

The Swappers tabs and toggles

The Submitters forms and form elements

The Shufflers sorting and filtering

The Disclosers overlays and sections

An eBay design pattern

Clean-up process

1. Find problem area in the audit report

2. Recommend simpler set of interactions

3. Document as design patterns

4. Engineering creates code components

5. New and upgraded site areas use the cleaned-up interactions

What about interaction inconsistencies without obvious solutions?

Example: Customize page layout

6. Paired ordered lists w/buttons

Task Inconsistencies: Customize page layout

3. Schematic picture with buttons

5. Hyperlinks

2. Dropdown menu

4. Form in floating dialog

1. Form on its own page

Basic requirements: restaurant

Basic requirements: - Clean dishes & utensils- Courteous staff - Accurate check tabulation - No cockroaches

Basic requirements: - Clean dishes & utensils- Courteous staff - Accurate check tabulation - No cockroaches

Site-specific values: restaurant

Site-Specific Value:Marrying food and wine felicitously

So must have:Comprehensive wine list

Site-Specific Value:Joy in boundless variety

So must have:Extensive menu

Site-Specific Value:Convenience

So must have:Speedy customer throughput

Basic requirements: interaction design

Basic requirements: - Navigable interface- Orientation cues- Consistent basic interactions- No cockroaches

Site-specific values: interaction design

Site-Specific Value:- Plethora of tools to help buyers- Compatibility

So must have:- Dense pages- Progressive discovery

Site-Specific Value:- Perceived simplicity - Convenient adding & editing of lists

So must have:- Sparse pages - Direct manipulation

Site-Specific Value:- Clean, friendly, safe- Tons of fun add-in applications

So must have:- Transparency- Visual app framework

Basic requirements: - Navigable interface- Orientation cues- Consistent basic interactions- No cockroaches

Values can vary depending on the conversation

“Feel” metrics

Feel metrics: objective

• Page dimensions– height, width

• Number of interactive entities– Hyperlinks, buttons, form elements, icons

• Interactive density– No. of interactive entities ÷ page size

• “Jack-in-the-boxiness”– No. of mouse-over elements ÷ page size

Feel metrics: semi-objective

• Number of syntactic actions in a task

• “Reloadiness”– Latencies in response to interactions

• Number/frequency of tool switches– Mouse to keyboard and back

• Amount of dynamic behavior– Pop-up layers, video, “sponginess” (layout

changes triggered by mouse-over)

Feel metrics: subjective

• Number of different interaction styles, metaphors, paradigms in a page or task

• Simplicity/complexity

• Flatness/bumpiness– Flat = uses only hyperlinks & other primitives– Bumpy = uses more advanced interactions

• Cognitive load

What we’ve learned

1. Nowadays it’s important to check “Feel”2. An Interaction Audit can be compelling,

actionable, and spark real improvement3. Audits should focus on flows and be

representative of real user experience4. Simple tools work; storyboards are key5. Audit for inconsistencies in Affordance, Task,

and Data Object representation6. Clean up obvious problems first7. Harder problems require site-specific values8. “Feel” metrics may hold promise

Thank you!

And thanks to Flickr users who generously license their photos with Creative Commons attribution

http://flickr.com/photos/ihtatho/627226315/

http://flickr.com/photos/cyberslayer/952121271/

http://flickr.com/photos/dsevilla/97727582/

http://flickr.com/photos/97445131@N00/2334570947/

http://flickr.com/photos/amanky/1377593634/

http://flickr.com/photos/mastrobiggo/2341517672/

http://flickr.com/photos/shuttleworth/1578035901/

http://flickr.com/photos/joebeone/1764153258/http://flickr.com/photos/michaelcr/856252290/

http://flickr.com/photos/scenicaviator/289331019/

http://flickr.com/photos/0olong/310216817/

http://flickr.com/photos/thomashawk/2269208776/

http://flickr.com/photos/briansolis/1411905457/

Questions