Intro to Information Architecture

1. Welcome: Welcome to introduction to information Architecture. My name is Julia Davari, and I'm excited to walk you through this overview of information architecture. We'll talk a little bit about history a little bit about disciplines that make up information, architecture, the delivery bols and information architect produces and how to create a site back. Let's get started. Did you know the term information architecture has been around since 1976? It's actually been around a little bit longer than that. The term was used a few times here and there. A few papers, but it really became popular in 1976 Richard Saul Foreman. He gave a keynote talk at a conference. The Information Architecture Institute Conference in 1976 about how information needed to be architected in our digital age. Richard Saul Warm It is a graphic designer and architect building architect who really popularized and created the field of information architecture as we know it today. Fun side note. He's also wanted co creators of the Ted talks on Ted conferences. So what exactly is information architecture? Well, it's professional practice and field of studies focused on solving the basic problems of accessing and using vast amounts of information. So what exactly does that mean for us today? Obviously, the advent of the Internet has changed things a lot, so you commonly might have heard of the term information architecture. When you talk about the design of websites or APS when discussing wire frames, content labels are navigation. Today, an information architect is primarily a draft, and it relies on guidelines, best practices and professional expertise. In other words, information architecture is not a science but an applied art. And so the Job Information Architect was primarily focused on the identification and definition of site or APP content and its functionality, as well as underlying organization, structure and nomenclature that defined the relationships between a sites content and its functionality. 2. Disciplines: Let's talk about the disciplines that make up the field of information architecture. There are three key disciplines building our conjecture. Library science in cognitive psychology will go through some of the main aspects from each of these disciplines and how they relate to information architecture itself. Library science is the study of how to categorise, catalogue and locate. Resource is these used everywhere, from traditional libraries to museums, science labs and hospitals basically anywhere where you're in a large space and you need to find your way around, usually by using signs. Um, if you're familiar with, like the airport, for example, and how they have different terminals and gates. It's another way of categorizing things and how to locate that. Lots of industrial design, information, architecture and obviously, library science use thes ideas to create organization schema. Cataloguing itself is the process of creating metadata, which is data about data and assigning it to content in order to find it again in the future. So if you're familiar with S CEO, for example, search engine optimization when you're searching for a key word that is metadata or the actual data that has been attributed to the Web page in order for you to find it. There are many other things that can also fall in this category. Things such as hashtags could be considered meta data. Keywords, when you're searching for something, are usually found within metadata or the actual data itself. So cataloguing is very important to our digital age. Archiving or the process of archival science is building and curating archives that are filled with content, which may need to be edited or removed in the future in order to maintain the integrity of the archives. So you may be familiar with this, such as reading Blonde Post. Things are organized by date. Um, do you need to keep every block post? If it's 10 years back, maybe you need to remove some of those. Um, really Understanding what's relevant to your audience is an important part of archival science. Cognitive psychology is the study of how the mind works and what mental processes take place there. And I A's primary focus with cognitive psychology are three important concepts. Cognitive load, mental models and decision making. Cognitive load is when you have information in your head and then you can add any more because you'll just forget it. Things like remembering a shopping list or remembering phone numbers. One way to remember phone numbers, which you're probably familiar with if you're in the US, is we Chunk Thumb Chungking by doing 1st 3 numbers are the area code. The next three numbers are your prefix, and the final four digits of your own number are specific to you and a unique identifier. So by breaking it up into 33 and four, it reduces the cognitive load of remembering a phone number than if you had strong all 10 numbers together. Mental models are the associations of how you think something works based on what your prior knowledge is. So if I get into a new car and there is something there that I have never seen before, all the prior knowledge I have about everything I've interacted with in the world up to that moment will make clues for how I think that unknown thing should work or be that is a mental model and then finally, decision making, obviously making decisions, how to decide between multiple things or two things, or something that the information architect really focuses on when deciding on the language to use for things such as metadata for things such as the labels on a website or content on a website. And finally we have building architecture. Architecture itself is both a process and the product of planning, designing and constructing buildings or any other structures. So you're probably familiar with things such as blueprints from building architecture. Wire frames are the blueprints of a digital content. An information architect might decide how those are organized and the relationships between the content on these different screens. 3. Deliverables: We've talked about the history of information architecture as well as the fields or disciplines that make up the field itself of information architecture. Now let's talk about what deliver bols and information architect actually produces. It's important to keep in mind the information architecture is documented and spreadsheets and diagrams not in wire frames, visual mock ups or prototypes. The most common delivery bols associated with an information architect. Our site maps, content inventories, content audits, content models, mental models, taxonomy, ease, metadata, information organization, scheme us and labelling systems will go through an example of each of these Next. First, we have the example of a site map. The site map is usually hierarchical in structure and indicates various relationships between content on a website or an app. We'll go into more detail of site maps a little bit later. Next up is an example of a content inventory. Content Inventory is a spreadsheet, as you can see here that goes through the existing content of a website or an app and indicates what is there in order to review it and see what might need to be archived, deleted or edited. The calm on the very left Page I d. Those numbers actually come from the site map, and the numbers themselves indicate the level of hierarchy and where they are located, within relationship to other content on the site. The most common things included in a content inventory are the page i D or site map I D. The current U R L of where that content is located. The content description usually the screen or page title, which here is known as name and topic. And then it can also include other things, such as medic e words or description or the type of content located on that screen. This one has some other things, such as status 200 means the pages live. 404 means the page cannot be found. The Rio one means the page has been redirected to a new page. This is not as important, but the content inventory can have as much information as you would like to capture, but it's very important to have those key things I mentioned earlier, and then you may include others as needed. A content model is how content on a page and remember content could be anything from an image to a phrase toe, one word toe multiple words to you I elements and how those things are related to each other. This is a really good example of someone's content model for a specific page in this example. For the Apple Web store, this is an example of a mental model. These were popularized by someone named Indie Young. He was a professional U X consultant. She has many examples as well as a whole book about the topic. If you would like more information, basically, the top part of the mental model is what a person or vehicle actor is thinking and doing in a linear fashion. And the bottom part is what the organization or business, um can do for that person. Or could be opportunities related to the, um, model or what a person is doing. So this middle lying dark green line is what we call the line of interaction between the company and the individual, and then you can see it's a very linear structure and specific phases, so that is the basics of a mental model. Next up is a taxonomy, so this is not example of a deliverer herbal specifically, but what a taxonomy looks like on a website, so you're probably very familiar with books, So this is from good reads. So we have categories after at a bookstore, a library or online Howard books organized. So there's usually genres. And so here you can see the different genres on the left and then within that you can organize things in other ways. And here it showing how many people have the hunger games on their shelves. So you have young adult, and then you can drill down into sub categories. So taxonomy is the labeling a labelling of categories of how content will be organized. Meta data, as we talked about before, is put together in a way that there is the structure and then the values. Um, so a very common example are like movies or TV. So if you're familiar with I am Devi, there's the title of the episode or the movie, um, the description of that. So the structure is titled Description, Creator, date and type, and then the actual content or values that go in that structure are listed on the other side. So that's a very common thing on another good example of this is If you have, say, a drop down menu or some other kind of menu or text field, what kind of content can go in there? How many characters are allowed in there? All of this stuff is related to metadata delivery herbal and over here in the right corner , and you can see if you have metadata. So here is what we call the field name or maybe the U I element. And then what type of data goes in there and then an example of what that might be then how that relates This is an example of an old portal page to the taxonomy. So we have title and then the description of what kind of content is in this category. So this is a list, and then it says there's computers and what goes under computer. So there's the subject, computers and its programming and languages and a specific language. So that's metadata. So it's a lot of thinking of specific words, what they mean and how things relate together. Finally, we have an example of an organization schema, which is similar a little bit different. So if you have, um, an example on the left is a type of information. So we have, like airline or corporation or educational organization, whether the specific types that those convey be, for example, if you have, like radio buttons or some other kind of indicator where someone has to make a decision. So under educational organization you have a college or university. There could be an elementary school, a high school and middle school, preschool or just school. Um, so if you are doing, say, radio buttons as options on Lee, these options would be available. Nothing else would be available. This is to give to developers to know what to code, as well as knowing how the structure of the content fits together within, say, the back end database. And then finally, we have a labelling system deliver herbal so there might be, in this example, the actual topic of the page on the left or what we're gonna label it. Then what is the label on the actual page itself? So if it's the communications page, actual page header would be life hat communication, and then this hearer says, Title on brackets. This is metadata. So what kind of metadata will be on the page so that When you search for the page, what will you find? So we have actual label of what the content is the actual title of the page, and then the metadata related to that page. 4. Sitemap Pieces: We've talked about the history of information architecture, the disciplines that make up information, architecture and them deliver bols and information architect produces. Now let's talk about how to make one of those deliver bols. That's best for every designer to know how to do. And this is the site map. The pieces of the same app are boxes, lines, the structure of how they're organized, the levels of hierarchy, the labels and a legend. It's important to keep in mind the difference between information, architecture and navigation. Many people use these terms interchangeably, and that is not correct. Information architecture is the information backbone of the site. Navigation refers to the elements in the U. I allow users to reach specific information on the site. So navigation is the visual representation of how users get two different pieces of content defined by the information architecture. So starting out with a really simple example will look at the pieces of a site map. First we have the boxes. We have a hierarchical structure, starting with level zero. We have lions, then we work our way down the hierarchy. Level one, level two and level three. This is a really simple outline, and we'll go through more detailed examples now. This is an example that I did many years ago, and so you can see we have a legend. We have boxes and we have lines and we have a hierarchical structure. Um, we have the main home page. It doesn't always have to be the top, as we shall on that outline. It could be like this, but some indication that is the home page. Our main first screen needs to be indicated. We have our lines here indicating the primary navigation, which is our level one yellow. And then we have the content that lives in each of those categories. This is a simple site so that it only has a few pieces of information and is not as detailed. Is some other site maps. Let's look at some of those now. Here's an example of another site map I did years ago, and you could see here we have the home page as level zero at the top, and then we work our way down the next level. There are seven items. You want to organize them in order of importance, so we have one through seven. That's our first level and probably our primary navigation. Then we have the second level, which is all the things that live under each of those pieces of navigational, the content, and then we go down a little bit further and we have another level of navigation. It's important to note that if you're crossing lines to have a little hump here, this indicates that it's crossing through and not breaking it. Um, it's also important to have numbers. You'll notice the last site map I showed to not show the numbers, but it's best practice to always include those to indicate the hierarchal level and location of that content, as we saw with the content inventory example. These can then be reference for parts of the site later, another example. Here we have the home page, then we have the main pages are making primary navigation and then all the content below that you can see this is a very deep site, but not very broad. We're here. We have maybe footer or other kinds of navigation that's not as important. And then we have little icons here that maybe indicate a type of a page. However, this one doesn't have a legend, which is best practice toe. Always include a legend. Then here's maybe an annotation. You can also annotate your site map if there's extra comments you want to make. 5. Navigation Types: we talked about the structure of how to create a site map. So now let's talk about whether different types of navigation that conditionally represent some of that information architecture. So remember, there's a difference between information architecture, er and navigation. Navigation is the collection of user interface components that make up how people move throughout a site or app. The primary goal of navigation is to help users find information and functionality and encourage them to take desirable actions. Remember that piece from cognitive psychology about decision making? This is where that comes into play. Navigation components can include global navigation, local utility, breadcrumbs, filters, facets, related links, footers and so on. Let's go over these in a little more detail. So once again, the types of navigation, our global or primary these can be used interchangeably. We have local navigation, utility, navigation, footer in context or faceted navigation. These are the most common types of navigation you'll see on an APP or a website. Let's look at some examples here. We have an example from target dot com, so the navigation that you see usually on the top right of websites is usually a little bit smaller than the main navigation, um, is what we call utility navigation. You can see that Target has quite a bit of things up here, including favorites, which is shown by an icon versus words. And some things have icons and words. So do be careful when designing your navigation that you're consistent and try not to mix things like they do here. Then we have what we call our global or primary navigation, so they've used their logo for home. Then we have the categories which you can see is a drop down deals they included. A big search bar is part of their navigation. You can or do that if you wish. It's not a requirement. Then we have the my account and sign in and then the shocking cart. So this is global navigation, very common for e commerce sites. And then I included here also the footer navigation. So sometimes you see footers that are really tall with loss of information. Target has used drop downs instead, Um, and then they've also used um, the footer. Navigation is usually also you fire the privacy stuff, um, terms and conditions, anything like that, so you can notice they have all these different styles of navigation, which is something to keep in mind about how you design your site and your navigation so that people are clear. What is navigation? What is actual content? Personally, I don't think Target did a very good job, but that is my personal opinion. And I am not on the team. So I don't know what other facets or decisions went into making the decision to organize a navigation like this. Next, we have another e commerce site, Williams Sonoma. So you can see they have a huge utility navigation at the top. It's a lighter ray, Um, also sort of slightly different styles where we have sentence case. All lower case. This is maybe Camel case again. Really tell, um, Kamel case here. Then there's some bad programming here where things are put together. Then we have this a little confusing how they do it. Which is why I included it. And then they have two different types. So this is faceted navigation. Where you your navigation changes depending on what you select. So here we're at Williams Sonoma itself. And if you want to go there, home store, this is a tab and you click on it and I would see different global navigation. Then you'll notice their logo to go home for this is humongous and breaks up the navigation so you can see they actually also broke up the utility navigation all up here, and they also have it below here with the cart and the check out in your shipping in the US in your account. So they really mixed navigation types. Um, so this is also not the best example of way to do this. But I do want to show you some different things that were not so simple. And then below their logo is their global navigation. You'll notice it's almost like they have another utility navigation. So they have the specific Williams Sonoma you Nilla utility navigation versus the Williams Sonoma and Williams Sonoma Home utility navigation. So this could be quite a tricky website, too. Do the information architecture for and then here is your standard global or primary navigation. The black with a white text. But then you'll notice they have Williams Sonoma home here again. Um, so you can see this might need a little bit more work and our final example is, um, from amazon dot com. So here's another example, and probably you're very familiar with what we call faceted navigation, which is where you have that taxonomy or category is so popular. More Amazon kindle and textbooks eso each of these categories can change. Um, the navigation that's the next level down, depending on what you click in contacts. Navigation is usually navigation that's with in content on the screen. So here you have award winners and deals and books, which you'll notice is repeated under popular in books. We have award winners Well, let's see A and deals and books as well so you can do that and duplicate navigation. Um, usually in contacts. Navigation might have a little more design around it, versus just text her main, but in type of links. But you can see there's lots of different ways toe visually, represent the information architecture and show the navigation of your website or app. Finally, let's look at how you decide which type of navigation you should use. First, you want to look at usage priority. How much our users going to rely on this navigation so global or primary navigation is something that you want to be accessible from every screen or Web page of the site or app. Are they gonna use more in context, navisite things that are really related to the content? So then it might be in context navigation. Next, Do you want to look at what navigation pattern are you going to use or even used tabs? Mega menus? Other. Those drop down menus with huge squares that are usually the width of the page. You can use a carousel Accordions. There are so many other different types of navigation patterns. Breadcrumbs. So how do you wanna visually represent that? What will be the easiest for people discover and fine things and finally, placement. So we saw a few different examples of how things were placed. Where does it get placed within the pain? Judge? Um, is it always at the top is that the left is at the bottom. These are all three things that you need to take into account when deciding on how you're gonna visually represent but your way around a website or an app 6. Sitemap Redesign: we talked about the structure and pieces for creating a site map. We also talked about the different types of navigation that can represent that information . So now let's talk about how to create a site map. When you're redesigning a website or an app, it's usually easier for people starting out to do it from an existing website or out. Because the content already exists versus a brand new site map with no content. It's good practice to taken existing site and try and make site maps from it, which will be a project we'll have later. So let's talk about step by step, how to do this? So the ideal way to do this is create a site map of the existing site, and you'd start by performing a content inventory like we saw earlier of all the existing content and screens or pages on the APP or website. You would do that, then decide which content should stay, be edited or archived or deleted. Then, with all that content organized in a spurt, she you perform an activity we call a card sword. There are a couple different types of card sorts. There's an open card sore a close card sore and a hybrid card sort. The card sorting activity is where you take the navigation labels that exists, plus key pieces of content and other keywords. Associate with the app or website and right each one individually on an index card. Then you have participants come in and organize those cards for you into the categories they think makes sense. An open card sort has the users in the session create the category names that they think belong with the categories they made. After you've done that with, say, 5 to 7 users, you do what we call a tree test. The tree test is a way of validating your navigation by creating a text version of your navigation. There are some online tools that will do this for you. Then you send it out to people, preferably existing and potential users of your app or website in your target audience, and see if they can complete the task you ask them to do, such as finding specific pieces of content. It's important to notice a tree test does not include any searching and as a browse Onley functionality to test the find ability of how easy it is to use your navigation. Once you're fairly satisfied with it. You can do a close card sort, which is where you give the category titles already and then have people put the content they think belong under those category headings. Doing the same type of activity is open card sort. The only difference is you give the category names ahead of time. Then you do another tree test The validate Is it still in the right direction? Are we doing better? And then finally, once you have the results that you think fit well, you create your recommended site map steps four through seven. You can do it narratively in order to keep improving your navigation and information architecture as much as needed until you create that final recommended site now. 7. Sitemap New: we talked about how to do a site map for a site that already exists and you're redesigning it. Now let's talk about her to a site map for a site or app that does not exist already, and you don't have any content. How do you create a site map for something with no content? So the way I do it, Is there eight steps as well? First, you want to understand the domain, which is the area of, um, information that you're going to be designing for. Is it finance? Is it automotive? Is it education? Whatever it may be, really, try and understand the words and philosophy and phrases and processes that go into that workspace. Then you want to interview people in the target audience, ideally, um, eight or more. And when you do those interviews, make sure to keep note of jargon or specific terminology. People use words or phrases that are repeated by different people that are the same from that, you'll define a taxonomy of the structure organization of the type of language or organizations FEMA you'll be using. And then, from those words, will do an open card sort. And as before after your open card sort, you do a tree test to validate about. Then you do a closed cart sort. Then you do a true test of validate again, and then you create your recommended site map steps. Four through seven can be iterated upon until you meet the desired satisfaction that you're ready to create that site map you want and test result of 80% or above of completed tasks from your tree test in order to be confident that you've created on site architecture that is able to represent your information and content accurately. 8. Types of Tools: we've talked about structure and the creation of site maps. Let's talk about some different tools and processes the information architects use in order to create the different deliver bols they need. First, we have labelling systems and organization. So some of these things or activities that they would do our card sorting, which we talked about earlier ethnographic studies. An Observation ALS research. This is all stuff that user researcher could also do. But this also falls into the purview of an information architect in order to find labels and organization off how things should be on a website or app. Taxonomy and metadata is the same activities. Card sorting ethnographic study is an observation research. You want to see how people talk, how they think, what processes they do, what tests they do and to understand their mental models and how to organize things and use language that makes sense to them for content models and mental models. We do the observational research and ethnographic studies as well. We've been also do end up the user interviews with your target audience. On the more of these you can do until you start hearing repeated information consistently, the better understanding you'll have of your users mental models and how you should organize content for them in a way that will be most useful. And then, as we talked about validating your navigation, you could do tree testing. You could do first click tests. You can do heat maps to see where people click on a screen. Then, finally, some tools you can use for these activities or optimal workshop. Usability home. There's a new ish platform by Zerbe called Helio that has a lot of similar activities. As usability hub. You can use user zoom and see Inspector is tree test specific where you can create a tree test. Optimal workshop has the widest range of activities you can do on their websites, such as tree testing, first click testing and you also do online card sorting. However, using these all in conjunction or as needed to validate and create your information, architecture is very helpful 9. Project: you've learned a lot ready to get started on working on a project to practice what you've learned here is your project. Choose one of the following sites and create a site map for it. I have a couple such as National geographic dot org's The Red list dot com, which is an e commerce site, g e dot com, which is a company, say Mazda usa dot com, which is a COS site special guest dot c O, which is a very special kind of state, which can be a little confusing. So that one's pretty tough. So go ahead, pick one and get started. Can't wait to see what you come up with. 10. Thank You!: We've covered a lot of ground in the last few videos, and I'd like to do a quick recap of the class before we end. So we learned what the field of information, architecture and tales such as a person who popularized the term Richard Saul warming. We also learned about the disciplines that make up information architectures such as libraries, science, cognitive psychology and building architecture. We also learned about some different terminology and activities. Associate with information architecture such as card sorting, tax on any meta data and other terms like that. And finally, when we talked about how to create a site map, whether for a redesigned site or app or a new site or app and remember to keep in line, never, ever use arrows on site maps. Thank you for watching and I love your feedback.