View
964
Download
0
Category
Preview:
Citation preview
Intuitive imagescreating and evaluating usablegraphics for international audiences
Patrick Hofmann UX Designer • Sydney
#phofmann
gplus.to/phof
facebook.com/phofmann
patrick@designph.com
Welcome!
My name is Patrick Hofmann
For the past 18+ years, I’ve been
working as a technical illustrator,
visual interaction designer, and
usability consultant
My speciality is visualizing
information -- to make products easier to use, and to satisfy
global audiences
Patrick Hofmann
?
Let’s have fun!
We have a lot of material to cover in
the next 3 hours
Please try not to talk while I’m talking, or…
Let’s have fun!
We have a lot of material to cover in
the next 3 hours
Please try not to talk while I’m talking, or…
I’m joking! Ask questions,
heckle me, whatever...
Icebreaker exercise
Let’s visualize an instruction
The client: a resort management
company who has built a resort on a
remote Polynesian island
The primary audience: the
employees--local residents who have
never used a flushing toilet before
Icebreaker exercise
What usability considerations or
issues did we discover?
Agenda
1 Problems with pictures
2 Templating pictures
3 Showing what you mean
?!
Agenda
4 Dealing withflowcharts
5 Dealing with screenshots
6 Dealing withsymbols
?!
Problems
with pictures demonstrating
the doo-dooin doodled
information
1
Problems with pictures
Over the past 19+ years, I created and
tested a variety of visuals, docs, and
products
Here are my top 5 observations on the
execution of pictures
5 Pictures provide too much
unnecessary detail
The most significant obstacle in usability and readability: too
much detail too process
What is this instruction trying
to say?
How would you suggest
simplifying it?
5 Pictures provide too much
unnecessary detail
Eliminate visual traffic. Express
and highlight the message.
4 Pictures need more standards
We include pictures in our
information “because we
have to”
We build our documents, sites,
and interfaces with templates and
standards, but not our pictures
We don’t apply the rules of usable
information design into our pictures
3 Pictures are recycled
inappropriately
We deal with too many media -- and too
many file formats
We are encouraged to recycle or re-use
the same picture files across many media
We think about our efficiency, but not the
user’s
e.g. low-res web graphics should not be
enlarged and pasted in publications
3 Pictures are recycled
inappropriately
Engineering schematics or exploded-view
diagrams should not be re-used to instruct
users how to assemble something
2 Pictures don’t express their
intended meaning
Say what you mean
Show what you mean
Plan the picture before putting pen
to paper
Provide a focus of attention
First ask, “What is the message
of the picture?” Then, “What do I
include/ exclude?”
2 Pictures don’t express their
intended meaning
To reduce the pressure, turn the relief bolt
clockwise.
1 Symbols are the biggest challenge
In our usability tests of visual user guides
and digital interfaces, the key challenge
was solving the ambiguity of symbols
and icons
Whatever the nationality of the
user, certain icons were consistently
misunderstood
1 Symbols are the biggest challenge
In our usability tests of visual user guides
and digital interfaces, the key challenge
was solving the ambiguity of symbols
and icons
Whatever the nationality of the
user, certain icons were consistently
misunderstood
For example, the symbol for
“Audio Card” (as a navigational heading)
How do we solve these problems?
Learn to build picture templates
Learn to show what you mean
Learn to apply these rules to all visuals, including screenshots and
flowcharts
Test, test, test
Live by these rules as often as you can
2Templating your
pictures
Templating
your pictures
making your visuals consistent
2
The problem
Pictures are drawn at different sizes,
then squeezed into various spaces
When reduced dramatically, the
pictures and text are often unreadable
As the destination sizes change, the text size and line weights
change
The solution: build standard sizes
When creating pictures, consider the final destination size
If possible, draw at actual size
For both print and online
Build standard attributes
Lines (line weight and colour)
Fills (shading and colour values)
Text (font, size, style, colour)
Annotations (line, text, alignment)
Build standard attributes
Lines (line weight and colour)
Fills (shading and colour values)
Text (font, size, style, colour)
Annotations (line, text, alignment)
Use these attributes across all types of
pictures
The benefits
Like your textual information
conventions, customers will
become acquainted with your visual
conventions
They will scan, read, and find
meaning in your pictures much more
quickly
Showing what you
mean getting your shift together
3
The problem
We build meaningful words, but not meaningful
pictures
Pictures often seem to have no
purpose
They are too often used to show
physical proof — with little meaning
The solution
Plan the picture before “putting pen to
paper”
Provide a focus of attention
Ask yourself: What is the message of the
picture? What do I include/exclude?
Test the picture by verbalizing what you
see
An exercise
These instructions describe the
assembly of a magazine rack
What is it saying?
How would you suggest
simplifying it?
Eliminate visual traffic. Express
and highlight the message.
Another example
What is this visual saying?
How would you suggest improving it?
The benefits
If all pictures are meaningful,
customers will rely on them to learn
If even one picture is meaningless,
customers will disregard all of them
Focusing on meaning actually
saves time in creating the visual; saves
customers time in reading
Dealing with
flowcharts going with
the flow
4
The problem
Often created in applications where
“destination size” is not considered
Impossible to fit on a page, impossible to
print or read
Information accuracy overrides
readability and usability
The solution
Apply simple template and type
attributes to our flow charts
Make it as symmetrical as
possible: begin with the main or most
positive action as the “stem”
Let everything else branch from that
How would you improve this
flowchart?
The solution
Apply simple template and type
attributes to our flow charts
Make it as symmetrical as
possible: begin with the main or most
positive action as the “stem”
Let everything else branch from that
How would you improve this
flowchart?
The solution
Apply simple template and type
attributes to our flow charts
Make it as symmetrical as
possible: begin with the main or most
positive action as the “stem”
Let everything else branch from that
How would you improve this
flowchart?
The solution
Apply simple template and type
attributes to our flow charts
Make it as symmetrical as
possible: begin with the main or most
positive action as the “stem”
Let everything else branch from that
How would you improve this
flowchart?
Dealing with screenshots
making screens mean
5
The problem
Screenshots are usually not very
“action-oriented”
For readers, it is difficult to find exactly what is relevant to the
instruction
How can we correct this?
The solution
Provide a focus of attention
Effectively annotate or label
the screenshot
To preview the slide animation, click Play.
The solution
Highlight therelevant area
To preview the slide animation, click Play.
The solution
Crop the screenshot
To show where you are on the screen,
indicate the border or edge
To preview the slide animation, click Play.
The solution
Crop the screenshot
To show where you are on the screen,
indicate the border or edge
To preview the slide animation, click Play.
Dealing with
symbols considering
the ka-kaof cultural oversights
6
Symbolize the following
This is right + this is wrong
Use force (to install something into place)
Warning: hot surface
This is right + this is wrong?
Use force?
Warning: hot surface?
In a nutshell
In North America, we’ve generally
done a poor job of addressing “cultural regions” other than
our own
We must consider the meaning of
our images (not just words) when localizing
into other regions or internationalizing
to anyone
?!
Hand symbols
Hand symbols
Planet Earth
Listings for delis and
restaurants
Power switch/on or off?
Why are age groups
important to consider?
The digital information age has
expanded our range of users
A 6-year-old and a 96-year-old both use
the same product
We use visuals that do not satisfy
all age groups -- especially younger
Studying younger users
Conducted a series of tests with 5- to 15-year
olds in the US, Canada, Switzerland, Australia
and New Zealand
Asked children to sketch specific items or concepts
Presented a seriesof “flash cards” to
determine their interpretation and
overall preferences
Here are the outcomes
Television
Telephone
Movie listingsor video files
Music files/ audio streams
Write
Saving a file
The impact of age groups on
our work
As technology expands, our
audiences expand
As we localise or internationalise our
icons, we must look at age
Like our users, our icons grow
old as well
Test, test, test -- any way you can
?So...
Who’s learned something about intuitive images?
So...
Who’s learned something about intuitive images?
So...
Who’s learned something about intuitive images?
Who thinksI’m a nutter?
So...
Who’s learned something about intuitive images?
Who thinksI’m a nutter?
So...
Who’s learned something about intuitive images?
Who thinksI’m a nutter?
Who thinksI’m charming?
So...
Who’s learned something about intuitive images?
Who thinksI’m a nutter?
Who thinksI’m charming?
Thanks!
#phofmanngplus.to/phoffacebook.com/phofmannpatrick@designph.com
Recommended