Navigation
- Keep user interface (user-friendliness) central to the whole site and page design process. Think like your audience. See Weinman's "inspirational" sites for good navigation
- You must flowchart and organize your site before you build your navbar (navigation bar) and other navigation elements.
- Remember to use active white space around navigation elements.
- Remember alt tags, since accessibility is important these days. In fact, you should use Bobby to make sure that you site is user-friendly and accessible, especially with regard to navigation.
- Keep in mind that the user needs to have a sense of scale, a sense of direction, and a sense of location (p. 57) while browsing your site. Make sure that your site's navigation provides these and that a user can visualize where he is within your site at all times.
- Consider providing a search query box on your home page since some users prefer to search for something rather than to browse a site through the navigation bar.
- Review named anchors which are created by using the Insert/Invisible Elements/Anchor menu command and linked to by typing the name of an anchor directly after a # symbol in the Link area of the Property Inspector.
- Navigation bars
- Types
- button bar - graphics, words, Javascript mouseovers, etc. It could be created as a sliced graphic held together by a table or as seamless graphics aligned next to each other. It can be placed at the top or the left of the page.
- icon bar - an icon is a 32 px by 32 px image
- image map - one large graphic with hotspot areas
- text links - plain words that are hyperlinked
- a tabbed top or side navigation bar
- other types of navigation? button bar at the top of each page
- Where should you place your navbar....on the left edge or along the top of the page?
- to use frames or not?
- difficult to print pages
- difficult for user to bookmark internal pages
- difficult for others to link to your internal pages
- to use pull-down menus or not? discuss the pros and cons.
- include text links at the bottom of the page
- make space for the company logo
- Include visual navigation cues
- use color to indicate which section of the site the user is currently in
- use icons such as arrows
- possibly use metaphors as navigational cues (ideographs and pictographs)
- do you wish to always rely on blue, underlining to indicate text hyperlinks?
- Use Javascript rollovers or DHTML to indicate clickable graphics
- Activity: Find 3 Web sites that use different but effective visual navigation cues.
- Activity: Use the Show/Hide Layers JavaScript behavior in Dreamweaver to create a simple popup menus. This is an example of DHTML.