Peter Stahl Josh Damon Williams eBay Hot Studio   Checking the Feel  of your UI with an Interaction Audit
What’s in this for you <ul><li>Discover why “Feel” matters </li></ul><ul><li>Find out what an Interaction Audit is </li></...
“ Who are these guys?” <ul><li>Peter Stahl </li></ul><ul><ul><li>Lead User Experience Designer at eBay </li></ul></ul><ul>...
Interaction Audit team <ul><li>eBay </li></ul><ul><li>Deborah Adams Estrada, Jennifer Anderson, Jennifer Kelly, Preston Sm...
Part 1 Why audit interactions?
Look & Feel
Look &  Feel
silk
water
 
 
 
 
 
[photo of mouse and/or trackpad and/or Wacom tablet ] Feel: How you operate it with your hands
 
 
 
 
 
 
 
 
<ul><li>Q: What interactive elements to use? </li></ul>
<ul><li>Q: What interactive elements to use? </li></ul><ul><li>A: All of them </li></ul>
 
<ul><li>Q: What interactive elements to use? </li></ul><ul><li>A: Hmmm… </li></ul>
Feel affects: <ul><li>Learning curve </li></ul><ul><li>Mental bandwidth needed to operate UI </li></ul><ul><li>User succes...
eBay Site Experience: a Holistic View
Feel
Part 2 What we did
Project phases <ul><li>Strategy </li></ul><ul><li>Data Collection </li></ul><ul><li>Analysis </li></ul><ul><li>Recommendat...
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) <ul><li>Very relevant: </li></ul><ul><li>Task & subtask </li></ul><ul><li>Step description ...
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)]
<ul><li>“ Affordance” </li></ul><ul><li>A visual cue that some interaction is offered </li></ul><ul><li>“ Affordance Incon...
Affordance Inconsistencies: Hyperlink User action… System response… Affordance Inconsistencies: Hyperlink Loads new page C...
Affordance Inconsistencies: Hyperlink User action… System response… Opens modal dialog box Clicks link… Expands/collapses ...
Affordance Inconsistencies: Hyperlink Clicks link… Jump to anchor elsewhere on page Clicks link… Opens content in new brow...
Affordance Inconsistencies: Hyperlink Clicks link… Closes a popup layer Clicks link… Adds assistance frame to window User ...
Affordance Inconsistencies: Tab Affordance Inconsistencies: Tab
<ul><li>“ Task” </li></ul><ul><li>A path to accomplish an immediate goal </li></ul><ul><li>“ Task Inconsistency” </li></ul...
Task Inconsistencies: Filtering Data 1. Submit a form 2. Click tabs 3. Click criteria links 4. Click “toggle” link Task In...
5 x Enable/Disable Form Section Inconsistencies Task Inconsistencies: Enable/Disable Section of a Form 1. Checkbox 2. Tabs...
<ul><li>“ Data Object” </li></ul><ul><li>A representation of a data record or other piece of data </li></ul><ul><li>“ Data...
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 <ul><li>Low learning curve, due to… </li></ul><ul><li>Consistent cues for actions </li></ul><ul><li>Pred...
 
Clean-up teams <ul><li>The Clickers   links and buttons </li></ul><ul><li>The Swappers tabs and toggles </li></ul><ul><li>...
An eBay design pattern
Clean-up process <ul><li>Find problem area in the audit report </li></ul><ul><li>Recommend simpler set of interactions </l...
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. Hyperli...
Basic requirements:  restaurant Basic requirements:   - Clean dishes & utensils - Courteous staff  - Accurate check tabula...
Site-specific values:  restaurant Basic requirements:   - Clean dishes & utensils - Courteous staff  - Accurate check tabu...
Basic requirements:  interaction design Basic requirements:   - Navigable interface - Orientation cues - Consistent basic ...
Site-specific values:  interaction design Site-Specific Value: - Plethora of tools to    help buyers - Compatibility So mu...
Values can vary depending on the conversation
“ Feel” metrics
Feel metrics: objective <ul><li>Page dimensions </li></ul><ul><ul><li>height, width </li></ul></ul><ul><li>Number of inter...
Feel metrics: semi-objective <ul><li>Number of syntactic actions in a task </li></ul><ul><li>“ Reloadiness” </li></ul><ul>...
Feel metrics: subjective <ul><li>Number of different interaction styles, metaphors, paradigms in a page or task </li></ul>...
What we’ve learned <ul><li>Nowadays it’s important to check “Feel” </li></ul><ul><li>An Interaction Audit can be compellin...
Thank you!
And thanks to Flickr users who generously license  their photos with Creative Commons attribution  http://flickr.com/photo...
Questions
Upcoming SlideShare
Loading in...5
×

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

6,624

Published on

Published in: Technology, Business
2 Comments
23 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,624
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
184
Comments
2
Likes
23
Embeds 0
No embeds

No notes for slide
  • Welcome to our talk. Today we’re going to discuss how to evaluate the feel of a user interface using an interaction audit . (If this isn’t what you came for, now is your chance to find a different session.)
  • Checking the "Feel" of your UI with an Interaction Audit

    1. 1. Peter Stahl Josh Damon Williams eBay Hot Studio Checking the Feel of your UI with an Interaction Audit
    2. 2. What’s in this for you <ul><li>Discover why “Feel” matters </li></ul><ul><li>Find out what an Interaction Audit is </li></ul><ul><li>Learn our ground-breaking methodology </li></ul><ul><li>See scintillating Feel findings </li></ul><ul><li>Marvel at what an Audit can do for you </li></ul><ul><li>Ponder exciting future advancements </li></ul>
    3. 3. “ Who are these guys?” <ul><li>Peter Stahl </li></ul><ul><ul><li>Lead User Experience Designer at eBay </li></ul></ul><ul><ul><li>Design patterns, holistic design </li></ul></ul><ul><ul><li>Led the interaction audit </li></ul></ul><ul><ul><li>Plays oboe </li></ul></ul><ul><li>Josh Damon Williams </li></ul><ul><ul><li>Senior User Experience Designer at Hot Studio </li></ul></ul><ul><ul><li>Wide variety of projects and roles </li></ul></ul><ul><ul><li>Key strategist for interaction audit </li></ul></ul><ul><ul><li>Plays turntables </li></ul></ul>
    4. 4. Interaction Audit team <ul><li>eBay </li></ul><ul><li>Deborah Adams Estrada, Jennifer Anderson, Jennifer Kelly, Preston Smalley , Peter Stahl, Karenina Susilo </li></ul><ul><li>Hot Studio </li></ul><ul><li>Jon Littell, David Paige, Josh Damon Williams </li></ul><ul><li>Persistent Systems </li></ul><ul><li>Prasad Bartakke, Chaitrali Dhole, Rajesh Gode </li></ul>
    5. 5. Part 1 Why audit interactions?
    6. 6. Look & Feel
    7. 7. Look & Feel
    8. 8. silk
    9. 9. water
    10. 15. [photo of mouse and/or trackpad and/or Wacom tablet ] Feel: How you operate it with your hands
    11. 24. <ul><li>Q: What interactive elements to use? </li></ul>
    12. 25. <ul><li>Q: What interactive elements to use? </li></ul><ul><li>A: All of them </li></ul>
    13. 27. <ul><li>Q: What interactive elements to use? </li></ul><ul><li>A: Hmmm… </li></ul>
    14. 28. Feel affects: <ul><li>Learning curve </li></ul><ul><li>Mental bandwidth needed to operate UI </li></ul><ul><li>User success (or errors) </li></ul><ul><li>Site personality </li></ul><ul><li>Brand promise </li></ul><ul><li>Adoption (or abandonment) </li></ul>
    15. 29. eBay Site Experience: a Holistic View
    16. 30. Feel
    17. 31. Part 2 What we did
    18. 32. Project phases <ul><li>Strategy </li></ul><ul><li>Data Collection </li></ul><ul><li>Analysis </li></ul><ul><li>Recommendations </li></ul>
    19. 33. Project phase 1: STRATEGY
    20. 34. Ark of the Covenant A “compelling artifact”
    21. 37. Example flow: New user finds an item, bids for it, registers as member
    22. 38. Example flow: User bids on a Watched item, is outbid, rebids
    23. 39. Example flow: New seller lists item for sale, creates Seller account
    24. 40. Audit checklist
    25. 41. Project phase 2: DATA COLLECTION
    26. 42. FILE MAKER Ω Our FileMaker Pro database
    27. 43. Database Fields (partial list) <ul><li>Very relevant: </li></ul><ul><li>Task & subtask </li></ul><ul><li>Step description </li></ul><ul><li>Page & URL </li></ul><ul><li>Action (syntactic) </li></ul><ul><li>Screen shot close-up </li></ul><ul><li>Instructional text </li></ul><ul><li>Click/keystroke record </li></ul><ul><li>Less relevant: </li></ul><ul><li>Region on page </li></ul><ul><li>Icons </li></ul><ul><ul><li>symbol, meaning, behavior </li></ul></ul><ul><li>Interface elements </li></ul><ul><ul><li>label, type, style, notes </li></ul></ul><ul><li>Comments on Feel </li></ul>
    28. 44. Project phase 3: ANALYSIS
    29. 45. Roll of Paper
    30. 46. Scrolls unrolled Flows as storyboards
    31. 47. Ideas for presenting findings
    32. 48. Radial charts to track Feel metrics
    33. 49. Emotional flow to track Feel effects
    34. 50. A course correction
    35. 51. Project phase 4: RECOMMENDATIONS
    36. 52. [DOCUMENT FORMAT SLIDE (FROM MY NOTEBOOK)]
    37. 53. <ul><li>“ Affordance” </li></ul><ul><li>A visual cue that some interaction is offered </li></ul><ul><li>“ Affordance Inconsistency” </li></ul><ul><li>A single visual cue offering multiple interactions </li></ul>
    38. 54. Affordance Inconsistencies: Hyperlink User action… System response… Affordance Inconsistencies: Hyperlink Loads new page Clicks link… Immediate in-line response Clicks link…
    39. 55. Affordance Inconsistencies: Hyperlink User action… System response… Opens modal dialog box Clicks link… Expands/collapses in-line page content Affordance Inconsistencies: Hyperlink Clicks link…
    40. 56. 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…
    41. 57. Affordance Inconsistencies: Hyperlink Clicks link… Closes a popup layer Clicks link… Adds assistance frame to window User action… System response… Affordance Inconsistencies: Hyperlink
    42. 58. Affordance Inconsistencies: Tab Affordance Inconsistencies: Tab
    43. 59. <ul><li>“ Task” </li></ul><ul><li>A path to accomplish an immediate goal </li></ul><ul><li>“ Task Inconsistency” </li></ul><ul><li>A single goal accomplished via multiple paths </li></ul>
    44. 60. Task Inconsistencies: Filtering Data 1. Submit a form 2. Click tabs 3. Click criteria links 4. Click “toggle” link Task Inconsistencies: Filtering Data
    45. 61. 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
    46. 62. <ul><li>“ Data Object” </li></ul><ul><li>A representation of a data record or other piece of data </li></ul><ul><li>“ Data Object Inconsistency” </li></ul><ul><li>A single data object represented multiple ways </li></ul>
    47. 63. Data Object Inconsistencies: Members CAPTURES Data Object Inconsistencies: eBay Member
    48. 64. Data Object Inconsistencies: Members Data Object Inconsistencies: eBay Member
    49. 65. The Interaction Audit report
    50. 66. Part 3 Actions & Future Directions
    51. 67. A page from the Interaction Audit
    52. 68. Interaction goals <ul><li>Low learning curve, due to… </li></ul><ul><li>Consistent cues for actions </li></ul><ul><li>Predictable behavior of affordances </li></ul><ul><li>Instant recognition of interface elements </li></ul><ul><li>Allow eBay member content to shine </li></ul>
    53. 70. Clean-up teams <ul><li>The Clickers links and buttons </li></ul><ul><li>The Swappers tabs and toggles </li></ul><ul><li>The Submitters forms and form elements </li></ul><ul><li>The Shufflers sorting and filtering </li></ul><ul><li>The Disclosers overlays and sections </li></ul>
    54. 71. An eBay design pattern
    55. 72. Clean-up process <ul><li>Find problem area in the audit report </li></ul><ul><li>Recommend simpler set of interactions </li></ul><ul><li>Document as design patterns </li></ul><ul><li>Engineering creates code components </li></ul><ul><li>New and upgraded site areas use the cleaned-up interactions </li></ul>
    56. 73. What about interaction inconsistencies without obvious solutions? Example: Customize page layout
    57. 74. 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
    58. 75. Basic requirements: restaurant Basic requirements: - Clean dishes & utensils - Courteous staff - Accurate check tabulation - No cockroaches
    59. 76. 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
    60. 77. Basic requirements: interaction design Basic requirements: - Navigable interface - Orientation cues - Consistent basic interactions - No cockroaches
    61. 78. 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
    62. 79. Values can vary depending on the conversation
    63. 80. “ Feel” metrics
    64. 81. Feel metrics: objective <ul><li>Page dimensions </li></ul><ul><ul><li>height, width </li></ul></ul><ul><li>Number of interactive entities </li></ul><ul><ul><li>Hyperlinks, buttons, form elements, icons </li></ul></ul><ul><li>Interactive density </li></ul><ul><ul><li>No. of interactive entities ÷ page size </li></ul></ul><ul><li>“ Jack-in-the-boxiness” </li></ul><ul><ul><li>No. of mouse-over elements ÷ page size </li></ul></ul>
    65. 82. Feel metrics: semi-objective <ul><li>Number of syntactic actions in a task </li></ul><ul><li>“ Reloadiness” </li></ul><ul><ul><li>Latencies in response to interactions </li></ul></ul><ul><li>Number/frequency of tool switches </li></ul><ul><ul><li>Mouse to keyboard and back </li></ul></ul><ul><li>Amount of dynamic behavior </li></ul><ul><ul><li>Pop-up layers, video, “sponginess” (layout changes triggered by mouse-over) </li></ul></ul>
    66. 83. Feel metrics: subjective <ul><li>Number of different interaction styles, metaphors, paradigms in a page or task </li></ul><ul><li>Simplicity/complexity </li></ul><ul><li>Flatness/bumpiness </li></ul><ul><ul><li>Flat = uses only hyperlinks & other primitives </li></ul></ul><ul><ul><li>Bumpy = uses more advanced interactions </li></ul></ul><ul><li>Cognitive load </li></ul>
    67. 84. What we’ve learned <ul><li>Nowadays it’s important to check “Feel” </li></ul><ul><li>An Interaction Audit can be compelling, actionable, and spark real improvement </li></ul><ul><li>Audits should focus on flows and be representative of real user experience </li></ul><ul><li>Simple tools work; storyboards are key </li></ul><ul><li>Audit for inconsistencies in Affordance, Task, and Data Object representation </li></ul><ul><li>Clean up obvious problems first </li></ul><ul><li>Harder problems require site-specific values </li></ul><ul><li>“ Feel” metrics may hold promise </li></ul>
    68. 85. Thank you!
    69. 86. 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/
    70. 87. Questions
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×