![“ Who are these guys?” ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
Viewers also liked
Viewers also liked (18)
Similar to Interaction Audit Reveals How to Improve UI "Feel
Similar to Interaction Audit Reveals How to Improve UI "Feel (20)
Recently uploaded
Recently uploaded (20)
Interaction Audit Reveals How to Improve UI "Feel
- 1. Peter Stahl Josh Damon Williams eBay Hot Studio Checking the Feel of your UI with an Interaction Audit
- 5. Part 1 What is “Feel”, and why should I care?
- 6. Look & Feel
- 7. Look & Feel
- 8. silk
- 9. water
- 15. [photo of mouse and/or trackpad and/or Wacom tablet ] Feel: How you operate it with your hands
- 29. eBay Site Experience: a Holistic View
- 30. Feel
- 31. Part 2 What we did
- 33. Project phase 1: STRATEGY
- 34. Ark of the Covenant A “compelling artifact”
- 37. Example flow: New user finds an item, bids for it, registers as member
- 38. Example flow: User bids on a Watched item, is outbid, rebids
- 39. Example flow: New seller lists item for sale, creates Seller account
- 40. Audit checklist
- 41. Project phase 2: DATA COLLECTION
- 42. FILE MAKER Ω Our FileMaker Pro database
- 44. Project phase 3: ANALYSIS
- 45. Roll of Paper
- 46. Scrolls unrolled Flows as storyboards
- 48. Ideas for presenting findings
- 49. Radial charts to track Feel metrics
- 50. Emotional flow to track Feel effects
- 52. Project phase 4: RECOMMENDATIONS
- 53. [DOCUMENT FORMAT SLIDE (FROM MY NOTEBOOK)]
- 54. Affordance Task Data Object
- 56. Affordance Inconsistencies: Hyperlink User action… System response… Affordance Inconsistencies: Hyperlink Loads new page Clicks link… Immediate in-line response Clicks link…
- 57. Affordance Inconsistencies: Hyperlink User action… System response… Opens modal dialog box Clicks link… Expands/collapses in-line page content Affordance Inconsistencies: Hyperlink Clicks link…
- 58. 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…
- 59. Affordance Inconsistencies: Hyperlink Clicks link… Closes a popup layer Clicks link… Adds assistance frame to window User action… System response… Affordance Inconsistencies: Hyperlink
- 60. Affordance Inconsistencies: Tab Affordance Inconsistencies: Tab
- 62. Task Inconsistencies: Filtering Data 1. Submit a form 2. Click tabs 3. Click criteria links 4. Click “toggle” link Task Inconsistencies: Filtering Data
- 63. 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
- 65. Data Object Inconsistencies: Members CAPTURES Data Object Inconsistencies: eBay Member
- 66. Data Object Inconsistencies: Members Data Object Inconsistencies: eBay Member
- 67. The Interaction Audit report
- 68. Part 3 Actions & Future Directions
- 69. A page from the Interaction Audit
- 73. An eBay design pattern
- 75. What about interaction inconsistencies without obvious solutions? Example: Customize page layout
- 76. 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
- 77. Basic requirements: restaurant Basic requirements: - Clean dishes & utensils - Courteous staff - Accurate check tabulation - No cockroaches
- 78. 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
- 79. Basic requirements: interaction design Basic requirements: - Navigable interface - Orientation cues - Consistent basic interactions - No cockroaches
- 80. 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
- 81. Values can vary depending on the conversation
- 82. “ Feel” metrics
- 87. Thank you! josh.williams [at] hotstudio.com hottub.hotstudio.com
- 88. 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/
- 89. Questions? peter.stahl [at] ebay.com josh.williams [at] hotstudio.com
Editor's Notes
- 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.)