homepage Welcome to WebmasterWorld Guest from 50.19.206.49
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

This 43 message thread spans 2 pages: 43 ( [1] 2 > >     
Information Architecture for the Small Site - part 1
Pile up the content
tedster




msg:617167
 8:39 am on Apr 7, 2004 (gmt 0)

I promised a few people at PubCon in Orlando that I would begin a series of threads about the basics of Information Architecture (IA). I'm not going to go crazy here, but I hope to cover a few basic ideas that can help anyone with even a smallish site.

BACKGROUND
Information Architecture is definitely related to navigation, but it is not equivalent to navigation. IA is a very young discipline that draws on Library Science and even Architecture itself, for some of its methods and vocabulary.

When the first companies began creating their web presence in the mid 90's, there was one very common flaw. They organized their online information according to their own internal org chart.

That's very handy for the departments within the company -- for instance, there's no confusion about who "owns" what content. But it proved quite baffling to the average user who only wanted to accomplish certain tasks, not learn the way the company was set up!

That's one guiding principle of IA -- it's the organization of information according to the USERS' purposes. So a company might organize their INTRAnet according to the org chart, but definitely not their public website.

WHAT CAN I DO HERE
In marketing, we often talk about pointing out benefits over features. Our prospect is always focused in what a product or service means to them.

We should follow a parallel principle in IA. The questions a visitor asks are "What can this website do for me?" and "What can I accomplish here?" -- not usually "What is your company all about?"

So as the final result of your IA work, you want to communicate what kinds of things the user can do. Secondarily, you also want it to be a perfect no-brainer to discover WHERE in the site that can be done.

Users will poke around a bit looking for the right spot if they know for a fact that they can do a particular task on this site. But you will lose them very fast if they can't even tell if their purpose is possible here.

PILES OF CONTENT
The first step I take when organizing a new site is what I think of as "piling up content". Unless this website is a re-vision of an exisitng site, then it's usually not realistic to collect only written documents and already prepared applications.

But it is essential to create a master list that contains a very detailed and granular accounting for what your user will see on the website at launch. Even if you have a big pile of content ready to go, you still need to expand that list to what types of things will be added in the foreseeable future.

For all but the smallest projects, I use a physical stack of index cards to create this content pile. One card, one item. Ideally, each card represents a single page in the end product of a site, although some articles or function will naturally require a set of pages.

SORTING THE CONTENT
First I create a table (in Word or Excel) using a master list wiht one item for each index card, or "content bit" -- and several extra columns following it. This is for record keeping, not the sort itself.

Now comes the first card sort. Take the index cards and see how you think a user would group them, like with like. Don't just make this a purely academic exercise - make it a game of role playing.

Draw up a short sketch of a particular visitor who falls within the site's target demographic. Make him or her real -- a name, age, job, hobbies, etc. Then try to get into their head before you do your first sort.

BALLS, BAGS and BOXES
Usually there are many ways to sort your content bits. As a simple example, suppose your site is about "balls, bags and boxes" and you have a choice of red, blue, green for each, and also "luxury" and "every day" versions. Of course this is simplsitic, but you can immediately see three differnt ways of stacking up the index cards.

In the real world you will often notice all kinds of ambivalence between your bits of content, and all kinds of frustrating overlap. When you've completed one sort, give each pile a number and enter that number in your table next to the title of the card.

Then look for another way to sort the cards -- drawing up a different user sketch and getting into that person's head.

TOO MANY CHOICES = NO CHOICE AT ALL
When you offer too many apprently equal choices to a user, they often make no choice at all. For this reason, aim for card sorts that generate no more than seven piles. Five is the ideal, and in my experience using five main divisions also creates the stickiest website.

So definitely make seven your limit, and try to create some five pile sorts.

Why seven? Over many, many years phsychological tests show that seven is the "break" spot for memory. People can easily and accurately repeat lists of words or numbers when there are seven or fewer. The minute you hit eight, the error rate spikes. The human mind tends towqard groups of seven -- don't know why exactly, but it's definitely true.

In very rare cases, seven doesn't seem to work. Then I look for the smallest piles and ask myself if these content types are really equivalent to the other piles -- do they all exist on the same level of importance?

Usually you can find a group that is easily broken off in a kind of auxilliary category - something that will not generate a main menu item but instead can be in a kind of supportive area. It might be certan specialized tasks, or rarely requested but essential support -- all kinds of things are possible. But don't go for any more than seven main categories.

CREATE MULTIPLE SORTS
If you've got a collaborator or two, ask them to do a sort for you. You'd be amazed how differently two people will sort out the same information. So do several sorts, using several people when possible. Record each set of results in your table, each one in a new column.

When you've recorded several ways of organizing the content in your Word or Excel table, then you can easily sort and resort the table to group your content according to each approach you created.

Part Two: LABELS FOR THE PILES [webmasterworld.com]

[edited by: tedster at 10:07 pm (utc) on April 23, 2004]

 

tolachi




msg:617168
 1:31 pm on Apr 7, 2004 (gmt 0)

Nice post. That kind of stamina must require intense conditioning.

I wanted to point out that there are some great books out there on the web design/redesign process. Part of which of course is information design. One that I can recommend is "Return on Design" by Ani Phyo. The below is my interpretation of some of the ideas I've encountered in Phyo's book.

One thing I that I think is vital is to bring the user further into the picture. There are a few ways to do this. Initially in the design process you may want to identify 2-4 users who fit your primary, and perhaps secondary demographic if applicable. For example men over 45 > $50k income who like to play golf. Develop a set of open ended interview questions that will draw out how they experience and use the site. There perception and experience of the site and what it contains may be very different than someone intimately involved with the company.

To further guide the design process you may want to keep in mind the 3 basic phases visitors will be in when they encounter you site.

"Wanderers" - People who are just surfing the internet. May be best served by and element that piques their interest.

"Seekers" - People looking for something specific. More likely to drill down logically through your site or use search.

"Action-Takers" - People who know the exact task they want to complete on your site. These may be power users or people who have decided to buy. They want quick easy access.

Another method is flesh personas who would be using your site in a certain typical way. These scenarios can be developed based on what you have learned from site stats, surveys, and the interviews with your target demographic users. You may want to check your scenarios against the experiences of users for accuracy. For an e-commerce site this might include the process from sight discovery to order fulfillment, returning a product, managing account info, placing a repeat order etc.... To quote Phyo "Scenarios are the starting point for future navigation, site structure, content, and pathways through the site."

You may discover through this process that people conceptualize you site based on tasks they want to accomplish, a strict hierarchy of information (regional drill down from the nation to state to county level), or certain audiences (for example alumni, students, and prospective students).

Different personas and scenarios will couple with site conceptualization that lead to specific ways of using site. The navigation, structure, flow of the site will need to be designed to accommodate them.

OK, enough paraphrasing of other people's work.

mifi601




msg:617169
 1:12 am on Apr 8, 2004 (gmt 0)

Tedster,

I am working on a site right now, where I chose to have 10 main categories. After your post I got very insecure and was wondering, whether there are exceptions to the '7 main categories' rule.

Mine is a travel site and I really worked hard, to get it down to 10 but maybe I have to prune more ...

On the other hand people do see all the menu options all the time. Does the rule still apply, even though they do not have to 'remember' the categories?

tedster




msg:617170
 1:21 am on Apr 8, 2004 (gmt 0)

My testing and other tests I've seen definitely indicates that 7 is a critical break point. However, notice that we're talking about 7 apparently equal choices. You can definitely find creative ways to offer more than seven choices total.

Can you see a group of two or three that are "more similar" to each other than to others? Can you offer their navigation in a separate spot? or can you create some visual distinction (different font size, color, position on the page, etc) that communicates that these choices are not the same as the others? Perhaps they can be moved into the header area, or lower dwon the menu, after a visual break, or only offered as inline links?

Your goal is this -- you want someone to glance at the main menu and feel that they can deal with your site easily. And yes, a group of seven is a major watershed in this area.

pageoneresults




msg:617171
 2:44 am on Apr 8, 2004 (gmt 0)

tedster, excellent post! I like your whole concept of sorting using cards.

I'm currently working on a project and doing my sorting in an online environment. We set up a working copy of the content structure of the site. We then build multiple navigation menus which I would refer to as your different stacks of cards.

Due to the type of development environment we work in, creating, modifying and moving cards within our stacks is easy to do. We can generate visual maps of our site structure. These maps are an excellent way to view the architecture of the site. They also end up being the starting point for various site maps and/or index pages within the site.

Purple Martin




msg:617172
 3:42 am on Apr 8, 2004 (gmt 0)

Great post tedster!

tolachi - I really like your way of classifying users as "Wanderers", "Seekers" and "Action-Takers". I'd like to suggest that for a money-making site, I would rank them the other way round for importance: Action-Takers first, with Wanderers being the least likely to part with their money. Consequently, I'd design my site to be easiest for Action-Takers to use, I'd then also take into account the needs of the Seekers, and finally I might put in a gimmick for the Wanderers - just as long as it won't distract the other people. Does this sound like a sensible way to go?

tolachi




msg:617173
 11:32 am on Apr 8, 2004 (gmt 0)

I want to back up tedster on this 7 category thing. I've read it in a lot of places and it seems to have held true for me too.

Purple Martin.

I've always thought that people start of as wanderers and seekers and then become action takers. Of course it all depends on your strategy. If you are trying to rope in wanderers and seekers before they become action takers I wouldn't ignore them. But i can imagine a site where action takers are to be accomodated, for example google. People want to do one thing and that is search, labs and all the other wandery seeker stuff is not up front.

If you are interested in more about this idea check out this post:

[webmasterworld.com...]

There was originally a url in that post, if it reads like there is something missing. It was a link to a research paper on occasionalization. I don't understand why it was nuked, can anyone enlighten me here?

Daily Sparring




msg:617174
 1:36 pm on Apr 8, 2004 (gmt 0)

That is really great stuff..... I just spent so much time working on my site, now you are going to make me redesign it. Thanks a lot :) I have never thought to look at it that way. I look at competitors and think what are they missing that I the consumer would like. Now, I won't care what they are doing, as long as they are staying away from here....kidding.....sort of.

john_k




msg:617175
 3:05 pm on Apr 8, 2004 (gmt 0)

I first encountered the rule of seven choices while working with automated phone systems. That industry really picked up on the rule because they had a very good means of tracking the results. When people don't know what option to take, they hang up (abandonment) or press the key to replay the menu.

Anyway, one method I have used to circumvent this on websites is to offer two sets of menus. They both need to be in distinct, yet prominent areas. Many designers abhore the "inverted L-shape" design, but one of its strong points is that it lets you offer two navigational groupings. So if each grouping has seven or fewer choices (I try to limit one of them to four or less), the visitor is not overwhelmed.

tedster




msg:617176
 5:07 pm on Apr 8, 2004 (gmt 0)

One of my most successful clients has used the inverted "L" for five years and there's no reason in the stats for them to change. They get constant feedback that their site is extremely easy to use, and with 1600 pages of technical content, that's saying something. They only introduced a site search when the hit 1100 pages.

One of the areas people overlook when aiming for 7 (and as I said, I see the very best results at 5) is that most sites have sets of utility pages that are only needed in particular moments. As long as that information is easily found, it really doesn't need to be a main menu selection.

HOME
In a pinch, why not just link this to the logo and then let it alone

CONTACT - ABOUT - WELCOME - WHO WE ARE - INTRO - LOCATIONS
Often a big excuse for corporate-speak blah blah blah, and not an attractive click grabber as a main menu item.

I like placing basic contact information in the footer of EVERY page instead of giving it a dedicated spot on the menu. If there is a group of "utility style" information that is not part of the core of the website, why not group it somewhere else on the page instead of part of the main menu.

After all, this is information that is mostly of use once they are essentially converted. When the utility stuff is tucked away elsewhere, then the main menu can really grab the eyeballs with it's message of:

USING WIDGETS
LUXURY WIDGETS
CHOCOLATE WIDGETS
CUSTOMIZED WIDGETS
etc.

mifi601




msg:617177
 6:51 pm on Apr 8, 2004 (gmt 0)

HOME
In a pinch, why not just link this to the logo and then let it alone

I did just that and then one of my very first test users said, 'how do I get back to the first page'

Personally I hate 'home' links but there is definitely a 'want' or 'need' out there for the average user (if there is such a thing).

tedster




msg:617178
 7:45 pm on Apr 8, 2004 (gmt 0)

'how do I get back to the first page'

Only someone who began using a website at the HomePage would ask this, right? And since this was a test user, they did not arrive from a search engine or a PPC ad with a real purpose in mind - although it's highly valuable testing is still a bit of an abstracted situation. So I'm not sure this is really a problem for real world visitors.

However, people who are helping to develop a website often think of the information in print terms, where there really is a "first page" and a linear flow of information "down" from there. As we all know, this is not the way the web really works.

When in doubt on any situation like this, I test. So far, I've never seen the lack of a text link for HOME hurt website conversions. And of course, if find you do need the link, there are many other possibilities in addition to only linking the logo.

Sometimes I make home page the LAST link on the menu. That way the visitor's eye gets to take in the story of the website first. And as the last menu element, it can even be ssparated by extra space , or style, etc, so it doesn't look like one of the "equal" choices but it can still be found by those who want it.

Chndru




msg:617179
 7:56 pm on Apr 8, 2004 (gmt 0)

TOO MANY CHOICES = NO CHOICE AT ALL

Very well said. Now, I know, why i use MyWay :)

isitreal




msg:617180
 1:19 pm on Apr 9, 2004 (gmt 0)

If there is a group of "utility style" information that is not part of the core of the website, why not group it somewhere else on the page instead of part of the main menu.

Could you give an example or two of possible places you'd put these kinds of utility links? This problem has bugged me for a while now, but I haven't been able to think of a good solution.

This information architecture article is so sensible that it makes me want to redo a bunch of my sites.

john_k




msg:617181
 1:33 pm on Apr 9, 2004 (gmt 0)

...give an example or two of possible places you'd put these kinds of utility links?

"Utility" links would be the ones you always expect to find on every site: Privacy Policy, Terms of Use, Contact Us, etc.

Also, the group that Tedster mentioned (CONTACT - ABOUT - WELCOME - WHO WE ARE - INTRO - LOCATIONS) could all go under one link titled "Company" or "Organization," or "All About Us", or anything along those lines.

isitreal




msg:617182
 1:39 pm on Apr 9, 2004 (gmt 0)

Thanks for the quick reply. Given how few links 5 to 7 gives you to work with, would you recommend using one of those for an overall 'about us' type link like you suggest, or would you recommend putting it somewhere else altogether, sort of like the discussion of where to place the 'home' link, or like having the 'contact' link always on the bottom of the page? If it were placed somewhere else than the main nav, could you think of a logically accessible location on a page?

bufferzone




msg:617183
 1:40 pm on Apr 9, 2004 (gmt 0)

Could you please post the link when part to comes out. With the posting volume on webmasterworld one might miss it, if you post when itís night in my part of the world

john_k




msg:617184
 2:03 pm on Apr 9, 2004 (gmt 0)

...would you recommend using one of those for an overall 'about us' type link like you suggest, or would you recommend putting it somewhere else altogether, sort of like the discussion of where to place the 'home' link, or like having the 'contact' link always on the bottom of the page?

I think that you would want to apply the process that is the focus of the msg #1 in this thread. See where it shakes out with the other information you have to present to your users. Does that link stand on equal footing with the others? So it's a case-by-case basis that depends on your site.

isitreal




msg:617185
 2:32 pm on Apr 9, 2004 (gmt 0)

Ok, thanks, it's a lot to digest, but this stuff really makes sense, although obviously it means you have to think a lot more about the site navigation than just whipping out another nav item for a new section, but it's obviously worth it in terms of long term useability. I'd put tedster's posting top of the list of 'things I wish I'd known when I started'....

tolachi




msg:617186
 6:15 pm on Apr 9, 2004 (gmt 0)

The way amazon groups the cart, wishlist, account, and help navigation above the main category navigation is brilliant. Also, notice that even though they have a bajillion areas of the site they limit you to 7 other tabs when you hit the homepage.

carolynf




msg:617187
 8:53 pm on Apr 9, 2004 (gmt 0)

I have read that directory editors look for those utility links on the main menu as a criteria for inclusion. It is also my impression that their presence at the bottom of a menu list is becoming the dominant standard in web design.

tedster




msg:617188
 9:30 pm on Apr 9, 2004 (gmt 0)

Also note Amazon's solution (now used by Google) to use a link that says "More". Amazon is particularly crafty in the way they choose which stores they will show any particular user.

Especially since recent testing has shown that the "3-click rule" is fiction, no one should feel compelled to show their entire website structure on every page. We should just make sure that our visitors can clearly see:

1. What information/functionality IS available (or is possibly available)
2. Some obvious click trail that will get them closer to it.

With just those two factors, visitors will be OK, even with very long click trails -- in the usability tests I read, as many as 20 clicks! Of course, they are even happier with click trails as short as we can reasonably make them.

Purple Martin




msg:617189
 11:05 pm on Apr 12, 2004 (gmt 0)

HOME
In a pinch, why not just link this to the logo and then let it alone

You'd be amazed just how many average surfers don't know about the 'convention' of linking the logo to the home page. They've simply never noticed that it's there!

I've often watched people who have been using the internet for years just use the back button to return to the home page, or if they didn't start from the home page they quickly give up and go to Google. I think it's vital to include a visible (i.e. text) link to the home page.

mifi601




msg:617190
 7:29 pm on Apr 13, 2004 (gmt 0)

I think what Tedster was saying is that most users come in sideways and do not really need to know where 'home' is.

they should know though where they are and what else they can find on the site.

Maybe wasting a special main category link to the index page is in effect not that important. most people who come in through the main page will still use back (and on top of that the IE button?!) so that actually sounds like an argument that one really doesn't need to show the link very big ..

tedster




msg:617191
 7:41 pm on Apr 13, 2004 (gmt 0)

Very well said. I am more and more convinced that on a well developed website the Home Page is nothing but an information backwater (and the "intake valve" for PageRank).

I have never seen the HomePage for many, many sites that I visit quite regularly. Might be fun one day to go and check them out, but I can certainly function quite well without it.

stevenb 1959




msg:617192
 8:32 pm on Apr 13, 2004 (gmt 0)

A website is like a business plan, laid out to flow from one item to the next with your related choices right before you. This Information Architecture is similar to the basis of directories, which as you hear from comments in the forum "directories are top results in the serpes"

The world of search results determining factors are presently changing in a 180 degree direction to a more absolute parameter settings to combat everything that SEO overdo up to now.
Alot of educating just like tedster is doing here is needed to get the web society on the same flow as the new algos.
From what I see of the new algos they are very well thought out and practical.
thanks Ted for a interesting topic and I look forward to reading more.

zulufox




msg:617193
 9:13 pm on Apr 13, 2004 (gmt 0)

THANK YOU SO SO MMUCH for this thread!

I'm actually working on a complete rework of my site and I have been dying to find some advice!

THANKS!

I cant wait to see youyr other threads

universetoday




msg:617194
 12:48 am on Apr 14, 2004 (gmt 0)

This is a great way to attack the development of a website. Any developer knows that the client wants to see what the website is going to look like, but that's putting the cart before the horse. If you develop the look and feel before creating the IA, you're looking at multiple redesigns as the content gets built up, and your website needs to change to accommodate the content. Hours and hours of copy-paste, copy-paste, copy-paste.... yeesh.

Here's the process that I go through:

1. Explain the process to your client. It's going to freak them out, so you need to make sure they're comfortable with the methodology. If not, they're going to be nagging you for a day they can see what the site is going to look like, and that's wasting your time (and their money).

2. Develop the information architecture of the site. Start with the high end "chunks" of information that you want to have in your site and then drill down until you've got a really useful outline of the website. Think about your website from the visitor's point of view. Why did they type in your URL? What information are most people looking for? Put that on the homepage, or make it easily accessible. It's also important to consider how the website is going to change over time. Is the homepage going to update once a day? How will material flow around on your site to handle that?

3. Create a paper prototype. I create a mockup in Microsoft Word using the tables. Remember that this is just a way to organize the information so you and your client can test out the website to see if everything's there. Each piece of paper should contain the overall contents of a webpage. So, the homepage would be one piece, and then the sub-navigation pages are separate pieces of paper. You are the webserver and your client is the webbrowser. They say what they click on, and then you present new pieces of paper that demonstrate the different subsections of the website. You'll immediately see places where your outline is incomplete.

4. Create an HTML prototype. Make something that allows someone to fully navigate your website, but doesn't contain any "look and feel". The more basic you can make this the better. You want to be able to click every navigation link that will exist in the website. Once again, consider what you've built from the point of view of your visitor. Is this easy? Is it the fastest way to drill down to the bottom of the content? Make changes now while they're easy to do.

5. Write every single word of content that's going to exist on your website. Every button title, every section-head, every callout, all the text... everything. Sounds hard? Well, you'll need to do it eventually anyway, you might as well get it done now. Clients typically overestimate their ability to write or prepare content. Every single word.

6. Put all the content into your HTML prototype and continue testing it to make sure that the text works in your site. Edit it down to make it shorter. Give lots of people a chance to try out your "site" from the mindset of your customer. If you've got budget, so some focus group testing with real customers/visitors to see if what you've put together wows them. Once again, the point here is to make edits when they're easy to make. Once you're done with this step, you should have a fully navigable website that is utterly lacking any look and feel.

7. At this point the client is probably begging and pleading to know what their website is going to look like. Okay, now's the time to design. Mockup the site in photoshop with the usual three choices. Let the client pick the direction they like and then turn this into HTML templates. Get their approval of the templates and then implement them to build the website. You want to throw away the HTML you developed for the prototype and incorporate the content into the new templates you created. The reason you do this at the very end is so that you only have to do this once. Chances are the client is so comfortable with all other aspects of the website that they'll have nothing else to change. You won't have to go broke while you develop their site.

Hope that helps!

Chris_D




msg:617195
 1:07 am on Apr 14, 2004 (gmt 0)

Why seven? Over many, many years phsychological tests show that seven is the "break" spot for memory. People can easily and accurately repeat lists of words or numbers when there are seven or fewer. The minute you hit eight, the error rate spikes. The human mind tends towqard groups of seven -- don't know why exactly, but it's definitely true.

Exactly why local telephone numbers were only ever 6 or 7 digits max in the old days. A few years back (here in Australia) to expand number capacity, they went to 8 digit numbers. So they added the numeral '9' infront of the old seven digit number - so most people actually remember the number as a seven digit phone number - with a 9 in front of it....

NazaretH




msg:617196
 1:50 am on Apr 14, 2004 (gmt 0)

I found that many issues discussed ehre are covered by Steve Krug in his "Don't make me thinks" book. Very recommended reading for those interested in the topic.

So,
You'd be amazed just how many average surfers don't know about the 'convention' of linking the logo to the home page. They've simply never noticed that it's there!

S.K. notes that although this "convention" is rapidly getting more and more popular, there're still people who look for the HOME link, so why not placing a small HOME text somewhere on the logo image or near/under it. Just everyhere on your site except for the homepage. And it is also important that your main navigation should be simple and prominent, so nobody would actually need to see the homepage.

As for ABOUT US / CONTACT US / etc links... there is also a "convention" that they are likely to be found at the page footer, so why not drop them there?

This 43 message thread spans 2 pages: 43 ( [1] 2 > >
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved