WEB 200: Week 02

Week 2: Jan 9 and Jan 11

Lecture: Structural design (ppt on DropBox) | Design principles, 1 (ppt on Dropbox) |  Design critique (video)
Reading: Chapters 1 & 2, Krug; Princeton University Website RequirementsGuide to creating website architecture, Princeton University
Due01: Pick your website project

Assignment requirements

  • Pick your project website that you will be using to complete your assignments for this quarter.
  • Create a Client Staging Area for your project (who needs to use SCC servers?).
  • Share the URL of your Client Staging Area in the appropriate section of our Slack group.

Small group discussion

  • Chapter 1: Don’t make me think! 10 Krug’s First Law of Usability
  • Chapter 2: How we really use the Web 20 – Scanning, satisficing, and muddling through


  • How do you practice “satisficing” in your web consumption habits?
  • Look at these three ecommerce sites and rate them based on the concepts in the first two chapters. To do so, decide amongst yourselves that you’re going to buy some electronic something that costs between $30-100. Try to buy it at all three sites
  • What are your design take-aways from that experience?
  • Now look at the three sites again. What are the common elements on the home page?


Web page structure, semantic mark-up

Using HTML5 semantic elements when you build your web pages means your sites will be more structurally consistent. The resulting pages will be more accessible to anyone who uses a screen reader as well as for search bots and other programs that need to interpret the content of a web page.

Our code will be cleaner as we fight against divitis!

H1 – H6 elements “briefly describe the topic of the section they introduce.” They form a semantic structure that can “be used by user agents, for example, to construct a table of contents for a document automatically.”

HTML 5 semantics
From CodePen.io

Web site structure, from Web Style Guide (v3)

Our goal is to build a hierarchy of menus and content pages that feels natural to users (doesn’t require resort to “help”).

Web sites that are too shallow require extensive menu pages. Conversely, sites that are too deep require click-click-click before reaching real content. It might not “make us think” but it can make us unhappy (fig. 3.2).

A two-part figure: On the left, a web site hierarchy that is too shallow, with too many pages linked to the home page. On the right, a site hierarchy that is too deep, forcing the user to click through many menu pages before reaching the actual site content.

Figure 3.2 — Too shallow a structure (left) forces menus to become too long. Too deep a structure (right) and users get frustrated as they dig down through many layers of menus.

Search as navigation

In a larger site, search may be the only efficient means to locate particular content pages or to find all pages that mention a keyword or search phrase.

A line graph showing a classic long-tail distribution, where a few site pages are heavily used, and the vast majority of pages receive very few visitors by comparison.

Figure 3.3 — The “long tail” of web search. Frequently trafficked pages might appear on browsing menus pages, but we’ll find obscure pages located deep within the site only by search (or a shared link).

Site structures

  • Webs (can be difficult to build and navigate)
  • Sequence (very good for applications such as a check-out)
  • Hierarchy

The simplest form of hierarchical site structure is the hub-and-spoke: a central home page surrounded by a handful of pages (fig 3.5a).

Most web sites adopt some form of hierarchical or tree architecture, an arrangement that is familiar (fig. 3.5b).

Two possible hierarchical site structures are shown: Left is a simple hub-and-spoke structure, where all pages are linked from the central home page. On the right is a more complex hierarchical structure, where the home page is linked to multiple collections of pages, shown as five stacks of pages.

Figure 3.5 — Hierarchies are simple and inevitable in web design. Most content works well in hierarchical structures, and users find them easy to understand.

The nonlinear usage patterns typical of web users do not absolve us of the need to present information within a clear, consistent structure that complements our overall design goals.

A chart with a left vertical axis representing increasing complexity, and a horizontal axis running from simple linear training sites for average audiences to complex material for highly educated audiences. Simple page sequences are at the bottom left, average sites fall in the middle of both axes, and complex web-linked sites aimed at educated professionals are shown at the upper right, near the high end of both the complexity and non-linearity scales.

Figure 3.9 — Choose the right site structure for your audience and content.