Archive for the ‘ information design ’ Category

An innovative way of displaying information … by Corning.

One of my students pointed me to a video clip showing the future of information design, so thought I would share it with you all. Here is a link to  …. The future of Information Design

Enjoy!

a documentary on web 3.0 : the semantic web

Check out this smart documentary on the semantic web (web 3.0) by kateray.net. It features a few of the biggest, brightest thinkers and pioneers of the Web, including Tim Berners Lee, Google scientist, Alon Halevy and MIT prof, David Kargy –all discussing the structure of the web (or the need for one).

In it, NYU New Media prof, Clay Shirky asks the DEEP PHILOSOPHICAL QUESTION: … “Does the world make sense? Or do we make sense of the world?”

I think the answer is clear: We need to make sense of the world (wide web) for it to be useful!

Here, web 3.0 is a semantic web. It’s about creating meaningful relationships between and among data. <!–Insert social networking plug here!–> It’s a world where indexes and meta-data matter most. It’s like one ginormous database!

It is however, an interesting exercise to imagine what the World Wide Web looks like, or might look like.

Check it out and see for yourself!

Using Google Analytics

Since the incarnation of Web 2.0, the Web has become not only a vast collection of resources for information on just about any topic you can imagine – it is now a wide-spread social phenomenon with great potential for designers, small business owners and content creators alike! A good idea on the web can *and does* –spread like wild fire!

How can you, as a designer, ensure that your site not only stands out among the myriad of websites on the Web, but also know how your site is being used? To understand how your site is fairing on the Web, you can track and measure your website’s performance with Google Analytics! The trick is to be smart about how you design your site from the get-go, and to market it effectively through social media networks. Once you have done those two things, you can monitor your site’s performance with Google Analytics. Here’s how:

According to ‘The Missing Google Analytics Manual‘, there are four components to effectively market your website:

  1. Attraction: How do you attract users to your web site?
  2. Retention: How do you hold your users’ attention and keep their interest within the site?
  3. Conversion: How do you convert a users’ actions into transactions?
  4. Measurement: How do you measure your website’s performance, including traffic, referrals, most popular content, and so on  … ?

First, create an account with Google Analytics. Once you have done this, it will generate a unique code identifier that looks like this bogus account: XY-1234567-8. Now you can add a tiny <snippit of js code> called Google Analytics Tracking Code (GATC) to your site to begin tracking, so you can record and monitor your site’s performance.

To include basic Google Analytics code within the pages of your website, paste the following javascript into your website. This code consists of two parts: ‘a script tag that references the ga.js tracking code, and another script that executes the tracking code.’ (For more advanced Google Analytics functionality, visit GATC’s code manual, to learn how to tweek the code for your site. But note that you should know how to code, in order to use this site.)

For the first part of code to reference the tracking code, copy and paste the code below into the web pages of your site that you wish to track:

<script src='http://www.google-analytics.com/ga.js' type='text/javascript'> OR

<script src='https://ssl.google-analytics.com/ga.js' type='text/javascript'> (for a secure page connection)

And now for the second part, to execute the tracking code, copy and paste the snippit of code below:

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}</script>

Once you have plugged the necessary code for Google Analytics to track your site’s performance, it should begin tracking.

To see how your site is doing, login to Google Analytics and click, ‘View report’ for your website’s profile. Once you have done this, Google Analytics will show you a dashboard with your site’s informatics.

Understanding the Google Analytics Interface:

Google Analytics screenshot of a bogus website

The Google Analytics Dashboard is made up of the following widgets:

  • a Calendar with a line graph representing the time line specified
  • Site Usage , including how many visitors and pages were viewed on the site
  • a Visitors Overview, including technical information about what browser and connection speed visitors used to view the website
  • a Map Overlay, representing where visitors accessed the website from. (You can drill down from country to city, for more specific information about your visitors’ location.)
  • Traffic Sources Overview, with a pie graph representing the per centage of visitors who found your website via a Search Engine, or a Referring Site or through Direct Traffic.
  • Content Overview (what content visitors access within the site)
  • Direct Traffic

more to come soon …

Diagrams + schematics

Bar charts

Pie graphs

Line graphs

Maps and legends

An outline map of the world

Maps! –The ultimate in visual information! Once an art-form unto themselves,  with early illustrations of the mappa mundi (world map), maps show us the geography or topography or even the history of a place. The level of detail shown in a map depends upon its scale. Maps reveal landscapes from above, borders, elevation or even weather patterns, depending on their purpose. Shown from above, the aerial view was first made possible by Gaspard Tournachon, also known as ‘Nadar’. While high up in a hot air balloon in the autumn of 1858, Nadar painstakingly took the world’s first aerial ‘photo’: a pale portrait of three houses in a small village on the outskirts of Paris, clear enough that you could actually see a policeman in the street! Maps can represent ‘real’ or even imaginary worlds, like C S Lewis’ Narnia!

Illustration of Nadar taking the world's first aerial image

Maps show you where you are … or where you could go and how to get there. They are tools for navigation, but now they can also represent much more data and interactivity. Google has re-invented the map, with it’s intelligent, ‘big-brother’s watching’ satellite maps.

Interactive Maps:

  • Google Maps provides maps from around the world in various views including: Map, Satellite, Terrain, Traffic, Photos, Videos, Wikipedia, Webcams, and Bicycling! You can ‘create a map’, get directions to a place, or navigate at street level through a neighbourhood with their satellite photo-stitched view. Google Earth goes one step further to give the user the complete experience of flying to a chosen destination in virtual 3D!
  • Panoramio allows users to upload photos from their travels and post them to their corresponding location on a map.
  • amMap provides interactive maps to visualize data, or what they call, map charts. You can choose from ‘heat maps’, ‘drill down maps’ or ‘timeline maps’, and more. The heat map, for example, represents the population density of a country by showing  countries in gradual shades of colour. According to this heat map, when I scroll my mouse over Italy, roughly 59 million people live in Italy, (shown as medium red), compared to Germany, with a population of roughly 83 million (shown as dark red).
  • Strange maps has a great collection of creative maps! You can find a portrait map of Shakespeareville, or the route of ‘four most travelled tales’ and many more quirky maps!

Graphic design is another effective way of depicting information in maps. Consider the famous London Tube map, by graphic designer, Harry Beck. –Beck made this incredible labyrinth look like kids’ play with his world famous map of the London Tube, shown below.

Harry Beck's map of the London Tube

Legends:

A map’s legend explains elements of a map through icons,  colour and line variation. It unlocks the information contained within a map for the navigator. In short, it helps the navigator read the map. If you are making a map, here are some useful legend icons in vector format:

Iconographic design: Signs, icons + symbols

On Abstraction

Abstraction is the reduction of something to it’s essential form. By abstracting something, you simplify it and render it easier for a user to recognize. A solid fill or outline is the simplest form of abstraction.

Pictographs

Icons

Also known as ideographs, icons are abstract representations of an image, object, action, function, or program. In order for an icon to be effective, it must be instantly recognizable. An icon that does this well is generally more user-friendly. Iconographer, Susan Kare who designed the world famous Mac icons, thinks of icons more like traffic symbols. Kare’s icons combine form, simplicity and humour.

The San Fransisco Emergency Task Force put together this great instructional set of icons to inform residents of what to do in the event of an emergency:

SF Emergency Icons

Signs

Symbols

For those of you with an intellectual bend, read Carl Jung’s, Man and his Symbols. –It’s a fascinating read!

Resources: