Interface Design Bootcamp

7,838
-1

Published on

Full day workshop at the Future of Web Design conference in New York City Nov 17, 2010.

Published in: Technology, Education

Interface Design Bootcamp

  1. 1. INTERFACE DESIGN BOOTCAMP FUTURE OF WEB DESIGN Monday, May 16, 2011
  2. 2. Aarron Walter aarronwalter.com @aarron Monday, May 16, 2011
  3. 3. The Big Picture Monday, May 16, 2011
  4. 4. What is an interface? Monday, May 16, 2011
  5. 5. This is an interface ... Monday, May 16, 2011
  6. 6. Monday, May 16, 2011
  7. 7. so is this ... Monday, May 16, 2011
  8. 8. Monday, May 16, 2011
  9. 9. and this too ... Monday, May 16, 2011
  10. 10. Monday, May 16, 2011
  11. 11. An interface is a visual language of action Monday, May 16, 2011
  12. 12. It’s what’s between you and other humans Monday, May 16, 2011
  13. 13. Qualities of a Good Interface Designer Monday, May 16, 2011
  14. 14. Empathetic Monday, May 16, 2011
  15. 15. Thinks Like MacGyver Monday, May 16, 2011
  16. 16. Stays Focused on Outcome, not Process Monday, May 16, 2011
  17. 17. Process: It’s how we make stuff Monday, May 16, 2011
  18. 18. define design develop deploy APPROVAL APPROVAL APPROVAL WATERFALL METHOD Monday, May 16, 2011
  19. 19. deploy release APPROVAL AGILE METHOD designdeploy develop define designdeploy develop define designdeploy develop define Monday, May 16, 2011
  20. 20. School of Hard Knocks Small teams can work faster, be more agile, and require less entropy of communication and management Diverse skill sets keep you flexible and on time Process and documentation are helpful, but remember what you’re really trying to accomplish Think modular, reusable, flexible Monday, May 16, 2011
  21. 21. Respect Between Design & Dev Monday, May 16, 2011
  22. 22. Inside MailChimp UX Only 6 people that combine research and front- end development Close, respectful relationship with developers Keep in close contact with support and customers Post ideas in common space and invite conversation Dedicated to interface consistency Monday, May 16, 2011
  23. 23. What’s your process? Monday, May 16, 2011
  24. 24. The Workshop Monday, May 16, 2011
  25. 25. Learn the Basics Monday, May 16, 2011
  26. 26. Try What You’ve Learned Monday, May 16, 2011
  27. 27. Rinse & Repeat Monday, May 16, 2011
  28. 28. Project Brief: Event App That Connects Monday, May 16, 2011
  29. 29. Project Goals Help conference attendees connect before, during and after the event Bring people together by helping them learn about other attendees and the activities of events Monday, May 16, 2011
  30. 30. Stakeholders Carsonified Attendees (that’s you) Speakers (hey, that’s me!) Monday, May 16, 2011
  31. 31. UNDERSTANDING USERS Monday, May 16, 2011
  32. 32. User Research: Gathering Data Monday, May 16, 2011
  33. 33. Who do I talk to? Stakeholders: who do you think your users are? Customer Advocate: People who speak to customers directly Customers: real people using the product Usage Stats: Google Analytics, etc. Someone You Know: A person you know fits the target profile (validate your findings) Monday, May 16, 2011
  34. 34. Research Methods User Interviews: one-on-one conversations (in- person or remote) Contextual Inquiry: on-site visit with participants (in-person) Surveys: multiple choice questions (remote) Focus Groups: group discussion (in-person) Monday, May 16, 2011
  35. 35. Types of User Research In Lab Testing Focus Groups Online Surveys QUALITATIVE BEHAVIOR QUANTITATIVE ATTITUDE Web Analytics Monday, May 16, 2011
  36. 36. Which methods to use? Monday, May 16, 2011
  37. 37. Which ever fit your time and budget Monday, May 16, 2011
  38. 38. Consider type of project, and what is already known Monday, May 16, 2011
  39. 39. The Power of Twitter Monday, May 16, 2011
  40. 40. Personas: Artifacts of user research Monday, May 16, 2011
  41. 41. Keeps Us Focused on Humans Not Features Monday, May 16, 2011
  42. 42. Make Them Visible Monday, May 16, 2011
  43. 43. What’s In a Persona? A photo (it can be stock) Name A short bio Age Location Occupation Other optional info Monday, May 16, 2011
  44. 44. Motivations Monday, May 16, 2011
  45. 45. persona My internship provided me with the opportunity to work in Times Square. I just love all of the lights, action, and excitement! Julia has been taking Spanish since high school and is excited to study abroad in Buenos Aires next spring. She’s traveled a little in the past—to Great Britain for a vacation with her family and to Mexico for a missions trip—but this is her first time going abroad alone. Though she has other friends who also plan to study abroad, she wanted to go at a different time so she would be forced to make friends with the locals and truly immerse herself in the culture. She’s heard from friends that the maturity level of some of the students plummets the moment they step on the plane to study abroad. She hopes they don’t make her look like a “stupid American.” She’s also heard that the dorms in Buenos Aires aren’t great, which solidified her decision to do a homestay. However, she’s concerned about commuting to classes, which she hopes to take at the NYU campus as well as a local university—if the credits transfer. She doesn’t have a lot of extra cash and is interested in a work study to pay for souvenirs and some travel around Argentina. Speaking Spanish on the job would also be great practice, but she isn’t sure what sort of opportunities there are, or even if she’s allowed to work. Julia Age: 19 - 22; Sophomore; Journalism & Communications Goals: Get a “Big City College” education, cosmopolitan experience; Build resume with internship; Take new/different courses; Make new/different friends; Experience different cultures Pain Points: Limited courses offered; Costs; Organization (too much or not enough); Advantages are hidden; Challenging to transfer credits Knowledge Lifecycle THE INFLUENCER TECHNOLOGY DOMAIN EXPERIENCE 1 2 3 4 5 NOVOCTSEPAUGJULJUNMAYAPRMARFEBJAN DEC Monday, May 16, 2011
  46. 46. design studio souvenirs and some travel around Argentina. Speaking Spanish on the job would also be great practice, but she isn’t sure what sort of opportunities there are, or even if she’s allowed to work. Activities and Interest Knowledge Lifecycle Influencers INTERNSHIPS FULFILLING CREDITS TAKING ELECTIVES EXPLORING SOCIALIZING NYU TRIAL RUN SPECIALIZED COURSES CLASS OFFERINGS INTERNSHIP FINANCIAL AID NYC EXPERIENCE FULFILLING CREDITS PARENTAL SUPPORT NYU REPUTATION TECHNOLOGY DOMAIN EXPERIENCE 1 2 3 4 5 1 2 3 4 5 NOVOCTSEPAUGJULJUNMAYAPRMARFEBJAN DEC Monday, May 16, 2011
  47. 47. Monday, May 16, 2011
  48. 48. Monday, May 16, 2011
  49. 49. Monday, May 16, 2011
  50. 50. Activity: Personas Create small teams Interview stakeholders for the event app Identify user needs, motivations, and business goals Create two to three personas describing archetypal users of your app Monday, May 16, 2011
  51. 51. 45 minutes Monday, May 16, 2011
  52. 52. Personas: Presentation & Discussion Monday, May 16, 2011
  53. 53. Design Personas: Emotional Engagement Monday, May 16, 2011
  54. 54. functional reliable usable pleasurable Monday, May 16, 2011
  55. 55. Products are People Too Monday, May 16, 2011
  56. 56. Design Persona Brand Traits Voice Personality Map Overview unfriendly friendly dominant submissive MailChimp Freddie Von Chimpenhiemer IV is the face of the MailChimp, and the embodiment of the brand personality. Freddie's stout frame communicates the power of the application, and his always on the go posture let's people know this brand means business. Freddie always has a kind smile that welcomes users and makes them feel comfortable and at home. The cartoon style lets people know that MailChimp offers a fun, and informal experience. Freddie likes to crack witty jokes, but when the situation is serious, the funny business is out the window. MailChimp often surprises users with a funny easter egg, or a link to a goofy YouTube video. Fun is around every corner, but never in the way of the workflow. The voice of MailChimp is familiar, friendly, and above all human. The personalities of the people behind the brand shines through with honesty. The voice of MailChimp cracks jokes (ones you could share with your momma), tells stories, and communicates with the folksy tone that might be used with an old friend. MailChimp uses contractions like "don't" instead of "do no" because that's how real humans speak to one another. MailChimp uses sound effects like, “hmmmmm....” to make it sound like youʼre thinking hard, or “Blech, thatʼs awful!” to make it sound like you empathize. Or is it sympathize? Hmm, too lazy to Google it. Bah, you get the gist. Text for form and button labels are kept lowercase to reinforce the informality of the brand. MailChimp likes to start blog posts and other longer copy blocks with a quick story, like “I remember when...” Everybody likes stories. When people get upset, or make a mistake, MailChimp is always compassionate and sympathetic, and the feedback messages reflect that. 1 Author: Aarron Walter Fun, but not not childish Funny, but not goofy Powerful, but not complicated Hip, but not alienating Easy, but not simplistic Trustworthy, but not stodgy Informal, but not sloppy Monday, May 16, 2011
  57. 57. Voice Hi, Bob. You could be a part-time model. Oops! Looks like you forgot to enter an address. High fives! Your list has been imported. One of our servers is temporarily down. Our engineers are already on the case and will have it resolved shortly. Success Feedback Error Feedback General Message Copy In-App Greeting Context We've got all kinds of social features that help you get to know your subscribers and share your newsletters. Integrate your signup form with Facebook, share your campaigns on Twitter, track subscriber activity on social networks, and more. Marketing Copy Bummer, we don't have any info to report just yet. Critical Failure Visual Lexicon The bright colors in the MailChimp palette convey a sense of fun and humor, but are slightly desaturated to make them feel more refined, and not romper room. MailChimp is fun, but it's also powerful and refined. Neutral colors soften the palette and strike a healthy balance between the informal and functional sides of the MailChimp personality. The voice of MailChimp is familiar, friendly, and above all human. The personalities of the people behind the brand shines through with honesty. The voice of MailChimp cracks jokes (ones you could share with your momma), tells stories, and communicates with the folksy tone that might be used with an old friend. MailChimp uses contractions like "don't" instead of "do no" because that's how real humans speak to one another. MailChimp uses sound effects like, “hmmmmm....” to make it sound like youʼre thinking hard, or “Blech, thatʼs awful!” to make it sound like you empathize. Or is it sympathize? Hmm, too lazy to Google it. Bah, you get the gist. Text for form and button labels are kept lowercase to reinforce the informality of the brand. MailChimp likes to start blog posts and other longer copy blocks with a quick story, like “I remember when...” Everybody likes stories. When people get upset, or make a mistake, MailChimp is always compassionate and sympathetic, and the feedback messages reflect that. In critical situations like when a server goes down, or a credit card is declined, MailChimp drops the humor and speaks directly. Copy Examples Color MailChimp is easy-going, efficient, and easy to use, and it's typography reflects it. Simple, sans-serif headings and body copy appropriately varied in scale, weight and color to Typography Interface elements are flat and simple, keeping things easy to understand and not intimidating. Soft, subtle textures may appear in places to warm up the space and make it feel human. Freddie should be used sparingly, and only to interject a bit of humor. Freddie does not ever give application feedback, stats, or help a user with a task. General Style Notes 2 Author: Aarron Walter Monday, May 16, 2011
  58. 58. One of our servers is temporarily down. Our engineers are already on the case and will have it resolved shortly. We've got all kinds of social features that help you get to know your subscribers and share your newsletters. Integrate your signup form with Facebook, share your campaigns on Twitter, track subscriber activity on social networks, and more. Marketing Copy Critical Failure Visual Lexicon The bright colors in the MailChimp palette convey a sense of fun and humor, but are slightly desaturated to make them feel more refined, and not romper room. MailChimp is fun, but it's also powerful and refined. Neutral colors soften the palette and strike a healthy balance between the informal and functional sides of the MailChimp personality. Color MailChimp is easy-going, efficient, and easy to use, and it's typography reflects it. Simple, sans-serif headings and body copy appropriately varied in scale, weight and color to communicate information hierarchy make MailChimp feel like a familiar, comfortable cardigan that is both functional and beloved. Typography Interface elements are flat and simple, keeping things easy to understand and not intimidating. Soft, subtle textures may appear in places to warm up the space and make it feel human. Freddie should be used sparingly, and only to interject a bit of humor. Freddie does not ever give application feedback, stats, or help a user with a task. General Style Notes Engagement Methods Surprise & Delight • Themed login screens commemorating holidays, cultural events, or a beloved individual • Easter eggs: unexpected moments of humor that may have an overtone of nostalgia referencing kitschy pop culture of the past. Anticipation • Random funny greetings at the top of each main page (not in workflow) Rewards • Giveaways at the end of a major task workflow. Example: T-shirt give aways after completing campaigns 2 Author: Aarron Walter 3 Author: Aarron Walter Monday, May 16, 2011
  59. 59. Design Persona Brand Traits Voice Personality Map Overview unfriendly friendly dominant submissive WSOL WSOL takes on the role of the helpful outsider. Known for our ability to efficiently devise solutions to complex problems, we're often brought in when an organization needs help. As outsiders we must be prepared to overcome skepticism – especially relevant since many WSOL clients have in-house marketing, design and IT teams. By demonstrating expertise early on (through actions more so than words) the outsider gains the acceptance and support of the group. The stranger is valued as much for his outside perspective as for the knowledge and experience accumulated through his travels. With a bit of clever detective work, and with the support of innovative technology, the outsider champions the principles of good design and helps clients tackle the challenges of competing within the technological landscape. Is there one man who can be the embodiment of such a brand? There is...his name is Michael Knight. The voice of WSOL should be calm and cool. The voice of an expert who's seen it all, and lived to tell. When clients panic or situations become tense, WSOL remains strong and collected. The overall tone is casual and personal, so we use contractions and light slang instead of more formal terms. Trying to sound too formal comes off as stuffy...it's the personal connections we make with our clients that we want to nurture. We aren't a large faceless agency after all. Call to actions should be assertive but not pushy. We don't need to brag, we let our actions and beliefs tell our story instead. Copy should also be more about our customers than ourselves. Copy should be playful when discussing creativity, design and process. When it's time to take care of business, tone should be direct. Michael Knight does not play games. When we need to make strong recommendations, we take on a "tough love" tone. WSOL is empathetic and understanding. Reliable and smart. In communications, we want our skills and services to take a back seat to our wisdom and perspective. Speak first about why we do things, before discussing how or what we do. 1 Author: Dennis Kardys Witty, but not snide Confident, but not cocky Wise, yet humble Tech Savvy, but not geeky Charming, but not creepy Cool, but not aloof Tough, but not mean Monday, May 16, 2011
  60. 60. Activity: Design Personas Work in small teams Consider the brand you’re designing for Create a Design Persona to guide the voice of your app Monday, May 16, 2011
  61. 61. 30 minutes Monday, May 16, 2011
  62. 62. Design Personas: Presentation & Discussion Monday, May 16, 2011
  63. 63. SKETCHBOARDS Monday, May 16, 2011
  64. 64. Monday, May 16, 2011
  65. 65. Sketchboards Are ... Collaborative, they let you bring in the whole team early on Fast, you can iterate through ideas quickly with little time invested The big picture, they help you see a broader process Monday, May 16, 2011
  66. 66. Know When to Protect Your Work Monday, May 16, 2011
  67. 67. Sketchboards Include ... Steps in a process Information about your users Simple sketches of interface templates Notes and ideas Monday, May 16, 2011
  68. 68. How to Work Through Ideas Move quickly using the 2-up template Evaluate then combine the best ideas into one interface in a 1-up template Monday, May 16, 2011
  69. 69. Monday, May 16, 2011
  70. 70. Monday, May 16, 2011
  71. 71. Activity: Sketchboard Round up the troops Create a sketchboard to flesh out tasks, process flow, and interface concepts for your app Consider lessons learned from stakeholder interviews & personas Monday, May 16, 2011
  72. 72. 60 minutes Monday, May 16, 2011
  73. 73. Sketch Boards: Presentation & Discussion Monday, May 16, 2011
  74. 74. WIREFRAMES Monday, May 16, 2011
  75. 75. Simple, fast sketches of your interface Monday, May 16, 2011
  76. 76. Monday, May 16, 2011
  77. 77. Monday, May 16, 2011
  78. 78. Monday, May 16, 2011
  79. 79. Monday, May 16, 2011
  80. 80. Wireframes Are ... Low resolution, they struggle to simulate interaction Not about aesthetics, they communicate hierarchy, elements, organization, and design patterns Supposed to be fast so you can iterate on ideas quickly Monday, May 16, 2011
  81. 81. Konigi konigi.com/resources Monday, May 16, 2011
  82. 82. Wireframe or Prototype? Monday, May 16, 2011
  83. 83. DESIGN PATTERNS Monday, May 16, 2011
  84. 84. A Solution to a Common Problem Monday, May 16, 2011
  85. 85. The Lingua Franca of Interface Design Monday, May 16, 2011
  86. 86. Pattern Tap patterntap.com Monday, May 16, 2011
  87. 87. Time Tripper time-tripper.com/uipatterns Monday, May 16, 2011
  88. 88. Yahoo Design Patterns developer.yahoo.com/ypatterns Monday, May 16, 2011
  89. 89. Card Stack Monday, May 16, 2011
  90. 90. Edit In Place Monday, May 16, 2011
  91. 91. Tag Cloud Monday, May 16, 2011
  92. 92. Design Patterns Help ... Users learn and remember how to use your interface Help you design new interfaces quickly Significantly decrease code Make prototyping faster and easier Monday, May 16, 2011
  93. 93. Ignoring Patterns Can Bloat Code Monday, May 16, 2011
  94. 94. Design Patterns Cut 46% of MailChimp’s CSS Weight Monday, May 16, 2011
  95. 95. Reduced Facebook’s CSS by 19%, HTML by 44% Monday, May 16, 2011
  96. 96. OOCSS oocss.org Monday, May 16, 2011
  97. 97. Monday, May 16, 2011
  98. 98. Monday, May 16, 2011
  99. 99. Anti-Patterns Monday, May 16, 2011
  100. 100. Monday, May 16, 2011
  101. 101. PROTOTYPES Monday, May 16, 2011
  102. 102. Great for Showing Interaction Patterns Monday, May 16, 2011
  103. 103. Provides a Realistic View of Your App Monday, May 16, 2011
  104. 104. Simulate Real Data for Realistic Tests Monday, May 16, 2011
  105. 105. Mustache mustache.github.com Monday, May 16, 2011
  106. 106. Can Be Created With ... Paper HTML, CSS, JavaScript Powerpoint or Keynote Fireworks Specialty tools like Axure Monday, May 16, 2011
  107. 107. Monday, May 16, 2011
  108. 108. Monday, May 16, 2011
  109. 109. Monday, May 16, 2011
  110. 110. Monday, May 16, 2011
  111. 111. Monday, May 16, 2011
  112. 112. Keynote Kung Fu keynotekungfu.com Monday, May 16, 2011
  113. 113. Monday, May 16, 2011
  114. 114. Monday, May 16, 2011
  115. 115. Choosing the Right Method Paper Keynote/ Powerpoint Fireworks HTML LOW FAST HIGH SLOW SPEED FIDELITY Axure Monday, May 16, 2011
  116. 116. Make Prototyping Easier By ... Creating a simple TextMate bundle, Dreamweaver plugin, etc. with core prototype elements Create a common library of icons, JavaScript tools, CSS layout framework Monday, May 16, 2011
  117. 117. Monday, May 16, 2011
  118. 118. Monday, May 16, 2011
  119. 119. Activity: Prototype Assemble your posse Create a paper, Keynote, or HTML prototype of your app Complete one key section, move on to other sections as time permits Monday, May 16, 2011
  120. 120. 90 minutes Monday, May 16, 2011
  121. 121. Prototypes: Presentation & Discussion Monday, May 16, 2011
  122. 122. USABILITY TESTING Monday, May 16, 2011
  123. 123. The Krug Method Test 3 users in house Feed them nice snacks Invite management, head honchos, and other decision makers to the tests to help them understand users Test about once a month, but keep it feasible for your schedule Monday, May 16, 2011
  124. 124. Remote Testing Method Setup a GoToMeeting.com account Put the call out on Twitter or Facebook for test participants Create permission forms and a screener questionnaire with Wufoo.com Record test session with Silverback (silverbackapp.com) Monday, May 16, 2011
  125. 125. Testing In-House Setup prototype or refined interface on a machine Screen users Get them to sign a permission form Record test session with Silverback Monday, May 16, 2011
  126. 126. Tweaking After Each Test Monday, May 16, 2011
  127. 127. Silverback silverbackapp.com Monday, May 16, 2011
  128. 128. Resources Monday, May 16, 2011
  129. 129. Monday, May 16, 2011
  130. 130. All Workshop Resources AarronWalter.com Monday, May 16, 2011
  131. 131. Aarron Walter aarron@aarronwalter.com @aarron Monday, May 16, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×