Communicating Experiences with UX Comics

Slide 1

Slide 1 text

COMMUNICATING EXPERIENCES WITH UX COMICS BONNy COLVILLE-HyDE #UXBRISTOL @ALMOSTEXACT

Slide 2

Slide 2 text

COMMUNICATING HUMAN EXPERIENCES IN DOCUMENTATION IS HARD.

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

BORING

Slide 6

Slide 6 text

“A lengthy description of a glass of water is no substitute for the experience of drinking a glass of water”! Ivan BRUNETTI!

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

BUT WHy COMICS?

Slide 9

Slide 9 text

COMICS ARE PART OF OUR VISUAL CULTURE

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

COMIC HISTORy

Slide 14

Slide 14 text

4000 BC!

Slide 15

Slide 15 text

1070’S!

Slide 16

Slide 16 text

1740’S!

Slide 17

Slide 17 text

1950!

Slide 18

Slide 18 text

1961!

Slide 19

Slide 19 text

1976!

Slide 20

Slide 20 text

1985!

Slide 21

Slide 21 text

2005!

Slide 22

Slide 22 text

NON-VERBAL COMMUNICATION

Slide 23

Slide 23 text

VERBAL NON-VERBAL

Slide 24

Slide 24 text

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, ﬂow! ! Speech: tone of voice, speed ! !

Slide 25

Slide 25 text

NON-VERBALS & COMICS

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

“Words and pictures can combine to create effects that neither could create separately”! Scott McCLOUD!

Slide 33

Slide 33 text

“…COMICS ARE FOR KIDS, CLIENTS WOULDN’T GET IT…”

Slide 34

Slide 34 text

Charles Schulz

Slide 35

Slide 35 text

RESEARCH TIME! - GET INTO PAIRS - WHAT PHONE DOES yOUR PARTNER HAVE?

Slide 36

Slide 36 text

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.!

Slide 37

Slide 37 text

ANyONE CAN MAKE A MEANINGFUL COMIC

Slide 38

Slide 38 text

…yOU DO NOT NEED EXTENSIVE ARTISTIC SKILLS

Slide 39

Slide 39 text

SKILL #1: DRAWING FACES EXERCISE: DRAWING A FACE

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

LOOKING AT THINGS

Slide 42

Slide 42 text

LOOKING AT THINGS

Slide 43

Slide 43 text

SKILL: DRAWING FACES EXERCISE: DRAWING EXPRESSIONS

Slide 44

Slide 44 text

CREATING FACIAL EXPRESSIONS … EYEBROWS AND MOUTHS ARE VERY IMPORTANT!

Slide 45

Slide 45 text

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!

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

SKILL: DRAWING FIGURES EXERCISE: DRAWING SKELETONS

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

TASK! Draw a skeleton showing an emotion! Use BODY LANGUAGE to communicate the emotion! Happy sad surprised excited ANGRy sleepy Confused proud nervous confident

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

ADDING WEIGHT TO THE SKELETONS 1: Skeleton 2: Sausages 3: Details 4: Inking

Slide 54

Slide 54 text

ADDING WEIGHT TO THE SKELETONS 5: Erase pencil 6: Vector-ise 7: colour

Slide 55

Slide 55 text

MAKING CHARACTERS IDENTIFIABLE

Slide 56

Slide 56 text

GET TO KNOW yOUR CHARACTER

Slide 57

Slide 57 text

GET TO KNOW yOUR CHARACTER

Slide 58

Slide 58 text

THE LANGUAGE OF COMICS

Slide 59

Slide 59 text

“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’!

Slide 60

Slide 60 text

SINGLE PANELS

Slide 61

Slide 61 text

STRIPS

Slide 62

Slide 62 text

PAGES

Slide 63

Slide 63 text

GUTTERS

Slide 64

Slide 64 text

GUTTERS

Slide 65

Slide 65 text

FRAMING

Slide 66

Slide 66 text

SPEAKING

Slide 67

Slide 67 text

IT DOESN’T EVEN HAVE TO BE WORDS! ? !!!

Slide 68

Slide 68 text

THE POWER OF SUGGESTION

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

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! !

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

SKILL: STORyTELLING EXERCISE: CREATE A SINGLE PANEL COMIC

Slide 75

Slide 75 text

STORyTELLING: THE BASIC ARC

Slide 76

Slide 76 text

THE FIVE C’S OF COMICS Calligraphy! ! Composition! ! Clarity! ! Consistency! ! Communication! By Ivan Brunetti

Slide 77

Slide 77 text

THE CATCHER IN THE RyE, IN ONE PANEL By IVAN BRUNETTI

Slide 78

Slide 78 text

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!!

Slide 79

Slide 79 text

TASK! Get feedback!:! ! -  Show your partner your comic panel and ask for feedback! ! How would you do it differently? Why?!

Slide 80

Slide 80 text

UX COMICS IN THE WILD

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

GENERATING & EXPLORING IDEAS

Slide 85

Slide 85 text

Comic created for conceptual iOS fitness app ‘Training Buddy’

Slide 86

Slide 86 text

Comic created for conceptual iOS fitness app ‘Training Buddy’

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

COMMUNICATING RESEARCH FINDINGS

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

SHARING INFORMATION

Slide 94

Slide 94 text

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?

Slide 95

Slide 95 text

SEVEN RULES OF (UX) COMIC MAKING

Slide 96

Slide 96 text

PLAN yOUR STORy: IF yOU FAIL TO PLAN, yOU PLAN TO FAIL RULE 1:

Slide 97

Slide 97 text

KEEP IT SIMPLE: FOCUS ON WHAT REALLy MATTERS RULE 2:

Slide 98

Slide 98 text

DEVELOP yOUR CHARACTERS: MAKE SURE THEy ARE A FAIR REPRESENTATION OF AUDIENCES RULE 3:

Slide 99

Slide 99 text

CREATE EMPATHy: LOOK FOR WAyS TO GET READERS TO EMPATHISE WITH CHARACTERS RULE 4:

Slide 100

Slide 100 text

DON’T BE AFRAID TO FAIL… THAT’S WHAT ERASERS ARE MADE FOR RULE 5:

Slide 101

Slide 101 text

CUT OUT UNNECESSARy WORDS RULE 6:

Slide 102

Slide 102 text

GET FEEDBACK: CHECK yOU’RE TELLING THE STORy yOU THOUGHT yOU WERE RULE 7:

Slide 103

Slide 103 text

HAVE FUN BONUS RULE!:

Slide 104

Slide 104 text

WAIT FOR INK TO DRy BEFORE USING AN ERASER! BONUS BONUS RULE!:

Slide 105

Slide 105 text

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! !

Slide 106

Slide 106 text

COMIC LIFE

Slide 107

Slide 107 text

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’

Slide 108

Slide 108 text

THANK yOU! @ALMOSTEXACT #UXBRISTOL