Putting information architecture into practice

any suggestion is appreciated

[hairycoo]

I am planning to reorganise one of my sites with major growth in mind.

I have made a list of all topics (pages) which would go on the site now or later in the future. I've read Tedster's post on information architecture but I need some help putting it into practice.

From what I understand I will step into my users' shoes and sort the topics into 7 piles max. A pile for each user profile. These will be main menu items.

What if I have more than 7 profiles? How do I determine which is more important and/or how to combine them? What about overlapping topics? For example:

user1 searches for widgets1
user2 searches for widgets2
user3 searches for widgets3 but all 3 users are all looking for red widgets.

And sometimes users are looking for the same thing but using different wording.What happens to these overlapped items and differently worded items?

My biggest problem is figuring out and designing the actual navigation. The site will be pretty big eventually (approx 1000 pages). I am considering organising it in smaller themes subordinated to an overall theme so with each level the info will become more specific. There will be more than 3 levels. maybe 4 or 5.

The 1st level nav will go in a top nav bar. Each option will have a 2nd level nav which I will put on the left side of the page. Now what do I do with 3rd level navigation? And 4th and 5th?

How do I design multiple level navigation effectively? How do I include them without cluttering the page and making it difficult for the user to choose? At individual theme level, what nav options besides the 1st level one should always be present?

What is the right balance between depth and number of choices? I've read that info should not be more than 3 clicks further from the homepage but that seems unrealistic to achieve.

I am thinking that if a user ends up in a smaller theme he should be able to find his way around that small theme and be able to reach all available options in that theme should he want to.

I thought I knew how to design navigation but as you can see I am finding it difficult to apply what I know to bigger sites.

Any help is appreciated, if you know some good sources of info, please sticky me. Examples of sites with effective navigation and IA is also appreciated.

NOTE: The information architecture thread referenced here
can be found at: [webmasterworld.com...]

[edited by: tedster at 5:44 pm (utc) on Oct. 17, 2004]

[claus]

First, here's a link for you: [psychology.wichita.edu...]

That site is your friend. The solution to this specific problem isn't found on that site though, but it's full of inspiration for all kinds of IA issues.

>> info should not be more than 3 clicks further from the homepage

There's all kinds of "rules of thumb" for this. Remember that the thumb is just one of five fingers on your hand ;)

Here's another that suits your site better:

"if the user is enganged in a search for information, (s)he will be willing to click through to any number of levels, as long as (s)he is getting closer to the answer at each step" (i don't recall the source, i think it's Nielsen Normann Group, though)

Directories, like dmoz and yahoo, is built on that rule. At the top the topic is broad, then, as you move downward it gets more and more specific. The term for it is "hierarchical organisation"

>> What if I have more than 7 profiles?

You might think you have, but you don't. I'll have to publish this on my own site as well as here though, but let's get some feedback here. (this place is always full of good people, so i tend to use it as my own form of peer review.)

Okay, let's get started:

---

The three steps of three

This will seem counter-intuitive to you at first step, but just do it. It will not be easy, but not as hard as you think either:

1) Decrease the number of piles to no more than three groups. Ie. the two broadest possible groups and "the rest". Yes, three is a very low number, i know - still, it can be done. Try to get as much as possible in one of the two broad groups and as little as possible in the "rest" group.

If it turns out that "the rest" is a larger group than one of the other two, you should choose another topic/headline for the smallest one and re-sort the whole deck of cards. Your target should be to get the "rest" group as small as possible.

When you have two very large groups and one very small group, step one is done. Unless you can do another round to make the "rest" group even smaller.

2) Now, can you find a common name for the "rest" group? No? Thought so. That's allright though.

Your new task is to do exactly the same with group one and group two. Forget about "the rest" for now. After you've sorted group one and two into three sub-groups you will have:

1) Group a, topic A
2) Group a, topic B
3) Group a, "the rest"
4) Group b, topic C
5) Group b, topic D
6) Group b, "the rest"
7) "the rest"

See? You've got topic A,B,C,D now. You've got seven groups as well, but three are not intuitive.

3) Now, forget about A,B,C,D for a while. Take (3), (6), and (7) from the list above and make one big group out of it. Guess what? Sort that pile into just three groups: Topic E, topic F, and "the rest" doing exactly the same things as before.

When you're done with that you'll have:

1) Group a, topic A
2) Group a, topic B
3) Group b, topic C
4) Group b, topic D
5) Group c, topic E
6) Group c, topic F
7) "the rest"

Now, for completeness sake, take another round with group (7), but this time around don't split it up in three. In stead, try to fit the cards from pile (7) into the other piles. It might take a couple of rounds, but the result will be that group 7 becomes more focused.

---

As noted above, I call this three steps of three. Feel free to use the name, as it contains all the steps required in it, just don't pretend you coined it. Afaik, this is yet another WebmasterWorld first edition ;)

Hope this helps.

[edited by: bill at 8:12 am (utc) on Oct 26, 2012]
[edit reason] update link [/edit]

[hairycoo]

Claus that is a wonderful post, very helpful! But I still have a few questions ;)...

1. How do I label the piles so that it's usable and also effective for SEO. I will want my piles to use high traffic keywords as labels that may or may not express the breadth of the pile. Is there a way to strike a good balance besides using good sense?

2. I would still appreciate some suggestions about navigation, especially deeper level navigation. I see what you mean about users clicking on if they're confident that they're on the right track.

3. Home page navigation. I know this can to be different. I am keeping the top nav bar on all pages but I was thinking of having a group of links for each profile (e.g. students, graduates, professors etc) as well as important deep links. A very few number of them might point to the same page but have different wording targeting a different profile.

My problem is actually figuring out how to manage the links at every navigation level

1st level - top nav bar - it's there all the time

2nd level - left nav bar - the specific sub-pile options are there

3rd level - where would this go? would 2nd sub-pile options have to be present all the time? How do I avoid a large number of links on the page when building navigation?

Same for level 4 and level 5...

Thank you

[claus]

>> I will want my piles to use high traffic keywords as labels that
>> may or may not express the breadth of the pile.

Here's a good article by Brett Tabke on Search Engine Theme Pyramids [searchengineworld.com].

You will want to use your "money words" at the deepest levels, not the highest. Because? That's where you want your visitors from SE's to land. They should land at the topics that are most relevant to their specific query in stead of landing at the front page and then having to work their way down into the site.

---

>> suggestions about navigation,

You could do this in a lot of ways.

1) Alternating menu layout
One is to switch between horizontal and vertical, eg:

1) Top level - horizontal, top of screen
2) 2nd level - vertical, left of screen
3) 3rd level - horizontal, top, below top level
4) 4th level - vertical, right side of screen

2) Replacing menu layout
A second one is to replace your left navigation on deeper levels:

1) Top level - main subjects in menu
2) 2nd level - only subtopics of this level in menu ( + "up link")
3) 3rd level - only subtopics of this level in menu ( + "up link")

3) Hiding menu layout
A third is to have your full navigation present on all pages, but portions hidden depending on where the user is, eg.

1) Top level - main subjects in menu
2) 2nd level - main subjects and subtopics of chosen topic are visible
3) 3rd level - main + chosen subtopic + subtopics of chosen subtopic

4) Dropdown or dropout menu layout
These are similar to (3) but only level 1 is always visible. You have to move your mouse cursor over a menu item for submenu items to appear.

5) Additional navigation

For all the above, you should also use:

• a breadcrumb trail
  
• a site map
  
• a site search function
  

---

>> Home page navigation.

I read "home page" as "front page of site" - correct me if i'm wrong.

Your front page can have another layout than the rest of your site. Here's a research article on the three types of navigation typically found on front pages:

[psychology.wichita.edu...]

The authors refer to it as two types, that's because they don't realize that the orientation (horizontal vs. vertical) is just as important as the way the menu works technically.

I would recommend using two of them - the top horizontal navigation (with a very limited set of options) and either an index or a vertical menu.

Your problem with

>> as well as important deep links

Could be put eg. in a secondary vertical navigation on the right side, or in a "news / important / recommended" box on page.

[hairycoo]

You will want to use your "money words" at the deepest levels, not the highest. Because? That's where you want your visitors from SE's to land. They should land at the topics that are most relevant to their specific query in stead of landing at the front page and then having to work their way down into the site.

Agreed. The high traffic keywords I am talking about are not money keywords, they refer to users who are at the beginning of their shopping cycle. If they land on one of the sub-themes they can drill down to more specific topics, and that's where my money keywords are.

Thanks Claus for the suggestions on navigation. I think option 1 is not very usable because it would result in a large number of links. I will have some embedded links which will be very important, and don't want them to be overlooked. I know users look at content first and ignore navigation but too many links are noise in the background and can distract.

So far 2 or 3 look like they would work, I have issues with drop down menus. They make life easier for me, but not necessarily for my users.

Breadcrumbs, sitemap and search will all be there. Speaking of, where would breadcrumbs go best? Steve Krug says top right if I'm not mistaken but that corner is often overlooked, is it not?

I had read the wichita articles on structure and menus but while they offer valuable info, they're still a bit vague. Your suggestion is just what I was thinking of so that confirms what I thought would work best. Thanks Claus.

[tedster]

A different angle on Information Architecture that can often clarify things is to create "scenarios". You might also call this role playing.

The approach is to dummy up an imaginary user. Give them a name (it helps!), a demographic profile and most of all a task. You've already done this to a degree by recognizing that the "ready to buy" visitor should come in at a deep page and the more general "window shopper" should start closer to the Home Page.

But try to get a bit more specific with each of these phantom folk - even ask a friend or colleague to take on the role you've set up, and then ask them:

1. What other information (and links) will they want if they arrive at a page of each given level.

2. What information (and links) will be merely be a distraction or confusion at each given level.

THINGS TO LOOK FOR:
- Except for top level menu, you may want to treat each level's navigation differently - this role playing will help you see if that's true or not.

- You may see more of a need for a "related pages" box than a full-blown menu, at least for some levels.

- Even though an Information Architecture seems so logical and hierarchical, you may uncover a need for more cross-category redundancy. If you do, look for a way to accommodate it.

We've been working and reworking the IA of a client's site for over a year, and we're finding that we get the very best results with an almost maddening (for the developer, at least) level of cross-category links and redundancy. But the customer feedback now is that they never feel lost, which they certainly did a year ago.