Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WORKSHOP: Making the World Easier with Interaction Design

906 views

Published on

An updated version of an Intro to Interaction Design workshop I've taught intermittently since 2012. Intended age level is middle to high school age students, but is also appropriate for adults curious about the field.

The first portion (excluding the optional heuristic review) can be taught, though tight, in approximately 90 minutes. With the optional second portion, allocate a minimum of 2 hours. More time allows for better discussion and perhaps expansion of the sketching into some flows. See the back of the deck for additional instructor notes.

Recommended materials:
Printer paper (~5 sheets per student minimum)
Pencils and erasers

I have delivered this workshop to over 500 students:
Amazon GirlsWhoCode Camp - 2015
Microsoft DigiGirlz Camp (Redmond) - 2012, 2013, 2014
UW's Dawgbytes Camp - 2012

For a blog post about the pilot sessions in 2012, as well as some examples from student sketches, see http://blog.cherylplatz.com/?p=181

To inquire about booking me to teach this workshop in your environment, email cheryl@cherylplatz.com.

Published in: Design

WORKSHOP: Making the World Easier with Interaction Design

  1. 1. Making The World Easier with Interaction Design Cheryl Platz Senior User Experience Designer, Amazon
  2. 2. What’s “interaction design”? Interaction designers try to make technology do what people expect it to do.
  3. 3. Translation?
  4. 4. It’s my job to make sure you don’t want to throw your computer across the room.
  5. 5. Discussion! Have you ever gotten mad at your computer? Your phone? Can you remember why?
  6. 6. Discussion! What are some examples of things you feel are easy to use? Why?
  7. 7. Before and After: Windows Phone BEFORE AFTER
  8. 8. You get to work with art AND technology. Design is very collaborative –working together! You can work in many industries with the same skills. You can make people’s lives easier - and better. What’s different about interaction design?
  9. 9. But seriously, what IS Interaction Design? PSYCHOLOGY VISUAL DESIGNCOMPUTER SCIENCE + +
  10. 10. The Design Process 1.  Research 2.  Explore (Brainstorm, Sketch, Critique) 3.  Prototype (or Implement) 4.  Test 5.  Repeat
  11. 11. Let’s look at some of the tools designers use to communicate their ideas.
  12. 12. Storyboarding: Helps us understand the context in which our customers will use our products. Most useful for: Device design, phone apps Least useful for: Websites
  13. 13. Storyboarding: Helps us understand the context in which our customers will use our products. Most useful for: Device design, phone apps Least useful for: Websites
  14. 14. Sketching: Helps us explore and communicate many ideas quickly without investing development resources. Encourages discussion of ideas early in the process. If you can draw rectangles and squiggly lines, you can sketch.
  15. 15. Wireframes: Show all of the pieces of the UI, but don’t worry about final colors and other smaller details Term comes from computer animation – method for showing a shape with as little detail as possible
  16. 16. Information Architecture & Flow Diagrams: Show the relationship between all of the concepts - or all of the screens and actions – in your product
  17. 17. Today, you’ll try your hand at planning, sketching, and evaluating user experiences.
  18. 18. But first: a few tips and tricks.
  19. 19. PSYCHOLOGY: RULE OF 7 It’s hard for the human brain’s short term memory to remember more than 7 things at once (more or less). The more “things” you put onscreen, the more work a person has to do to remember them.
  20. 20. English speakers scan from left to right and top to bottom. Items down here are seen last… and sometimes not seen at all. PSYCHOLOGY: EYE SCANNING Eyetrackingmapofapast Facebookhomepagelayout
  21. 21. VISUAL DESIGN: GROUPING Similar items should be grouped together: Make groups clear by using plenty of space Avoid the Sesame Street scenario: “One of these things is not like the other”
  22. 22. VISUAL DESIGN: GROUPING Similar items should be grouped together: Make groups clear by using plenty of space Avoid the Sesame Street scenario: “One of these things is not like the other” Cookie Monster love Gestalt principles!
  23. 23. VISUAL DESIGN: “WHITESPACE” Give your designs room to breathe! Sometimes less is more…
  24. 24. VISUAL DESIGN: ALIGNMENT Line things up so they don’t look jumbled Make things larger if they’re important
  25. 25. There are many more principles to learn, but this is a start.
  26. 26. Where does computer science come in? Helps you understand the technologies you’re using Teaches you to speak the same “language” as the people building your designs Gives you the power to prototype and even build your work
  27. 27. Your challenge: design a new microwave. Step 1: Research
  28. 28. RESEARCH: MICROWAVES ON THE MARKET Let’s look at some example microwave interfaces and look at what we like – and what we don’t like. “Most microwaves that you find in the store have a user interface that is so terrible, I can only assume that it was designed by a committee of middle managers who don’t even know the meaning of the term “user interface.” – TimandJeni.com, “Why do most microwaves have such a terrible user experience?”
  29. 29. “This Jenn-Air microwave sports 34 buttons. Thirty-four buttons! The microwave in my kitchen at home is a similar Jenn-Air model, also with thirty-four flat, zero-feedback buttons. The vast majority of the time, I use exactly two of these buttons: “Add 30 Sec.” (which also starts the heat) and “Stop / Cancel.” (TimandJeni.com)
  30. 30. “It’s definitely a step in the right direction, with 14 raised tactile buttons plus a simple knob, but most of the buttons are still completely superfluous. What the heck is “Inverter Turbo Defrost” or “Inverter Melt & Soften”? No doubt some microwave engineer worked long hours coming up with these clever features, but seriously… why?” (TimandJeni.com)
  31. 31. Step 2: Exploring (Brainstorming & Sketching)
  32. 32. BRAINSTORMING: MICROWAVE TASKS What kinds of tasks do you feel are REQUIRED in your microwave? What will your customers do most often? Is there anything your current microwave does that you don’t need? We try to state requirements as PROBLEMS, not SOLUTIONS. For example: š I need to set the length of time to cook š I need to start cooking … What else?
  33. 33. SKETCH YOUR MICROWAVE UI (15 MINUTES) š Use paper and pencil to draw what you want your microwave’s user interface to look like š Don’t worry about the shape of the microwave itself; focus on the control panel š Try several different ideas – the goal is to experiment, even if it seems crazy
  34. 34. REMINDER: TIPS AND TRICKS Psychology: š Rule of 7 š Eye Scanning š Left to right š Top to bottom Visual Design: š Grouping š Whitespace š Size š Alignment
  35. 35. STEP 3: PROTOTYPING š  The next step would ideally be to make a prototype: this is where computer science really comes in! š  You take your ideas and make them real, but as quickly as possible š  This step lets you test with customers before you spend a ton of money on building the real thing š  BUT! You can even make paper prototypes – so we’ll use your sketches as a paper prototype for Step 4.
  36. 36. We don’t have time to BUILD a prototype – but what you drew was essentially a very rough paper prototype! Time for Step 4: Testing
  37. 37. TEST YOUR MICROWAVE UI (15 MINUTES) This is technically a “paper prototype” test – and you can learn a lot even from these early stages! š Find a partner or two next to you š Take turns showing each other your designs š See if they can do some of the requirements without help š Get their feedback!
  38. 38. MICROWAVE WRAP-UP: DISCUSSION š What did you learn? š What was hard? š What was your favorite part? š Would you use the microwave you designed? Would your parents want to use it? š What other things in your life do you think could be improved using this process?
  39. 39. NOW, GO MAKE THE WORLD AN EASIER PLACE TO LIVE! š Contacting me: @muppetaphrodite or Cheryl@cherylplatz.com š Blog posts on IxD: http://blog.cherylplatz.com/?cat=13 š Schools that teach interaction design: š Carnegie Mellon University (undergrad & graduate) š University of Washington (undergrad & graduate) š Savannah College of Art & Design š Click here for a Wikipedia list of global IxD college programs
  40. 40. EXERCISE: Evaluate an existing project using heuristics Optional 30-minute exercise for classes with existing project work. It can also be used on a specific existing public site, platform or app.
  41. 41. What do you do to improve an existing user interface?
  42. 42. Remember our design process? 1.  Research 2.  Explore (Sketch, Critique) 3.  Prototype (or Implement) 4.  Test 5.  Repeat
  43. 43. Remember our design process? 1.  Research & Evaluate 2.  Explore (Brainstorm, Sketch, Critique) 3.  Prototype (or Implement) 4.  Test 5.  Repeat
  44. 44. Evaluating Existing User Interfaces One technique is called a heuristic evaluation, where someone trained in usability walks through a UI and notes where it violates key design principles, or “heuristics”.
  45. 45. Jakob Nielsen’s Usability Heuristics 1.  Visibility of system status 2.  Match between system and the real world 3.  User control and freedom 4.  Consistency and standards 5.  Error prevention 6.  Recognition rather than recall 7.  Flexibility and efficiency of use 8.  Aesthetic and minimalist design 9.  Help users recognize, diagnose and recover from errors 10. Help and documentation From http://www.nngroup.com/articles/ten-usability-heuristics/
  46. 46. Let’s spend some time evaluating your projects using some of these heuristics. Can we make your future customers happier?
  47. 47. Hands-on discussion: Let’s focus on these heuristics 1. Visibility of system status 2. Match between system and the real world 3.  User control and freedom 4. Consistency and standards 5.  Error prevention 6. Recognition rather than recall 7.  Flexibility and efficiency of use 8.  Aesthetic and minimalist design 9.  Help users recognize, diagnose and recover from errors 10. Help and documentation
  48. 48. Heuristic: Match between system & real world Official Definition: “The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system- oriented terms. Follow real-world conventions, making information appear in a natural and logical order.” In plain English: -  Don’t make up new terms for concepts your users already know. -  Borrow metaphors from the real world when it’s helpful. -  Don’t be overly technical.
  49. 49. Heuristic: Visibility of System Status Official Definition: “The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.” In plain English: -  Don’t take too long to let people know your app is doing something -  “Appropriate” means don’t interrupt me unless it’s important.
  50. 50. Heuristic: Consistency and Standards Official Definition: “Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.” In plain English: -  Don’t implement lots of different ways to do a single task in your app -  Be inspired (and borrow heavily from) the platform you’re building for (like iOS).
  51. 51. Heuristic: Recognition rather than Recall Official Definition: “Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another.” In plain English: -  Don’t make your customer remember too much -  If information is important, find a way to show it frequently -  Be careful when deciding to hide content or controls!
  52. 52. Now, get together with your project group and pull up your app or any screenshots you might have. We’ll come through to talk to each of you briefly about how some of these heuristics might apply to your project.
  53. 53. HEURISTIC EVALUATION WRAPUP: DISCUSSION š What did you learn? š What was hard? š What was your favorite part? š Are you inspired to make any changes to your own projects?
  54. 54. NOTES FOR INSTRUCTORS 1.  It’s important to involve the students in discussion. Encourage students to share personal stories about good and bad interfaces from their own lives. By discussing their own moments of excitement or frustration, we slowly build empathy with other customers. If pressed for time, cut content, not discussion. This empathy is critical for interaction designers! 2.  Make sure you have plenty of paper and pencils. Advanced supplies (scissors, colored markers, etc.) are not needed & can actually distract students. 3.  Tailor the content for grade level. For example, the heuristic section is best for late high school age & above -- and might be too dense for middle school classes. Microwaves don’t resonate with students too young to cook, but those students probably use email apps or Facebook, which are valid alternatives. 4.  Tie these concepts back to hands-on projects if possible. If the students are working on a project, use the optional section to look at their work in a new way.
  55. 55. NOTES FOR INSTRUCTORS 5.  Add your own experience and content. š  If possible, show video from a real user test (if you have the right to do so.) š  Add more case studies or content from your own design experience. š  Choose an alternative to the microwave you think will resonate for your students. 6.  Time the session appropriately. š  90 minutes is the bare minimum to run the workshop (minus the heuristics, which add another 30 minutes.)
  56. 56. About Cheryl Current Employer PastEmployers Other Companies Cheryl’s Resume Cheryl’s UX Portfolio LinkedIn Cheryl Platz http://blog. cherylplatz.com cheryl@cherylplatz.com

×