Archive for the ‘ information architecture ’ Category

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 …

MIT: Museum + Media Lab

MIT Museum

I visited the MIT Museum in November, 2008 and was blown away by what I saw! Their creative use of technology was truly inspiring! It was not *just* technology, it was art!
Working at the intersection of art, science and technology –you can’t help but feel like you’re in a digital renaissance at a technophile mecca!

During my visit, I shot some photos including this hologram of Keith Haring.

MIT Media Lab

Founded by Nicolas Negroponte and Jerome Wiesner in 1985, MIT’s Media lab is a leader of innovation in technology.

For Negroponte, “Innovation comes from differences. Lateral thinking is key, because ‘incrementalism’ is the enemy of creativity. By juxtaposing people from very different backgrounds, new ideas are bound to emerge.”

Similarly, Wiesner believed, “we cannot hope to solve the problems facing us without a greater understanding of the modern world, based on the integration of knowledge.”

MIT Lab’s philosophy is to inspire the innovative use of technologies through passion and creativity that aims to help people. It fosters a “unique culture of learning by doing, developing technologies that empower people of all ages, from all walks of life, in all societies, to design and invent new possibilities for themselves and their communities.”

The One Laptop per Child is just one of so many amazing and inspiring projects, born of MIT’s Media Lab! –Now that’s technology with heart!

MIT Media Lab
Media Lab’s demos and downloads

References:

Negroponte on innovation and the MIT Media Lab. Momentum, MIT Media Lab

The MIT’s Encyclopedia of Cognitive Science, by Robert A. Wilson, Frank C. Keil is a great resource for anyone interested in HCI design!

The Etymology of Design: Pre-Socratic Perspective, by Kostas Terzidi, MIT Press, 2007

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:

Information design guru: Edward Tufte

Tufte’s beautiful books on information design and visualization:

The Visual Display of Quantitative Information

Envisioning Information

Visual Explanations: Images and Quantities, Evidence and Narrative

Beautiful Evidence

Tufte on Apple’s iPhone

Check out graphic designer, Austin Kleon’s energetic take on Tufte’s books

I took Tufte’s course in Boston, 2008 and thought I’d share my notes with you all. Enjoy!

Information as design

Flowcharts

Mind Maps

Word Clouds

Tags

Visual Thesaurus

Yale Style Guide 3

The Yale Style Guide was the first online guide for web designers. Now in it’s third incarnation, it’s still an excellent resource!