Introduction to Information Design

I used to give presentations and short workshops on various topics within the field of user experience design. The following was the text taken from one such presentation. You might prefer to this article in it’s original format – the original presentation can be viewed here.

Durability + Utility = Delight
Bauhaus, 1919 – 1932

‘Business and industry have learned that their products ought to be aesthetically pleasing. A large community of designers exists to help improve appearances. But appearances are only part of the story: usability and understandability are more important, for if a product can’t be used easily and safely, how valuable is its attractiveness? Usable design and aesthetics should go hand in hand: aesthetics need not be sacrificed for usability, which can be designed in from the first conceptualisation of the product.’ Donald Norman, The Design of Everyday Things, Doubleday, 1988

Master the content, the form will rise to meet you. Multatuli, 1875

Acronyms are funny. ID could be:

Industrial Design

Industrial design is the professional service of creating and developing concepts and specifications that optimize the function, value and appearance of products and systems for the mutual benefit of both user and manufacturer.

Industrial designers develop these concepts and specifications through collection, analysis and synthesis of data guided by the special requirements of the client or manufacturer.

The industrial designer’s unique contribution places emphasis on those aspects of the product or system that relate most directly to human characteristics, needs and interests. Industrial Designers Society of America

It could also be…

Instructional Design

Instructional design is a systematic approach to course development that ensures that specific learning goals are accomplished. It is an iterative process that requires ongoing evaluation and feedback.

Many instructional design models are based on a behaviorist foundation where the focus is on such things as learning objectives and operant conditioning through reinforcement of the desired behavior.

Instructional Design is a field that prescribes specific instructional actions to achieve desired instructional outcomes; the process decides the best methods of instruction for enacting desired changes in knowledge and skills for a specific course content and learner population. Instructional design is usually the initial stage of systematic instruction, for which there are dozens of models.

But in this case I am talking about information design….

Information Design

Information design is concerned with transforming data into information, making the complex easier to understand and to use. It is a rapidly growing discipline that draws on typography, graphic design, applied linguistics, applied psychology, applied ergonomics, computing, and other fields. It emerged as a response to people’s need to understand and use such things as forms, legal documents, computer interfaces and technical information.

Information designers consider the selection, structuring and presentation of the information provider’s message in relation to the purposes, skills, experience, preferences and circumstances of the intended users. To do this they need specialist knowledge and skills in graphic communication and typography, the psychology of reading and learning, human-computer interaction, usability research and clear writing, plus an understanding of the potential and limitations of different media.

More definitions can be found here: http://www.stcsig.org/id/definitions.html

Differences between Information Architecture and Information Design

I believe I got this originally from Jesse James Garrett some time ago.

Between the two names we have different concerns. Information architecture (IA) is primarily about cognition, how people process information and construe relationships between different pieces of information. Information design is primarily about perception, how people translate what they see and hear into knowledge.

Both require different skills. Information architects come from a variety of backgrounds, but I sense that a majority of them display an orientation toward language. Information designers, on the other hand, tend to be oriented toward the visual arts. As a result, the majority of information designers come from exactly one discipline: graphic design.

Information architecture belongs to the realm of the abstract, concerning itself more with the structures in the mind than the structures on the page or screen. Information design, however, couldn’t be more concrete, with considerations such as color and shape fundamental to the information designer’s process.

Be mindful that organization and presentation are different concepts. Data can only be organized with in a few principles: Magnitude, Time, Numbers, Alphabet, Category, Location, and Randomness.

Magnitude, Time, Numbers, and Alphabet are all sequences of some type, which we can use to organize things based on a similar characteristic shared by all the data.

Category and Location are organizations that also use some inherently meaningful aspect of the data around which the data can be orientated.

Randomness is the lack of organization. It is important when we are trying to build an experience that isn?t necessarily easy, an exploration or game.

Importance

Thats nice…. so what?

Printed and graphical information is now the driving force behind all of our lives. It no longer is confined to specialized workers in selected fields but impacts nearly all people through the widespread use of computing and the Internet. Rapid and accurate transfers of information can be a life and death matter for many people (an example being the Challenger disaster).

I have heard…

"The extent to which symbols and graphics affect our lives can be seen by the dramatic increase in IQ scores in all cultures which have acquired information technology: in the United States there has been an average increase of 3 IQ points per decade over the last 60 years, for a total of an 18 IQ point increase. There is no known biological explanation for this increase and the most likely cause is widespread exposure to text, symbols, and graphics that accompany modern life."

Basic business concerns

“Applying information design principles to internal documents such as forms, spreadsheets, databases and reports helps to ensure the efficient and effective gathering, processing and dissemination of information. Decision-makers will benefit particularly from clear internal reports and presentations.

Information design will also help a business to communicate effectively with its customers via its tender documents, brochures, technical specifications, instructions for use, publications, website, contracts, invoices, bills, etc. There is now the potential for customising many of these documents, but this introduces a new range of design challenges. Badly designed documents cost money because they fail to elicit the response required, and they may frustrate and even alienate customers who have the option of shopping elsewhere.” Sue Walker

Ex. Challenger and Columbia disaster

Creates meaning

“We live in an age of alsos, adapting to alternatives. because we have greater access to information, many of us have become more involved in researching, and making our own decisions, rather than relying on experts. The opportunity is that there is so much information, the catastrophe is that 99% of it isn’t meaningful or understandable. We need to rethink how we present information because the information appetites of people are much more refined. Success in our connected world requires that we isolate the specific information we need and get it to those we work with.” From Richard Saul Wurman’s, “Information Anxiety 2”

“We are being pummeled by a deluge of data and unless we create time and spaces in which to reflect, we will be left with only our reactions. I strongly believe in the power of weblogs to transform both writers and readers from “audience” to “public” and from “consumer” to “creator.” Weblogs are no panacea for the crippling effects of a media-saturated culture, but I believe they are one antidote.” rebecca blood, september 2000

Data is raw and often overabundant. Despite what many may say, it’s not the driving force of our age. It is, for the most part, only the building blocks on which relevance is built. Content / data en mass has limited value in its raw state.

In fact data is useless until it is transformed — in it’s raw state it has no meaning and is of little value which only contributes to the anxiety we feel in our lives.

Information is the beginning of meaning.

Information is data put into context with thought given to its organization and presentation. Going from data to information represents coming from sensory to conceptual.

It means nothing until you do something to it.

Knowledge. What differentiates knowledge from Information is the complexity of the experiences that you need to reach it . In order for a pupil to have a good knowledge of a topic he/she has to be exposed to the same data set in many different ways, from different perspectives and he/she has to elaborate his/her own experience of the same. Knowledge cannot be transferred from one person to another, it has to be built by the person him/herself.

Information design is the discipline through which we create the transformation from data to information acting as a vehicle for the construction of knowledge.

Almost any organization can be presented in a variety of ways.

Textual data can be presented in writing, visually (“a picture is worth a thousand words” ), or aurally (as in live or recorded speaking), or in any combination.

Often, the presentation itself affects our understanding so much that we can misunderstand or misinterpret the data.

It varies from the mundane to the fantastic, from facilitating ease of understanding to influencing opinion.

Look to the financial pages and news pages of your newspaper, information graphics, and your favourite web sites. Analyse how they are shaping your opinion and experience.

My Fellow Citizens
How does this change your perception? Especially when contrast with this written and visual material.

Infographics

Poynter

Visual Journalism.com

Information ethics
International Centre for Information Ethics

History
History in a nutshell of the field of Information Design

Information Systems – the Web

My primary area of interest is primarily facilating ease and understanding across information systems. Whether they be intranets, corporate sites, "portals", web applications, or etc.

Sometimes information design involves grouping or arranging pieces of information.

The key, of course, is to group and arrange the information elements in ways the reflect how your users think and support their tasks and goals. This is in effect micro level information architecture where we have to communicate structures on the page.

We’re tying design thinking to thinking principles – human cognitive tasks (Making comparisons, navigating through many dimensions, figuring out causality: fundamentals of human cognitive tasks). Information design is a key part of a user- centred design process.

Graphic from The Elements of User Experience, Jesse James Garrett

Information design builds upon the work we have done earlier in the process. We need to know who we are designing for and why ( what problem are we trying to solve, what action are we trying to faclitate, message to be communicated, and/or process we are trying to enable.)

Whether as part of a larger process in a project or not – the who, what, why, and where is essential to creating an effective solution.

Many lessons can be garnered from studying wayfinding and information design in a real world context.

A study of Taipei’s MRT.

On Order"Order tends to reduce complexity and requires elimination of details that do not fit the principles determining the order" Arnheim (1966)

Wayfinding Is Not Signage

One of the most fundamental interactions on the web is the filling out of forms. This is one activity that information design plays a key role.

Lets look at an example…

We need to improve this.

What have we done to improve the form?

Can we do more?

That was a fairly simple example of an all too common problem. Poorly designed forms are one of the most counter-productive and potentially fustrating interactions on the web. Form design may not be fun, it certainly isn’t glamorous, but with sufficient effort it will yield significant improvements to the user experience.

Simple Guidelines for Form Design

Better Web Forms
"A short form is a good form. The shorter and more simple you can keep it, the more likely a user is to fill it out properly. If possible cut fields from the form, and whatever you do, don’t duplicate fields. The key here is to make sure the form is only collecting information that will be used. If you don’t need an address, don’t ask for one and never ask for something twice." – D. Keith Robinson

Now for an all too quick look at some Tufte…

General Philosophy for Increasing Data Comprehension

Edward Tufte

High density is good: the human eye/brain can select, filter, edit, group, structure, highlight, focus, blend, outline, cluster, itemize, winnow, sort, abstract, smooth, isolate, idealize, summarize, etc. Give people the data so they can exercise their full powers — don’t limit them.

Clutter/confusion are failures of design and not complexity

Information consists of differences that make a difference: so you can “hide” that data which does not make a difference in what you are trying to depict

In showing parallels, only the relevant differences should appear

Value and power of parallelism: once you have seen one element all the others are accessible

Important concepts in good design: separating figure and background (for example, a blurry background often brings the foreground into sharper focus), layering & separation, use of white space (e.g., Chinese landscapes emphasize space, as in the painter known as “one corner Ma”; oriental music is often there to emphasize the silence and not the sound).

Graphics should emphasize the horizontal direction

General Principles

Edward Tufte

There are two central issues in the general problem of the display of information:

The need to display three or more dimensions of information on two-dimensional displays (escaping flatland) — the really interesting information is almost always multivariate.
The available resolutions for displays of information. This is evident in the fact that all display methods (and their improvements) tend to be evaluated on the basis of resolution.

Enforce visual comparisons.

Your visual, if telling a story or making a point, must be able to answer the question “compared to what?” For example, if a company’s stock is visually shown at 50 today, that doesn’t mean a thing unless you can also demonstrate what the stock was at yesterday, or one week ago, or one month ago, or one year ago. “So the stock is at 50 today,” you ask. “50 compared to what last month?”

Show causality.

If you can do so with your visual presentation, show why something happens the way it does.

This graffic itself shows the inherent problems of displaying data on the screen.

The visual clearly explains that Napoleon’s troop numbers diminished as he moved east, no big whoop. But causality comes into play when we see that the graphic also shows time, temp and geographic location: the colder it got, the more soldiers died. In addition, the graphic also shows that troops seriously dropped off when they all had to cross a river in the middle of winter.

Show multivariate information.

The Napoleon visual, of course, needn’t tell all those details; it could have achieved causality by showing only temperature and geography. But it told more of the story once time/dates, geographical location, number of troops and direction of movement are shown. Because the visual is showing us all these variables and how they work together, we’re told much more of a story in a much smaller, more efficient amount of space. It’s an incredibly complex story told in one simple visual.

Integrate words, numbers and images.

When dealing specifically with large tables of numbers and statistics, think of the tables as paragraphs of numbers. Use numbers when possible to help convey the essence of the point.

Work with great content.

Even the best information design is no good if it’s communicating something not really worth telling. The best way to produce compelling visual designs is to start out with compelling content. Otherwise you wind up with a lot of Powerpoint-like fluff that’s all dressed up, but doesn’t really say much. Design cannot repair content weakness.

Some tips for extracting good visuals from good content:

the deep principles of information design are just like those of analytical thinking…if you’re not a good analytical thinker, then you probably shouldn’t be in information design
one question to ask as you go along: what is the thinking task that this design is supposed to help with?
good information design is good thinking made visual. Bad design is stupidity made visible.

Do no harm. Do not mess up the content.

Make comparisons adjacent in space, rather than stacked in time.

If showing multiple versions of one thing to show that thing’s progress over time, place them together, on the same page, right there next to each other, so that progress is visible and apparent. Anyone who has to flip through a number of pages to get to the point is not going to feel or notice the same impact than a visual story that’s told completely on one page could have.

Use small multiples.

Rather than demonstrating every detail of a statistical graph, use a scaled version to make the point. Case in point: financial sparklines. In a very small space of less than an inch by inch, you see a stock’s performance over the course of an entire year. Are all days mapped out in this teeny tiny grid? No. It’s a month-by-month comparision that shows a general trend.

To be useful, financial data needs to show an assessment of change (this is the thinking question in this case).

Using empty vertical space to show a zero point that never occurs does not help, (p. 74, Visual Display of Quantitative Information ). Re-measuring will usually move data closer to the average ("regression toward the mean) — more horizontal space can actually show more useful information in many cases.