Web navigation with a subway map

I saw a story on BBC News about the London subway map. The map is a classic 20th century design created by electrical engineer Harry Beck. It was a great hit with the public when first published and is still used today with few modifications. Beck's map was originally rejected by London Transport, however, because it was not geographically accurate. To make the complex map clearer, Beck had enlarged the central areas and compressed the outer areas.

While Beck's ingenious design makes the subway network easy to comprehend, it is indeed difficult to tell how far apart the stations actually are. This can be a problem in the physical world; what seems like a short walk on the map may turn out to be quite a trek on the surface.

In the virtual world where scale does not matter, a subway map can be an incredibly useful navigation metaphor.

I am currently involved in commercializing a tool called Prosumer. Prosumer allows you to create workflow-oriented Web applications without coding. With this tool you design the user's navigation path as if you were drawing a subway map, creating stations and connecting them with tracks.

Here are some familiar subway concepts and what they represent in Prosumer:
  • Station. In Prosumer, a station is a Web page. The user stops at the station to perform an action, for example to fill a form, and continues their journey to the next page.


  • Track. Tracks are navigation paths from one station to the next, basically hyperlinks.


  • Railroad switch. Business rule that routes the user to a particular navigation path. Depending on what the business rule says, tracks split and merge to create alternative journeys.


  • Departures and arrivals. Points in time when actions can be executed. For example, "On arrival to the Shopping Cart station, calculate the total of items the user has in her shopping cart" or "On departure from the Flight Search station, save the user's home airport".

I think this is a very powerful way to visualize a Web application's navigation pattern. Even after a long time away from the design, looking at the map makes it immediately evident to you what happens where.

Popular posts from this blog

Vanity URLs with Magnolia CMS

Image
Vanity URLs are short, easy to remember Web addresses used for campaigns, microsites and landing pages. They are a key Internet marketing tool. In this post I whip out my vanity cane, clip on my grill and show you how to get vain with Magnolia CMS. A vanity URL typically contains a word or phrase that describes a specific target such as a campaign slogan. When a user visits the vanity URL they are redirected to the actual target site. The URL can be constructed using a: trailing path: www.shell.com/ eco-marathon domain prefix: experience .virgin-atlantic.com domain suffix: www.amazon. de entirely unique domain name: mynavyfuture.com The URL is often reproduced in print ads, hoping that the short and snappy look makes it easier to remember. Magnolia CMS provides two approaches to creating vanity URLs: 1) Virtual URI mapping is used to create path-based vanity URLs. In this mechanism a trailing path is mapped to an actual page. In the configuration example below, www.example.com/winter
Read more

Keyboard shortcuts that look like keys

Image
I spotted this CSS class being used in Chrome keyboard shortcut help. I applied the style to our  keyboard shortcut documentation  at Magnolia. Now the shortcuts look like actual keys. That was a quick way to add a bit of polish. .kbd { background-color: #f7f7f7; border: 1px solid #ccc; color: #333; font-size: 13px; line-height: 1.4; text-shadow: 0 1px 0 #fff; font-family: Arial,Helvetica,sans-serif; display: inline-block; padding: 0.1em 0.6em; margin: 0 0.1em; white-space: nowrap; -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset; -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset; box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } Here's the result:
Read more

Keywords in page titles and meta elements

Image
This post belongs to a series about  search engine optimization  (SEO) with Magnolia CMS. Today we look at inserting keywords in page titles and meta elements. Page titles are an extremely important SEO factor. Search engines give titles considerable algorithmic weight and use them as headings on search results. Titles should include keywords and, where appropriate, your company name for branding purposes: <title>Magnolia - Finance, Insurance & Banking</title> Description meta elements on the other hand do not add much to page relevance, but should not be neglected: <meta name="description" content="Magnolia's largest group of Enterprise Edition customers is from the..."> Their content often appears below the title in search results: The relevance of keywords stipulated in the keyword tag once had great impact, but this is no longer true. Actual page content is now far more relevant. Still, a keyword tag should be included:
Read more