User Experience Workshop


Published on

Selected chapters from a 2-day workshop we delivered surrounding user experience and "good design" methods. Enjoy!

Published in: Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

User Experience Workshop

  1. 1. user experience WORKSHOP 1
  3. 3. Chapter 1: introduction 3
  4. 4. What exactly is good design? Write down your answer 4
  6. 6. DIETER RaMSON GOOD DESIGN1 Good design is innovative. 6 Good design is honest.2 Good design makes a product useful. 7 Good design is long-lasting.3 Good design is aesthetic. 8 Good design is thorough, down to the last detail.4 Good design makes a product understandable. 9 Good design is environmentally-friendly.5 Good design is unobtrusive. 10 Good design is minimal. 6
  7. 7. all we need is good design? Q What is the difference between good design and user-centered design? A 7
  8. 8. The history of ux Ergonomics User Experience 1950s 1990s iPad Usability 1980s Application File Edit View Draw Object New Open Close Application File Edit View Draw Object New Open Close 8
  9. 9. Where to focus? Function Behavior Emotion 9
  10. 10. why focus on users? • Users are sophisticated and demanding. • People expect more than transactions; they want connections. • The relationship between brands and people is ever-evolving. 10
  11. 11. Goal of the workshop *** Explore current standards and trends in user experience design, the conceptual foundation for these practices, and how they create a more gratifying experience for the user. *** 11
  12. 12. WHYGOOD...AND NOT GREAT? 12
  13. 13. QWhy has current thinking evolved from user-centered design to user experience design? A 13
  14. 14. CHAPTER 2: user experience design 14
  15. 15. User Experience What it is 15
  16. 16. User Experience What it is Not 16
  17. 17. Step 1: capture• Functionality• Content• DesignStep 2: ENGAGEstep 3: CONVERT 17
  18. 18. Step 1: captureStep 2: engage• If a customers engages with your brand and the reward is clear, they will tune in.step 3: convert 18
  19. 19. Step 1: captureStep 2: engagestep 3: convert• UX is successful when it conveys the brand’s purpose, engages the user’s emotion, and influences behavior. 19
  20. 20. user experience: 10 principles 1 2 3 4 5 Stay out of Limit Create a hierarchy Provide a strong Design flows people’s way distractions that matches information scent people’s needs 20
  21. 21. 6 Provide context with cues and signposts7 Makes actions reversible8 Use constraints appropriately9 Provide feedback10 Make a good first impression 21
  22. 22. A word on e-commerce sites• Results are quantifiable.• Designs tend to be results-oriented.• There is less motivation to innovate.• It is easy to fall into the trap of focusing only on numbers.• Traditionally, metrics like page views, bounce rates, and conversion rates are not enough to measure user experience. 22
  25. 25. 25
  26. 26. Chapter 3: a focus on users 26
  27. 27. A SHIFT IN PERSPECTIVE Let’s think about... thinking. 27
  28. 28. Theory of “mindtime”how it worksWe have thoughts that address the past, present, and future: PAST: A record of successes and failures, the standard established to define truth PRESENT: Trends, assets, resources. Involves monitoring the environment to make plans to move forward FUTURE: New possibilities, exploration, adaptation, scanning ahead 28
  29. 29. our application of “mindtime”• People come to a site with a purpose, rooted in a particular mindset.• Understanding how the user’s thoughts are oriented (past, present, or future) can help you engage them with a meaningful experience.• Understanding the user’s mindset is critical to user-centered design. 29
  30. 30. What is a persona? 30
  32. 32. User experience designparallels to dating1st impression branding, visuals engage navigation, content relate interaction, flow connect content close* conversion*or stay on her mind so that she will call/is open to a relationship 32
  33. 33. user experience designPoints to evaluateAppearance: How does it look?Interaction: How do I access it?Information: What is it?Structure: How is it presented?Conceptual Model: Does it make sense to me?Value: Does it matter to me? 33
  34. 34. Activity1. Identify a persona 2. Define a customer journey 34
  35. 35. Chapter 5: interaction design 35
  36. 36. introductionAs defined by the Interaction Design Association:“Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction Designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond. Our practices are evolving with the world; join the conversation.” 36
  37. 37. The main question How can we use psychology to create fun, engaging and effective interactions with customers? 37
  38. 38. The activities of interaction design• Gather & Define Requirements• Create Scenarios• Structure the Framework• Design the Solutions• Evaluate• Refine 38
  39. 39. site maps• Identify the structure of websites• Simplicity comes from structure• GOAL: To help people understand where they can locate content HOME SUB SUB SUB SUB TOPIC TOPIC TOPIC TOPIC 39
  40. 40. site map structure types Linear structure • No active user intervention possible • Each item of information built on others 40
  41. 41. site map structure types Tree structure Users reach various subsidiary pages from the homepage. • The branches offer various navigation possibilities • Logical structure (hierarchical structure) 41
  42. 42. site map structure types Single frame structure • Experienced as a single page by users • No hierarchies 42
  43. 43. site map structure types Jump-line structure • Linear screen arrangement • User can reach any page from the homepage • Little interactivity 43
  44. 44. task flows• Take site maps further by identifying the actions that users can take within a section of the site.• Draw connections to error states. Sign In Did user provide valid credentials? Error Screen No Yes Signed In View 44
  45. 45. swimlanes• Align and integrate task flow with business processes, technical requirements, and online/offline dependencies. TASK FLOW BUSINESS ANALYST TECHNICAL 45
  46. 46. wireframes • Show the layout of an interface screen. • Describe each element and behavior. • Focus on layout, labels, and interactions. • Avoid finished design elements such as color and photos, instead use placeholders for copy and images. 46
  47. 47. interaction design: Prototypes• Mimic the functionality of a website• Iterative• Getting buy-in• Can be used to evaluate with users• It is part of a process, not an artifact 47
  48. 48. The tools • Microsoft Visio • Balsamiq • Axure • OmniGraffle • Adobe InDesign • Adobe Illustrator • Keynote or PowerPoint 48
  49. 49. navigationUsers should always know where they are, where they came from,how to get back, and where to go next. 49
  50. 50. Important questions for navigationWhat is the purpose of the site?What actions can the user perform on the site?Do they understand how to get there?Will the user’s goals be met? 50
  51. 51. Navigation design: 10 principles1 Let users know where they are 6 Stay consistent2 Let users know where they were 7 Follow web conventions3 Let users know where they are going 8 Do not surprise or mislead the user4 Make it easy to get there 9 Provide users with support and feedback5 Provide the correct navigation options 10 Give users an “out” 51
  52. 52. buttons• Buttons serve the purpose of getting the user to perform an action.• An effective call to action: • Draws the user’s attention by being a larger size in comparison to surrounding elements. • Is positioned prominently on the page. • Is set apart with ample whitespace. • Is usually a contrasting color. • Offers a secondary, alternative action (Sign Up Now or Take A Tour.) 52
  53. 53. buttons 53
  54. 54. tabs• Buttons that are usually aligned side-by-side horizontally• Distinguished by the fact that they are connected to a larger container• Websites started using tabs for navigation purposes (Amazon, 1998)• Excellent metaphors of real-life file tabs• Improve content organization• Visually pleasing 54
  55. 55. WHEN TO USE TABS• Grouping related information• Information that does not need to be compared or accessed simultaneously• Terse content 55
  56. 56. TAB GUideLineS• Tabs must look and behave like tabs.• Place navigation at the top of the page.• Only have one row of tabs.• Always have one of the tabs pre-selected.• Clearly indicate which tab is currently active and which tabs are currently inactive.• The active tab should appear connected to the content area. 56
  57. 57. TAB GUideLineS• Consider grouping related tabs.• Arrange tab labels in an order that makes sense for your users.• Use title style capitalization.• Tab labels should be only one-to-two words and written in plain language.• Ensure fast response time.• Do not use tabs to replace breadcrumbs. 57
  58. 58. forms• Forms have undergone a similar evolution to shopping carts.• Originally, each field was filled out manually.• Now, there auto-fill pulls your information from other sites and browser history. 58
  59. 59. a successful form• Indicates the user’s progress when multiple pages are involved.• Asks only for information that is necessary (no marketing questions.)• Keeps the fields simple, direct, and easy to read.• Confirms the submission of the form. 59
  60. 60. errors• Traditionally, errors were pointed out using red text or a dialog box.• Today, the best error recovery indicators use alternatives to text.• Consider human-to-human interactions and other types of language that a user can understand beyond text alone. 60
  61. 61. mobile • People use their mobile devices to enhance productivity, comfort, and pleasure, everywhere and at anytime • Mobile applications need to focus on a core utility; content must be relevant in the context that it is being used (on the go.) • They need to be fast and reliable in order to be valuable in those environments. 61
  62. 62. What percentage of smartphone owners usetheir devices to check prices in stores? 62
  63. 63. 63
  64. 64. “If you haven’t used your mobile phone to initiate some kind of financial transac-tion, then you better get on board because it is quickly becoming the fastest-grow-ing segment in the consumer financial world. According to IDC Financial Insights, thenumber of consumers using their smartphones to complete online or offline transac-tions has doubled as of May 2012.About 37 percent of consumers said they plan to compare prices on their mobile de-vices while at brick-and-mortar stores, according to”-Bloomberg, July 2012. 64
  65. 65. When planning an app:What should our app do?Why?What should our app do differently from its competitors?What should our app do better than its competitors? 65
  66. 66. define ui brand signatures • Each user interaction should reflect the story of the brand. • Features, visuals, wording, fonts, and animations make a difference. i. Differentiate ii. Represent key functions iii. Set the pattern of the design language 66
  67. 67. OPTIMIZE FLOWS AND UI ELEMENTS • Users will not wait. • “Every millisecond counts.” -Google 67
  68. 68. balance:functionalityaestheticsusabilityperformance 68
  69. 69. touch points DO: DON’T: Bigger the better Switch from fingerpad to fingertip Limited options Group targets near each other 69
  70. 70. “Don’t shrink, rethink.” NOKIA 70
  71. 71. responsive design• The website responds to you, rather than making you deal with it (by scrolling or magnifying or whatever-else-ing in order to view it comfortably.) -Fast Company 71
  72. 72. 72
  73. 73. responsive design• Code the website once but allow it to be flexible to fit the device. Good news: Bad news: Coded once Many more wireframes 73
  74. 74. 74
  75. 75. Fun THeory VIdeos 75
  76. 76. REASON OR EMOTION ? 76
  77. 77. You can’t make decisions without EMOTions Saver and Damasio (1991) 77
  78. 78. CAN DO WILL DO 78
  79. 79. 79
  80. 80. excitement 80
  81. 81. social 81
  82. 82. love 82
  83. 83. effort 83
  84. 84. why did you join facebook? 84
  85. 85. 85
  86. 86. PERSUASIVE designThere are seven main methods in the persuasive design “arsenal”:1 Reciprocation - “I like to return favors.”2 Commitment - “I like to do what I say.”3 Social Proof - “I go with the flow.”4 Authority - “I’m more likely to act on information if it’s told by an expert.”5 Scarcity - “If it’s running out, I want it.”6 Framing - “I’m influenced by the way prices are framed.”7 Salience - “I care about what’s relevant to me right now.” 86
  87. 87. The evolution of the shoppinG cart• The user flow from product page to order submission has evolved over time.• Originally, it was a long process: Add to Cart > Checkout > Register/Sign In > Enter Billing/Shipping Info > Submit Order• Today, there is 1-Click Checkout, paying through PayPal, having one shopping cart from multiple stores (or sellers, like on eBay.) 87
  88. 88. today’s shopping cart• The online shopping cart is more flexible than its physical counterpart.• Improvements come about from thinking outside the box. THINK OUTSIDE THE BOX 88
  89. 89. successful shopping cart traits• Welcomes users by name.• Points out that an item has been added (immediate feedback.)• Links back to the original product.• Gives users the option to keep shopping and brings users back to the same place on the page.• Estimates the total cost (plus shipping and discounts based on zipcode.)• Allows for easy quantity edits/removal. 89
  90. 90. successful shopping cart traits• Saves items in cart across multiple sessions and windows.• Saves items in cart for adequate time periods.• Allows people to buy without registering.• Allows to save for later.• Can put on waitlist if out of stock.• Get e-mail notification or auto-purchase if out of stock. 90
  91. 91. CHECKOUT PROCESS• Does not have sub-pages or flows (e.g., referred shipping address, create an account.) It is a linear process.• Provides the opportunity to gift wrap or include a personal message.• Moves forward to the next step.• Visualizes journey/show progress.• Steers clear of ambiguous language such as back, next, proceed (e.g.,continue could mean “continue shopping” or “continue checkout” depending on state of mind of shopper.) 91
  92. 92. BROWSING 92
  93. 93. Outfit Builders 93
  94. 94. 94
  95. 95. Multiple Views 95
  97. 97. LIVE FEEDS 97
  98. 98. 98
  99. 99. SHOPPABLE MEDIA 99
  100. 100. 100
  101. 101. EXPERTS’ PICKS 101
  102. 102. DIRECT CONTacT 102
  104. 104. pop quiz Q What is the difference between navigation and information architecture? A 104
  105. 105. CLOSING 105