Checking the “Feel” of Your UI with an Interaction Audit
Josh Damon Williams (Hot Studio, Inc. ), Peter Stahl (eBay)
1:30pm – 2:20pm Friday, 04/25/2008

The best web sites feel smooth and predictable, yet powerful and deep. They achieve this by presenting a limited set of well-chosen interactions that support users throughout the experience. This lowers learning curves to near zero and allows users to concentrate on the content, which is what they’re really after.

As web sites evolve and offer users new interactions, it’s important to take stock of how they behave, and whether those behaviors are consistent. It may be easy to achieve consistent interaction design for a new site, but when more established web sites introduce modern interactions it is frequently in an ad hoc manner, and users may be presented with a variety of methods—new and old—of accomplishing similar tasks. The resulting site can feel jagged and unpredictable, with a steep learning curve and low ease of use.

To correct this problem, designers may establish design patterns to describe the appropriate interactions a site should offer to support users’ objectives. But before that can happen, it’s important to understand the current types of interactions being offered.
Using a recent audit of the interaction design of eBay.com as an example—an audit of the site’s “feel”—we’ll discuss how collecting and cataloging the variety of interactions can be an important precursor to establishing interaction design patterns for a highly trafficked web site.

They walked through the process used to quantify and describe interactions on the eBay site, starting with an audit of a representative sampling of user flows. Data gathered included variability in system response to user interactions with similar controls, multiple paths to accomplish similar tasks, and different representations of similar data objects. We’ll also share a round-up of key findings and discuss future extensions of the audit, including objective and subjective metrics for characterizing the feel of a user experience.

Josh Damon Williams
Hot Studio, Inc.
Josh Damon Williams is user-experience designer currently working for Hot Studio, Inc., an award-winning design firm based San Francisco, USA. Since the late 90s, he’s designed and developed web sites; his involvement on projects has ranged from developing content and business strategies, to designing and coding prototypes, conducting usability studies, and documenting project requirements. His work includes projects for LeapFrog Enterprises, Inc., Hotwire.com (operated by Expedia, Inc.), The World Heritage Alliance (a partnership between the UN Foundation and Expedia, Inc.), eBay.com and Architecture for Humanity.
Prior to moving to San Francisco, Josh studied film production in Los Angeles, USA, and worked in the animation industry, supervising the digital composition of animation productions for TV, commercials and video games for 7 years. More recently, he completed a Masters degree in creative writing from University of San Francisco.
Web site

Peter Stahl
eBay
Peter Stahl is Lead User Experience Designer at eBay, where he focuses on design patterns, interaction design, and holistic site experience. He led the recent, groundbreaking interaction audit of the site, and is applying that work to implement a coherent “feel” for the user experience. He leads the notorious Pattern OPtimization Squad (POPS) that reviews design patterns, and is also impresario of eBay’s Polynesian-themed Page Parsing Parties, where designs are deconstructed into their constituent components. Peter’s earlier work at Netscape/AOL included AOL Radio, and his designs for PlaceWare online conferencing can be seen in Microsoft Office Live Meeting. He has also created experiences for application management at Business Signatures, interactive television at SGI and PowerTV, and tablet computers at GO Corp. In his spare time Peter offers advice on California ballot propositions and plays oboe in a local orchestra. He holds a degree in music theory and composition from Harvard.
Web site

Conference Notes

Look and Feel – Look is obvious and Feel is how you interact with your hands.
· Click, click, click is one way – like news sites
· Click, hover, drop down – is a combination of different ria’s and types of interfaces.
Feel affects:
· Big Learning curve
· Mental Bandwidth needed to use UI
· User success or errors
· Site personality
· Brand promise
· Adoption (or abandonment)
Look exercise:
· Stable header is the key
· Ebay example shows how to highlight the thing that is the most important – which is usually the products …

Ebay = Interaction Audit
What we did :
· Strategy
· Date Collection
· Analysis
· Recommendations

Strategy – delivery of the compelling artifact was a big strategy for the final deliverable.
Good idea to look a flows and building a site diagram helped to show what the real experiences are in the user flow of a regular experience. Looked at the most traffic pages and normal path….

New purchases flow
eBay homepage had offered so many different paths for purchasing a new item. The disjointed way of allowing all these different ways only confused people and added to frustration. Here is one of the flows for new purchases.
· search result
· view item
· place bid
· sign in or register
· registration

New Seller flow is entirely different with different radio buttons , selections, setup and even look and feel was different. Idea was to Put flows in a spreadsheet to track, simplify flows and bring all the flows into a common look and feel with you interact with the site.

Data Collection – used file maker pro as database for capturing information
Analysis – look at flows side by side
Flows as story boards – use scrolls and prints of screens as different flows.
How to show Metrics from findings?
Ideas for presenting findings:
· Radial chars to track Feel metrics
· Emotional flow to track interactions

Recommendations – document / report
Three main categories of discontinuity…
Affordances – a visual cue that some interaction is offered
Affordances Inconsistences
Show all the different things that happen when you click on a hyper link and a tab etc.
Task – a single goal through multiple paths
Task Inconsistencies– a single goal through multiple paths
Show all the wass that filtering Data was different
Enable/Disable Sections of a forms by tabs, drop down radio buttons and checkboxes.
Data Objects – arepresetnation of a data reconrd or other piece of data
Data Objects Inconsistency – a single data object was reporesented in man differentways
Showed that eBay member information was shown in over 10 different ways.
Then Developed a Interaction audit report to share

Interaction Goals
· Low Learning curve
· Consistency cues for actions
· Predictable behavior of affordances
· Instance recognition of interface elements

Obvious first step was to do a clean up…
· Links
· Tabs
· Forms
· Sorting

Deliverable for different clean up teams
· Find problem area in the audit report
· Recommend simpler set of interactions
· Engineering creates code componenets

Build Design Patterns for clean up

Customize page layout – example
· Form , drop down, schematics all differn way to do the same thing

Some sites have different philosophies…

Feel metrics – objectives
· Page dimensions height and width
· Number of interacted entities – hyperlink buttons
· Interactive Density

Semi Objectives
· Number of syntactic actions in a task
· Reloading

Feel metrics – subjective
· Number of different interaction styles
· Simplicity/complexity

[email protected]
[email protected]