Week 2: Jan 9 and Jan 11
Reading: Chapters 1 & 2, Krug; Princeton University Website Requirements; Guide to creating website architecture, Princeton University
Due: 01: Pick your website project
- 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?
- “… most of the time we don’t choose the best option—we choose the first reasonable option, a strategy known as satisficing.” Economist Herbert Simon coined the term (a cross between satisfying and sufficing) in Models of Man: Social and Rational(Wiley, 1957)
- Wikipedia entry
- Satisficing versus maximizing
- 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.”
- HTML5 semantic elements – W3C
- Overview of HTML5 semantics – CodePen.io
- Standard HTML5 layout in code – GitHub
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).
Search as navigation
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).
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.