|
||||||
|
||||||
 |
||||||
|
|
||||||
|
Home » Designing Web Navigation: Traffic Light, Not Neon Light
|
||||||
 |
||||||
|
||||||
Designing Web Navigation: Traffic Light, Not Neon Light** SiteBuilderNews - 5/30/2002 Issue ** Helping You Build A Better Website ================================================================= In This Issue of SiteBuilderNews: => 1. Editor's Note => 2. Article: Designing Web Navigation => 3. Site Builder Tip => 4. Sites for Site Builders => 5. Site Builder News ================================================================= SPONSOR AD: ================================================================= Your-Site: Superior, Affordable Web Hosting! * 50 MB Disk Space * 25 POP3 E-Mail Accounts * 6 Gigs Transfer * Your own cgi-bin * 24/7 FTP Access * 99.9% Guaranteed Uptime * Plus Much More! ONLY $5 PER MONTH! http://www.sitebuildernews.com/yoursite.php ================================================================= 1. Editor's Note ================================================================= Hello SiteBuilders, Netscape's still attempting to retake its old market share with newer, better web browsers. Perhaps it's finally ready to compete with Microsoft again. Check out the preview release of the Netscape 7 browser at http://channels.netscape.com/ns/browsers/7 -- Dan Grossman edi-@sitebuildernews.com ================================================================= ================================================================= Upgrade to receive HTML version of SiteBuilderNews! Subscribe for free at mailto:sitebuildernews-@topica.com ================================================================= 2. Feature Article: ================================================================= Designing Web Navigation: Traffic Light, Not Neon Light By Gerry McGovern Navigation allows reader to find the content they want by moving through a Web site using classification links. It should be designed in a simple, clear, consistent, and functional manner -- like a traffic light, not a neon light. "Navigation" comes from two Latin words: navis (ship) and agere (to drive). According to the Merriam-Webster dictionary, the general meaning of "navigate" is "to steer a course through a medium... to get around, move... to make one's way over or through... to operate or control the course of." It is a mistake to design Web navigation as if it were a neon light. The objective of navigation should never be flashy. The job of navigation is not to grab attention. Rather, navigation design is about creating clear and consistent signs. Readers turn to navigation when they want to get somewhere on the site. First and foremost, they want something that is functional and informative. A traffic light system is clear and consistent. It uses three colors: red, amber, and green. And it uses them in a consistent order: red first, amber in the middle, green at the end. I have yet to hear anyone complain traffic lights are boring and should change their design. Hypertext colors are a bit like traffic light colors. Hypertext changes color to support Web navigation. Blue represents links that have not been clicked. Purple represents links that have been clicked. Many designers take the liberty to change these colors. Why? For what purpose? Changing the color of hypertext is like changing the color of traffic lights. All it does is confuse. Too often, Web designers view navigation as a neon light. They become more concerned with how it looks rather than how it works. The more arty the Web site, the more obscure the navigation becomes, as if navigation were some sort of creative statement. Making navigation obscure, making it look like New York's Times Square, is not artistic. It's bad Web design. According to Jonathan and Lisa Price's recent book, "Hot Text," "If you want to help your visitors, you must think of each menu as a set of well-lit street signs. The challenge is to organize and write those signs so that visitors can find their way while moving at high speed." When designing navigation for your Web site, keep the following in mind: Make sure it's readable. Use a sans serif font in an appropriate size. Make sure it's consistent. Decide on a structure for your navigation and use that structure consistently throughout your Web site. Keep hypertext colors blue for unclicked, purple for clicked. Place the main navigation for your Web site on the far left of the page. That's where readers expect it to be. Your navigation should be "invisible" until it is wanted. Never let it flash, and never design it in a way that dominates the page. Always use text in your navigation. If you use icons, make sure there's a text description under each one. ----------------------------------------------------------------- Gerry McGovern is a Web consultant and author. His most recent books are Content Critical and The Web Content Style Guide, published by Financial Times Prentice Hall. His personal Web site is at http://www.gerrymcgovern.com ================================================================= Reach thousands of subscribers! For ad details and prices, email: mailto:edi-@sitebuildernews.com?subject=ad_inquiry ================================================================= 3. Site Builder Tip ================================================================= This Week's Tip: Simple META Tags Generating Some Search Engines use META Tags to index the web site. To see a listing of these Search Engines and more information on Search Engines and META Tags, visit http://www.SearchEngineWatch.com META Tags are very easy to create, especially with the vast number of online tools available. Webmaster Tips Weekly offers a META Tag Generator with multiple options. You may add copyright information, language, age level, etc. in addition to the key words, description, and author. This tool is available at http://www.webmaster-tips-weekly.com/tools/meta.shtml. The META Tag Generator will create the tags that you need to place in the header of your web page. To do this you need to... 1. Open the Web Page with a text editor (i.e. Notepad or BBEdit) 2. Copy the text that the online META Tag Generator created. 3. Paste the META Tags into the area between <head> and </head> ----------------------------------------------------------------- Deborah Anderson, of AndersonCreations.com, teaches web design and internet marketing in addition to publishing Webmaster Tips Weekly. Subscribe free by sending a blank email to mailto:subsc-@webmaster-tips-weekly.com http://webmaster-tips-weekly.com/webtips ================================================================= 4. Sites for Site Builders ================================================================= Flash News Scroller Wizard Flash News Scroller Wizard is a tool that allows you to design your text scroller in a few minutes and instantly see the results. Flash News Scroller is a highly configurable vertical text scroller and vertical news ticker. Creating the text scroller is fast using the Flash News Scroller Wizard. http://www.scriptocean.com/ ================================================================= 5. Site Builder News ================================================================= FASTNET Announces Appointment of Ward Schultz as CFO http://c.moreover.com/click/here.pl?e38910813&e=6592 Badly Designed Websites Keep Surfers Away http://c.moreover.com/click/here.pl?e38894952&e=6592 Accenture to roll out Web services tools http://c.moreover.com/click/here.pl?e38848267&e=6592 Argentinan executives set up 'feed the kids' website http://c.moreover.com/click/here.pl?e38832690&e=6592 Esna Cuts Domino Web Hosting Rates http://c.moreover.com/click/here.pl?e38818383&e=6592 NaviSite Launches New Suite of Always On Managed Hosting Packages http://c.moreover.com/click/here.pl?e38809136&e=6592 Info Builders Jumps into Web Services http://c.moreover.com/click/here.pl?e38806412&e=6592 ================================================================= ================================================================= Do you know someone who has a website or would like to create one? Forward them a copy of this eZine and urge them to subscribe! To subscribe send a blank email to: mailto:sitebuilderne-@topica.com ================================================================= ================================================================= Send suggestions and comments to: edi-@SiteBuilderNews.com Reach thousands of subscribers! For ad details and prices, visit our media kit at http://www.sitebuildernews.com/advertise.php SiteBuilderNews is © 2000-2001 Dan Grossman. All Rights Reserved. No part of this newsletter may be reproduced in whole or in part without written permission. All guest articles are copyright their respective owners and are reproduced with permission. |
||||||
 |
||||||
