Info Design 101A PRIMER + PRACTICAL TIPS
Iffat Jokhio RGD Sr. UX, Pivot Design Group
@hererighthere
2 / 26
What to Expect?
Understanding the Essentials - Audience - Context - Perception
Tips for Success - Checklist
Questions & Answers
3 / 26
Understanding the Essentials
4 / 26
AudienceUNDERSTANDING THE HUMAN
WHO WHAT
5 / 26
ContextUNDERSTANDING THE ENVIRONMENT
WHERE
WHY
WHEN
HOW
6 / 26
PerceptionTHE EYES SEE, THE BRAIN INTERPRETS
8 / 26
Influencing PerceptionSETTING EXPECTATIONS
9 / 26
Tips for Information Design
Success
1. Typography SCANNABLE HEADERS & TEXT
2. Whitespace GRID & MARGINS
12 / 26
PUSH ME PUSH ME
3. Colour & Accessibility ACCESSIBILITY STANDARDS & CONTRAST RATIOS
PUSH ME PUSH MEvs.
vs.
Buttons:
Typography: How do I know what to do next? I might scan for indicators in the text.
How do I know what to do next? I might scan for indicators in the text.
13 / 26
4. Chartjunk EDWARD TUFTE
“The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new. The purpose of the decoration varies — to make the graphic appear more scientific, to enliven the display, to give the designer an opportunity to exercise artistic skill. Regardless of the cause, it is all non-data-ink or redundant data-ink, and it is often chartjunk.”
14 / 26
0
1
2
3
4
5
6
7
1 2 3 4
Series1
Series2
EXCEL GRAPH
15 / 26
ILLUSTRATOR GRAPH
0
1
2
3
4
5
6
16 / 26
“TUFTE-APPROVED” GRAPH
0
1
2
3
4
5
6
17 / 26
5. Numbers have power APPLES TO APPLES; MISLEADING THE VIEWER
vs.
3 out of 4 75%
18 / 26
6. Relationships DATA VISUALIZATION IS ABOUT COMPARISONS
0
1
2
3
4
5
6
19 / 26
TO DO OR ‘DONUT’ GRAPHS
Pie chartDonut chart
vs.
20 / 26
DO OR ‘DONUT’ GRAPHS
Pie chartDonut chart
vs. vs.
21 / 26
7. Wayfinding NAVIGATING THROUGH THE INFORMATION
22 / 26
8. It’s all about storytelling WANTING TO NAVIGATE THROUGH THE INFO
UNDERSTANDAUDIENCE
UNDERSTANDCONTEXT
9. Call to action
9. Call to action
25 / 26
Checklist
1. Typography for scanability
2. Embrace whitespace3. Use colour effectively;
understand accessibility4. Avoid chart junk5. Don’t distort the data
6. Build better relationships
7. Establish a pattern of wayfinding
8. Build a narrative9. Have a clear call
to action
26 / 26
Thanks!
Iffat Jokhio RGD Sr. UX, Pivot Design Group
@hererighthere