Peter Stahl Josh Damon Williams eBay Hot Studio Checking the Feel of your UI with an Interaction Audit

“ 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

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 eBay Deborah Adams Estrada, Jennifer Anderson, Jennifer Kelly, Preston Smalley , Peter Stahl, Karenina Susilo Hot Studio Jon Littell, David Paige, Josh Damon Williams Persistent Systems Prasad Bartakke, Chaitrali Dhole, Rajesh Gode

eBay

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

Hot Studio

Jon Littell, David Paige, Josh Damon Williams

Persistent Systems

Prasad Bartakke, Chaitrali Dhole, Rajesh Gode

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

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

Part 1 What is “Feel”, and why should I care?

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?

Q: What interactive elements to use? A: All of them

Q: What interactive elements to use?

A: All of them

Q: What interactive elements to use? A: Hmmm…

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)

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 Strategy Data Collection Analysis Recommendations

Strategy

Data Collection

Analysis

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

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 Task Data Object

Affordance A visual cue that some interaction is offered Affordance Inconsistency A single visual cue offering multiple interactions

Affordance

A visual cue that some interaction is offered

Affordance Inconsistency

A single visual cue offering multiple interactions

Affordance Inconsistencies: Hyperlink User action… System response… Affordance Inconsistencies: Hyperlink Loads new page Clicks link… Immediate in-line response Clicks link…

Affordance Inconsistencies: Hyperlink User action… System response… Opens modal dialog box Clicks link… Expands/collapses in-line page content Affordance Inconsistencies: Hyperlink Clicks link…

Affordance Inconsistencies: Hyperlink Clicks link… Jump to anchor elsewhere on page Clicks link… Opens content in new browser window Affordance Inconsistencies: Hyperlink User action… System response…

Affordance Inconsistencies: Hyperlink Clicks link… Closes a popup layer Clicks link… Adds assistance frame to window User action… System response… Affordance Inconsistencies: Hyperlink

Affordance Inconsistencies: Tab Affordance Inconsistencies: Tab

Task A path to accomplish an immediate goal Task Inconsistency A single goal accomplished via multiple paths

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 Inconsistencies Task 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

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 CAPTURES Data Object Inconsistencies: eBay Member

Data Object Inconsistencies: Members Data 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

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

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 Find problem area in the audit report Recommend simpler set of interactions Document as design patterns Engineering creates code components New and upgraded site areas use the cleaned-up interactions

Find problem area in the audit report

Recommend simpler set of interactions

Document as design patterns

Engineering creates code components

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

Site-specific values: restaurant Basic requirements: - Clean dishes & utensils - Courteous staff - Accurate check tabulation - No cockroaches 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: - Clean, friendly, safe - Tons of fun add-in applications So must have: - Transparency - Visual app framework Site-Specific Value: - Perceived simplicity - Convenient adding & editing of lists So must have: - Sparse pages - Direct manipulation 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

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)

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

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 Nowadays it’s important to check “Feel” An Interaction Audit can be compelling, actionable, and spark real improvement Audits should focus on flows and be representative of real user experience Simple tools work; storyboards are key Audit for inconsistencies in Affordance, Task, and Data Object representation Clean up obvious problems first Harder problems require site-specific values “ Feel” metrics may hold promise

Nowadays it’s important to check “Feel”

An Interaction Audit can be compelling, actionable, and spark real improvement

Audits should focus on flows and be representative of real user experience

Simple tools work; storyboards are key

Audit for inconsistencies in Affordance, Task, and Data Object representation

Clean up obvious problems first

Harder problems require site-specific values

“ Feel” metrics may hold promise

Thank you! josh.williams [at] hotstudio.com hottub.hotstudio.com

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/ [email_address] /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? peter.stahl [at] ebay.com josh.williams [at] hotstudio.com