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.

Storytelling & The Human Form (UX Intensive for MySkills4Afrika)

663 views

Published on

Day 2 of a 4-day design intensive curriculum I created and taught at the iHub in Nairobi, Kenya as part of Microsoft's MySkills4Afrika program.

This deck focuses on designing for the human form (including an introduction to all forms of natural user interface), elements of Microsoft's Scenario Focused Engineering process, and tips on using storytelling techniques like storyboarding to improve the humanistic focus of your design process.

Published in: Design
  • Be the first to comment

Storytelling & The Human Form (UX Intensive for MySkills4Afrika)

  1. 1. Topics Covered DAY 1 Introduction to Modern Design Microsoft Design Principles Design Process Windows Building Blocks Build 2014 DAY 2 Storytelling and the Human Fom Natural User Interfaces Mini-improv workshop: Storytelling Storyboarding, Scenarios, and Personas Technologies & Trends DAY 3 Psychology of Design Basic principles Gamification Motivational Design DAY 4 Visual Design for Modern UI Basics Grids & Tiles Typography Color & Content
  2. 2. This is not a computer science class. This class is not just for those that want to be designers This is not an intro-level user experience class
  3. 3. Degree in Computer Science and Human- Computer Interaction from Carnegie Mellon University Over 10 years of experience spanning multiple industries: web, automotive, cloud and server technology, education, theme parks, and video games. 6.5 years at Microsoft My current project: designing the future of the connected experience for cars; helping to define the future of Microsoft’s Internet of Things In my free time: I’m a professional improv actress/teacher, singer, and video gamer.
  4. 4. - Touch & Haptic Feedback - Voice control / Speech - Gesture (movement through space)
  5. 5. lighter cognitive burden new options traditional input methods don’t work
  6. 6. touch
  7. 7. Touch target size
  8. 8. Touch target size: TWIST!
  9. 9. Visual feedback
  10. 10. Living with the hand
  11. 11. Touch Gestures: An Example
  12. 12. Trends on the horizon
  13. 13. Defining “grammar-based interaction”
  14. 14. Defining “natural language”
  15. 15. Speech listening models
  16. 16. Lessons learned from life as a speech designer
  17. 17. Gesture input models
  18. 18. State of the art
  19. 19. Hover and proximity detection
  20. 20. Gesture design pitfalls Poorly designed gestures can cause physical harm to users!
  21. 21. Planning at Microsoft We use “scenario focused design” as a process to help us ensure we’re building the right products. By learning a few of our methods, your planning will improve as well.
  22. 22. Personas don’t work when they’re not well- communicated.
  23. 23. What makes a good persona?
  24. 24. Persona traps
  25. 25. Personas: Practice and Theory Personas, Participatory Design, and Product Development: An Infrastructure for Engagement
  26. 26. How can we connect these learnings to our design process? How do we ground ourselves in our customers’ reality instead of our own? Scenarios and storyboards. iHub already teaches great courses on interviewing, personas, research and contextual inquiry. We won’t dwell on that process here.
  27. 27. story happy ending
  28. 28. S P I C I E R
  29. 29. Download attachments Edit content Share content with others Send attachments Forward meeting invites Check meeting details View content Log into a VPN Change corporate settings Comply with IT policies Stay secure Communicate with others Feel satisfied that work is complete
  30. 30. Download attachments Edit content Share content with others Send attachments Forward meeting invites Check meeting details View content Log into a VPN Change corporate settings Comply with IT policies Stay secure Communicate with others Feel satisfied that work is complete
  31. 31. piece of email unlocks clicks new mail icon note clicks on “reply” beeps. new email Excel attachment
  32. 32. Jane, a sales exec, has only 30 minutes before her flight to Chicago leaves. While waiting, Jane notices an important message from her colleague, Sue. Their partner has asked to see 3rd quarter projections as well as 2nd quarter. Jane anxiously responds to her colleague to let her know that she got the message but doesn’t have the 3rd quarter projections – can Sue send it to her immediately, before her flight leaves? <magic happens> A couple of minutes later, Jane gets the 3rd quarter projections and has just enough time to skim through it before boarding her flight, where she will read it thoroughly. She is relieved and confident that she will be fully prepared for her meeting.
  33. 33. Opportunity or problem <Magic happens> how Happy ending
  34. 34. Intentional product scoping constraint B) “Jane uses the dropdown to pick the right doc…” Implementation detail User context supported by research
  35. 35. Storyboarding
  36. 36. Dan Roam: The Back of the Napkin
  37. 37. Why storyboards? Make our users’ context tangible & understandable Get stakeholders emotionally connected Convey the human results we’re looking for Define success independent of a solution
  38. 38. It’s 5PM and Allison is on the highways heading home from work. Allison pulls into her garage after a long day of work. Allison turns off the engine and is ready to head inside. FRAME 1 FRAME 2 FRAME 3
  39. 39. Allison’s car chimes and a message appears as it is read to her. The system requires a major update that will improve performance and security. Allison particularly notices that the car won’t be usable during the update. The car asks if she’d like the update scheduled for late tonight, but Allison is worried that her sick son might get worse. Allison instead chooses a time that’ll work better for her. Allison heads inside and checks in on her son. She doesn’t give her car any more thought that night. FRAME 4 FRAME 5 FRAME 6
  40. 40. On Thursday night, as Allison is turning off her car, she gets a reminder that SPA will be applying the update that night at 2AM. Allison’s son is feeling better, so that time doesn’t raise any red flags. On Friday morning when Allison wakes up, she has a notification letting her know that the update was successful. She’s glad she doesn’t have to leave early to check on the car and the update. FRAME 7 FRAME 8
  41. 41. Do not include UI. some
  42. 42. From Scott McCloud’s “Understanding Comics”
  43. 43. Wong-Baker FACES Pain Rating Scale
  44. 44. Sketching for design
  45. 45. Use a pen if you can Optional additional tools Capture the sketches: scanner or digital photo
  46. 46. Take a pen and piece of paper Experiment with lengths, directions, stroke speeds
  47. 47. Take a pen and piece of paper Experiment with box sizes Draw at least 20 boxes
  48. 48. Take a pen and piece of paper Experiment with circle sizes. Draw at least 20 circles Play with ovals too
  49. 49. Take a pen and piece of paper Experiment with widths, lengths, and tail styles Straight arrows and curved arrows
  50. 50. Take a pen and piece of paper Experiment with widths, lengths, and tail styles Straight arrows and curved arrows
  51. 51. Windows 8 natively supports 3D printing 3D apps are generally expensive – market opportunity for making 3D modeling more accessible “Maker” culture empowers a new generation of enthusiasts, but how can these makers be supported? 3D Printing

×