Communicating Experiences with UX Comics

Slides from my workshop at UX Bristol 2014

Transcript

1. COMMUNICATING EXPERIENCES WITH UX COMICS BONNy COLVILLE-HyDE #UXBRISTOL @ALMOSTEXACT
2. COMMUNICATING HUMAN EXPERIENCES IN DOCUMENTATION IS HARD.
5. BORING
6. “A lengthy description of a glass of water is no substitute for the experience of drinking a glass of water”! Ivan BRUNETTI!
8. BUT WHy COMICS?
9. COMICS ARE PART OF OUR VISUAL CULTURE
13. COMIC HISTORy
14. 4000 BC!
15. 1070’S!
16. 1740’S!
17. 1950!
18. 1961!
19. 1976!
20. 1985!
21. 2005!
22. NON-VERBAL COMMUNICATION
23. VERBAL NON-VERBAL
24. TyPES OF NON-VERBAL COMMUNICATION Facial expressions: smiling, frowning, scowling! ! Eye contact: gaze, eye movements, pupil size! ! Body language: posture, open/closed actions! ! Gestures: hand movements, speed, flow! ! Speech: tone of voice, speed ! !
25. NON-VERBALS & COMICS
32. “Words and pictures can combine to create effects that neither could create separately”! Scott McCLOUD!
33. “…COMICS ARE FOR KIDS, CLIENTS WOULDN’T GET IT…”
34. Charles Schulz
35. RESEARCH TIME! - GET INTO PAIRS - WHAT PHONE DOES yOUR PARTNER HAVE?
36. TASK! Get into pairs.! Interview each other about the last photo you took on your phone (nothing rude please!).! You need to understand the whole process your partner went through to take the photo.! Make sure you take notes!! ! Later on: You will use this to make a comic that shows how they took the photo.!
37. ANyONE CAN MAKE A MEANINGFUL COMIC
38. …yOU DO NOT NEED EXTENSIVE ARTISTIC SKILLS
39. SKILL #1: DRAWING FACES EXERCISE: DRAWING A FACE
41. LOOKING AT THINGS
42. LOOKING AT THINGS
43. SKILL: DRAWING FACES EXERCISE: DRAWING EXPRESSIONS
44. CREATING FACIAL EXPRESSIONS … EYEBROWS AND MOUTHS ARE VERY IMPORTANT!
45. TASK! Draw FIVE empty circles in a line! Happy sad Neutral Draw a SAD face in circle one, ! then a slightly LESS SAD face in circle two…! continue until you reach a HAPPY face!
47. SKILL: DRAWING FIGURES EXERCISE: DRAWING SKELETONS
51. TASK! Draw a skeleton showing an emotion! Use BODY LANGUAGE to communicate the emotion! Happy sad surprised excited ANGRy sleepy Confused proud nervous confident
53. ADDING WEIGHT TO THE SKELETONS 1: Skeleton 2: Sausages 3: Details 4: Inking
54. ADDING WEIGHT TO THE SKELETONS 5: Erase pencil 6: Vector-ise 7: colour
55. MAKING CHARACTERS IDENTIFIABLE
56. GET TO KNOW yOUR CHARACTER
57. GET TO KNOW yOUR CHARACTER
58. THE LANGUAGE OF COMICS
59. “Comics have a vocabulary that doesn't even require language. In fact, many of its symbols could be considered a language of their own that requires no teaching or explanation”! Kevin CHENG ‘See what I mean’!
60. SINGLE PANELS
61. STRIPS
62. PAGES
63. GUTTERS
64. GUTTERS
65. FRAMING
66. SPEAKING
67. IT DOESN’T EVEN HAVE TO BE WORDS! ? !!!
68. THE POWER OF SUGGESTION
72. SCENE SETTING Key rules to note: • Use simple props to set the scene! • A few, key items are better than loads of detail (it just creates noise)! • Consider each item’s role in the story! !
74. SKILL: STORyTELLING EXERCISE: CREATE A SINGLE PANEL COMIC
75. STORyTELLING: THE BASIC ARC
76. THE FIVE C’S OF COMICS Calligraphy! ! Composition! ! Clarity! ! Consistency! ! Communication! By Ivan Brunetti
77. THE CATCHER IN THE RyE, IN ONE PANEL By IVAN BRUNETTI
78. TASK! Looking at your interview notes:! ! -  What is the story here? ! -  How can it be summarised into a single image?! -  What dialogue (if any) is needed?! -  Plan how you will lay out the elements in your panel – do at least three thumbnail sketches before starting your actual panel! -  Once you’ve planned it DRAW IT!!
79. TASK! Get feedback!:! ! -  Show your partner your comic panel and ask for feedback! ! How would you do it differently? Why?!
80. UX COMICS IN THE WILD
84. GENERATING & EXPLORING IDEAS
85. Comic created for conceptual iOS fitness app ‘Training Buddy’
86. Comic created for conceptual iOS fitness app ‘Training Buddy’
89. COMMUNICATING RESEARCH FINDINGS
93. SHARING INFORMATION
94. Across the UK and around the world there have been over 80 colloquial names recorded that people use to describe this common land-based crustacean. How woodlice can help your website The humble woodlouse is known by many names Depending on where you go, you can hear people talking about woodlice using vastly different names, for instance: 'slater' (scotland), 'Grammersow' (cornwall) and even 'Boat Builder' (CANADA). Did you know? roly poly Slater Butcher boy But why should this matter to you?
95. SEVEN RULES OF (UX) COMIC MAKING
96. PLAN yOUR STORy: IF yOU FAIL TO PLAN, yOU PLAN TO FAIL RULE 1:
97. KEEP IT SIMPLE: FOCUS ON WHAT REALLy MATTERS RULE 2:
98. DEVELOP yOUR CHARACTERS: MAKE SURE THEy ARE A FAIR REPRESENTATION OF AUDIENCES RULE 3:
99. CREATE EMPATHy: LOOK FOR WAyS TO GET READERS TO EMPATHISE WITH CHARACTERS RULE 4:
100. DON’T BE AFRAID TO FAIL… THAT’S WHAT ERASERS ARE MADE FOR RULE 5:
101. CUT OUT UNNECESSARy WORDS RULE 6:
102. GET FEEDBACK: CHECK yOU’RE TELLING THE STORy yOU THOUGHT yOU WERE RULE 7:
103. HAVE FUN BONUS RULE!:
104. WAIT FOR INK TO DRy BEFORE USING AN ERASER! BONUS BONUS RULE!:
105. ESSENTIAL READING Understanding Comics, Scott McCLOUD! Making Comics, Scott McCLOUD! See What I Mean, Kevin CHENG! Cartooning: Philosophy & Practice, Ivan BRUNETTI! ! TOOLS Comic Life, Plasq! !
106. COMIC LIFE
107. COMPETITION TIME! Make another SINGLE PANEL COMIC where you solve any problems your partner had taking their photo. ! Tweet @almostexact photos of your comic with the hashtag #UXBristol! The comic with the most re-tweets by 12noon tomorrow will get a prize J! ! AKA ‘Homework’
108. THANK yOU! @ALMOSTEXACT #UXBRISTOL