Slide 1

Navigation and Information ArchitectureDawn PedersenArt InstituteIntroductionWhen it comes to the Web, users are impatient. They don't want to waste lots of time looking for the right button or wading through three levels of JavaScript pull-down menus to find what they need. That's why you've got to spend a lot of time getting your site's organization rightbefore you get into construction and design.IntroductionIn today's class, you will practice developing the information architecture, and therefore the site hierarchy, for a hypothetical client named Mark. This is the first step in helping users find where to go, and keeping them from getting lost.

Your New Client: MarkMark loves to travel. After college, he took a year off to backpack around Japan and experience all he could about the island nation. Now he's back and he wants to document his experience. He's asked you to build Mark a great, engaging website detailing his trip to Japan.

Your New Client: MarkMark's got a ton of content, and all we know is he wants a great site.

Your New Client: MarkI took a boatload of photos, both of people and landscapes (cities, mountains, etc.). I also have a lot of video clips I captured with my Flip camera, and I brought home a number of souvenirs to remember my experiences by. For example, I have here a collection of menus, maps, postcards, currencies, and my Japan Rail pass. I hope we can scan them in and use them too.Your New Client: MarkI'd like to include text I wrote about my year. I put together a travel log plus a more personal diary. I'd love to give advice about getting around Japan and tourist tipsin addition to suggestions for places to see and activities. I learned so much about Japanese culture and history! It's very different from American culture. So I want to write up some stuff about that and about learning the Japanese language.Your New Client: MarkFood is a big deal to me, so I'd like to include my notes about Japan's cuisine (especially sushi) and maybe some restaurant reviews. I'd like to review a couple of hotels too (I loved the Park Hyatt Tokyo.) Your New Client: MarkBy the way, I stayed in Tokyo and Hiroshima the longest, so maybe we could include specific info about those cities. In Tokyo, I was most entertained by the Tokyo Tower and the fish market. In Hiroshima, I visited the historic landmarks related to the A-Bomb. Finally, we might even showcase some of the nightlife/bars I visited in Tokyo and Kyoto. Your New Client: MarkI think we can use these categories for the main navigation (but you can change these if you find a better way):Tips & TravelsMy NotesMemoriesMedia

Organizing Your Site's InformationA website is all about communicating information. No matter how good your design is or how cutting-edge your layout is, if your site doesn't speak to your audience, it won't be nearly as successful as a site that says something, and says that something clearly.Organizing Your Site's InformationA huge part of how well your site communicates its content has to do with how its information is organized. If a site's content isn't organized well, all sorts of bad things can happenlike confused users leaving your site for someone else's. Organizing your site's information well (and logically) is the difference between good and bad navigationwhich means the difference between your users finding what they want quickly and easily, and your users being really confused.Activity 1: Study the ContentPair up.Get out a sheet of paper and a pen/pencil. Thoroughly review Mark's email and jot down all the potential content chunks for his website.Then, arrange these content chunks into the categories that Mark suggested above.What do you think of these categories? Were you able to easily sort the content chunks into these categories? Would a user be able to accurately predict what can be found where?Ambiguous Navigation Confuses UsersChances are you've found that these categories are unclear and difficult to work with. Thinking about what to name your navigation categories is important. It should not be a last-minute decision or afterthought.Ambiguous Navigation Confuses UsersConfusing categories will make it difficult for your users to find the information they're looking for. They also serve to make your site look unorganized and haphazard. Let's take a closer look at the categories we tried to work with:Ambiguous Navigation Confuses UsersTips & TravelsMixing categories, especially unrelated ones, makes navigation confusing. Just because the category sounds good, doesn't mean users will understand it.

Ambiguous Navigation Confuses UsersMy NotesThis doesn't really tell a user what they are going to find on this page. What are the notes about? Travel? Food?

Ambiguous Navigation Confuses UsersMemoriesWhat can the user expect to find under "Memories"? Photos? Videos? Shouldn't those be under "Media"?Ambiguous Navigation Confuses UsersMediaThis isn't a bad choice for a category. But again, would we find photos under "Memories" or "Media"?

Activity 2: Revise the Category TitlesIn your pairs, go back to your solution to Activity 1, and write in better, clearer category titles. You may also need to move around the chunks of content to match your new categories.Q&AHow long is too long for a category name?In a perfect world, you'd be able to find one word that describes all the content a user would find under a specific category. Unfortunately, that's not always the case. A good rule of thumb is to keep your category names as short as possible (one to two words), free of jargon, and as close to describing the content as possible.

Q&ABut I know what the link means; isn't that all that matters?Actually, that doesn't matter at all. You aren't building the site for yourself; you're building it for your users. Your number one goal is to make information on your site accessible and easy to find by your users. If visitors can't find what they came for, it makes no difference if you can.

Q&AHow can I tell if a category is ambiguous?Sometimes spotting category ambiguity is as easy as asking yourself if a user or visitor would understand what your categories mean without any background on the content or topic of your site. In some cases, it's not that easy, and you really have to step back and think about your content as a whole. If you have information on your site that loosely fits the theme or might be slightly extraneous (non-essential), your category names will reflect that, and they won't immediately click with the user. This is why thinking about your content before you choose your categories is so critical.Q&AWhat if I have content that fits into two different categories?Most likely, content fits into two different categories because you haven't done a good job defining those categories. Content should only appear in one place on your site. Come up with five or six good categories, each of which is different enough that there's not a lot of overlap. If you're still having trouble, you may want to try a card sort (more coming soon!).Keeping Your Site Organized with Information ArchitectureTake your time with organizing your site. Navigation is built on your organization, and nobody likes confusing navigation options. If you're struggling with defining great category names, it's time to develop information architecture beginning with a card sort.Keeping Your Site Organized with Information ArchitectureInformation architecture is just a fancy way to refer to the organization of the content you already have into groups that are meaningful and logical, both for you and your users. Sometimes thinking and navigation, or categories, gets you too far into thinking about how a site is going to look. Information architecture is all about taking a step back, and really looking at what sort of content you've got. How does it all fit together?Card SortingHow exactly do you organize your site's information? Well, there are lots of ways. One of the best ways is something called card sorting.Card sorting is a cheap and easy way to impose structure on your site's information. It's also a great way to see how other people (maybe even your potential users) organize your site's information.

Card SortingCard sorting also takes a step back from XHTML or even the Web in general, and lets you think about organization, not just navigation.To run a successful card sort, you need:A stack of 3x5 cards (colored index cards are nice, but plain white ones work fine too)A pen and a clear are to workA solid idea of your site's content

Activity 3: Prepare Your Content CardsUsing the colored index cards provided, select one of the four colors for your content chunks.Create a new card for each piece of content Mark wants on his site.Give each card a short, descriptive title. This should reflect exactly what the chunk of content is about.Below the title, write a brief, one-sentence description of the content. This description will help you remember what the content chunk was about when you sort the cards later.Write down everything! Nothing is too trivial or obscure for a card sort. Empty it all out onto the cards and we'll worry about navigation later.Card SortingIt's now time to do a card sort based on Mark's content. The cards in each group should obviously be relatedand their groupings should make sense to you. These groups will eventually become sections within Mark's website.Activity 3 (cont.): Sort the CardsSort your cards into related groupsDon't worry if you have leftover cardswe'll deal with those laterCreating New Category TitlesAfter you've created your groups, it's time to give each group a name. The name has to be short and descriptive. These descriptions may end up becoming part of your main navigation, so keep them focused on the content, but broad enough to contain the content they describe.Since you've already spent some time digging into Mark's content, try and come up with category headings that are different (and better) that what you came up with in Activities 2 and 3.Activity 4: Create Category TitlesLook at the stacks you made in Activity 3, and come up with short, descriptive titles for each stack.Choose a new card color for category names. Write each category on a new card of that color.Place the new category cards on top of your content card stacks.Again, don't worry about including your leftover cards at this timeCreating New Category TitlesAn easy way to record your card sorts is to take a picture. You can reference your picture later, and still move your cards around into different arrangements.Orphaned CardsIn some cases, you'll find that cards don't fit anywherethese are called orphaned cards. You might be wondering whether you've done something wrong, but don't worry. These cards are usually a sign that you are doing something right!Orphaned CardsOrphaned cards come in two flavors. You can have orphaned cards that didn't fit into another pilehowever, you think that the content is important enough to your site that you create a new group with your single orphaned card. Orphaned CardsThen, there are cards that don't fit into another pile but are so different from the other cards that you couldn't come up with a group if you tried (let's call these really orphaned cards.) Including orphaned content that doesn't fit into your site's information architecture always results in confusion for your user.Orphaned CardsWhat if, for example, the produce section at your local grocery store had a pile of toasters, a large display of beef jerky, and an entire wall of deodorant? Shoppers would get amazingly confused. We interact with the world around us based on the predictability of things. There is no reason whatsoever for deodorant (or toasters or beef jerky) to go in the produce section.

Orphaned CardsThe same holds true for the organization of a web site's information. If random content appears in a section of the site where we never assumed it would be, we'll be confusedand our experience with the site will be negatively impacted.Orphaned CardsSo, what do you do with orphaned cards? You've got two choices. First, you could change the content in such a way that it fits into another one of your groups. However, more often than not, that strategy just isn't going to work. The other alternative is simply to recognize the fact that the content doesn't fit into your website, and toss it out.Activity 5: Deal with the OrphansIf you have any content cards that were orphaned by your card sort, decide what to do with these leftovers.Don't actually throw the cards away yet!Each student should record your pair's final card sort in some way. A photo may be easiest, or you can record it on paper or in MS Word. Get a Second OpinionUp until now, you've done the card sort with a partner. In many cases, you'll end up doing it by your lonesome. But remember that you aren't designing for yourselfyou're designing for your audience! And if you aren't designing for yourself, why would you do a card sort by yourself?Get a Second OpinionIdeally, you'll want to run the exact same card sort with the exact same cards, but have someone else sort the cards. Try to choose someone from your target audience. If, for some reason, you can't find someone from your target audience, enlist someone else to help. At the very least, they will give you a second opinion on your site's information architecture.Activity 6: Group and CompareTeam up with another pairLay out your card sorts and compare between your two pairsremember that you may have identified the content chunks differently from the beginningDid the other pair sort the cards the same way you did? What different decisions did they make? Ask why!The ultimate goal is to come up with an information architecture for Mark's site that will not only meet the needs of the site (and Mark) but the user as well.Which Card Sort Is Right?Getting a second opinion on your sorts is important and often results in organization that you may not have initially thought of. But how do you know which one is better or which deserves more weight?Well, it depends. If five of your friends do the sort and all come up with similar resultsyou can bet that's probably the best way to organize things.Which Card Sort Is Right?However, you're the web designer. Sometimes having second and third options, and just tweaking your original sort, is all you need. Make sure that when you're done, though, you feel good about the organization you've come up with. You (and Mark!) are probably going to have to live with it for a long time.Arranging Your Cards into a Site HierarchyOnce you're happy with your card stacks and titles, you need to put some structure in place. Lay out your cards like a site map. Just take a bunch of leftover 3x5 cards and write any new group names you came up with. Spread those out on the table. Then, line up each "content" card below the appropriate "section" card. At the very top, create a new card that can act as an overall site title.Activity 7: Create a Site HierarchyWorking with your partner again, arrange your cards as an IA diagram.Individually, record your site hierarchy in MS Word using text boxes, set to "in front of text" so that you can move them around on the screenUsing Word to Create Your Site HierarchyFor each card:Insert tab > Text category > Text BoxType in your textSelect the text boxFormat the background color: Format tab > Text Box StylesFormat the text color: Home tab > Font Color buttonRight-click > Format Text Box > Layout tab > In front of text

Using Word to Create Your IA DiagramYou can duplicate cards to save timeSelect a text boxCtrl+ C to copyCtrl+V to pasteMove the duplicateChange the textUse the Format tab to change the background color if you need to

Using Word to Create Your IA DiagramDraw lines connecting text boxesInsert tab > Illustrations category > Shapes dropdownSelect the first type of lineDraw your line on the diagram (hold Shift down to snap it into a straight vertical or horizontal)

Using Word to Create Your IA DiagramDraw lines connecting text boxesYou can move or resize the line by positioning your mouse on the line or on the ends of the line, respectivelyYou can send a line behind the boxes:Select the line, and right-clickOrder > Send to Back

Refine your Site Hierarchy as an IA DiagramAn IA diagram is a lot like the "on the table" site map you created (and recorded) in activity 7. An IA diagram not only shows the organization of your site's content, but it shows the hierarchical relationship between sections and subsections of that content. The good news is, because you already took the time and considered a few card sorts, most of your work is done!Activity 8: Create an IA DiagramSplit up your pairit's time to work individually now.Based on your site hierarchy recorded in activity 7, build a final IA diagram of Mark's site in MS WordSplit up sections/categories into subsections where appropriateFeel free to make last minute changes to the diagram structure if you really feel they are improvementsActivity 8: Create an IA Diagram

Use four colors for your text boxes in MS Word: One for your site title at the very topOne for your main category titlesOne for subcategory titles which are within your main categoriesOne for your content chunks