Creating the User Experience

950 views

Published on

This session was presented at the MarkLogic User Conference in April of 2010. In it, I discuss strategies of how to combine functionality with aesthetics to create great apps. The audience consisted primarily of developers/engineers and product managers.

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
950
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Creating the User Experience

  1. 1. Creating the user experience for applications built on MarkLogic JD Vogt - Director of User Experience, Mark Logic
  2. 2. Aesthetic Functionality
  3. 3. Aesthetic Fonts Colors Code Graphics Data Layout Functionality
  4. 4. Aesthetic Functionality
  5. 5. Aesthetic Functionality
  6. 6. Aesthetic Functionality
  7. 7. Aesthetic Functionality
  8. 8. Aesthetic Sweet Spot Functionality
  9. 9. Aesthetic * Value Sweet Spot Functionality
  10. 10. Aesthetic * Value * Brand Sweet Spot Functionality
  11. 11. “Form follows function - that has been misunderstood. Form and function should be one, joined in a spiritual union.” - Frank Lloyd Wright
  12. 12. Real World The evolution of maps
  13. 13. Real World The evolution of maps
  14. 14. Real World The evolution of maps
  15. 15. Real World The evolution of maps
  16. 16. Aesthetic * Value * Brand Functionality
  17. 17. How can we do that?
  18. 18. How can we do that? • Understand the needs of users
  19. 19. How can we do that? • Understand the needs of users • Discover the magic moments in your app
  20. 20. How can we do that? • Understand the needs of users • Discover the magic moments in your app • Get the right feedback at the right time
  21. 21. Understanding the needs of users The KJ Technique
  22. 22. The KJ Technique • Technique for gaining rapid group consensus and understanding complex systems • Inventor Jiro Kawakita
  23. 23. KJ Technique
  24. 24. KJ Technique • Gather 4-6 people for ~1 hour
  25. 25. KJ Technique • Gather 4-6 people for ~1 hour • Start with focus question
  26. 26. KJ Technique • Gather 4-6 people for ~1 hour • Start with focus question • Put opinions (or data or questions) onto Sticky Notes
  27. 27. KJ Technique • Gather 4-6 people for ~1 hour • Start with focus question • Put opinions (or data or questions) onto Sticky Notes • One answer per note
  28. 28. KJ Technique • Gather 4-6 people for ~1 hour • Start with focus question • Put opinions (or data or questions) onto Sticky Notes • One answer per note • Put Sticky Notes on the wall
  29. 29. KJ Technique • Gather 4-6 people for ~1 hour • Start with focus question • Put opinions (or data or questions) onto Sticky Notes • One answer per note • Put Sticky Notes on the wall • Group similar items
  30. 30. KJ Technique • Gather 4-6 people for ~1 hour • Start with focus question • Put opinions (or data or questions) onto Sticky Notes • One answer per note • Put Sticky Notes on the wall • Group similar items • Name the groups
  31. 31. KJ Technique • Gather 4-6 people for ~1 hour • Start with focus question • Put opinions (or data or questions) onto Sticky Notes • One answer per note • Put Sticky Notes on the wall • Group similar items • Name the groups • Vote on priorities
  32. 32. KJ in Practice A brownbag exercise at MarkLogic
  33. 33. Question 1 What would someone coming to Bugtrack expect to either find or do? Re port a bug
  34. 34. Question 2 Bugtrack would be magical if it could... Order a Esti mate Pizz Rel eases
  35. 35. Question 3 What could be done to make Bugtrack worse? IE Only Do esn’t save
  36. 36. Grouping and Voting
  37. 37. Grouping and Voting
  38. 38. Grouping and Voting
  39. 39. Results
  40. 40. Outline
  41. 41. Results My Search Releases Workflow Reporting Workflow Full text Bugs per Check for Dash- Magical search release dupes board CVS Mark Time to Track Alerts Fixed release See Report a progress bug Combine bugs
  42. 42. Logout Settings Alarms Bugtrack + add a bug Home Bugs Releases Reports Search All Bugs My Bugs Release status Search Options Total Bugs
  43. 43. Labels
  44. 44. Labels
  45. 45. Labels
  46. 46. Labels Personal setup, training and projects
  47. 47. Does it work?
  48. 48. Results
  49. 49. Results • Brand - Cited 190 times
  50. 50. Results • Brand - Cited 190 times • Value - 27 Million dollar grant, largest single grant in the history of Virginia Tech
  51. 51. KJ Technique • Great for information architecture • Great for understanding user priorities • Fast • Democratic • Can provide verbiage
  52. 52. Magic Moments Found through prototyping
  53. 53. Core Interaction or Activity
  54. 54. Office Toolkit
  55. 55. Office Toolkit
  56. 56. Frosting
  57. 57. Frosting
  58. 58. Frosting
  59. 59. Frosting
  60. 60. Magic Moment
  61. 61. Magic Moment One Way Street
  62. 62. Magic Moment One Way Street
  63. 63. Rich interactions
  64. 64. Rich interactions
  65. 65. Conference iPhone App
  66. 66. Twitter Friends Contacts Photos Surveys Maps Personalized News Schedule
  67. 67. Prototyping
  68. 68. XML MarkLogic Property List Excel Spreadsheet Survey Organizer Attendee
  69. 69. Schedule News changes Survey Communication Core interaction Dynamic Publish and Subscribe with MarkLogic
  70. 70. HERB
  71. 71. HERB
  72. 72. HERB iPhone Webapp Information Architecture v.1 - Ordering HERB Back Drinks Back Location Back Location HERB Ajax update of Ajax update of Order a drink from HERB... Ajax update of Tap a location on the map home with drink Water home with location 1. Kitchen Counter home with location Choose your drink > Coke 2. Front Desk 1 Tell HERB your location > Diet Coke 3. Another Place OR 3 Juice 4. Another Place Enter your name > Place Order 2 pic of HERB sweating 4 Boy, I'm really busy, Home Status Queue Photos could you try again Home Status Queue Photos Home Status Queue Photos later? Home - Pre-Order Mode Drinks Location Alt location idea Herb is busy/unavailable We'll need to set/check a User selects drink from An overhead map of the room The user picks a location from When the queue is full or cookie when the app launches choices. Check mark shows on is shown. User selects which a list of predetermined HERB is offline, the user so we can know if we are in choice, clicks "Back." station they will be standing at. locations. receives this message, it pre or post order mode. Signs are posted at each essentially locks them out. station. Back Name Back Name HERB Please enter the following... Order a drink from HERB... Please enter the following... Ajax update of home with name Sending order to HERB... Sending order to HERB... Name | Diet Coke > I got your order, for I am a.... a Diet Coke, meet I am a.... Station 3 > me at station 3 in CMU Student about 10 min. Previous Next CMU Student Faculty Done John Smith, Student > OK Faculty Member QIntel Employee Y U I O P W E R T Place Order Intel Employee A S Guest D F G H J K L Z X C V B N M Guest Home Status Queue Photos Home Status Queue Photos .?123 space return Name and contact info Name and contact info Home, with Place Order Lit Sending Order... User enters their name and Popup keyboard Becomes lit when drink, Sends http request to server chooses their type. (type is location and name have been with drink, location, and name only important if we can chosen. Those can be done in string. Could also potentially customize the message HERB any order. send it as a text message. sends.)
  73. 73. HERB iPhone Webapp Information Architecture and Interactions v.1 HERB HERB Other Messages: HERB HERB Pushy aren't you? Your Order... Your Order... (down one) Your Order... You ordered Juice. (nice You ordered Juice. (nice Sorry, you'll just You ordered Juice. (nice choice) Right now you're choice) I'll meet you at have to wait like choice) I'll meet you at 4th in the queue. I'll meet I'm on3my way, station in about 4 min. ? station 3 in about 4 min. everyone else you at station 3 in about 12 *wink* I'll see what meet you at station min. I can do 3 Why would I want a bribe? I'm a OK OK robot. Bribe Bribe Bribe Money means Cancel Order Cancel Order nothing to me. I Cancel Order cost more than Server receives message you make in a The request is sent to the year. server and placed in the Home Status Queue Photos Home Status Queue Photos Home Status Queue Photos Home Status Queue Photos queue. Home Screen Post Order Bribes Notification Complete Transaction The home screen after an Bribing HERB will bring return HERB could send a message How do we know a transaction order. It will need to be pushed random messages. There is a (via SMS) to alert the user to has been completed? We via ajax to update with time. chance of being moved up or be ready. thought of giving him a tip, or down in the queue. saying thank you, holding up a bar code... In some way, the cookie on the phone needs to get reset so that another drink can be ordered. Home Status Home Queue Home Photos Photos Photos HERB Battery Jon Meet me at station x Your Order... I'm on an almost full charge You ordered Juice. (nice Laura Meet me at station x choice) I'll meet you at Are you sure you station 3 in about 4 min. Drinks Served Today want to cancel your Justine Meet me at station x order? So far I've delivered 11 drinks 3 sodas No Yes 4 waters Francois Meet me at station x 4 Juices Bribe Min Meet me at station x Cancel Order Map > Jon Meet me at station x More Stats > Home Status Queue Photos Status Queue Photo Gallery Photo Detail Canceling an order This page would show various Shows people waiting for Photos HERB has taken. Detail of a photo HERB has If a user has to leave, they can statistics and stats on HERB. drinks. Might want to consider taken cancel their order and they will moving the Bribe button here be removed from the queue. as a sort of easter egg.
  74. 74. Experience Prototyping Experience Prototyping is acting out the existing or desired experience with props. It gives the designers the ability to understand existing experiences and explore design ideas.
  75. 75. Magic Moment
  76. 76. “Yes and...” culture
  77. 77. Lessons from improv
  78. 78. I put on my Viking Helmet and jump on my Harley
  79. 79. I put on my Viking Helmet and jump on That idea sucks my Harley
  80. 80. I put on my Viking helmet and jump on my Harley
  81. 81. I put on my Viking Here’s 5 helmet and jump on reasons why that my Harley will never work
  82. 82. I put on my Viking Helmet and jump on my Harley
  83. 83. I put on my Viking Let me play devil’s Helmet and jump on advocate... my Harley
  84. 84. I put on my Viking Helmet and jump on my Harley
  85. 85. I put on my Viking Hey, there’s some Helmet and jump on Martians -maybe they my Harley need a lift.
  86. 86. In practice... Apple's design process each week Helen Walters on March 08, 2008 Businessweek
  87. 87. In practice... Apple's design process each week Helen Walters on March 08, 2008 Businessweek Meeting 1
  88. 88. In practice... Apple's design process each week Helen Walters on March 08, 2008 Businessweek Meeting 1 Meeting 2
  89. 89. In practice... Apple's design process each week Helen Walters on March 08, 2008 Businessweek Meeting 1 Meeting 2 Forget about constraints Brainstorm Think freely Go crazy
  90. 90. In practice... Apple's design process each week Helen Walters on March 08, 2008 Businessweek Meeting 1 Meeting 2 Forget about constraints Nail things down Brainstorm Work things out Think freely Go crazy
  91. 91. Feedback Getting the right fidelity of feedback at the right time
  92. 92. Fidelity of Feedback Kathy Sierra - co-creator of the Head First books
  93. 93. Fidelity of Feedback Kathy Sierra - co-creator of the Head First books
  94. 94. Fidelity of Feedback Kathy Sierra - co-creator of the Head First books
  95. 95. Fidelity of Feedback Kathy Sierra - co-creator of the Head First books
  96. 96. Speed date storyboards
  97. 97. Participatory Moodboard
  98. 98. Summary Getting the correct mix of aesthetics and functionality
  99. 99. Summary Getting the correct mix of aesthetics and functionality
  100. 100. Summary Getting the correct mix of aesthetics and functionality • Use the KJ method or other techniques for discovering user needs and creating an information architecture
  101. 101. Summary Getting the correct mix of aesthetics and functionality • Use the KJ method or other techniques for discovering user needs and creating an information architecture • Find a magic moment that you can align your application around
  102. 102. Summary Getting the correct mix of aesthetics and functionality • Use the KJ method or other techniques for discovering user needs and creating an information architecture • Find a magic moment that you can align your application around • Get the right feedback at the right time
  103. 103. Thank You

×