Navigation and Information Architecture

Navigation and Information Architecture Dawn PedersenArt Institute

Introduction • When 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 right—before you get into construction and design.

Introduction • In 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: Mark • Mark 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: Mark • Mark's got a ton of content, and all we know is he wants a great site.

Your New Client: Mark “I 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: Mark “I'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 tips—in 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: Mark “Food 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: Mark “By 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: Mark “I think we can use these categories for the main navigation (but you can change these if you find a better way): • Tips & Travels • My Notes • Memories • Media

Organizing Your Site's Information • A 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 Information • A 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 happen—like confused users leaving your site for someone else's. • Organizing your site's information well (and logically) is the difference between good and bad navigation—which means the difference between your users finding what they want quickly and easily, and your users being really confused.

Activity 1: Study the Content • Pair 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 Users • Chances 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 Users • Confusing 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 Users • Tips & Travels • Mixing categories, especially unrelated ones, makes navigation confusing. Just because the category sounds good, doesn't mean users will understand it.

Ambiguous Navigation Confuses Users • My Notes • This 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 Users • Memories • What can the user expect to find under "Memories"? Photos? Videos? Shouldn't those be under "Media"?

Ambiguous Navigation Confuses Users • Media • This isn't a bad choice for a category. But again, would we find photos under "Memories" or "Media"?

Activity 2: Revise the Category Titles • In 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&A • How 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&A • But 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&A • How 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&A • What 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 Architecture • Take 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 Architecture • Information 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 Sorting • How 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 Sorting • Card 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 work • A solid idea of your site's content

Activity 3: Prepare Your Content Cards • Using 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 Sorting • It's now time to do a card sort based on Mark's content. • The cards in each group should obviously be related—and their groupings should make sense to you. • These groups will eventually become sections within Mark's website.

Activity 3 (cont.): Sort the Cards • Sort your cards into related groups • Don't worry if you have leftover cards—we'll deal with those later

Creating New Category Titles • After 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 Titles • Look 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 time

Creating New Category Titles • An 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 Cards • In some cases, you'll find that cards don't fit anywhere—these 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 Cards • Orphaned cards come in two flavors. • You can have orphaned cards that didn't fit into another pile—however, you think that the content is important enough to your site that you create a new group with your single orphaned card.

Orphaned Cards • Then, 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 Cards • What 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 Cards • The 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 confused—and our experience with the site will be negatively impacted.

Orphaned Cards • So, 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 Orphans • If 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 Opinion • Up 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 yourself—you'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 Opinion • Ideally, 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 Compare • Team up with another pair • Lay out your card sorts and compare between your two pairs—remember that you may have identified the content chunks differently from the beginning • Did 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 results—you 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 Hierarchy • Once 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 Hierarchy • Working 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 screen

Using Word to Create Your Site Hierarchy • For each “card”: • Insert tab > Text category > Text Box • Type in your text • Select the text box • Format the background color: Format tab > Text Box Styles • Format the text color: Home tab > Font Color button • Right-click > Format Text Box… > Layout tab > In front of text

Using Word to Create Your IA Diagram • You can duplicate “cards” to save time • Select a text box • Ctrl+ C to copy • Ctrl+V to paste • Move the duplicate • Change the text • Use the Format tab to change the background color if you need to

Navigation and Information Architecture