Josh Damon Williams (Hot Studio) at Web 2.0 Expo Europe, 22 October 2008

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

51. A course correction

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