Checking the "Feel" of your UI with an Interaction Audit

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

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

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

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

Look & Feel

[photo of mouse and/or trackpad and/or Wacom tablet ] Feel: How you operate it with your hands

Q: What interactive elements to use?

A: All of them

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

Part 2 What we did

Project phases
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

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

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

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
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! peter.stahl [at] ebay.com josh.williams [at] 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

http://www.peterates.com	20
http://ued03	12
http://localhost	2
file://	2
http://blog.jenniferlindsay.com	1
http://www.slideshare.net	1
http://x.tuna.to	1
http://www.techgig.com	1
http://jennifered.wordpress.com	1

Checking the "Feel" of your UI with an Interaction Audit

by Peter Stahl

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 41

Statistics