1 / 58

Web Site Navigation

Web Site Navigation. CIS67 Foundations for Creating Web Pages Professor Al Fichera. Rev. August 27, 2010. Planning the Interface. “Interface” refers to how the: Pages look Pages work Pages Interact with the viewer. Planning the Interface. Effective interfaces generate:

freya
Download Presentation

Web Site Navigation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Site Navigation CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. August 27, 2010

  2. Planning the Interface • “Interface” refers to how the: • Pages look • Pages work • Pages Interact with the viewer. Web Site Navigation by Professor Al Fichera profal2.com

  3. Planning the Interface • Effective interfaces generate: • Logical environments • No confusion • Note: View your work in different Browsers to see how they are interpreted. Web Site Navigation by Professor Al Fichera profal2.com

  4. Start With a Simple Plan • Good web site design begins with a good web site plan. (Simple is best!) • List the information to be included in the site. • Each main item will probably be on a separate page. Web Site Navigation by Professor Al Fichera profal2.com

  5. Ease of Use • The Key to effective navigation: • Intuitive • Easyto use Web Site Navigation by Professor Al Fichera profal2.com

  6. Ease of Use • When designing the navigation system it is important to think like someone… “seeing the site for the first time.” Web Site Navigation by Professor Al Fichera profal2.com

  7. Ease of Use • A navigation system’s “goal”... • Provide Direct Access to the various content or parts of the site. • Users need to make an “informed decision” on whether or not to take a certain path. Web Site Navigation by Professor Al Fichera profal2.com

  8. Clarity • The website should give an “impression of clarity” and should be easy to use. • It should be easily readable, clear and “easy to understand.” Web Site Navigation by Professor Al Fichera profal2.com

  9. Clarity • It is important that the site is “not too cluttered” with text and images. • Images used should be simple and “convey immediate meaning.” • Let's look at a few examples… Web Site Navigation by Professor Al Fichera profal2.com

  10. Navigation by Sub-Categories Web Site Navigation by Professor Al Fichera profal2.com

  11. Navigation by Sub-Categories Web Site Navigation by Professor Al Fichera profal2.com

  12. Navigation by Sub-Categories Web Site Navigation by Professor Al Fichera profal2.com

  13. Navigation by Sub-Categories Web Site Navigation by Professor Al Fichera profal2.com

  14. Navigation by Sub-Categories Web Site Navigation by Professor Al Fichera profal2.com

  15. More Detailed Options Web Site Navigation by Professor Al Fichera profal2.com

  16. Consistency Always • Introduce the user to a navigation system up front. • However users will expect it to apply throughout the whole site, without exception. Web Site Navigation by Professor Al Fichera profal2.com

  17. Consistent Navigation Style • A navigation “menu bar” could be used throughout the site. • Have consistent text or button links on each page. • Where should the links be placed? Web Site Navigation by Professor Al Fichera profal2.com

  18. Where To Put It: Bottom Web Site Navigation by Professor Al Fichera profal2.com

  19. Where To Put It: Top Web Site Navigation by Professor Al Fichera profal2.com

  20. Where To Put It: Left Side Web Site Navigation by Professor Al Fichera profal2.com

  21. Where To Put It: Right Side Web Site Navigation by Professor Al Fichera profal2.com

  22. Where To Put It: Right Side Web Site Navigation by Professor Al Fichera profal2.com

  23. Where To Put It: Right Side Web Site Navigation by Professor Al Fichera profal2.com

  24. Internal Links • Allow users to move through the site not only through text or graphical navigation system but also “through the content.” • Users can follow the “natural progression of the content.” Web Site Navigation by Professor Al Fichera profal2.com

  25. Graphic / Text Navigation • Text navigation should be used in addition to any graphical navigation. • Images alone may not convey immediate meaning to all users. Web Site Navigation by Professor Al Fichera profal2.com

  26. Help With a Storyboard • Sketch a rough layout of your plan on paper first. • Use simple boxes or “sticky-notes,” to layout the content. • Keep your vision of the site organized, and focused at all times. Web Site Navigation by Professor Al Fichera profal2.com

  27. Horizontal Format • Keep in mind that browser windows are more “Landscape” than “Portrait”. • Designing for the Web page is a bit different than for the Word Processor, such as MS WORD. Web Site Navigation by Professor Al Fichera profal2.com

  28. Design for Small Screens First • Locate Important Navigation Items in the “visible portion” of the screen. • Design for “all the viewers” of your pages, not for those with the largest screens, or most powerful processors. • Rarely will anyone see your elegantly tall, and narrow Web pages all at once, they’ll see small chunks at a time. Web Site Navigation by Professor Al Fichera profal2.com

  29. Navigation Design • You should be able to navigate back to the home page without difficulty. If not, it is poorly designed. • The focus of good navigation design is “organization,” not just graphics. Web Site Navigation by Professor Al Fichera profal2.com

  30. Navigation Design • Your primary goal is to “make it easy” for visitors to find their way to and from any part of the site you design. • If you need instructions on how to navigate the site, you probably have it too difficult for most people. Web Site Navigation by Professor Al Fichera profal2.com

  31. Navigation Style • There are many styles of navigation: • Buttons and Text Links come to mind. Web Site Navigation by Professor Al Fichera profal2.com

  32. Navigation Style • There are many styles of navigation: • Navigation Bars, (usually a group of buttons together). Web Site Navigation by Professor Al Fichera profal2.com

  33. Navigation Style • There are many styles of navigation: • Animated Graphics • BIG RULE: If you must use them please have only one per page! Web Site Navigation by Professor Al Fichera profal2.com

  34. Thoughts on Navigation Style • If you have a long scrolling page, provide a navigation system at both the Top and Bottom of the page. Web Site Navigation by Professor Al Fichera profal2.com

  35. Text Links Top and Bottom Web Site Navigation by Professor Al Fichera profal2.com

  36. Text Links Top and Bottom Web Site Navigation by Professor Al Fichera profal2.com

  37. Thoughts on Navigation Style • If you use graphic images for links, provide Text Links as well. • Use ALT tags with the images and perhaps a small text link bar below for those who might not be able to see the images. Web Site Navigation by Professor Al Fichera profal2.com

  38. Text Links for Image Maps Web Site Navigation by Professor Al Fichera profal2.com

  39. Navigation With Frames • Consider the proper use of “Frames” as a navigational tool. • A small frame at the top of the page holding link information can be of great use. • However, the thinking has changed quite a bit about framesets, especially those which are not user accessible. Web Site Navigation by Professor Al Fichera profal2.com

  40. Navigation With Frames • Please be aware of how to use frames properly and have a good idea of what type of pages work well with frames, and of those that do not! • Frameset Navigation will be covered in another lecture. Web Site Navigation by Professor Al Fichera profal2.com

  41. Repetition is Important • Add a comfort level of familiarity and orientation to your page by keeping the navigation system consistent throughout the web site. Web Site Navigation by Professor Al Fichera profal2.com

  42. So Where are You Now? • A good navigation system gives the visitor a clue as to what page they are currently on in the link system. Web Site Navigation by Professor Al Fichera profal2.com

  43. So Where are You Now? • Try unlinking the text, and change its color so the viewer knows this was the link for the current page. Web Site Navigation by Professor Al Fichera profal2.com

  44. So Where are You Now? • If you are using graphic links, try fading the color of the icon so it appears different than the other hot links. • Notice the faded link for cars, it’s the page I was on when I took the screen shot. Web Site Navigation by Professor Al Fichera profal2.com

  45. More Than One Way • Depending upon the site, a client may want links to the newest information or products on the home page. • A special link can be created that has material unique for the moment, but the more traditional links repeat themselves throughout the site. Web Site Navigation by Professor Al Fichera profal2.com

  46. The Site Decides Style • After all the information is known… • A Storyboard has been created… • Decide upon the Graphic Images to be used to suit the site. Web Site Navigation by Professor Al Fichera profal2.com

  47. The Site Decides Style • What’s the overall theme? • Sites about autos could have images related to autos. This one uses a gear shift pattern. Web Site Navigation by Professor Al Fichera profal2.com

  48. The Site Decides Style • What’s the overall theme? • This site is about Sound Engineering. Web Site Navigation by Professor Al Fichera profal2.com

  49. Index, Sitemap, or Search • Is the site large enough to sport an Index? • Works very well on the Internet; can be a simple alphabetical listing of key words that link to appropriate pages in the site. Web Site Navigation by Professor Al Fichera profal2.com

  50. Index, Sitemap, or Search • Here is a well thought out Site Index from Adobe.com • Note: This screen shot was taken long ago, do not expect to be able to see this page any longer. Web Site Navigation by Professor Al Fichera profal2.com

More Related