UX != UI Design (User Experience does not equal User Interface)

4,167 views

Published on

A talk I gave to (mostly) business owners and developers at Jersey Shore Tech Meetup #22.

In an effort to explain the application of design for considering the complete user experience, I walk the audience through the analog experience of making coffee and all the interface touchpoints along the way – including shopping at Trader Joe's.

Then we walk through the process and see examples of what we do as User Experience professionals with some discussion on current trends in UX.

Published in: Design

UX != UI Design (User Experience does not equal User Interface)

  1. 1. U X != UI Design Jersey Shore @chrispalle Tech Meetup #22 @wisdomandcraft June 20, 2012 #jstm22 or #jstmShow of hands:Who’s dev?Who’s biz?Who’s design?
  2. 2. A Bit About Me User Experience Professional with 16 Years Experience Creating Digital Products Recently went from a “me shop” to “we shop”(spiel for w+c hiring - “We hire for heart, teach for talent”) We’re looking for all levels, though.Explain why we’re special:Various capacities/rolesVarious verticals
  3. 3. User Experience: Not Just Another Pretty Interface ❖ UX and UI Design - Related; Not the Same ❖ Activities UX professionals use to uncover great ideas ❖ Considerations when working with UX professionals(Caveat: this talk is a prototype. Thanks for being my beta testers :-)
  4. 4. A Story from the Analog World UXWe’re all familiar with popular, digital User Interfaces from the computers and phones we use, but to illustrate the key differences and how a UI supports the user experience, we’ll borrow from anAnalog experience.
  5. 5. Something Many of us can probably relate to: Making Coffee.
  6. 6. This actually started with a delightful little experience I had with a Trader Joe’s packaging. Decaf is “REALLY” mellow...
  7. 7. So, the Experience begins with me reaching for a tin of coffee on top of the refrigerator.
  8. 8. I then experience this brand touchpoint as I open the container to the get out my grounds.
  9. 9. Big healthy spoonful.
  10. 10. Pouring the coffee into the maker.
  11. 11. Booting up the brew...
  12. 12. I like to pour my milk in first. Doesn’t dirty a spoon and I don’t have to worry about stirring it.
  13. 13. After waiting a while, it’s ready to serve...
  14. 14. That’s not the whole story, though. UXMy experience with brewing coffee starts before I even get the product home, though. This sets the stage for any number of conditions in which a customer can land on your property.Let’s go to the pre-experience.
  15. 15. On my way to the store, I drive past a friend’s house (shout out to @erova).
  16. 16. Getting into the store is relatively simple. Oddly (maybe), this Trader Joe’s is next to office supply store.
  17. 17. Entering Trader Joe’s is a relatively common experience. Grab a cart or basket, enter into produce.
  18. 18. An unfortunate end-cap....So, I’m looking for coffee... where is coffee normally?...
  19. 19. By the breakfast foods! Only... not at Trader Joe’s. Continuing to walk...
  20. 20. I find the SAMPLEs in the back of the store. Cool. Not what I’m looking for, but hey, nice to know this is here. Kind of a little surprise, actually. Next to Free samples of coffee is a cheese samplingstation (not shown). Nice little way to stamp a pleasant experience: Free Continuing on...
  21. 21. Ah. Just to the right, the staple: Milk. This is in the back which is another common practice.Still no sign of the coffee yet, though...
  22. 22. Ah, here it is! Wow, nice display...
  23. 23. Continuing in typical Trader Joe’s fashion, the packaging AND the display is delightful.“Coffee that energizes you AND your wallet!” brilliant.. plus, the colors match.Grab some whole bean and go...
  24. 24. Oh, nice! Grinders! How convenient- right here as I make my way to the cashier. Well played, Joe.
  25. 25. 1. Okay. So, Trader Joe’s is a bit uncommon, but this is where they come back to being common: impulse buys at the checkout...2. Gummy Bears for the kids (it’s okay though because they’re actually Veggies)3. Staying true to the Trader Joe’s Brand, you can get an eco-friendly bag for only a dollar!4. Okay, this where they get really uncommon. Look at the carts... closely... where do they go?
  26. 26. Into the CASHIER! Customers don’t have to worry about managing my cart or bagging, etc. as I deal with my wallet. (that’s not me by the way)I never noticed this about Trader Joe’s until this analysis, but this about the best Checkout Optimization I’ve ever seen. It’s totally subconscious, but it’s little delighters like this make for anoverall positive experience.
  27. 27. Samples Milk food f f f f f o o o o o o o o o o d d d d d registers food Entrance photo credit: Thomas Vander Wal - Used without permission *not to scale(Deconstructed Floor Plan Wireframe)Okay. Quiz time. You know how stores notoriously put the common items to the back, to make you walk through the store to see everything else, right?Where do you think the put the coffee?
  28. 28. Samples Milk food f f f f f o o o o o o o o o o d d d d d registers Entrance photo credit: Thomas Vander Wal - Used without permission *not to scaleIt’s in the FRONT ALLLL the way away from the door.Look at the path you have to take. If you don’t know where you’re going, you wander everywhere because coffee is not in its typical spot – by breakfast foods and having the aisles on an angle,invites the shopper to move through the store effective exploring close to a third by the time one finds the coffee.That’s awesome, but what’s totally awesome is that even if you know where coffee is during subsequent visits, think a little more about those aisles. Having the aisles at an angle visually exposesmore to shoppers as they walk to the coffee.
  29. 29. Okay. So, back to our story.That was an overall experience. Many touchpoints. Many of which Trader Joe’s has NO control over (that’s an important point to remember)But this is story to show the differences between UX and UI Design.... so, how does this relate to User Interface design? Let’s step back through the experience again.
  30. 30. Opening Can - That’s a User Interface (UI).Pulling out grounds - from the UI.
  31. 31. Opening my coffee maker - UI
  32. 32. Turning on the pot - Obvious UI.
  33. 33. Water filterer - UIPouring in to UI of coffee maker.
  34. 34. Milk carton UI, into mug another UI.
  35. 35. Coffee pot - UI.
  36. 36. And now....
  37. 37. I’m ready to go.
  38. 38. Back to Design in the Digital World ❖ Trader Joe’s has no control over the total product experience ❖ Different browsers and multi-channel experiences ❖ My experience is my own, nobody can “design it” ❖ Need to consider holistic (pre, during, post) experienceYou can’t control what people experience before they get to your site or use your products, but this impacts the perception of your products and services.
  39. 39. An error before I finish? Friends’ names on imagesJust a couple samples I found when I was putting this story together.See how Google is leveraging data to think holistically? It prioritized photos from my friends (and these were on Flickr!)
  40. 40. Activities: Strategies and Methods UXOkay. Since most everyone here knows what a User Interface is, what is UX??Here’s my (quick) take... UX is a practice – an industry. The history of it is very short, but the roots run deep in design.That said, it’s not something that can be designed. I’m designing this presentation, but your experience is very different than another person’s.UX is strategic. It is art/design and science. UX is Extremely Multi-Disciplinary. We all “do” UX in someway or another.We just have to unpack what you know, look at it together, and put it back together so you can see how your creative practice fits in the UX umbrella.
  41. 41. Goals of UX Memorable Desirable Useful (valuable) Easy-to-Use (intuitive)Let’s start with goals. What are we trying to ultimately accomplish with our designs?
  42. 42. Tensions in the Environment • People expect more performance from that Human wants & needs which they consume (often times for a lower price) • Technology is challenged to meet performance demands and pull on resources (or don’t perform) • Institutions want to change and improve Problems processes, optimize technologies, and reduce Institutional costs & increase revenue - all of which pull on people rules & objectives Technical feasibility Truly, where tensions exist, problems arise. So, a consistent, comprehensive, measurable approach is needed to find balance.OKAY. Intro to the Environment Venn: Business, Technology, & HumansNow, I know famous industrial design firm IDEO has something very similar, but I have a little different take on it.We saw how pervasive technology had become so pervasive into Human life, this model helps us identify where to start looking for solutions.
  43. 43. Tensions in the Environment • People expect more performance from that Human wants & needs which they consume (often times for a lower price) • Technology is challenged to meet performance demands and pull on resources (or don’t here we This is w roblem perform) ep frame th er paths • Institutions want to change and improve to uncov us to that lead s processes, optimize technologies, and reduce solution Institutional costs & increase revenue - all of which pull on people rules & objectives Technical feasibility Truly, where tensions exist, problems arise. So, a consistent, comprehensive, measurable approach is needed to find balance.OKAY. Intro to the Environment Venn: Business, Technology, & HumansNow, I know famous industrial design firm IDEO has something very similar, but I have a little different take on it.We saw how pervasive technology had become so pervasive into Human life, this model helps us identify where to start looking for solutions.
  44. 44. Continuously Improving the UXThis is an illustration that I started working on about 3 years ago.Most designers have a similar process. Wisdom + Craft uses the infinite loop metaphor to demonstrate continuous improvement.Start with the Customer; make a hypothesis. Then go through all the steps. Sometimes these steps are 2 weeks, sometimes 2 hours, but they have be executed every time.Ideating and Prototyping includes all Discovery Activities (hence all the colors)The notion of “Sprints” is for Agile. Discovery is always working on what will be implemented 2 sprints out as we see....
  45. 45. UX + Agile Sprint 0 Sprint 1 Sprint 2 Sprint 3 Release Planning Implement Implement Implement High Dev Cost & Sprint 1 Sprint 2 Developer Track Low UI Cost Engineering & Implementation Designs Designs features Discovery, Design for Design for Design for UX Design Track Design, & Scoping Sprint 2 Sprint 3 Sprint 4 Ideation & Specification Collaboration With thorough collaboration Validate Validate Research for Sprint 1 Release Sprint 2 Release between business, marketing, Sprint 3 Release UX Discovery Track User Research & Planning as Research for as Research for design, and engineering teams, we Sprint 4 Sprint 5 ensure production success. Adapted from D. Sy & L.Miller - AutodeskSo, we must still coordinate all of these activities, but it needs to be threaded into the release cycles. Note: this works better as animation, but the important point is that Discovery is alwaysworking on uncovering insights that will be (theoretically) released 2 Sprints out.
  46. 46. UX DiscoverySo, what do “Discovery Activities” look like? Here is a small sampling...
  47. 47. Modes of Research ❖ Formative ❖ Exploratory ❖ Incremental, smaller studies to help guide development and design ❖ After data is gathered, intended to find ❖ E.g. Prototyping, market testing, interpretation user acceptance ❖ Summative ❖ Generative ❖ Post-release, generally needs larger ❖ Creating models that inform amount of data ❖ E.g. Establishing baselines, ensuring broader, market acceptanceSimplifying modalities of research..
  48. 48. “Lead with the Listen” •Reviewing Analytics •Stakeholder Interviews •Contextual Inquiry •Moderated Usability Testing •Task Analysis •Surveys •Ethnographic Field Studies •Split Testing Only examples and not intended to be comprehensive. There are many more in practice.Chant this: “Lead with the Listen, Lead with the Listen, Lead with the Listen”Don’t ever forget it.
  49. 49. Listening & Observing Review Analytics & KPIsGet the KPIs. Ask for them. If there are no KPIs set, that’s a point of observation and should be including when drafting your problem articulation.
  50. 50. Listening & Observing Moderated Usability Testing Ethnographic Field StudiesHere are some examples of Contextual Inquiry activities,Typically, we’re just gathering data. For ethnography, We’ll develop a guide that helps us stay focused.In usability Testing, we’re usually looking for significantly problematic issues. If the test moderated, this usually involves giving instructions and asking questions. Biases can be introduced. So,moderators need to be skilled in soft-skills to keep the participant as close to the real-world as possible.What are we observing? This could be processes that are taking too many steps, too long, or unable to complete. There’s usually a blend of quantitative and qualitatives measures.
  51. 51. Fun with Data! •Rapid Assessments •Heuristic Evaluations •Landscape Analysis •Design Studios •Affinity Mapping •Participatory Design •Card-Sorting •Content Inventory/Audit •Whiteboarding •Empathy Mapping Only examples and not intended to be comprehensive. There are many more in practice.Let’s have fun with data!
  52. 52. Exploring & InterpretingNotes:Various workshop activities, Affinity Mapping on the RightParticipatory Design Workshop (Design Studio) on the left.Use cards and Empathy map for generative research. (foreshadowing to our assignment this week)This bottom photo is at message first, in which we were getting ready to have a massive exploratory session... you might be able to see the paper on the side walls as well. Using long stretches ofbutcher paper like this is good because we can roll it up take it to a client, or if we’re at a client’s place, we can roll it up and bring it back to our workshop/studio.
  53. 53. Exploring & Interpreting Card SortCard SortThis is from a navigation and content audit of about 15 similar Web properties that had some overlap. Client wanted to homogenize all properties and eliminate special considerations of brandparticulars. Note, that sounds sophisticated, but it was a bad idea. Users rejected it.
  54. 54. •Problem Articulation •(Re)Vision Casting •Experience Principles •Scenarios & Narratives •User Journeys •Personae •Concept + Logic Models •Thematic Lenses •Visualizations •Validation Only examples and not intended to be comprehensive. There are many more in practice.After exploration and interpretation, two things need to happen: we need to create models or illustrations that inform business and we need to validate. If we validate that there is in fact aproblem we need to
  55. 55. Modeling & Informing Thematic Lens Concept VisualizationNotes:
  56. 56. Modeling & InformingCurrent-State Future-State Vision Casting
  57. 57. Modeling & Informing Personae Scenarios & Narratives Only examples and not intended to be comprehensive. There are many more in practice.Personae and Narratives
  58. 58. Modeling & Informing Personas, Narratives, User Journeys
  59. 59. UX DesignYou should not be past 24 mins.So, what does the practice look like?
  60. 60. Design for User Experience❖Lead with Vision❖ What does success look like? ❖Design from❖ What are the business Information goals? ❖ Personas❖Moving Forward ❖ Concept Models ❖ We know who our users are. ❖ Voice of the Customer ❖ What outside resources do we need? ❖ What are our competitors doing?
  61. 61. •Sketching & Iterating •Participatory Design Sessions •Design Critiquing •High-Level Wires •Low-Fidelity or Paper Prototypes •High-Level User Flows •Hallway User Testing •Draft Site Maps •Content Drafting Only examples and not intended to be comprehensive. There are many more in practice.The point of this stage is to get prototypes out quicklyIterating is important (include in visual)
  62. 62. Progression of Ideas ❖Ideation ❖ All ideas are welcome ❖ Ideas are not final, but a start ❖Prototyping ❖ Combine similar ideas ❖ Decide on ideas to move forward withPresentation Notes:Both of these need to happen in this stage of the UX Design ProcessWithout ideas, no starting pointWithout prototyping, no forward movement
  63. 63. Ideation/Prototyping Principles❖ Fail quickly, recover (learn) quickly❖ Don’t make final decisions too early❖ Explore multiple ideas, none too much❖ Perfect is the enemy of good❖ GET OUTSIDE
  64. 64. UI SketchingSketching.....
  65. 65. Ideation/Prototyping PrinciplesMore sketching and paper prototyping. The one with the grid overtop
  66. 66. iPhone mock-up templates. Used in a workshop with everyone sketching their ideas on how the UI should work.
  67. 67. http://Konigi.comiPhone mock-up templates. Used in a workshop with everyone sketching their ideas on how the UI should work.
  68. 68. High-Level Wireframes. No details, no annotations. Best used as talking point in a series.
  69. 69. Ideation/Prototyping PrinciplesHTML HIGH-FIDELITY Prototypes built in Axure.
  70. 70. •Storytelling in the Context of Business Scenarios •Presentations •Stakeholder Reviews •Putting Ideas Forward •Product Roadmaps •Concept Documents Only examples and not intended to be comprehensive. There are many more in practice.Concepts don’t have to look good, just need to tell a good storyFew artifacts, more dialogueBusiness context - scenarios
  71. 71. Telling the Story ❖Proposing ❖ Making suggestions ❖ Clients, investors, teammates ❖Prioritizing ❖ Levels of importance ❖ Alignment with business goalsBoth steps are requiredPresenting potential solutions to articulated problemsDecide what solutions to pursue first based on relative impact of the problems they solveProposing > ImposingPropose, don’t demandPrioritize each step
  72. 72. •Feature Set Details •User Stories (Agile) •Functional Specifications (Waterfall)•High-Fidelity Wires (+Annotations)•Final Copywriting•Detailed Site Maps and User Flows•Branding Detail Only examples and not intended to be comprehensive. There are many more in practice.
  73. 73. Building the Roadmap Specify ❖What resources are needed? ❖How it will be built? Which technologies? ❖Timelines ❖Articulating functional specs or User Stories Detail ❖ Fine-tune visuals and verbiage ❖ Steps in User Flows ❖ User interface annotationsPut together a Plan to get there!In this stage, we decide on detail action steps and resources on how to create our product. It’s not usually a single document, but rather a collection of documents.
  74. 74. Building the RoadmapHEre are some User Flows. detailing the steps in an intended user experience.
  75. 75. Detailed Wireframe
  76. 76. Detailed Wireframe
  77. 77. Detailed Design
  78. 78. •Development Teams •Collaborative Working •User Acceptance Testing •Performance Management Only examples and not intended to be comprehensive. There are many more in practice.In this stage, we actually build the productWork with developersHelp users get comfortable with changes
  79. 79. •Listening Process •Feedback Loops •Analytics & Metrics •Continuous Improvement Only examples and not intended to be comprehensive. There are many more in practice.In this stage, we release the product and monitor successUse analytics to measure resultsAnalyze results to inform future improvements
  80. 80. UX Considerations when Working with ProfessionalsYou should be at about half-hour markYou want to think about what you really need.
  81. 81. Disciplines of User Experience Strategy, Operations, & Management Discovery Design The Interface Cognitive & Social Sciences Service Design User Research Communications Usability Testing Information Architecture Business Analysis Branding & Aesthetics Analytics & Statistics EngineeringThese while we’re thinking about the different disciplines.
  82. 82. Main Take-Aways❖ User Interface Design is only one aspect of UX❖ “Experience” is owned by the user; cannot be “designed”❖ The process is ultimately about framing problems and uncovering solutions❖ We’re all “User Experience” practitioners when we uncover who our audience is and craft something for them.
  83. 83. UX Thanks! @chrispallechris.palle@wisdomandcraft.com
  84. 84. UXRUA or Q&A?
  85. 85. UXCurrent Trends in the Field
  86. 86. Current Trends & Future InnovationsThe Interface❖ Ubiquitous Computing (ubicomp) ❖ Pervasive Technology - many digital touch points ❖ Mobile Phones, Tablets, Ebook Readers ❖ Augmented Reality ❖ Context-Aware Computing
  87. 87. Current Trends & Future InnovationsThe Interface❖ Gestural Input ❖ Touch - Tactile, Haptic Feedback ❖ Wii, XBox Kinect❖ Search (Findability)- Yes, this is still trendy❖ Education Technology ❖ Affective Computing
  88. 88. Current Trends & Future Innovations User Research ❖ Context is Everything ❖ Gender HCI ❖ Social & Cultural Implications ❖ Research Tools ❖ Remote Usability TestingUnderstanding the users’ contexts and their motivations, attitudes, preferences to propose new ideasGender HCI - focuses on the differences of how men and women interface technology
  89. 89. Current Trends & Future Innovations Hyper-connectivity ❖ Network Science ❖ Semantic Web ❖ The Web of Data ❖ Natural Language Processing ❖ The Web of Things ❖ Social BusinessMachines are able to act more intelligently and contextually as everything becomes connected,your car, your alarm clock, your refridgerator.Machines are able to record and interpret information in more natural way.Going back to UbicompSocial businesses leveraging social technology to operate. Think of this as Facebook behind the firewall.
  90. 90. Current Trends & Future Innovations Communications ❖ Information Visualization ❖ Content Strategy ❖ Branding Strategy ❖ Social MediaAs mentioned throughout this presentation, COMMUNICATION plays a huge role in the user experience.Talk about: Feedback Loops.Governance of our communications is considering the end-user experience
  91. 91. Current Trends & Future Innovations Business Empathy ❖ Management and Leadership in ❖ End-User Development UX ❖ Defining Return on Design Investment ❖ Cross-Channel Design and Management ❖ Improvements in Process ❖ Agile, Lean (“borrowed” from Manufacturing) Rapid PrototypingThis is important because as UX becomes a strategic play for organizations, UX needs to grow up.In fact, and we’ll get into this in the later modules, user-centered design is no longer enough and it’s naïve to forget about the organizations and people who have to implement designs.Again, thinking about ubicomp, we need a way to manage all those channelsWe’re also seeing trends in improving our process, which we’re going to look next .but we’re identifying ways to iterate our design thinking more rapidly, by releasing smaller productions and involving the end-user, or co-creating, with our audiences.
  92. 92. UX Thanks!AssignmentLook at the list of disciplines and current trends and write an essay on the topic that’s most interesting to you.The Five FivesIn the course material, You’ll find the Five Fives. These are five People; Books; Blogs: Posts, Articles or Presentations, and Conferences

×