ONLINE BUSINESS

How Navigable Is Your Site?

Advertisement

Frustration does not sell your product. If visitors to your site cannot easily reach what they're looking for, they'll shop elsewhere. Yet a great many e-commerce sites still fail to meet basic navigation needs.

Update your site map
A table of contents or site map with links to all content areas speeds navigation and serves as a "panic button" for visitors who have lost their bearings. Modify your site map to reflect any new content. Also be sure to include a link to your site map on any added pages.

Use descriptive titles in your <strong>tags</strong> <br />Users rely on their browser's back and forward buttons, so furnish unique, descriptive titles for each page - that's what is shown in the back/forward button drop-down menus. A page title like "Page 3," for example, probably won't offer much help for navigation. On the other hand, "Ordering and Shipping Information" tells visitors exactly what they'll find.</p> <p> <strong>Use the</strong> <ALT> <strong>attribute</strong> <br />Many people, especially those with slow Internet connections, surf the Web with the image-viewing capacity of their browser turned off. Make sure that graphics-free visitors aren't missing important navigation elements or other critical content. Example:</p> <blockquote> <p><IMG SRC="monkey.gif" ALT="This is a picture of a monkey."></p> </blockquote> <p>Viewers with graphics capability see your image (but not the text). Those who have graphics viewing turned off see only the text. Make sure the text description is adequate for making navigation easy.</p> <p> <strong>Don't overdo your design</strong> <br />Don't go overboard with colors, images, and other display elements, but don't be afraid of them either. If your pages seem a little bland, consider using a different background color. A color can be set for the entire page with the <BGCOLOR> attribute inside the <BODY> tag:</p> <blockquote> <p><BODY BGCOLOR="white"></p> </blockquote> <p>If you are using tables, the entire table or each individual cell in the table can be set to unique colors:</p> <table cellspacing="2" cellpadding="2"> <tr> <td bgcolor="#66FF99"> <code><TABLE BGCOLOR="lime"></code> </td> <td bgcolor="#99FFFF">Sets the background color of the entire table</td> </tr> <tr> <td bgcolor="#D63194"> <code><TR BGCOLOR="fuchsia"></code> </td> <td bgcolor="#99FFFF">Sets the background color of a table row</td> </tr> <tr> <td bgcolor="#FF0000"> <code><TD BGCOLOR="red"></code> </td> <td bgcolor="#99FFFF">Sets the background color of a table cell</td> </tr> </table> <p>Copyright 1995-1999 Pinnacle WebWorkz Inc. All rights reserved. Do not duplicate or redistribute in any form.</p> <p><img alt="logo" src='http://images.inc.com/logos/21605.gif'/></p></div> </div> <!-- related_articles --> <!-- END: related_articles --> <div id="bottom-of-article"> <div class="updated inc_editable_area" data-editable-area-class="EditableArea"><div class="Pubdate inc_editable" data-editor-class="ArticleDatesEditor" data-editor-label="Dates" data-content-type="article" data-content-id="1389"><span class="PubdateContent">Last updated: Dec 14, 1999</span></div></div> <br clear="all"> </div> <div class="morearticles" style="margin-bottom: 30px;"><p class="readmorehead" style="margin-top:10px; margin-bottom: 5px;">More:</p> <p class="readmoreitem" style="margin-top: 5px; margin-bottom: 5px;"><a href="http://www.inc.com/jeff-haden/10-habits-of-remarkably-charismatic-people.html?cid=readmore">10 Habits of Remarkably Charismatic People</a></p> <p class="readmoreitem" style="margin-top: 5px; margin-bottom: 5px;"><a href="http://www.inc.com/magazine/201309/darren-dahl/how-to-run-a-successful-company-from-home.html?cid=readmore">How I Run a $16 Million Company Out of My Living Room</a></p> <p class="readmoreitem" style="margin-top: 5px; margin-bottom: 5px;"><a href="http://www.inc.com/drew-hendricks/5-most-promising-industries-for-entrepreneurs-in-2014.html?cid=readmore">5 Most Promising Industries for Entrepreneurs in 2014</a></p> <p class="readmoreitem" style="margin-top: 5px; margin-bottom: 5px;"><a href="http://www.inc.com/jill-krasny/coolest-cooler-kickstarter-might-not-deliver.html?cid=readmore">The Coolest Cooler: Is This Kickstarter Project Too Successful?</a></p> <p class="readmoreitem" style="margin-top: 5px; margin-bottom: 5px;"><a href="http://www.inc.com/josh-linkner/4-lessons-from-a-15-year-old-entrepreneur.html?cid=readmore">4 Lessons from a 15-Year-Old Entrepreneur</a></p> </div> <div id="middlepromo"></div> </div><!-- close #articlecontent --> <br clear="all"> <div id="PageShareContainerLower" class="PageShareContainer"></div> <a class="articlefootertool" href="javascript:window.print();" style="margin-top:30px;">PRINT THIS ARTICLE</a> <div id="femunit" style="clear:both;margin-top:110px;"> <script> if(abgrp==13) { FEM = { overrideLayout: 'THUMBS' } } </script> <script type="text/javascript"> if (!window['FEM'] || !window['FEM']['loaded']){ window.FEM = window.FEM || {}; window.FEM.loaded = true; var scripts = document.getElementsByTagName("script"); window.FEM.node = window.FEM.node || scripts[scripts.length-1]; var loadScript = function(src) { var fem = document.createElement('script'); fem.type = 'text/javascript'; fem.async = true; fem.src = src; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(fem, s); }; var scriptParam = window.location.search.match(/[?&]script=([^&]*)/); loadScript(scriptParam ? scriptParam[1] : 'http://external.fem-inc.com/js/unit.min.js'); } </script> </div> <div id="bottompromo"></div> <br clear="all"> <script type="text/javascript">$(window).scroll(function() { setTimeout('name = "";',3000);});</script> <!-- BEGIN Tynt Script --> <script type="text/javascript"> if(document.location.protocol=='http:' && (abgrp==7||abgrp==8)){ var Tynt=Tynt||[];Tynt.push('dWITtEUNWr47epacwqm_6r'); (function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://tcr.tynt.com/ti.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})(); } </script> <!-- END Tynt Script --> <script type="text/javascript"> /* * KALTURA PLAYER JAVASCRIPT FUNCTIONS */ function playvid(){ } function jsIntrfaceReady (){ //alert('jsintrface ready'); return true; } function custom_func(){ // implement custom events upon player load. return true; } function jsCallbackReady(player_id){ var kdp = document.getElementById(player_id); kdp.addJsListener("kdpReady","custom_func"); //kdp.addJsListener("playerPlayEnd","playnext_func"); //kdp.addJsListener("playerPlayed","playnext_func"); kdp.addJsListener("preSequenceStart","playnext_func"); } function playnext_func(player_id){ var kdp = document.getElementById(player_id); var currentEntryId = kdp.evaluate('{mediaProxy.entry.id}'); console.log(currentEntryId); checkSitemanager(currentEntryId); } function checkSitemanager(theEntry){ var artid = 1389; postEntrySitemanger('entryid=' + theEntry + '&artid=' + artid); return true; } function postEntrySitemanger(params) { var request = new XMLHttpRequest(); request.onreadystatechange=function(){ console.log(request.responseText); if (request.readyState==4){ if (request.status==200 || window.location.href.indexOf("http")==-1){ var theresponse = request.responseText; var responseArray = theresponse.split("^"); var x = parseInt(responseArray[0]); if (x == 20) { window.location = "http://www.inc.com/"+responseArray[1]; //console.log('ITS OVER YOU WIN!'); } else if (x == 10) { console.log('BAD NEWS....'); } }else{ errorlog = ''; } } } request.open("POST", "http://www.inc.com/lib/kaltura/TestCode/entryValidate.php", true); request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); request.withCredentials = "true"; //request.overrideMimeType('text/javascript'); request.send(params); } </script> <div id="divvy" style="display: none;"></div> <script type="text/javascript"> var comments; $(document).ready(function() { if (typeof(incid) !== 'undefined') { comments = new Comments(); comments.init(incid,"http://www.inc.com/",'divvy'); } }); </script> </div><!--end maincolumn--> <div id="sidebar"> <div class="sidebar_inner"> <div id="SidebarPatternContainer" class="PatternContainer narrowPatternContainer"></div> </div> </div> <br clear="all"> </div><!--end middlecontainer--> <div class="container-bottom"> </div> <div id="container-footer"> </div> </div><!--end contentcontainer--> </div><!--end wrappercontainer--> <div id="rightMenuFullContainer"> <div id="rightMenuHeader"> <div id="login_language"><span class="larger_lang">Register on Inc.com today to get full access to:</span><br /> All articles  |  Magazine archives | Livestream events | Comments</div> </div> <div id="rightMenu"> <div id="rightMenuInnerContainer"> <div id="right_member_login"> <form class="SystemForm" id="right_login_form"> <div class="textInputLabel">EMAIL</div> <div class="textInputContainer"><input id="email_mini" type="text" /></div> <div class="textInputLabel">PASSWORD</div> <div class="textInputContainer"><input id="password_mini" type="password" /></div> <div id="member_login_submit"><input type="submit" value="CONTINUE" /> <img src="http://images.inc.com/login/right-menu/go-forward.png" /></div> </form> <div id="forgot_link"><a id="forgot-pass-link" href="#">Forgot Password?</a></div> <div id="right_member_forgot"> <form class="SystemForm" id="forgotpass-form" method="post" action="http://www.inc.com/retrievepassword"> <div class="textInputLabel">EMAIL</div> <div class="textInputContainer"><input type="text" name="retrieve_email" id="retrieve_email" value=""></div> <div id="member_forgot_submit"><input type="submit" value="SUBMIT" /> <img src="http://images.inc.com/login/right-menu/go-forward.png" /></div> </form> </div> <div class="section-seperator"></div> <div id="new_member_link">New Member?<br /><span class="the_blue">Sign Up Now</span></div> <div class="section-seperator"></div> </div> <div id="right_member_register"> <form class="SystemForm" id="right_register_form"> <div class="textInputLabel">FIRST NAME</div> <div class="textInputContainer"><input id="reg_fname_mini" type="text" /></div> <div class="textInputLabel">LAST NAME</div> <div class="textInputContainer"><input id="reg_lname_mini" type="text" /></div> <div class="textInputLabel">EMAIL</div> <div class="textInputContainer"><input id="reg_email_mini" type="text" /></div> <div class="textInputLabel">PASSWORD</div> <div class="textInputContainer"><input id="reg_password_mini" type="password" /></div> <div id="member_register_submit"><input type="submit" value="CONTINUE" /> <img src="http://images.inc.com/login/right-menu/go-forward.png" /></div> </form> <div id="existing_member_link"><span class="the_blue">Sign in</span><br /><span class="">if you're already registered</span></div> </div> <br clear="all"> <div class="rightMenuText">Or sign up using:</div> <br clear="all"> <div id="right_member_externalauthorizors"> <div id="external_google_sm" class="external_authorizer"> <form class="SystemForm" name="google_openid_form" id="google_openid_form" action="http://www.inc.com/lib/dopeid/openidlogin.php" method="post" autocomplete="off"> <input type="hidden" name="openid_identifier" id="openid_identifier" value="https://www.google.com/accounts/o8/id" /> <input type="hidden" name="process" value="1" /> <input type="hidden" name="returl" value="http%3A%2F%2Fwww.inc.com%2F"> <input id="googlefollowusrid" type="hidden" name="followusrid" value=""> <button class="google-login" style="border:0px;background-color:transparent;" type="submit" id="login_google_sm"></button> </form> </div> <div id="external_yahoo_sm" class="external_authorizer"> <form class="SystemForm" name="yahoo_openid_form" id="yahoo_openid_form" action="http://www.inc.com/lib/dopeid/openidlogin.php" method="post" autocomplete="off"> <input type="hidden" name="openid_identifier" id="openid_identifier" value="https://me.yahoo.com/" /> <input type="hidden" name="process" value="1" /> <input type="hidden" name="returl" value="http%3A%2F%2Fwww.inc.com%2F"> <input id="yahoofollowusrid" type="hidden" name="followusrid" value=""> <button class="yahoo-login" style="border:0px;background-color:transparent;" type="submit" id="login_yahoo_sm"></button> </form> </div> <div id="external_facebook_sm" class="external_authorizer"> <a href="http://www.inc.com/lib/facebook/fb_login.php"><img src="http://inc.com/images/spacer.gif" class="facebook-login"></a> </div> <div id="external_linkedin_sm" class="external_authorizer"> <a href="http://www.inc.com/lib/linkedin/startlogin.php?returl=http://www.inc.com/"><div class="linkedin-login"></div></a> </div> <div id="external_twitter_sm" class="external_authorizer"> <iframe id="createaccountframe" src="http://www.inc.com/lib/twitter/start_responsive.php?returl=" frameborder="0" scrolling="no" style="width: 39px; height: 40px;"></iframe> </div> </div> </div> </div> </div> </div><!--end siteinnercontainer--> <div class="PopupWrapper hidden"> <div class="PopupWrapperBackground"></div> </div> <!-- Start Chartbeat integration --> <script type="text/javascript"> var _sf_async_config={uid:2768,domain:"inc.com"};_sf_async_config.sections = "Online Business";_sf_async_config.authors = "";_sf_async_config.path = "/articles/1999/12/16022.html"; (function(){ function loadChartbeat() { window._sf_endpt=(new Date()).getTime(); var e = document.createElement('script'); e.setAttribute('language', 'javascript'); e.setAttribute('type', 'text/javascript'); e.setAttribute('src', (("https:" == document.location.protocol) ? "https://s3.amazonaws.com/" : "http://") + "static.chartbeat.com/js/chartbeat.js"); document.body.appendChild(e); } var oldonload = window.onload; window.onload = (typeof window.onload != 'function') ? loadChartbeat : function() { oldonload(); loadChartbeat(); }; })(); </script> <!-- End Chartbeat integration --> <div id="posttrack"></div> <script language="javascript"> function postload() { var op = 'article'; var incSitePage = ''; var txt = ''; if(op!='home' && incSitePage!='col.livechat') { if (Math.random() < 0.5) { txt += '<script src="http://content.dl-rms.com/rms/mother/555/nodetag.js"></scr' + 'ipt>'; } else { txt += '<script language="javascript" src="http://icompass.insightexpressai.com/401.js"></scr' + 'ipt>'; } } txt += '<script type="text/javascript" src="http://amch.questionmarket.com/adsc/d632383/16/644041/randm.js"></scr' + 'ipt>'; <!-- Default Insight Tag --> var _bizo_data_partner_id = "632"; var _bizo_p = (("https:" == document.location.protocol) ? "https://sjs." : "http://js."); txt += unescape("%3Cscript src='" + _bizo_p + "bizographics.com/convert_data.js?partner_id=" + _bizo_data_partner_id + "' type='text/javascript'%3E%3C/script%3E"); return txt; } $(document).ready(function() { document.getElementById("posttrack").innerHTML=postload(); }); </script> <script type="text/javascript"> <!-- function sharedlinkedin(url) { likeintercept('LinkedIn'); } function sharedtwitter(intent_event) { if (intent_event) { likeintercept('Twitter'); }; } function sharedfacebook(url) { likeintercept('Facebook'); } function sharedgoogle(jsonParam) { likeintercept('Google'); } function likeintercept(service) { var s=s_gi(s_account); s.linkTrackVars='eVar22,events'; s.linkTrackEvents='event3'; s.eVar22=service; s.events='event3'; s.tl(this,'o','Social Share: '+service); $.post("http://www.inc.com/likeintercept", { incid: "1389", sharedtype: service} ); } //--> </script> <script type="text/javascript"> <!-- window.fbAsyncInit = function() { FB.init({appId: '139291179414843', channelUrl: 'http://www.inc.com/lib/facebook/channel.php', status: true, cookie: true, xfbml: true}); FB.Event.subscribe('edge.create', function(response) { likeintercept('Facebook'); }); }; (function(d){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore(js, ref); }(document)); //--></script> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/client:plusone.js'; po.parsetags = 'explicit'; po.onload = _.bind(inc.gapiLoaded,inc); var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div><!--end sitecontainer--> </body> </html>