Web Site Usability: Chapter 3 Billboard Design Summary Notes on Steve Krug Don’t Make Me Think New Riders, 2 nd Edition Ben Hunt Web 2.0 How to Design Style Guide 1Krug Chapter 3 Chapter 3 Billboard Design, Ben Hunt Web 2.0 How to Design Style Guide

Great Billboard Design Recognize your page is “just a billboard” See 2Krug Chapter 3 Chapter 3 Billboard Design, Ben Hunt Web 2.0 How to Design Style Guide

For Great Billboard Design, Use: 3 Clear visual hierarchy on each page Use conventions Break pages into clear areas Make it obvious what is clickable Minimize noise Krug Chapter 3 Chapter 3 Billboard Design, Ben Hunt Web 2.0 How to Design Style Guide

Great Billboard Design Create a clear visual hierarchy – The more important an element is …. the more visually prominent it should be – Make element: Larger Bolder different in color set off by white space Group related elements together 4 Krug Chapter 3 Chapter 3 Billboard Design, Ben Hunt Web 2.0 How to Design Style Guide

Clear Visual Hierarchy 5 Krug Chapter 3 Chapter 3 Billboard Design, Ben Hunt Web 2.0 How to Design Style Guide

Use Conventions We’re familiar with newspaper conventions – Headlines, captions, blocks of text Web conventions are similar Additional web conventions – Clear links – Nav bar – Shopping cart 6

Divide Pages into Clear Areas With clearly defined areas, users can quickly : – Scan – Select – Choose Krug Chapter 3 Chapter 3 Billboard Design, Ben Hunt Web 2.0 How to Design Style Guide 7

Make It Obvious What’s Clickable 8 Krug Chapter 3 Chapter 3 Billboard Design, Ben Hunt Web 2.0 How to Design Style Guide

Minimize Noise Make the background fit into the background visually Design to present and communicate content– let content stand out, or: Design the content, not the box it comes (Hunt) Minimize what Hunt calls the page furniture (page elements rather than the content) 9 Krug Chapter 3 Chapter 3 Billboard Design, Ben Hunt Web 2.0 How to Design Style Guide

Hunt: Design the Content Not the Page 10 The background dominates the content In Hunt’s redesign, the content is most important Krug Chapter 3 Chapter 3 Billboard Design, Ben Hunt Web 2.0 How to Design Style Guide

Questions to Ask on Each Page 1.Is there a clear visual hierarchy on each page? 2.Do you use conventions? 3.Did you break pages into clearly defined areas? 4.Did you make it obvious what is clickable? 5.Is there anything you can do to minimize noise? 11 Krug Chapter 3 Chapter 3 Billboard Design, Ben Hunt Web 2.0 How to Design Style Guide