1. Where am I?
Navigating a website: Browsing, searching, menus & breadcrumbs

2. Browsing

3. Looking for things on the web is similar to looking for things in the ‘real world’

4. Looking for things on the web1.
No sense of scale- we rarely know how deep (how many pages) a website has. Physical spaces and magazines we can get at least a rough sense of the seen/unseen ratio
Practical result is that is hard to know whether you’ve seen everything of interest to you in the site

5. Looking for things on the web2.
No sense of direction: no left and right, no up and down

6. Looking for things on the web3.
No sense of location
On the web you make your way around by clicking
On the web when we return to the site we need to remember where things are in the conceptual hierarchy instead of our physical sense
This is one reason booksmarks are so important and why the back button is used so often
This is also why homepages are so important
Homepages are comparatively fixed places. It is like the north star, you can also come back to it.

7. Web Navigation

8. What are the two obvious purposes of navigation?

9. What are the two obvious purposes of navigation?
Help us find whatever it is we are looking for
Tell where we are

10. Other (overlooked) functions of navigation
Tells us what’s here.
Tells us how to use the site
Gives us confidence

11. Navigation Conventions
The conventions specify loosely the appearance and location of the navigational elements so we know where to look for them Putting them in a standard place lets us locate them quickly, with minimum effort.

12. Basic Conventions

13. Persistent Navigation
describes the set of navigation elements that appear on every page of the site. Persistent navigation should calmly say:
“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”

14. Persistent Navigation
4 elements of Persistent Navigation
Site ID
Utilities
Search
Sections

15. Site ID
Site ID represents the whole site which means it’s the highest thing in the logical hierarchy of
The site
This Site
Sections of the Site
Subsections
This page
Areas of this page
Items on this page
NEEDS TO BE ON EVERY PAGE

16. Site ID - most prominent item
For hierarchy you can make the it the most prominent item or place it the more prominent location.
Since you don’t want your site ID to dominant you want to make sure that it is in the best place. Also you want it where it is expected.

17. Site ID - should also look like a site ID

18. The Sections
The Sections: sometimes called primary navigation are the links to the main sections of the site. The top level of the site’s hierarchy

19. The Sections
Sometimes you will have space to include a secondary navigation

20. Utilities
links to important elements of the site that aren’t really part of the content hierarchy
Things that help use the site like sign in, register, help, site map, shopping car or provide information about the its publisher like about us or contact us.

21. Utilities
Utilities should be slightly less prominent than the sections
Utilities will vary for different types of sites. The might include the following:
About us
Discussion boards
Archives
Downloads
Checkout
Forums
Company info
FAQ
Contact us
Help
Customer service
New

23. Searching Don’t make it hard on them.
Avoid Fancy wording – they will be looking for the word search, not find, or quick search or keyword search.
Instructions – if you use search conventions instructions shouldn’t be necessary
Options – if there is possible confusion about the scope of the search spell it out for the user

24. Secondary, tertiary and beyond

25. Why do designers often not show specifics when laying out tertiary pages
Multi level navigation is just hard to design given limited amount of space on the page and the number of elements that have to be squeezed in
Designers don’t usually have time to figure out past the first two levels
Designers may feel it isn’t as important
Designers often don’t have the sample content or hierarchy examples of lower level pages

26. Page Names
Page names are the street signs of the web

27. 4 things you need to know about page names1.
Every page needs a name – just like every corner should have a street sign
Designers sometimes think that since the name is highlighted in the navigation they don’t need a page name. It’s is tempting because it saves space and may alter design of layout but it is important to have

28. 4 things you need to know about page names2.
The name needs to be in the right place
Name needs to frame the content that is unique to the page

29. 4 things you need to know about page names3.
Names needs to be prominent.
Use a combination of font size, weight, color and position

30. 4 things you need to know about page names
4. The name needs to match what I clicked

31. You are Here

32. Breadcrumbs Breadcrumbs best practices Put them at the top
Use > between them
Boldface the last item