Notes on Krug, Chapter 6


"People won't use your Web site if they can't find their way around it." - Krug, chapter 6, page 55

Web Navigation 101
- you're usually trying to find something
- decide whether to ask or browse first (depends on current frame of mind, how much of a hurry they're in, whether site appears to have decent browsable navigation)
- if you browse, you go through a hierarchy and use signs to guide you
- if you can't find what you're looking for, you leave

searching = typing a description of what you are looking for in a search box and getting back a list of links to places where it might be

search-dominant users = look for a search box as soon as they enter a site
link-dominant users = browse first, search only when they run out of links to click or have gotten frustrated with the site

Oddities of web space
- no sense of scale
- no sense of direction
- no sense of location

This is the reason why bookmarks (stored personal shortcuts) are important. Also why the Back button is the most used button in Web browsers.

Homepages are important
- fixed places
- clicking gives users a fresh start

navigation = getting from one place to another, figuring out where users are
- it is the Web site, not a feature of it
- embodies the site's hierarchy, creating a sense of "there"

"Web navigation had better be good." - Krug, chapter 6, page 63

Purposes of navigation
- help users find what they're looking for
- tell users where they are
- tell users what's there, what the site contains, even more important than guiding or situating users
- tell users how to use the site, tells the user implicitly where to begin and what their options are, should be all the instructions a user needs
- gives users confidence in the people that built the site, navigation is the best opportunity to create a good impression

Web navigation conventions
- specify (loosely) the appearance and location of the navigation elements so we know what to look for and where to look when we need them
- putting them in a standard place = locate quickly with little effort
- standardized appearance = easy to distinguish from everything else
- frustrating when one of these conventions are broken
- basic navigation conventions = site ID, utilities, sections, "you are here" indicator, page name, local navigation (things are current level), footer navigation

persistent navigation = the set of navigation elements that appear on every page of the site
- should appear in same place with a consistent look
- instant confirmation that users are still on the same site
- users should only need to figure out how it works once, if consistent
- four elements you need to have at all times = site ID, utilities, search, and sections
- exception to "follow you everywhere" rule is forms, don't need the unnecessary distraction; have a minimal version with Site ID, Home link, and any Utilities needed to fill out form

Site ID
- like a building name for a Web site
- need to see this on every page, usually in upper left corner
- represents the whole site, highest thing in the logical hierarchy of the site
- make this the most prominent thing on the page, or make it frame everything else
- best place for it is at the top, where it frames the entire page
- should have a distinctive typeface and a recognizable graphic, looks like a Site ID

Sections
- also called primary navigation
- links to the main sections of the site, the top level of the site's hierarchy
- some designs include space for secondary navigation, a list of subsections in the current section
- some designs have sections reveal a dropdown menu when pointed at or clicked on, others have clicking take users to the front page of that section to reveal secondary navigation options

Utilities
- links to important elements of the site that aren't part of the content hierarchy
- things that can help users use the site (Sign In/Register, Help, Site Map, etc.) or provide information about the site's publisher (About Us and Contact Us)
- should be slightly less prominent than Sections
- will vary for different kinds of sites
- persistent navigation can only accommodate four or five Utilities, ones users likely need most often, less frequently used Utilities belong in footer as smaller text links at the bottom of the page

Home button
- one of the most crucial items in persistent navigation
- offers reassurance that a user can always start over, no matter how lost they get
- almost all users expect the Site ID to be this button
- also good idea to include Home button in main sections of the site

Search
- every page should have a search box unless the site is very small and very well organized
- the first official action of most users is to locate the search box
- stick to the formula: a box, a button, and either the word "Search" or the iconic magnifying glass icon
- avoid fancy wording, instructions, and options
- think very carefully before giving the option to limit the scope of a user's search, as well as providing options for how to specify what they're searching for
- only give options for scope limiting when it's useful

One of the most common problems in Web design is failing to give the lower-level navigation the same attention as the top. The navigation tends to break down past the second level. It's hard to find good examples of third-level navigation.
Good multi-level navigation is hard to design. Designers don't have enough time to figure out the first two levels. It doesn't seem that important because the common thought is that by the time people get that deep into the site, they understand how it works. Getting sample content and hierarchy examples for lower-level pages are hard because content designers haven't thought things through that far.
The reality is that users spend equal time in the top and lower-level pages. Unless designers have worked out top-to-bottom navigation from the beginning, it's hard to graft it on later or create something consistent for it later.

"It's vital to have sample pages that show the navigation for all the potential levels of the site before you start arguing about the color scheme." - Krug, chapter 6, page 73

Page names
- street signs of the Web
- every page needs a name
- needs to be in the right place, should frame the unique content of the page
- needs to be prominent, will be the largest text on the page; combination of position, size, color, and typeface to declare it as the header of the page
- needs to match what the user clicked, if they don't match then trust is diminished; ensure the match is close enough and the reason for this difference is obvious

"You are here"
- shows where a user is, like an indicator on a map
- counteracts Web's "lost in space" feeling
- highlight current location in navigation bars, lists, or menus on the page
- common failing is that they can be too subtle, they need to stand out to hold value as a visual cue, apply more than one visual distinction to them (different color and bold text combo)
- "In general, if you're a designer and you think a visual cue is sticking out like a sore thumb, it probably means you need to make it twice as prominent." - Krug, chapter 6, page 78

Breadcrumbs
- shows users where they are, like "You are here" indicators do
- shows users the path from the Home page to where they currently are, make it easy to move back to higher levels in the site heirarchy
- were once an oddity, now are part of well-thought-out navigation
- self-explanatory, don't take up much room, and provide a convenient and consistent way to back up a level or go Home
- most useful on sites with deep heirarchies
- put them at the top of the page, this marginalizes them (like page numbers, used as a necessary accessory)
- use > between levels, visually suggests forward motion
- boldface the last item, the name of the current page, gives it prominence, naturally is not a link

Tabs
- divide whatever they stick out of into sections
- make it easy to open by clicking on a specific tab
- they're self-evident
- they're hard to miss, visually distinctive, create an obvious-at-a-glance division between navigation and content
- can add polish and serve a useful purpose
- graphics must create the visual illusion that the active tab is in front of the other tabs, active tab needs to be a different color or contrasting shade, must physically connect with the space below it to make it "pop" to the front
There are no comments on this page.
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki