Designing Site Navigation

1. Designing Site Navigation UNIT G

2. Guidelines for Navigation • Good navigation is consistent, clearly labeled, and reflects the needs of the site’s audience. • Navigation labels are short, clear, and user-friendly • Above all navigation should be designed for your visitor not yourself

3. Types of Navigation: Global • Global navigation- the navigation that appears on each page, usually at the top or left side. • Features top-level section in a site • A small site would include every page a larger site would not

4. Types of Navigation: Local • Local Navigation- used on large sites where there is so much content in a section that global navigation is inadequate. • For example, a site that sells books, music, and movies would feature top-level categories in global and feature categories in the local section

5. Types of Navigation: Related • Related navigation- usually appears within the content area and highlights content related to that page’s information. • For example, the page featuring a specific movie for sale might list movies by the same director in the related navigation. • Figure G-1 page 149

6. Navigational Elements • The elements that make up your navigation should be determined by: • the site’s goals • the content of the site • the target audience • Pulldown menus are now popular

7. Information architects (IAs) • Information architects – people whose job is to create structures, navigation, and search systems for Web Sites. • IAs work as independent consultants or as part of in-house Web design teams within organization • Working with an IA can be especially useful on • complex sites that have thousands of pages of content • or that deal with multiple audience or topics

8. Creating an Interactive Button • Interactive buttons (rollovers)- navigation graphics that change appearance when a visitor interacts with them • Original state- appears when a visitor is not interacting with the button • Hover state- appears when a visitor points to or hover over the imaged • Pressed state- appears while the visitor is clicking the button

9. Creating a Navigation Bar • Navigation bar- a set of related navigation links, whether text or images • Maintain a consistent look among the buttons! • Copy and paste then change the text and link

10. Adding a Navigation Bar to Site Pages • Each page on a Web site should have a navigation bar. • Copy and paste the navigation bar to each page!

11. Understanding Link Styles: Link States • Pseudo-class defined properties for a particular state of the element. • Links have 4 Commonly Used pseudo-class selectors: • a:link • a:visted • a:hover • a:active

12. Commonly Used Pseudo-Classes • a: link – the normal, unvisited state of a link • a: visited – the link has been clicked in the visitor’s browser and is present in the browser's history • a:hover– the visitor’s cursor is pointing to the link • a: active – the link has been clicked by not released

13. By default, normal links are blue and underlined and visited links are purple and underlined. • It’s best to create a style rule for at least the a:link, a:visited, and a:hover states so that each state looks different to visitors. • Styled in order in the style sheet so it’s very important they are listed in order.

14. Guidelines for creating link styles • Leave links underlined. • Underlined text is universal for links (user-friendly) • Differentiate between visited and unvisited links. • It’s best to create styles that make unvisited links more noticeable • Experiment with hover styles and colors • Be dramatic and coordinate with your design • Avoid purple or blue!