Overview

To design a web well, you need to consider several different angles of ‘usability’. You want your website to be accessible at a minimum and ideally organized in such a way that the user doesn’t hit any snags in finding what they want. Today, we’ll start thinking about these basic web design principles.

Basic Learning Objectives

Before class, you should be able to:

  • List an example of a web page design practice that increases a person’s cognitive workload.
  • Define ‘satisficing’, ‘visual hierarchy’, ‘searchers vs. browsers’, and ‘breadcrumbs’
  • List two example of web page conventions
  • Explain what Krug means by “navigation IS the website”

Advanced Learning Objectives

After class, you should be able to:

  • Explain how the way we process the world cognitively impacts how we interact with websites
  • Use basic best practices for web usability
  • Be able to apply these concepts in the next project deliverable (UI).

Readings

To achieve the basic learning objectives, you should read the following. All of these readings are in Don’t Make Me Think! Revisited, by Steve Krug. Note: this looks like a lot of reading, but the readings should go fast.

  • Chapter 1, “Don’t make me think! Krug’s First Law of Usability”
  • Chapter 2, “How we really use the Web: Scanning, satisficing, and muddling through”
  • Chapter 3, “Billboard Design 101: Designing for scanning, not reading”
  • Chapter 6, “Street signs and Breadcrumbs: Designing navigation”
  • (optional) Chapter 7, “The Big Bang Theory of Web Design: The importance of getting people off on the right foot”

Checks

Find an example of a data-driven website (i.e. one that clearly uses an underlying database) that is illustrative of one of Krug’s points (good or bad, meaning it can clearly follow Krug’s advice or clearly break Krug’s advice). Make sure that it is suitable for work and not already posted. Post a link to it and what it demonstrates in this Google Doc.