December 15, 2001

What is the data-ink ratio?

Learn one of the basic principles of Information Design

By Luigi Canali De Rossi

When designing information graphics like statistical graphs, diagrams
and charts, it is important not to overload the reader/user with
unnecessary information that would make it difficult for him/her to make
sense out of what the display shows.

In this view, by gradually eliminating all of the decorations,
unnecessary borders and frames that modern software has accustomed us to
see or even expect, you would be creating information displays that are
clear, easy-to-understand, and consequently, more beautiful and elegant.

The software toolmakers that have created in the past 15 years Lotus
Freelance, Boeing Graph, Harvard Graphics, Adobe Persuasion, PowerPoint
have all strived to automate your task of building information displays by
giving you more and more facilities to "visually enrich" those
graphs.

There was no intelligence though in the software tool itself to warn
you about "going overboard" with too many colors, no automated
color-checker to spot impossible color combinations (based on loadable
usability profiles: e.g.: US consumer, Asian, African, or other social,
geographic or demo/technographic category), no sensor to tell you "Hey,
you have created a graph in which 75% of your ink is for decoration and
25% is ink carrying true data info".

But this is what we have in cars. Not only we have facilities to have
more or do more than barely being transported, but there is also a highly
scientifically designed system that checks upon how the car is doing, upon
possible or incumbent problems before they happen, and it even adjusts and
reconfigures itself to the way we drive.

Software tools for communication must have the same checking and
advisory meta-system. Without them, these tools create more trouble than
good.

Microsoft Word has a spell-checker, a grammar corrector and advisor
built in as part of the basic tool.

Why should we expect less from a tool that does a more complex job,
with a set of more complicated tools, and that generally cost even more
than MS Word?

While we wait for new "smart" and "design-intelligent"
graphing tools to replace PowerPoint and other applications, I would like
to suggest a manual approach, which can be taken into action by following
these 8 easy steps:



1) Drop unplanned and unfunctional 3D effects from your information
graphic. Unless you are a trained designer drop 3D graphs in favor of the
apparently simpler and less fancy traditional 2D graphs.

2) Eliminate all frames and borders. They are not needed. Your data
will not escape the newly found free space around it, but it will "breathe"
and will provide with a more relaxing and legible visual space.

3) Drop also all unneeded borders of colors, bars, slices. Your eye can
tell a column from an empty space without the addition of black ink around
every object created by computer software.

4) Simplify your scale. Many times we let software amass an
unreasonable number of values on the vertical or horizontal reference axes
of a graph.

5) Cut the prison bars. The horizontal and vertical "gridlines"
that many graph tools utilize is nothing short of a visual prison, sold to
us with the excuse of helping our eyes better find the value reflected by
each bar. You can alternatively

a) reduce their number

b) "mute" them by making them gray or negative

c) display bar/column values directly on top of each bar

6) Integrate the legend. This is one of the most discomforting things
when trying to make a sense out of a graph. Jumping back and forth from
the graph display to the legend while trying to make some sense of it all
is not something that I would define as "enjoyable".

Within a bar graph this would mean writing, within the bar columns
themselves the names of the category or item they represent, without
requiring the reader to reference a separate external visual gizmo.

The labeling is necessary only for one set, and does not require to be
placed in all of the bars or columns present in the display. For example,
once I have labeled the bar "oranges", I do not need to label
the same colored bars for all of the other categories (e.g.: years) in
which the "oranges" bar is displayed.

7) Do not utilize bitmap, hatches, patterns to differentiate different
bars, columns or slices. These effects are the heritage of the old times
when there was no color available to differentiate different graph
elements. These solutions are highly disturbing to the eye, they
"vibrate" and create so called moiré effects. More than
anything they look ugly and old-fashioned.

Rather, differentiate visual components of a graph by utilizing
different shades of the same ink. You can do this even by using only the
black color. Both in print and on screen you can apply at least 5
different shades of gray, from white to black that can easily and
elegantly differentiate any set of visual categories you may have in your
graph.

8) Drop, eliminate, mute or simplify all remaining visual components
which serve only decorative or unnecessary graphic-enhancing purposes.
Reiterate and improve, until you can actually see that the quantity of ink
you are using is truly serving the very purpose of communicating real
data.



If you want to read and understand more about how to improve your
design skills when preparing information graphics please refer to the
uniquely written and illustrated masterpieces published by Dr. Edward
Tufte.

By reading and studying these very books I have learned most of what I
know today about this fascinating area of interest. I have also ever since
recommended their reading to all of my Information Design students and
Clients.

In the "Visual Display of Quantitative Information" the
concept of data-ink ratio is introduced and explained in depth with many
exceptional examples.

Please feel free to access my Amazon's Information Design Recommended
Reading List, which lists, among others, Dr. Tufte's unique coffee table
masterpieces. Some of these are the truly the best titles I would
recommend you to refer to in order to improve the effectiveness and design
quality of your information graphics.

http://www.amazon.com/exec/obidos/tg/
listmania/list-browse/-/IWY60ZTEITT4/ 104-3151861-7826339



Luigi Canali De Rossi

MasterView Editor-in-Chief

 

You can read this article in the original issue of MasterView.


posted by Robin Good on Saturday, December 15 2001
Tuesday, January 15 2008

URL of this article:
http://masterview.ikonosnewmedia.com/2001/12/15/what_is_the_dataink_ratio.htm


Recent Articles


July 23, 2008
Web Presentation Tools And Services For Visual Communication: The Best From Sharewood n°99

Photo credit: Ove Tøpfer MixMasterTube: Create playlists and mix with YouTube videos Fire Uploader: Upload and download videos and images from major sharing sites Flypaper: Import multimedia content and create high-impact Flash web content Timetoast: Build your own visual... read more



July 21, 2008
PowerPoint Tools And Presentation Design News - July 21st, 2008

Photo credit: Steffen Mueller... read more



July 16, 2008
Web Presentation Tools And Services For Visual Communication: The Best From Sharewood n°98

Photo credit: Steve Woods Bug Shooting: Take screenshots of your monitor and share what you captured with friends PicsViewr: Create customizable 3D slideshows with Flickr images MyJugaad: Turn any web page or RSS feed into a visual slideshow Fumpr:... read more



July 14, 2008
PowerPoint Tools And Presentation Design News - July 14th, 2008

Photo credit: Ove Tøpfer... read more



July 09, 2008
Web Presentation Tools And Services For Visual Communication: The Best From Sharewood n°97

Photo credit: Steve Woods Rotavacx: Image search engine lets you make filtered researches on Flickr uvLayer: Video aggregation system lets you search for videos and watch them while chatting with other people FormatFactory: Convert almost any multimedia file into... read more



July 07, 2008
PowerPoint Tools And Presentation Design News - July 7th, 2008

Photo credit: Steve Woods... read more



July 02, 2008
Web Presentation Tools And Services For Visual Communication: The Best From Sharewood n°96

Photo credit: J. G. Sumopaint: Online image editor lets you modify your images professionally Videocrawler: Video search engine lets you look for video from multiple sources CatchVideo: Free service for downloading and converting YouTube videos to multiple formats Pikistrips:... read more








Search this site for more with Google

 

 

264
 







  Subscribe



 
  PowerPoint Topics:














  Hot Issues:

 

 

Home | Site map | Privacy | About | Contact

MasterView International  
Google Search