Just like the blueprints of a dream home or the outline of a well-written article, good website structure organizes information in a way that enhances the user experience and delivers pertinent information as quickly as possible.

In fact, most website visitors only become aware of information architecture when it is poor and stops them from finding the information they require.

Read on for more details and a case study. As usual, you can leave us your feedback at the end of the post…

Why Is It Important?

Even an optimized site with sleek design and compelling copy can fall flat without sound information architecture.  If prospects can’t navigate easily through a site, chances are they’ll get lost, feel frustrated, and leave to never return. And you can forget about converting them to customers.

For example, Starbucks offers two free hours of Wi-Fi in their cafes with your registered Starbucks card, but the actual process of registering and getting online is so confusing, it’s enough to send you to the competition. While most cafes give you a simple access code, Starbucks makes you jump through endless hoops to use this supposedly convenient feature.

Even though Starbucks is a hugely successful enterprise, missing the mark with this small function of their website is enough to make them lose possible revenue from the big draw of free Wi-Fi.  This example shows how navigation can directly affect conversion rates.

Information Architecture for the Ego vs. the Client

Just like web copy, information architecture should be customer-centric. When developing copy for a website, businesses tend to get caught up in themselves, writing what they want, rather than what visitors might want or need to read.

A visitor might be interested to learn about a business, but they mainly want to know what the business can do for them.

The same principle applies to site navigation. Rather than organizing information the way upper management prefers, navigation should be based entirely on how the website visitor needs to find that information.

This goes beyond organizing the information on a website into a coherent structure. You’ll need to know how potential customers will behave when they come looking for that information.

Case Study – Vancouver Bike Repair

For example, a recent Google search for Vancouver bike repair yielded several top results, including a bike shop called Bicycle Sports Pacific. However, a visit to their site gives the impression that bike repair is not actually one of their main services, since the term is nowhere to be found along the top menu. In fact, a link titled ‘Repair/Maintenance’ is buried far down the page on the left and leads to the bike maintenance products they offer – a dead end for someone looking for bike repair services.

A few scrolls down the homepage reveals a short blurb describing their bike repair service. It starts with the sentence ‘We specialize in expert bike repair’, but nothing on the site supports that claim. One would think that perhaps Bicycle Sports Pacific is not the place to go for bike repair considering that information relating to this service appears to be low priority on their website. There are no details on the types of repair services they offer or their rates.

A visit to Bicycle Sports Pacific’s Vancouver location, however, reveals that bike repair is actually one of their main services, with nearly half of their store space devoted to repairs. You would never know this from visiting their website. In fact, their website looks more like someone is trying to demonstrate how knowledgeable they are bikes in general, rather than giving someone looking for bike repair services the information he or she needs.

A much better example of customer-centric navigation is demonstrated in The Bike Doctor website. The tagline on the site reads ‘It’s fun + easy!’ and they’re right! The most pertinent information is arranged into easy and intuitive sections along the top and side menus. The homepage features a clickable thumbnail of their repair rates, and even a special promotion offering a $5 discount on your spring tune up when you mention their website.  SOLD!

These two businesses are essentially the same – they both offer bikes and bike accessories for sale, and also bike repair services, but their sites couldn’t be more different in terms of navigation. The Bike Doctor’s site is simple and broken down into clear sections, while the Bicycle Sports Pacific site offers endless information on cycling in general and how to choose a bike, while leaving one of their main services inadequately covered.

Doing It Right the First Time

Building a site that serves the needs of your potential customers starts with thorough research. You will need to know why they will visit your site, what information they will need, and the fastest, most intuitive way to deliver that information.

But how do you know how the user will behave? How do you organize everything into an intuitive structure? Here are some research tips:

1.  Get to Know the Audience
A good copywriter thoroughly researches the target audience before writing quality, customer-centric content, and your preliminary site navigation research should be no different. Get to know the audience by observing their behavior.

How can you do this? Ask a group of current or potential customers to provide information on what they do in a typical day. This can be in the form of a questionnaire or journal. You may also want to observe them in person to get a first-hand, unedited experience.

This background information will give you insight into the behavior of people who will likely visit the website, the type of information they’ll need in order of priority, and which information can be cut out.

2.  Develop Hardcopy Prototypes
Now that you have a better idea of the information you’ll need to include, you can break it down into categories. Print out sections under each category on separate sheets or cards, and give them to the same sample group to organize into a logical structure.

This process will give you further insight into the way your site visitors will want to find information, with common organizational patterns being the ones you’ll want to implement.

3.  Test Digital Prototypes
Build a very basic site according to your hardcopy research findings. Invite the sample group to come in and use the test site to find information they’re interested in, or to complete a desired task (sign up for a newsletter, fill out a form, etc.). Monitor them to track challenges and frustration, as well as wins. Ask them to note and discuss any difficulties they had during the process.

You can use your research findings from this step to make improvements and finalize your structure.

Other Helpful Tips

Aside from the information you collect during your research, here are some other points you should keep in mind when building a well-structured website:

• Ensure visitors know exactly where they are at all times by providing a visual cue (i.e. highlight the word ‘home’ when they’re on the home page).
• Ensure global navigation includes only the most important categories your visitors will need to access quickly (extraneous global buttons can lead them into unnecessary corners).
• Not every site needs an FAQ page. Technically, if you’ve done enough research, and built an intuitive site structure that delivers what your visitors are looking for, it reduces or eliminates the need for frequently asked questions.

Written exclusively for WDD by Rick Sloboda. He is a Web Copywriter at Webcopyplus, which helps businesses increase online traffic and sales with optimized web copy. He speaks frequently at Web-related forums and seminars, and conducts website content studies with organizations in Europe and the U.S., including Yale University.

How information architecture has impacted your sites and how do you use this principle?

Never Ending WordPress Business Bundle – only $14!

These aids don’t have an agenda or bias the way advertising does. Instead, navigational aids help people find the right path based on their interests.

Signposts are one type of navigational aid. They provide the information people need to make their own decisions while searching and surfing the web.

Should a designer worry about a website losing readers? Many websites compete for attention by luring audiences with vibrant illustrations, catchy typography and rich user interfaces.

In addition to being attractive, other websites strive to be useful. The goal of usability isn’t to get attention, but to get repeat visits. Advertising loses readers, in the sense that it directs them to other websites, whereas usability is about making sure they don’t get lost.

Like their real-world counterparts, web-based “signposts” are visual cues that guide people through new territory. In the physical world, people rely on landmarks, maps, signage and lines of sight to find their way through unfamiliar territory.

Online, one goes by descriptive links, navigation bars and headings on the page. Real-world and virtual signposts have the same purpose: to help people find the best path to their destination.

Hyperlinks Are Overlooked Opportunities

The web wouldn’t work without links. Yet visitors and designers alike often dismiss links as one-time events. Click, load and that’s it. But the right information can turn simple hyperlinks into useful signage that leads visitors to the information they seek.

Hyperlinks are only as meaningful as their clickable text. A poorly crafted link will leave people wondering whether the link is worth a click. The words in and around a link should inform people what the link will do (e.g. redirect them to another page or website, download a file, etc.) and what makes leaving the current page worth their time.

1. “Click here to browse our collection of detective and crime stories.”
2. “Browse our collection of detective and crime stories.”
3. “Browse our collection of detective and crime stories.”

The examples above appear to mean the same thing, but there are important differences:

1. The first example uses the phrase “click here.” The effectiveness of this phrase has long been debated. Both the W3C and major search engines state that keywords in links are more useful than generic phrases. That is, people searching for detective stories are more inclined to search for “detective” than for “click here.”
2. The second example gets the most links into the fewest words. Each link on its own is less specific than “detective stories” but may be more appropriate depending on how the content on the linked websites is organized.
3. There are two advantages to a link like the one in the third example. First, the link has keywords, which means there is no doubt about where it leads. Secondly, its total clickable area is bigger; small links require more precision from the visitor.

Design Adds Meaning to Links

Unfortunately, overwhelming people with information is possible. For example:

Read more about the history, sub-genres, proposed rules and famous characters of detective stories (external link to Wikipedia).

Read more about the history, sub-genres, proposed rules and famous characters of detective stories (external link to Wikipedia).

The link above tells people that they will leave the current page and indicates what they can expect to find, but it’s a lot to read at a glance.

With HTML, designers can add more meaning than words alone can give.

Read more about detective stories.

detective stories

Some things to note:

• We moved most of the text to the “title” attribute. Most browsers show the title only when the user hovers their cursor over the link, which reduces clutter on the page.
• We left “Read more about” outside of the link. Whether to remove phrases like “click here to…” and “see more…” depends on one’s style, but in general using as few non-keywords as possible is best.
• In browsers that support HTML5 and CSS3, the rel attribute indicates a link’s type. Designers who use CSS attribute selectors with approved rel values will be able to style links according to their relevance.
• We used an icon to indicate that the link will take users to another website. Icons can be ambiguous, but a hint is better than nothing.

A caveat: avoid repeating words from the clickable text in the title attribute. If you’re not telling your readers anything new, there’s no point including it. For example…

Detective stories

… is better than…

Detective stories

Effective Navigation Bars: More Than the Sum of Their Links

Any link can be helpful, but the best guidance a website offers should appear in its navigation bar.

A navigation bar is a list of links to major parts of a website. Navigation bars are usually placed at the top or left edge of every page on a website, and they vary in appearance. Well-crafted bars do more than just provide links. They:

• Give visitors a sense of the website’s purpose and priorities.
• Serve as a simplified site map.
• Denote the location of the current page within that map.
• Tell visitors where they’ve already been.

Even if they’re thin, navigation bars deserve more than to be relegated to the fringes of a layout. An ineffective navigation bar is vague or unhelpful and might have such problems as:

• Link text that could be found on any website. “Home,” “About,” “Services” and “Contact” may be accurate, but these headings are too generic to give a sense of identity or purpose.
• All links styled the same way. On a complex website, a simple list of links isn’t just unhelpful, it’s downright unfriendly.
• Links that point to the wrong pages or to pages that don’t exist.

Even if a visitor decides not to click, the link might still be a success. Let’s say a visitor wants a company’s email address. The navigation bar on the company’s website might offer many choices:

Home | Services | Your account | Services | History | Careers | Rates & policies | Contact

The obvious choice is “Contact.” And by being obviously wrong, the other links tell the visitor not to click on them. From a content-hunting standpoint, this navigation bar is saying:

No | No | No | No | Not likely | Maybe | No | Probably

Can a navigation bar be full of “no”s? Certainly, if the website doesn’t have what the user wants. Good navigation isn’t about providing the answer at any cost. It simply guides people to the content they want with the least ambiguity. The goal of an effective navigation bar, then, is to turn as many “probably” links into either “yes” or “no” links.

Signposts Are Tools

Like all tools, signposts are a means of crafting solutions but are not solutions themselves. The purpose of signposts is to simplify for readers, not to add a layer of complexity.

Web-based signposts shouldn’t lure people to their destinations. Rather, the designer should tell people what’s available and empower them to decide where to go.

Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a web designer who solves communication problems with better design.

How do you make content easier to navigate? What’s the most difficult website you’ve ever had to dig through? Share your stories in the comments section below.

Never Ending WordPress Business Bundle – only $14!

Deciding when, where and how to integrate or display a map on your site is the first step, the second should be what technology and illustrations to use.

If you’re all about interaction, JQuery, Ajax, or Flash are all effective technologies that hold their own ground.

Map illustrations are a dime a dozen however, a strong and balanced display of graphics, information, and colors is what makes an infographic stand out and reach its target audience effectively.

As designers, we’re constantly searching for ways to improve and style our designs, this is exactly what the following 30 infographics and sites display below; the breaking of rules.

Sites with Interactive Maps

Illustrative Infographics

Compiled exclusively for WDD by Liz Fulghum.

Did we miss any great examples? Please post them in the comments’ area below…

Never Ending WordPress Business Bundle – only $14!

Instead of pouring over figures and long reports to decipher data, an infographic can immediately make apparent exactly what a dataset actually means.

Below are more than 25 infographics that can be useful to web designers.

Some are incredibly practical, some provide information that might be of interest to designers and some just present data that might be interesting to those who design websites all day.

If you know of any good ones that we may have missed, please add them in the comments section below.

1. Web Trend Map 4

2. Period Table of Typefaces

3. Global Internet Traffic Map

4. Classifying Experiences

5. Flickr User Model

6. The Browser Wars

7. A Month of Spam

8. The Life of an Article on the Web

9. Online Communities Map

10. Map of the World 2.0 Mosaic

11. The Internet’s Undersea World

12. Search Engine Spider Traps

13. Google PageRank Explained

14. Building a Company with Social Media

15. SEO Check List

16. The Life Cycle of a Blog Post, From Servers to Spiders to Suits—to You

17. Software Wars

18. Who Participates Online

19. What 16 Million Colors Looks Like

20. Periodic Table of Visualization Methods

21. Periodic Table of the Internet

22. Country Codes of the World

23. Apple’s Tipping Point: Macs for the Masses

24. Infoporn: The Cost of Living on the Bleeding Edge of Technology

25. Map of All Yahoo! APIs and Services

26. Digital Media Weights and Measures

27. Global Color Usage with Respect to Time and Location / 2009 / SML + Adobe Kuler Pulse

28. Facebook vs. Twitter

Do you feel infographics are effective to display information? Please share with us any other infographics that can be of interest to web designers.

Never Ending WordPress Business Bundle – only $14!