UI Wizards - Web Blooper of the Month

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>UI Wizards - Web Blooper of the Month</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="UIWizards.com-Web Blooper of the Month"> <meta name="author" content="Adam Chew http://adamchew.com">  <link href="assets/css/bootstrap.css" rel="stylesheet"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="assets/css/uiwizards.css" rel="stylesheet">    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png"> <link rel="shortcut icon" href="assets/ico/favicon.png">  <link href='http://fonts.googleapis.com/css?family=Tauri|Julius+Sans+One' rel='stylesheet' type='text/css'> </head> <body> <div class="affixed-nav-bg affix-top"></div> <div class="uiw-head"> <div class="container"> <div class="masthead"> <h1>UI Wizards</h1> <h2>Product usability consulting</h2> <div class="clearfix"></div>  <div class="nav-wrapper"> <a class="nav-toggle collapsed" data-toggle="collapse" data-target=".navbar" href="javascript:void(0);"> Menu </a> <div class="navbar"> <div class="container"> <div class="navbar-inner"> <ul class="nav"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li class="dropdown"><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="portfolio.html">Portfolio <b class="caret"></b></a> <ul class="navdrop dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a role="menuitem" tabindex="-1" href="portfolio.html">Samples</a></li> <li><a role="menuitem" tabindex="-1" href="portfolio_clients.html">Clients</a></li> <li><a role="menuitem" tabindex="-1" href="portfolio_CV.html">CV</a></li> <li><a role="menuitem" tabindex="-1" href="portfolio_pubs.html">Publications</a></li> </ul> </li> <li><a href="services.html">Services</a></li> <li><a href="classes.html">Classes</a></li> <li><a href="resources.html">Resources</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="container">  <div class="row-fluid"> <div class="span9"> <h1>Web Blooper of the Month</h1> <h2>Current Page Not Indicated</h2> <p>Have you ever tried to get around in an unfamiliar town or neighborhood, but found yourself stymied by a lack of street signs? When it's difficult to tell where you are, it's easy to get lost. Even if you don't actually get lost, you feel lost. That's how Web-users feel when they visit websites that don't show clearly what page you are on.</p> <p>The current page can be indicated in by either marking its item in the navigation bar or by putting a page title prominently on the page. Well-designed sites do one or both of these. Many websites either don't do either, or try to do one or both but don't make the markers or titles prominent enough. Let's look at some examples.</p> <h3><a href=http://www.ValcoElectronics.com target="Web Blooper Window" title="Valco">ValcoElectronics.com</a></h3> <p>Until a recent site upgrade, ValcoElectronics.com didn't mark the current page on the navigation bar or provide page titles (see below). The page shown was the Catalog page, but there was no way to know that from what was on the page. For example, this page could easily be a Home page.</p> <IMG SRC="assets/wb_images/WBloop16_Valco.gif" WIDTH=489 HEIGHT=276 alt="Valco.com example of Web Blooper"> <h3><a href=http://www.RealEstate.com target="Web Blooper Window" title="RealEstate">RealEstate.com</a></h3> <p>Sometimes Web pages lack identification due to poor enforcement of site-wide policies. For example, most pages at RealEstate.com are identified, but the site's "Find an Agent" page formerly had a banner ad in the page title's position (see below). If temporarily distracted from your computer after arriving here, you might not remember if you were at "Find an Agent", "Find an Appraiser", or "Find a Broker".</p> <IMG SRC="assets/wb_images/WBloop16_RealEstate1.gif" WIDTH=460 HEIGHT=328 alt="RealEstate.com example of Web Blooper"> <h3>Avoiding the Blooper</h3> <p>As I said in introducing this blooper, the current page can be indicated in one of two ways:</p> <ul> <li><em>Nav bar</em>. Marking the current page's item in the site's navigation bar.</li> <li><em>Page title</em>. Placing a page title prominently, near the top of the page content.</li> </ul> <p>A few pages at RealEstate.com lack titles, as in the example above, but most have them. The site doesn't mark its navigation bar to indicate the current page, but its page titles are prominent enough that few users would be confused about where they are (see below).</p> <IMG SRC="assets/wb_images/WBloop16_RealEstate2.gif" WIDTH=425 HEIGHT=212 alt="RealEstate.com example of avoiding Web Blooper"> <p>Pentagram.com is a site that indicates the current page on the navigation bar only (see below). Even without separate page titles, the marked navigation bar clearly indicates the current page.</p> <IMG SRC="assets/wb_images/WBloop16_Pentagram.gif" WIDTH=428 HEIGHT=316 alt="Pentagram.com example of avoiding Web Blooper"> <p>Obviously, if indicating the current page by marking the navigation bar is helpful and showing page titles prominently is helpful, doing both at once would be absolutely clear. As an example, examine a page from the 2002 ACM Conference on Computer-Human Interaction, ACM.org/CHI2002 (see below). This site actually has two page titles on each page: one in the navigation trail ("home > location") at the top of the page content area, and one just below that.</p> <IMG SRC="assets/wb_images/WBloop16_ACM.gif" WIDTH=411 HEIGHT=411 alt="ACM example of avoiding a Blooper"> </div> <div class="span3 sidebar"> <h3>Posted: Mar 2003</h3> <h4> <a href="wBloop15.html">< Prev</a>       <a href="wBloop17.html">Next ></a> </h4> <p><a href="web_blooper_archive.html" title="Web Bloopers Archive"><button class="btn btn-uiwizards" type="button" alt="Link to Web Bloopers Archive page"><i class="icon-star icon-white"></i> Web Bloopers Archive</button></a></p> </div> </div> </div>  <div class="footer"> <div class="container text-center"> <p>© UI Wizards, Inc. 2013</p> <div class="foot-nav"> <ul class="nav"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="services.html">Services</a></li> <li><a href="classes.html">Classes</a></li> <li><a href="resources.html">Resources</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="privacy_policy.html">Privacy Policy</a></li> <li><a href="usability_policy.html">Usability Policy</a></li> </ul> </div> </div> </div>   <script src="assets/js/jquery.js"></script> <script src="assets/js/uiwizards-nav.js"></script> <script src="assets/js/bootstrap-transition.js"></script> <script src="assets/js/bootstrap-alert.js"></script> <script src="assets/js/bootstrap-modal.js"></script> <script src="assets/js/bootstrap-dropdown.js"></script> <script src="assets/js/bootstrap-scrollspy.js"></script> <script src="assets/js/bootstrap-tab.js"></script> <script src="assets/js/bootstrap-tooltip.js"></script> <script src="assets/js/bootstrap-popover.js"></script> <script src="assets/js/bootstrap-button.js"></script> <script src="assets/js/bootstrap-collapse.js"></script> <script src="assets/js/bootstrap-carousel.js"></script> <script src="assets/js/bootstrap-typeahead.js"></script> <script src="assets/js/bootstrap-affix.js"></script>  <script type='text/javascript' src='https://count.carrierzone.com/app/count_server/count.js'></script> <script type='text/javascript'> </script>  </body> </html>

CINXE.COM

UI Wizards - Web Blooper of the Month