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