Foundations of Web Design
- 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
- 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?
Activity: Find 3 Web sites that use different but effective visual navigation cues.