ux comics: communicating experiences and sharing ideas (bonny colville-hyde)

BONNy COLVILLE-HyDE #UXPA @ALMOSTEXACT

UX COMICS: COMMUNICATING

EXPERIENCES & SHARING IDEAS

COMMUNICATING HUMAN

EXPERIENCES IN

DOCUMENTATION IS HARD.

BORING

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

MOTIVATION & PROJECT ENERGy

THE SECRET TO SUCCESSFUL PROJECTS

Caring about audiences comes naturally to us; it doesn’t for everyone though.!!We need to help our stakeholders and team members learn why caring, and empathising with people is essential when it comes to creating meaningful, positive, memorable and successful experiences.!

WHAT ABOUT BRAND EXPERIENCES?

BUT WHy COMICS?

COMICS ARE PART OF OUR

VISUAL CULTURE

COMIC HISTORy

4000 BC!

1070’S!

1740’S!

1950!

1961!

1976!

1985!

2005!

NON-VERBAL COMMUNICATION

VERBAL

NON-VERBAL

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

NON-VERBALS & COMICS

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

THE POWER OF SUGGESTION

Great! I’ve booked

my train home!

That burger was amazing!

5 Stars!

Dad would love that burger

place – I’ll send him the details

“…COMICS ARE FOR KIDS,

CLIENTS WOULDN’T GET IT…”

Charles Schulz

ANyONE CAN MAKE A

MEANINGFUL COMIC

…yOU DO NOT NEED EXTENSIVE

ARTISTIC SKILLS

SKILL:

DRAWING FACES

LOOKING AT THINGS

LOOKING AT THINGS

SKILL:

DRAWING EXPRESSIONS

CREATING FACIAL EXPRESSIONS

… EYEBROWS AND MOUTHS ARE VERY IMPORTANT!

SKILL:

DRAWING FIGURES

ADDING WEIGHT TO THE SKELETONS

1: Skeleton 2: Sausages 3: Details 4: Inking

ADDING WEIGHT TO THE SKELETONS

5: Erase pencil 6: Vector-ise 7: colour

MAKING CHARACTERS IDENTIFIABLE

GET TO KNOW yOUR CHARACTERS

GET TO KNOW yOUR CHARACTERS

THE LANGUAGE OF COMICS

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

SINGLE PANELS

STRIPS

PAGES

GUTTERS

GUTTERS

FRAMING

SPEAKING

IT DOESN’T EVEN HAVE TO BE WORDS!

? !!!

SKILL:

STORyTELLING

STORyTELLING: THE BASIC ARC

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

By Ivan Brunetti

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

Matilda’s Dad helps her play games on their iPad.

UX COMICS IN THE WILD

PRACTICAL USES FOR

COMICS:

CASE STUDIES

SPEC WORK FOR PITCHES

THE PROBLEM: Need to create ‘something’ for a pitch – there is no time or budget to do proper research.!!Speculative work can come back to haunt you.!!

Camera Shop The

EXAMPLE CLIENT:

GETTING STARTED: The client’s brief describes how they currently have a well developed customer base of professional photographers, but they want to increase the number of amateur photographers shopping with them. !!We could ‘guess’ what amateur photographers want, or, we could look for evidence to spark our ideas.!

FINDING AN IDEA

Via the Money Saving Expert forum

WHAT’S GOING ON HERE? ‘Bob’ wants to buy a new compact camera.!He has shopped around, but has been overwhelmed by the variety and choice of cameras.!He doesn’t want a lot of fancy features, but he does care about the image quality.!He has up to £100 to spend.!He is looking for help to make a decision.!

MAKING THE STORy Bob wants to buy a new camera because his current one has broken. He wants to replace his camera before he goes on holiday.!He has looked on several websites, but has been overwhelmed by the choice. He needs help to refine appropriate cameras into a more manageable shortlist, or even to find the best one for him.!The site or app needs to allow him to control his searching and browsing so he can manage the volume of results. It needs to give him choice but not overwhelm him.!He needs to be able to look at cameras based on their size (he wants it to be compact), their image quality (it needs to take nice pictures) and its price (it must be under £100).!

PLANNING THE COMIC 1. Introduce Bob 2. Bob’s camera has

broken 3. Bob looks for cameras online

4. Bob gets overwhelmed

5. Bob finds The Camera Shop

6. Bob finds ‘The Compact Camera’

finder

7. Bob filters compact cameras by

price and size

8. Bob finds a camera he is interested in

9. Bob browses photos taken with the

camera from Flickr

10. Bob feels satisfied and

purchases the camera

COMIC BENEFITS: •  We have evidence behind our assumptions and

ideas about the audience!!•  We can talk confidently about a scenario, without

having to commit to details!!•  We still have something visual to show to clients

in a pitch!!

EXPLORING IDEAS

THE PROBLEM: As a team we need to see how an idea could work as a complete product.!If we focus on designing the interface too soon, we may miss opportunities to refine the process, or improve the structure.!

User Registers for ‘My Training

Buddy’

Dashboard

Sets Goals

Find Friends

Track Performance

Track Friend’s Performance

Issue Performance Challenges

Comic created for conceptual iOS fitness app ‘Training Buddy’

Comic created for conceptual iOS fitness app ‘Training Buddy’

COMIC BENEFITS: •  We can test the comic with target users and get

feedback before we create wireframes or a prototype (faster, cheaper)!

!•  Helps all team members understand how we’re

proposing a process works – little imagination is needed!

!•  We have a visual document that can be easily shared

and reviewed with clients!!

EXPANDING PERSONAS

THE PROBLEM: Personas have a mixed reputation. !They can be hard to empathise with.!Communicating a persona’s core tasks and their setting helps build understanding. !

MEET ‘DENISE’:

COMIC BENEFITS: •  Easier to engage stakeholders and team members

with a comic than a ‘flat’ persona!!•  Comic story can trigger more questions and feedback

– meaning the team is sharing more information!!

COMMUNICATING RESEARCH

FINDINGS

THE PROBLEM: Long reports require a lot of effort to read!Getting things done can mean leaving out the little details!‘Seeing is believing’ !

COMIC BENEFITS: •  Faster to read than a report!•  Subtleties can be communicated with facial expressions and

body language!•  Brings people to life (important if stakeholders & team members

didn’t attend any research sessions)!

TESTING IDEAS WITH USERS

THE PROBLEM: You’re not a unicorn!and/or!You don’t have time to prototype!You want to test an existing product, before it gets re-developed!

COMIC BENEFITS: •  Fast!!•  Participants enjoy working with comics!•  Rapid iterations!

SHARING INFORMATION

THE PROBLEM: You don’t want to write yet another blog post!

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 websiteThe 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?

If you don't understand the real names and terms people use to describe your

• brand• product• service• & location

it could mean you're missing out on valuable traffic and conversions online.

Unless you investigate your audience groups thoroughly, you could be wasting effort and budgets trying to fit a square peg into a round hole.

For instance, you may want to describe your service as providing 'support', but your target audience thinks of it as 'care'. Or perhaps you want to increase membership on your forum but your users don't relate to the label 'chat'.

These seemingly small labelling problems can add up and cause significant barriers that prevent your audience from fully engaging with you.

Thats why understanding the language your audience uses is essential, even if you don't have woodlice on your website.

SEVEN RULES OF

(UX) COMIC MAKING

PLAN yOUR STORy:

IF yOU FAIL TO PLAN,

yOU PLAN TO FAIL

RULE 1:

KEEP IT SIMPLE:

FOCUS ON WHAT REALLy

MATTERS

RULE 2:

DEVELOP yOUR CHARACTERS:

MAKE SURE THEy ARE A FAIR

REPRESENTATION OF

AUDIENCES

RULE 3:

CREATE EMPATHy:

LOOK FOR WAyS TO GET

READERS TO EMPATHISE

WITH CHARACTERS

RULE 4:

DON’T BE AFRAID TO FAIL…

THAT’S WHAT ERASERS ARE

MADE FOR

RULE 5:

CUT OUT

UNNECESSARy

WORDS

RULE 6:

GET FEEDBACK:

CHECK yOU’RE TELLING THE

STORy yOU THOUGHT yOU WERE

RULE 7:

HAVE FUN

BONUS RULE!:

WAIT FOR INK TO

DRy BEFORE USING

AN ERASER!

BONUS BONUS RULE!:

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

COMIC LIFE

THANK yOU!

@ALMOSTEXACT

#UXPA

Hire me!