Date post: | 07-Nov-2014 |
Category: |
Documents |
Upload: | bonny-colville-hyde |
View: | 574 times |
Download: | 0 times |
How to make your first
UX comic / storyboard
Bonny Colville-Hyde@almostexact
With added commentary! #uxscot
What is a comic?“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’
the power of images
Even without using any words, an image can communicate an awful lot about how people use a service or device, with very few details.
For instance, what do you think these two are doing?
...And what about now??
And what about this man?
£££Even with very few clues in an image can communicate a whole narrative to the viewer - which they will do the work to fill in, even though you’ve not written anything!
THE PROBLEM WITH UX
Don’t get me wrong, I love UX, but it’s not perfect.
DEATH BY DOCUMENTATION
We like ‘deliverables’
Deliverables don’t make the experience better
We can bore stakeholders
How often do you think clients read ALL of the documents you produce?
Empathy
Most documents don’t help team members to emphathise with users - instead they create abstraction
Where as comics can create empathy, thank goodness!
Comics can help
Sequential art
Sequential art gives us a means to express changing time, space and emotion in a succinct way
It also allows us to explore and visualise ideas without significant investment
Check out Will Eisner’s books about comics to learn more about sequential art.
COMICS CAN BE USED IN MANY WAYS throughout a project
To show how things are now
To show how people would like things to be
To review how things could be different
Plus comics are quick to create once you’ve had a bit of practice!
When to use comics
Research
Analysis
Concepts
IA Wirefra
mes
Testing
Prototyping
Build
When to use comics
Research
Analysis
Concepts
IA Wirefra
mes
Testing
Prototyping
Build
Feel free to use them whenever you need to - there aren’t any rules.
Benefits
Test ideas
More effective communication tool than standard documentation
Sharing within organisations
Less about the interface, more about the tasks people do
an example
XKCD
Using very few details, XKCD explain the problem of information saturation.
Another xkcd classic
This XKCD bit of brilliance only has one panel, yet can still communicate so much!
This is part of a comic series I made for an automotive finance company - its based on task based personas and depth interview research.
COMIC ANATOMY
Layouts
Gutters
What goes on between the panels in a comic is just as important as what goes on in the panels!
Gutters
Gutters can be used to show the passing of time.
Gutters
Even with very few details, combined with the gutters, we can string together narratives.
communication
Even when speech bubbles are left empty, they still communicate with readers.
getting started drawing
Its really not *that* difficult! Honest!
why you don’t need to be an artist
The simpler you keep characters, the easier it is for the reader to empathise with them. Too much detail is unnecessary.
Drawing people
Using guidelines to help you place your character’s features, you can ensure you draw them consistently.
It’s all in the faceNote how the curved lines make the face look more 3D.
Looking at things
Emotions
Eyebrows and mouths are incredibly powerful tools to communicate emotions!
Adding details
If you add too much detail, your characters will stop being so easy to empathise with...be careful you don’t go OTT!
Body language
Body language can be used to communicate a hell of a lot of emotion in your characters - you don’t need to draw much to get the effect.
developing your style
Once you’ve experimented a bit you can create your own set of characters - as simple or detailed as you like...
Storytelling
The narrative of your comics must demonstrate how people do or could use a service
Creating your plot
Personas are really useful starting points
Refer to research to pull out behaviours and stories that could bring the comic to life
lets make a comic
This is a little 30 minute exercise to give you some practice drawing...!
Flowers for someone special
Imagine you’ve got a new client called ‘Mister Flowers’. They sell flowers online, but they want new ideas about how to help their customers find and send the best flowers to their loved ones.
Your challenge is to consider the two personas on the next page, and decide on which one you’d like to make a comic about. Use about six panels to tell your story about how Mister Flowers could help this customer.
Consider the entire flower purchase process: where is the character? Who are they with? What’s the occasion? What device are they using? etc...
mini personas
Charlie•Always forgets birthdays and special
occasions•Very busy lifestyle juggling
commuting and a packed social life
What they want:• Improve their reputation with friends
and family•Make their loved ones feel special•Get a gift sent on time!
Key constraintTime
Chris• Likes planning and researching
gifts for friends and family•Has a limited budget, but likes to
do as much as possible with it
What they want:• To get the ‘perfect’ gift for their
loved ones•Get everything sorted in advance•Maintain their reputation as a great
gift giver!
Key constraintBudget
Time saving tipsTIMEs UP
Time saving tips
Paper comics
Draw out devices and other ‘props’ on a master sheet to trace from - this speeds up drawing comics.
You can trace photos too.
DIGITAL COMICS
I like to use Adobe Illustrator and Comic Life to create my comics.
Here’s a view of one of my Adobe Illustrator documents I use to store all the different assets I use and re-use within the comics I make.
This is a view of the AWESOME Comic Life! It makes producing comics wonderfully easy.
Further reading
Remember the UX Scotland discount code!
Thank youBonny Colville-Hyde
@almostexact
Feel free to contact me with any questions - or if you’d like me to send you come blank comic layouts to practice on. Have fun!