Design vs Art Blog

Google public transportation directions is a great tool. With it you can easily know how to get to an specific place using the best combination of buses, trains and other kinds of public transportation. This could be a great success in Europe, where people are used to go everywhere by public transportation.

The Power of Design

This kind of websites already exist in Europe but it is usually offered by local companies, like the city-specific Transport for London website. Unfortunately, most of these were not very successful adapting for the web great design developed previously for paper. Last weekend I stopped by the Munich central station to get a paper timetable, old style but easy to understand, even if you don’t speak German language. This is the German Trains timetable for the Berlin - Munich connection:

The Copenhagen city transport website has a less lucky approach, as you can see in the picture below, reading is not that easy. (I use Copenhagen as an example but this is actually happening in several European cities like Munich, London and others).

The Google Design

The Google Maps approach is by far the best I have found. It is clear, fast and has a printer friendly version. It is also highly interactive, something that others don’t have: e.g. the Munich website displays maps only in PDF format (horrible.)

If you are not familiar with the Google public transportation service, have a look at the following video for a quick introduction. 

Some Problems

Although I love the public transit directions on Google Maps I have some worries:

1. Every time I use Google Maps a new button is placed on the map,

2. Why can I edit origin and destination from several places?

3. Some little things (like the bar at the top of the page) make me think that the whole thing could soon become cluttered. 

More Info

If you are interested on maps and timetable designs I recommend Edward Tufte’s book, "Envisioning Information" for a great inside on the topic.

Tufte’s Website

Popularity: 31% [?]

A favicon is an icon associated to a website or web page, it is also called website icon or page icon. There are several ways to implement it but the most traditional one is placing a favicon.ico image file. This image is going to be displayed in the web browser tool bar and bookmarks.

Favicons are not only important for marketing and branding proposes but also for usability:

- Favicons help the user to identify pages among the web browser tabs

- They help to visually identify bookmarks

- Because of the previous two points, they make users to save time and to make internet browsing a more comfortable experience

Tabs

Notice how easy it is to identify tabs if they have favicons:

Bookmarks

Users can easily search through bookmarks that have favicons:

The Branding Problem

Sometimes using favicons requires to make a balance between branding and usability. In the following example Google uses the same favicon for all its services. This has a positive and a negative effect: on one side different services benefit from the main Google brand if they share the same favicon, on the other side it makes difficult to differentiate different pages and services from the same company.  This a valid approach but using several favicons for different services of the same company/website could improve usability.

The Google favicon among different services:

Popularity: 73% [?]