1. Billboard Design 101

4. Create a clear visual hierarchy The more important something is, the more prominent it is.

6. Create a clear visual hierarchy The more important something is, the more prominent it is. Things that are related logically are also related visually.

8. Create a clear visual hierarchy The more important something is, the more prominent it should be. Things that are related logically are also related visually. Things are “nested” visually to show what’s part of what.

10. It happens so quickly that the only time we’re aware we’re doing it is when we can’t.

13. Conventions are your friends

16. Break with convention ONLY when: (a) It introduces no learning curve OR (b) It adds so much value that it’s worth a small learning curve.

17. Other guidelines Break up pages into clearly defined areas Make it obvious what’s clickable Keep the noise down to a dull roar –Busy-ness –Background noise

20. Animal, Vegetable, or Mineral?

21. How many clicks should it take to get to any page on the site?

22. Wrong question

23. A more useful question is: “How much thinking is required to get from here to there?”

28. On NOT writing for the Web

29. Get rid of all the words only you will read Reduces the noise level of the page It makes the useful content more prominent It makes the pages shorter, allowing users to see more of the page at a glance

30. Happy talk must die

34. Instructions must die

36. How about? Please help us improve the site by answering these questions. It should only take you 2-3 minutes to complete the survey. NOTE: If you have comments or concerns that require a response don’t use this form. Instead please contact Customer Service Customer Service

37. Whaddya do when you go shopping?

38. Web browsing is different No sense of scale No sense of direction No sense of location

41. Navigation isn’t just a feature of a web site; it is the web site.

42. The overlooked purposes of navigation It gives us something to hold onto It tells us what’s here It tells us how to use the site It gives us confidence in the people who built it

43. Street signs and breadcrumbs

46. Web navigation conventions

51. Persistent Navigation “The navigation is over here. Some parts will change a little depending on where you are, but it will always be here, and it will always work the same way.”

52. Five essential nav. elements

53. Logical hierarchy This site Sections of this site Subsections Sub-subsections, etc. This page Areas of this page Items on this page

59. Utilities should be less prominent

61. Every page needs a name; the name needs to be in the right place.

63. Breadcrumbs

65. You are here

68. The trunk test What site is this? What page am I on? What are the major sections of this site? What are my options at this level? Where am I in the scheme of things? How can I search?

69. If you’re interested Perform the trunk test on these pages: –http://autos.yahoo.com/usedcars/find.htmlhttp://autos.yahoo.com/usedcars/find.html –Drugstore.com (supplements page)Drugstore.com (supplements page) –http://mitsloan.mit.edu/newsroom/spotlight.phphttp://mitsloan.mit.edu/newsroom/spotlight.php + –5 pages randomly generated by: http://www.mangle.ca/random.php