![Page 1: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/1.jpg)
Peter Stahl Josh Damon WilliamseBay Hot Studio
Checking the Feel of your UI with an Interaction Audit
![Page 2: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/2.jpg)
“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
![Page 3: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/3.jpg)
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
![Page 4: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/4.jpg)
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
![Page 5: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/5.jpg)
Part 1
What is “Feel”, and why should I care?
![Page 6: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/6.jpg)
Look & Feel
![Page 7: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/7.jpg)
Look & Feel
![Page 8: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/8.jpg)
silk
![Page 9: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/9.jpg)
water
![Page 10: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/10.jpg)
![Page 11: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/11.jpg)
![Page 12: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/12.jpg)
![Page 13: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/13.jpg)
![Page 14: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/14.jpg)
![Page 15: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/15.jpg)
[photo of mouse and/or trackpad and/or Wacom tablet ]
Feel: How you operate it with your hands
![Page 16: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/16.jpg)
![Page 17: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/17.jpg)
![Page 18: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/18.jpg)
![Page 19: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/19.jpg)
![Page 20: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/20.jpg)
![Page 21: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/21.jpg)
![Page 22: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/22.jpg)
![Page 23: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/23.jpg)
![Page 24: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/24.jpg)
Q:What interactive elements to use?
![Page 25: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/25.jpg)
Q:What interactive elements to use?
A: All of them
![Page 26: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/26.jpg)
![Page 27: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/27.jpg)
Q:What interactive elements to use?
A: Hmmm…
![Page 28: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/28.jpg)
Feel affects:
• Learning curve
• Mental bandwidth needed to operate UI
• User success (or errors)
• Site personality
• Brand promise
• Adoption (or abandonment)
![Page 29: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/29.jpg)
eBay Site Experience: a Holistic View
![Page 30: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/30.jpg)
Feel
![Page 31: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/31.jpg)
Part 2
What we did
![Page 32: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/32.jpg)
Project phases
1. Strategy
2. Data Collection
3. Analysis
4. Recommendations
![Page 33: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/33.jpg)
Project phase 1:
STRATEGY
![Page 34: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/34.jpg)
Ark of the Covenant
A “compelling artifact”
![Page 35: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/35.jpg)
![Page 36: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/36.jpg)
![Page 37: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/37.jpg)
Example flow:New user finds an item, bids for it, registers as member
![Page 38: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/38.jpg)
Example flow: User bids on a Watched item, is outbid, rebids
![Page 39: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/39.jpg)
Example flow:New seller lists item for sale, creates Seller account
![Page 40: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/40.jpg)
Audit checklist
![Page 41: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/41.jpg)
Project phase 2:
DATA COLLECTION
![Page 42: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/42.jpg)
FILE MAKER
ΩOur FileMaker Pro database
![Page 43: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/43.jpg)
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
![Page 44: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/44.jpg)
Project phase 3:
ANALYSIS
![Page 45: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/45.jpg)
Roll of Paper
![Page 46: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/46.jpg)
Scrolls unrolled
Flows as storyboards
![Page 47: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/47.jpg)
![Page 48: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/48.jpg)
Ideas for presenting findings
![Page 49: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/49.jpg)
Radial charts to track Feel metrics
![Page 50: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/50.jpg)
Emotional flow to track Feel effects
![Page 51: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/51.jpg)
A course correction
![Page 52: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/52.jpg)
Project phase 4:
RECOMMENDATIONS
![Page 53: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/53.jpg)
[DOCUMENT FORMAT SLIDE (FROM MY NOTEBOOK)]
![Page 54: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/54.jpg)
Affordance
Task
Data Object
![Page 55: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/55.jpg)
AffordanceA visual cue that some interaction is offered
Affordance InconsistencyA single visual cue offering multiple
interactions
![Page 56: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/56.jpg)
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…
![Page 57: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/57.jpg)
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…
![Page 58: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/58.jpg)
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…
![Page 59: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/59.jpg)
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
![Page 60: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/60.jpg)
Affordance Inconsistencies: TabAffordance Inconsistencies: Tab
![Page 61: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/61.jpg)
TaskA path to accomplish an immediate goal
Task InconsistencyA single goal accomplished via
multiple paths
![Page 62: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/62.jpg)
Task Inconsistencies: Filtering Data
1. Submit a form
2. Click tabs
3. Click criteria links
4. Click “toggle” link
Task Inconsistencies: Filtering Data
![Page 63: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/63.jpg)
5 x Enable/Disable Form Section InconsistenciesTask Inconsistencies: Enable/Disable Section of a Form
1. Checkbox
2. Tabs
3. Dropdown menu
4. Radio buttons
![Page 64: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/64.jpg)
Data ObjectA representation of a data record or other
piece of data
Data Object InconsistencyA single data object represented
multiple ways
![Page 65: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/65.jpg)
Data Object Inconsistencies: Members CAPTURESData Object Inconsistencies: eBay Member
![Page 66: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/66.jpg)
Data Object Inconsistencies: MembersData Object Inconsistencies: eBay Member
![Page 67: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/67.jpg)
The Interaction Audit report
![Page 68: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/68.jpg)
Part 3
Actions & Future Directions
![Page 69: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/69.jpg)
A page from the Interaction Audit
![Page 70: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/70.jpg)
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
![Page 71: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/71.jpg)
![Page 72: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/72.jpg)
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
![Page 73: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/73.jpg)
An eBay design pattern
![Page 74: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/74.jpg)
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
![Page 75: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/75.jpg)
What about interaction inconsistencies without obvious solutions?
Example: Customize page layout
![Page 76: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/76.jpg)
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
![Page 77: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/77.jpg)
Basic requirements: restaurant
Basic requirements: - Clean dishes & utensils- Courteous staff - Accurate check tabulation - No cockroaches
![Page 78: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/78.jpg)
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
![Page 79: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/79.jpg)
Basic requirements: interaction design
Basic requirements: - Navigable interface- Orientation cues- Consistent basic interactions- No cockroaches
![Page 80: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/80.jpg)
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
![Page 81: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/81.jpg)
Values can vary depending on the conversation
![Page 82: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/82.jpg)
“Feel” metrics
![Page 83: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/83.jpg)
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 84: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/84.jpg)
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)
![Page 85: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/85.jpg)
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
![Page 86: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/86.jpg)
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
![Page 87: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/87.jpg)
Thank you!peter.stahl [at] ebay.comjosh.williams [at] hotstudio.com
![Page 88: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/88.jpg)
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/
![Page 89: Checking the "Feel" of your UI with an Interaction Audit](https://reader033.vdocument.in/reader033/viewer/2022061300/54c81c474a795967448b456f/html5/thumbnails/89.jpg)
Questions?peter.stahl [at] ebay.comjosh.williams [at] hotstudio.com