Wiki source for NotesChapter6KrugDMN


Show raw source

===== Chapter 6, Krug =====

==== Navigation ====
- when users visit your site, they're usually looking for something specific
- they'll find it by using the navigation tools you provide OR the search bar
- "search-dominant" users and "link-dominant" users (Krug, p. 58-59)
- they browse through hierarchies
- if they don't find what they want, they'll leave
- clarity, simplicity, and consistency = users coming back to your site

=== Oddities ===
- websites lack a sense of scale, direction, and location, unlike physical spaces (like a department store)
- the seen vs. the unseen -- how much of the website is there?
- we have to remember the hierarchy to retrace our steps
- bookmarks, the Back button, and homepages = our saviors
- navigation is everything

=== Navigation is Also Important Because... ===
- it reveals the content
- it tells us how to use it
- we gain confidence in the people who built it
- clear navigation is a way to gain a good impression

=== Conventions ===
- certain conventions (like the site ID, the utilities, the page name, etc.) are expected
- when they're not there or in the typical spot, we get frustrated
- __persistent navigation__: the set of navigation elements that appear on every page of a site (Krug, p. 66)
- should always include the site ID, utilities, search bar, and sections
- except pages with forms; conventions will be distracting
- including the homepage is also crucial
- since I recently bought some clothes from [[http://www.hm.com/us/ |H & M]] I decided to analyze their website
- the conventions stay nearly the same from page to page
- for example, when I visited the [[http://www.hm.com/us/products/ladies/tops | Women's Tops]] page, I noticed that the site ID, the utilities, and the page name were in the same spot as they were on the [[http://www.hm.com/us/ | home page]]

=== Sections ===
- AKA primary navigation
- links to the main sections of the site; part of the hierarchy
- some have dropdown menus
- page names
- make them large and easy to understand
- they should frame the content, not the navigation tools or the ads
- there should be consistency between the page link, the page name, and the content on the page
- on [[http://www.hm.com/us/ | H & M]] the sections also remain the same from page to page
- they are in black and bold font at the top of the page and grab your attention right away for easy access to the hierarchy

=== Utilities ===
- linked elements that are important but are not related to the site content
- Sign In/Register, My Account, FAQs, Archives, etc.
- on the H&M [[http://www.hm.com/us/ | home page]], these are at the very top of the page in white font on a black strip of background
- it does not grab your attention right away, but it is noticeably there for those looking for it
- includes a Log In, My H & M (my account), your country, and a shopping bag for your purchases
- the utilities section is present on every page as well

=== Searching ===
- search bar should be easy to find and follow the typical format
- anything strange/odd about it will confuse users
- this can also be found on H & M's [[http://www.hm.com/us/ | home page]]
- it is signified by a black and bold magnifying glass and says "Search" for complete understandability

=== Lower-Level Navigation ===
- give attention to these levels as much as the top; users spend time in both places
- keep navigation consistent with upper levels
- the navigation on H & M's website stays consistent through all of the levels; I was never at a loss when I went deep into the hierarchy as I was searching for what I wanted to purchase

=== Finding Yourself ===
- the "You Are Here" indicator should highlight your location in whatever navigation tools there are on the page
- they must stand out to be useful
- breadcrumbs also help with this
- show your path to the current page for easy retracing
- put them at the top of the page, use arrows to show progression, and bold the current page link
- yes, another "You Are Here" indicator -- we have come full circle
- H & M's site does not explicitly include a "You Are Here" indicator, but the top of each page reiterates where you are in multiple places in a black and bold font (which, as you can see above, has been consistent from page to page as well)
- it does, however, use breadcrumbs
- as you can see [[http://www.hm.com/us/products/ladies/tops/basics | here]], the breadcrumbs show that I clicked the section "Women," then chose the category "Tops," then further chose the subcategory "Basics"

=== The Power of Tabs ===
- establish clear organization in an understandable and relevant way
- they're easy to use and hard to miss
- H & M's website did not include tabs

=== Krug's Trunk Test ===
- you should be able to find your way around a site as if you've been dumped there after being kidnapped and thrown into the trunk of a car
- do this by printing a page of your site, squinting a bit, and circling the key navigational tools -- how did you do?
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki