Have you ever become lost in a huge supermarket? Sure, it's easy to get momentarily disoriented in the really big ones, but usually its easy to find your way either to the section you need or, at the very least, to the store exits. The last time I actually got lost was when I went into Wal-Mart after returning home from China. The vast geographical shopping culture of Wal-Mart had become unfamiliar to me compared to the 3-aisle "supermarkets" of the rural Chinese cities.
I actually think it's hard to get lost in a supermarket because everything is clearly labeled, signs are used effectively, products and aisles are ordered in a (semi)logical fashion, and there are plenty of visual cues to support your quest.
What about in a shopping mall? It's easier, I think, to get lost in a shopping mall because there are so many different stores that are not laid out in any sort of logical order. Shopping malls also tend to be constructed so that you do get lost in them--this is to facilite your discovery of more stores and your spending of more money! Maybe this is part of why I hate shopping malls.
I can say one good thing about shopping malls: if you do get lost, where do you go? To the mall map! It's usually affixed with a sticker that says, "You are here", which helps you understand where you are in relation to the other stores, in relation to the exits, and, finally, in relation to parking lots!
These two shopping metaphors may be useful to us as we think about information design and Web page layout, particularly wayfinding. Wayfinding is related to site navigation, and should be a strategy used by Web designers focused on preventing users from getting lost. Good wayfinding...
Let's explore that supermarket metaphor a little further and see what a good Web site has in common with, say, Target®. This is a metaphor I use in MCT 2120, but I've expanded upon it here:
Let's say we are trying to buy some Ghiradelli semi-sweet chocolate chips. We walk into Target--but wait! How do we know we're at the right store? Ah, yes, it has the big, brightly lit, easy-to-read sign out front. It has an easily recognizeable logo and icon, too--that's what helped you get here in the first place! The facade of a supermarket is akin to your site's home page--its main purpose is to tell the user where they are, and what they are there for. Sometimes it advertises news or specials right out front. It's also critical to include doorways that take the user deeper into the site.
Inside Target you see signs everywhere, and guess what? They also remind you that you are in Target, usually by that ubiquitous logo and icon. All Web pages in a site should have the organization's logo or icon to remind users where they are.
Once we are inside Target what do we look for? Chocolate chips? Well, it's a big store! There's a checkout section, a customer service section, a pharmacy section, a housewares section, a clothing section, a hardware section, a section devoted just to Star Wars toys, a grocery section--that's what we need, we think to ourselves, so we look for the grocery section. Luckily it's clearly labeled with a big sign hanging from the ceiling that reads "Groceries", or something to that effect. When we're looking for the Groceries section, the big sign hanging above is like a hyperlink in our navigation section. Once we've made it into the Groceries section, the big sign hanging above is like the main heading at the top of each Web page: it reminds us exactly where we are within the store, er, Web site.
By the way, don't forget to notice that supermarkets provide walking space, and it's usually generous. This not only helps users get to the products they want, it also provides visual paths from area to area, and breaks up or separates one section from another. Large walking spaces makes users feel comfortable. But if it's too large it might make users uncomfortable and exposed.
I think of walking space in the supermarket as sort of like white-space in a Web page. It helps keep content organized and separated. It also helps users stay oriented and can lead users from one section to another.
The groceries section has other visual cues as well (vegetables, bread, etc) that tell us we are headed in the right direction. These visual cues can also attract our attention if we didn't see the big sign. Think of the grocery section, and all those other main sections, as one of several primary pages in your Web site. Each primary page needs to be clearly labeled, and each needs to be linked directly off of the main entrance (you home page).
Now we are definitely in the grocery section, and continue our quest for Ghiradelli semi-sweet chocolate chips. Now what? The grocery section is also a big place! Ah, but everything's neatly organized: there are well-laid out sections (aisles), and each section has its own big sign too.
But there's no Chocolate Chip aisle. ah, but there's a Baking Goods aisle--that might be the right spot. Think of the Baking Goods aisle as a secondary page of your web site; it's clearly just a section of the larger "Groceries" primary section, but, speaking of Web pages now, it needs to be clearly labeled as well with its own 1st or 2nd level heading. We expect a clear, obvious hyperlink from the primary page, "Grocerices", to the secondary page, "Baking Goods".
Now we're in the Baking Goods aisle. We use visual cues and more signs and labels to find the chocolate chip section. The section signs and labels on the aisle shelves are akin to 2nd and third level headings on a Web page. From here it will be easy to find the brand of chocolate chips (Ghiradelli) in the type (semi-sweet) that we are looking for! And look how much good information we have to guide us: the bag of chips has its brand name, it has lots of detailed information about nutrition facts, even the product's history. There is pricing information directly below the product, and it's easy to put the product in our shopping cart. It may seem obvious, but its also easy to tell if Target might be out of chocolate chips, or at least out of the brand I like to buy. These are the sort of information design strategies that are useful in a Web site as well as a supermarket.
We grab the bag of chips and head for, where? Ah, the checkout section. If you recall, that's a primary page. All those primary pages are really important, so in our Web site design we'd better make sure that we have hyperlinks for each of those primary pages on every page in our site. It's also a good idea to have a link to back to the front of the store, or the home page, on every page as well so users don't get frustrated.
OK, Target probably does sell breadcrumbs, but one thing complex Web pages often have but stores like Target can't easily provide is a "breadcrumb trail" that leads the user back the way they came and out of the Web site. A breadcrumb line in a Web page lists all the pages a user may have visited from the Home page through the primary pages, secondary pages, tertiary pages, and beyond to the current page. Users can click on any of these breadcrumb links to immediately revisit any of those pages. This is another wayfinding tool that can remind users how they got "here", and how "here" relates to "there", "there", and "there".
Hm, those "breadcrumb" links look familiar...
So in designing our Web page structure we should always:
These elements speak specifically to wayfinding, but also echo what we've learned already about general Web page layout principles garnered from the other examples we've seen in this lesson so far. Now let's start to think about how we put this all together in Stage 3 in the actual design of Web pages.