Slide 1

Dawn Pedersen Art Institute Slide 2 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 rightbefore you get into construction and design. Slide 3 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. Slide 4 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. Slide 5 Your New Client: Mark Mark's got a ton of content, and all we know is he wants a great site. Slide 6 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. Slide 7 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 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. Slide 8 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.) Slide 9 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. Slide 10 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 Slide 11 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. Slide 12 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 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. Slide 13 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? Slide 14 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. Slide 15 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: Slide 16 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. Slide 17 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? Slide 18 Ambiguous Navigation Confuses Users Memories What can the user expect to find under "Memories"? Photos? Videos? Shouldn't those be under "Media"? Slide 19 Ambiguous Navigation Confuses Users Media This isn't a bad choice for a category. But again, would we find photos under "Memories" or "Media"? Slide 20 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. Slide 21 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. Slide 22 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. Slide 23 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. Slide 24 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!). Slide 25 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. Slide 26 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? Slide 27 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. Slide 28 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 Slide 29 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. Slide 30 Card Sorting It'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. Slide 31 Activity 3 (cont.): Sort the Cards Sort your cards into related groups Don't worry if you have leftover cardswe'll deal with those later Slide 32 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. Slide 33 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 Slide 34 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. Slide 35 Orphaned Cards In 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! Slide 36 Orphaned Cards Orphaned 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. Slide 37 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. Slide 38 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. Slide 39 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 confusedand our experience with the site will be negatively impacted. Slide 40 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. Slide 41 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. Slide 42 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 yourselfyou're designing for your audience! And if you aren't designing for yourself, why would you do a card sort by yourself? Slide 43 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. Slide 44 Activity 6: Group and Compare Team up with another pair Lay out your card sorts and compare between your two pairsremember 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. Slide 45 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. Slide 46 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. Slide 47 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. Slide 48 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 Slide 49 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 Slide 50 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 Slide 51 Using Word to Create Your IA Diagram Draw lines connecting text boxes Insert tab > Illustrations category > Shapes dropdown Select the first type of line Draw your line on the diagram (hold Shift down to snap it into a straight vertical or horizontal) Slide 52 Using Word to Create Your IA Diagram Draw lines connecting text boxes You can move or resize the line by positioning your mouse on the line or on the ends of the line, respectively You can send a line behind the boxes: Select the line, and right-click Order > Send to Back Slide 53 Refine your Site Hierarchy as an IA Diagram An 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! Slide 54 Activity 8: Create an IA Diagram Split 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 Word Split up sections/categories into subsections where appropriate Feel free to make last minute changes to the diagram structure if you really feel they are improvements Slide 55 Activity 8: Create an IA Diagram Use four colors for your text boxes in MS Word: One for your site title at the very top One for your main category titles One for subcategory titles which are within your main categories One for your content chunks