WEB 200: Week 04

Week 4: Jan 23 and Jan 25

Lecture: Navigation
Reading: Chapter 7, Krug; Getting Around: Navigation, Signposts, and Wayfinding, Chapter 3, Designing Interfaces: Patterns for Effective Interaction Design by Jenifer Tidwell (see Slack for a PDF)
Due: 02: Site goals, audience – establish the purpose and goals of the website; identify audience.
Assigned for Sunday03: Information Architecture



Feedback is in a direct message from me-to-you in Slack. If your projects are late, your comments will be, also.

Assignment discussion

Take about 15 minutes to review the assignment at three or four student sites in our staging area. (Remember the straightforward password!)

Let’s talk about SMART goals some more as well as mission statements (flip from “the site” or “the company” to “the customer”)

From this:

  • Attract more site visitors
  • Make it easier to navigate the site

To this:

  • Increase the number of unique visitors by 5% in the next six months
  • During the first six months after the re-design, have total visits/sessions increase by 5% but total page views decline by 10%

What do we have to do to think about how to reach the goals?


Before we can get to navigation, we have to understand tasks! This is a great task with context from Rob Hayes:

You are in the process of purchasing a new car, and you want to compare insurance rates from different providers. Your friend suggested you check out CarInsurance.com because they got a good rate from them.

We want to concentrate on tasks, not features.


In-class assignment 1

  • Working alone, develop two meaningful tasks with a scenerio
  • Working in pairs, pick two new competitor sites (one for each person’s project). Look at the sites together and generate a meaningful task (with a scenario) for each. Someone post these two tasks in Slack (channel > #in-class-23jan), with your names and a link to the two websites.
  • Working by yourself, now revisit your tasks; revise if need be. Identify what information is needed to support task completion.


In-class assignment 2

  • Go to this website and poke around for 5 minutes
  • Working with your partner, identify a “unique selling point” (ie, what content should be featured/is compelling) as well as the audience for the content
  • What are two tasks that users might have in mind when coming to this site?
  • The other half of the pair should post these two tasks in Slack (channel > #in-class-23jan), with your names. If you looked at any other diving websites in this exercise, post those links as well.

Examples of scenario, story and success (or not)

  • asianfoodgrocer.com
    You are a famous Youtuber and you want to do an Asian snack tour video. A friend suggests AsianFoodGrocer as a place to find snacks. You want to identify popular Asian snacks that you should order for your video. We found that there is no way to filter products on the site based on their popularity or ratings
  •  Two about allergans
    • http://capitolcider.com/menu/
      As a young hungry hipster who works in the tech industry in Seattle and who practices a gluten free diet, before picking a restaurant I want to go to its website and see if the menu shows the allergens of each dish (as well as the price); trust comes from the website having a professional vibe. Be sure to add allergens to website menus like Capitol Cider  models here.
    • https://www.mustardandco.com/
      I am allergic to peanuts. I am interested in trying out some new specialty sauces to incorporate into my dinner plan. Before buying anything I need to make sure it is produced in a “nut-free” processing facility.  After searching all items on the primary navigation and reading the pages listing the mustard history and ingredients, we could not locate any information on the site about potential allergens. We are not sure if this is standard for products like this and will require more research to see how other brands address this issue
  • https://vtlseattle.com/
    Zippy needs to get some Apple Red Tea for his mom because it helps alleviate the pain in her hands. He wants to find a good deal and finds it at Vital Tea Leaf. He googles Capitol Hill tea shops and comes across Vital Tea Leaf which has Apple Red Tea for $15 an ounce.



Thursday: Navigation is built after IA

  • Where am I
  • Where can I go
  • Where have I been

Navigation components include menus (hamburger), buttons, checkboxes, the plus sign, the switch (on/off toggle), calls to action (CTA), share button, mobile tab bars (bottom of the app), progress bar (feedback).

  •  Signposts are features that help users figure out their immediate surroundings.
    • Clear, unambiguous labels
    • Breadcrumbs
    • Contextual clues (the “x” to close out a window)
    • Maps (the most common is a sitemap)
    • Types of navigation: global, utility, associative
  •  Wayfinding is what people do as they find their way toward their goal.
    • Click-cost is related to the cost of navigation (think about the IE Diving Site)

Examples of great global navigation

Home pages as “menu pages”

In-class assignment 3

Pick one of your (now three) competitor sites.

  • Develop at least three scenarios and tasks that will help you think about how to organize your content on the site you are (re)designing.
  • Diagram its architecture, based on its navigation structure. If there’s a site map, you can crib from that. What kind of structure do you see?
  • Describe the site global and utility navigation. Which parts should you include in your design?
  • Specifically, what information appears in the footer? How “fat” is it?
  • Make a post in the #in-class-23jan channel that describes what you learned; if you like, include the image of your competitor site’s architecture (at least three levels deep > home is level one).