Mouly Kumaraswamy

Pie charts are not a good  choice to communicate a group of numbers, because humans can’t compare area as good as length. Even if comparing values is not important, I think there are layout and readability problems with pie charts.

There are two ways to add legends to a pie chart. One method is to list each color and the name of the variable. This design has poor readability. The reader has to move back and forth between the pie chart and legend to read the chart.

A better design is to label each section in chart directly, obviating the need for a chart. This is definitely better to read. But the layout can be unpredictable. If the data is skewed then a lot of labels might overlap. For interaction designers, we don’t always know the data before hand. So using this type of chart will make the design unpredictable.

I think a simple bar chart is more effective than pie chart. A horizontal bar chart can be treated like a table. The data can be presented in an sorted order, which makes reading a more pleasant experience. Only one color is needed in the chart, which reduces unnecessary contrast.

Show only the required details

Icons help users recognize a class of object. This AIGA icon for example can be instantly recognized as a bus. The icon does not show many details like rear view mirrors or grills. But they are not going to make the user recognizer the icon any faster. In fact it may increase the time to recognize since the user has to process more information. So once I selected the object to be used as an icon, reduce the object to its most basic elements. This reduced the amount of work I had to do.

Design icon in the size they will be used

I wanted icons at 16x16px. Our team a had purchased a library of vector icons, which could be scaled to any size. But when I reduced them to 16×16 px many details of the icons got distorted and the icons were not legible. So I created bitmap icons at 16x16px, either from a blank slate or retouching the vector icon at the required size. Vector icons don’t always get distorted, but I think there is a range of sizes beyond which a icon looks distorted.

Contrast across icons

It is important that icons are distinguishable from each other especially if icons are going to be shown next to each other. Otherwise the user would take longer time to recognize the icons, which defeats the whole purpose of icons. Whenever I have to design for contrast, I refer to Bertin’s retinal variables: Hue, Shape, Texture, Orientation, Size & Value.

Since all icons have to be similarly sized, I could not use size and position for showing contrast. But using only shape, hue, and orientation I could show sufficient contrast across the icons. I didn’t use texture, since it would be harder to perceive texture at small sizes and also it needs more illustrating skill.

Google’s icons are a good example of  icons having contrast across hue, shape and orientation. I like how the icons for Blogs and Realtime have the same shape, but different hue and orientation. It captures their conceptual similarity and differences beautifully.

Purpose of presenting information is to help the decision making process.  Information presenters should have the spirit of whatever it takes to help the process. This was the premise of Edward Tufte’s workshop I attended in San Francisco on Dec 9.  Here are my notes from the workshop:

Data analysis

Information overload is caused by lousy design. Humans process huge volumes of data everyday.
The challenge is presenting multivariate data on a two dimensional surface like paper or screen.
Finding causality is the goal of data analysis. Unlike physical world where the causality is constant, in the human world causality is impermanent. In fact we look for causality to do an intervention and break the causal chain.
Design should support data comparison. Spatial adjacency is better than temporal adjacency for data comparison.

Information presenters

Presenting information is an intellectual and ethical activity.
Do not cherry pick data.
Respect your audience.
Know your content.
Your presentation should support an unguided cognitive walk through.

Information Consumers

Check the sources of information used in presentation.
Evaluate the competency of the presenter.
Is the result too good to be true?
Have an open mind but not an empty head.

Design Principles

Use the resolution of typography. Content is the design. Don’t put boxes around everything.
Treat design as a research problem rather than a creative problem.
To find examples of good visualization read scientific journals like Nature.
In design 1+1=3 . If two design elements are put next to each other, an interaction effect is added to the effects of the two elements.

User Interface Design

1st generation of interfaces was command line based, like DOS. Involved remembering and typing
2nd generation interfaces – GUI using windows and icons. Involved clicking and pointing
3rd generation is likely to be touch base high resolution
Computers separate information by mode of production. Users have to go to different application  “rooms” to work on different modes of production
In recovery.gov ET set a goal of using 92% of screen space for content

Overall Tufte gave a lot of food for thought. He showed a lot of good design examples from Galileo’s recordings of the sun spots to a SARS virus outbreak. But all his examples were static content or structurally static (like weather forecast). He picked examples where the designer knows the content exactly. This works well for board room presentations and publishing. But while designing a web application the content or even the structure of the content is not known to the designer. In my current project, I am designing an web application that can be customized by banks for their business needs. So the design has to be flexible for a wide range of requirements. In other words, web designers have to design web applications before there is any content, ergo we have to treat content and design separately. My main takeaway from the workshop was his spirit of “whatever it takes”.