Examples of beautiful information

Thursday, 12 November 2009


This post looks at several creative ways of presenting information. Each example, while presenting a large amount of information, combines together to make a work of art. Although it may not seem practical to combine these forms of presentation in your own pages and applications it is a good idea to think of information as more than just a collection of data.


As a software developer you may not spend much time thinking about the presentation of information. Much of the focus of making a site look beautiful is spent on the overall look and feel of a site, whereas a large portion of the information presented on sites and in applications is stuck in tables. Again, if you are a software developer, you may see a large number of forms and database result sets every day and we present most of this information in a flat grid.

The main point that can be taken from these examples is that data can be presented in a way that provides further meaning. The white space, the grouping of related information, the relative size and coloring all take on different meanings and enhance the raw data. By sticking data into a grid you remove a large portion of its context aside from the table headings and we are stuck of coming up with ways of how to highlight a particular row, minimising the context and the meaning down to its smallest possible level.

The speed at which a user can interpret information on a page is important, especially for applications used in daily work life. The longer your staff are spending unnecessary time on page the more money it is costing your business. Tools are a simple primitive thing and if your work application is overly complicated it is not functioning as a tool.

If you develop a site, think about the role the data plays in usability. Or, if you are selling something on a site, if you place your pricing in a grid what does this say about the different values on offer? Are all values the same even though one costs $20 per month and the other $240?

Take some time to look at the examples of well presented information and think about why they work and how they provide extra meaning to the data they are representing. Rather than taking away an idea of how you could present your data in a practical way, think about what techniques have been used to enhance the information provided; white space, the grouping of related information, the relative size and coloring etc.

The first example Gapminder presents comparative statistical information for countries around the world. You can view oil production vs. consumption or life expectancy vs. income per person. These statistics can be compared per person and per country.



The next example is a collection of similar sites. visual complexity provides a range of sites displaying complex visual information. It provides a gallery of information artworks. One of my favourites is the results of the 2009 eurovision song contest.



The last site is the Processing exhibition site. Processing is a programming language designed specifically for visual display. John Resig of jQuery fame also wrote a port of Processing to javascript. The exhibition page showcases many fine examples of displaying visual information using Processing. My favourite being the Oasis project, a display of spatially aware living creatures that swim around under a display of black sand waiting to be discovered in this art piece.

OASIS from yunsil heo on Vimeo.


Consider next time before placing your information in a box, can you enhance the information with a variety of methods. Should your users search the grid for their one row or be guided by a display of well presented enhanced information.
blog comments powered by Disqus