checking the "feel" of your ui with an interaction audit
DESCRIPTION
Presentation by Peter Stahl (eBay) and Josh Damon Williams (Hot Studio) at Web 2.0 Expo SF, 25 April 2008TRANSCRIPT
Peter Stahl Josh Damon WilliamseBay Hot Studio
Checking the Feel of your UI with an Interaction Audit
“Who are these guys?”
Peter StahlLead User Experience Designer at eBay
Design patterns, holistic design
Led the interaction audit
Plays oboe
Josh Damon WilliamsSenior 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
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
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
Task
Data Object
AffordanceA visual cue that some interaction is offered
Affordance InconsistencyA 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
TaskA path to accomplish an immediate goal
Task InconsistencyA 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 ObjectA representation of a data record or other
piece of data
Data Object InconsistencyA 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 learned1. 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!peter.stahl [at] ebay.comjosh.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/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?peter.stahl [at] ebay.comjosh.williams [at] hotstudio.com