Monday April 16, 2007
Teleporting IA
Currently, my favorite TV show is Heroes. One of the protagonists in the show is named Hiro Nakamura, and he has the super power of teleportation. It is amusing to see him use it, because he often ends up in places he never expected. He awkwardly fumbles his way through saving the day, using context clues to figure out exactly where (and when) he is. In one instance, another hero (who can paint the future) depicts Hiro fighting a tyrannosaurus with a samurai sword, and Hiro looks a bit pale as he realizes it is yet to happen.
da Intarwebs
This is exactly how the web works. Everyone is linking to everyone else, and the user haphazardly jumps from one site into the next, not knowing quite what to expect. Will the page be a “safe” destination? Will music and video blare away at full volume and speed upon arrival? Will I find myself in an entirely different, parallel PDF dimension that crashes my browser?
More importantly, as civil engineers of such destinations, what are we doing to ensure each new visitor is given a proper welcome? Is the signage legible and informative? If so, then people will figure it out. Despite what web designers might think about users, they are smart. Often we place blame on user-error when problems tend to stem from poor information design.
Go take a look at your site. Is there adequate info about your organization, readily available from any area? There had better be, since most people will link directly to an article, not your top-level home page. Are there context clues as to where the user is located in the site hierarchy? There should be, so users know where they are, relative to the rest of your content. Additionally, as a general rule of thumb – rich media should play only at the discretion of the user, lest he/she arrive to be greeted by an unexpected, roaring tyrannosaurus (such as on MySpace).
I saw a site recently which had a link back to the home page if, and only if, you were already on the home page. Like a fair-weather friend, as soon as I navigated deeper into the site, the home page link disappeared – at the very moment it was most needed. It is paradoxical that it would exist only when completely irrelevant. Luckily, my crisis was averted by the trusty back button. To banish that frightful tale, let us consider a how it ought to be done.
Examples
It is amazing how subtle elements can be used in order to speak to the visitor: “You are here.” When in doubt, you should use a tried-and-true method such as a visual change to your navigation. People are used to seeing this type of thing, and it instantly resonates with them. A good example of this can be seen at the venerable online magazine Digital Web. A portion of the menu receives a slightly different color treatment and a bright green, right-facing arrow depending on your location.
Another one that does navigation well is Steve Smith’s site, Ordered List. It subtly hints at the rounded-corner form of a navigation bar, without overtly spelling it out. Note that on the home page, the left sides of the link are rounded, but the right side is squared-off (vice-versa for contact). All of the other nav-bar links are completely angular when clicked. This creates imagined visual continuity in the mind’s eye, though it consists mainly of negative space if taken on a per page basis.
Ordered List: Home | Portfolio
Occasionally, in specific unique circumstances, the written copy of a page can serve as the navigation interface. This can be seen in the recent redesign of Happy Cog, a web design and consultancy in NYC and Philadelphia. There is a simple paragraph of text explaining what the company does. Each link has a color change depending on what section you are viewing.
In 2006, Geniant was hired to do the site design and front-end development for American State Bank. Designed by Jared Christensen and coded by Jeff Adams, this site has proven user interface elements in conjunction with human-friendly text. The resulting tabular menu has a brief summary of each section appearing on the respective tab. Also, note the right-facing double-arrow points downward when the tab is selected, indicating that you are currently viewing that page.
American State Bank: Home | Business
Summary
Needless to say, nothing improves a website quite like intuitive navigation and friendly copywriting. Never underestimate the importance of having well thought-out organization of your site’s content – lest your users be disoriented, confused and disgruntled, never to return.
Ask yourself these questions when designing a site:
- What does the site say about the brand?
- Is the navigation easy to figure out?
- Is content clearly labeled (PDF, etc)?
- Is the user empowered or hindered?
Hopefully this article has started you thinking of creative ways to orient the users of your site. Do not make the faulty assumption that your home page is the gateway. Instead, understand how deep linking typically occurs and design your site accordingly to speed up acclimation.
Comments on “Teleporting IA”
EMC helps organizations create superior IT environments, from infrastructure solutions all the way up to software development and user experience design.
Learn more…About This 404er
Nathan Smith
Nathan is a goofy guy who enjoys practicing and preaching Web Standards. He is a client-side ninja at Viewzi and co-wrote a book on open source content management. He advocates accessible use of JavaScript with semantically efficient XHTML and CSS. Off the clock, he is working on a MDiv degree.
- Recent entries by Nathan:
- Enterprise Fire-Flow
- IA as Civil Engineer
- Reply vs. Reply to All
- Barber or Director?
- iPhone, NASA and NASCAR
Nice article! Too bad you have to write such articles to point this out to webdesigners, isn’t this a logical thing?
I agree with Tim. This is a very simple concept, why don’t people follow it?
You would think it would be a logical, common sense thing but I have seen many sites that fail to include “You are here” navigation indicators.
Tim: You’d think it would be a logical thing, but I think sometimes we as web designers get a little lazy, or perhaps are a bit perplexed by the conditional logic necessary to check where the user is currently at. At any rate, it’s good to remind ourselves from time to time that it’s not really about the website. It’s about the user’s experience.
Nathan: That’s why I choose quality before quantity… If I can’t live with a design I’ve made, why should other people live with it? I get paid more than enough to deliver this quality. In Belgium we have a so called “quality label” for webdesign called FeWeb (http://feweb.be/). I’m not a member because almost all the company’s who have this label only think about the money…
Call me a freedom fighter, but I would rather eat a sandwich a day less then delivering lower quality :-)
Excellent article Nathan. I do agree with others that this should be an integral part to any design (letting the user know where they are and how they can get back). I think users will be more apt to browse around a site if they know they can easily find their way back (within the sites IA). Since research seems to show that user scan and suffice, it helps to make sure that those important elements (navigation, subnavigation, bread crumb trail, etc) are highlighted accordingly.
Lots more on this topic – but nice work!
Excellent way of putting it, Tim. I will have to remember that one.
@Nate: You bring up a good point – Users don’t read, they scan. Then, after scanning, if the content seems worthwhile, occasionally they will read it. Even then, there’s no guarantee because our society is so fast-paced. I suppose that’s why good IA is so important, so that if they ever want to find their way back to that page, it’s not too difficult.
great article,
this is a significant part of accesibility in webdesign, and this small list of examples is quite exhaustive of what is possible to make.
Yataaaaaaaaaaaaa !
Wow, I’m so honored that my navigation deserved an animated GIF. Now I know I’ve really made the big time. :) Thanks for the props Nathan. As others have mentioned, a simple concept not carried out often enough.
Honestly I think the main difficulty is that most (if not all) of the modern blog/cms platforms out there don’t make it that easy to do things like this. Back when I was using WordPress I had to hack it up with custom fields, crazy template code, and a few SQL queries.
Even now that I’m using Mephisto, I had to do my templates a very certain way (one I suppose now I should publish) in order to get the effect you captured in the image. If software built this in as a simple, almost default feature, it would probably become more prevalent.
Steve: Agreed, many CMSs could benefit from having this sort of thing available by default. By the way, I’m glad you liked the animated GIF. I was at a loss trying to explain what I meant, so I just threw together a cheesy info-graphic.