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>Important Info Below Fold</h2> <p>This may be the original Web blooper -- a design error that has been common since the first websites were put up. It has been discussed and written about for so long by so many Web design experts in so many books and articles that I decided not to mention it in <em>Web Bloopers</em>. I figured Web designers were well aware of this blooper and the need to avoid it.</p> <p>I guess I was wrong.</p> <h3><a href=http://traffic2.bayinsider.com/traffic/ target="Web Blooper Window" title="BayInsider">BayInsider.com</a></h3> <p>For example, on the Home page of BayInsider.com, a SF Bay Area information site run by local television station KTVU, the most important content on the page -- a list links to Bay Area resources -- is below the fold (see below).</p> <IMG SRC="assets/wb_images/WBloop32_BayInsider1.gif" WIDTH=562 HEIGHT=430 alt="BayInsider example of Web Blooper"> <p>To see the resource list, visitors must scroll down the page (see below).</p> <IMG SRC="assets/wb_images/WBloop32_BayInsider2.gif" WIDTH=562 HEIGHT=383 alt="BayInsider example of Web Blooper"> <p>Compounding the blooper, if a visitor chooses "CalTrans Traffic Cams" from the resource list to see live camera-images of traffic on local highways, BayInsider displays a page on which the camera-images -- what the user wanted -- are below the fold.</p> <IMG SRC="assets/wb_images/WBloop32_BayInsider3.gif" WIDTH=562 HEIGHT=430 alt="BayInsider example of Web Blooper"> <p>To see the camera-images, visitors must scroll down the page <em>again</em> (see below).</p> <IMG SRC="assets/wb_images/WBloop32_BayInsider4.gif" WIDTH=562 HEIGHT=383 alt="BayInsider example of Web Blooper"> <h3><a href=http://www.weather.com target="Web Blooper Window" title="Weather.com">Weather.com</a></h3> <p>The blooper can also be seen at Weather.com. Request a 10-day forecast for a city -- in our example, Oakland, CA -- and the site goes to a page on which the <em>current</em> weather is in view, but the 10-day forecast -- what the visitor specifically asked for -- is below the fold.</p> <IMG SRC="assets/wb_images/WBloop32_Weather1.gif" WIDTH=562 HEIGHT=417 alt="Weather.com example of Web Blooper"> <p>To see the 10-day forecast, visitors must scroll down the page (see below).</p> <IMG SRC="assets/wb_images/WBloop32_Weather2.gif" WIDTH=562 HEIGHT=417 alt="Weather.com example of Web Blooper"> <h3><a href=http://NPS.gov target="Web Blooper Window" title="NPS">U.S. National Park Service Website</a></h3> <p>The U.S. National Park Service's website for reserving campsites has a particularly severe form of the blooper. Clicking on a link to reserve a campsite displays a small pop-up window in which the link for the main function of the window -- reserving a campsite -- is below the fold (see below).</p> <IMG SRC="assets/wb_images/WBloop32_NPS1.gif" WIDTH=563 HEIGHT=466 alt="NPS.gov example of Web Blooper"> <p>To make a reservation, visitors must first scroll down the page (see below).</p> <IMG SRC="assets/wb_images/WBloop32_NPS2.gif" WIDTH=563 HEIGHT=466 alt="NPS.gov example of Web Blooper"> <h3>Avoiding the Blooper</h3> <p>So many Web experts have complained about this design blooper before me that I'm not sure what more to say. What will convince Web designers, developers, and managers to make sure that the most important content is visible without scrolling.</p> <p>Even just making sure important content is at least <em>partially</em> visible helps -- at least then users can see that there is something that they have to scroll down to see.</p> <h3><a href=http://www.Sun.com target="Web Blooper Window" title="Sun">Sun Microsystems</a></h3> <p>Sun Microsystems' website is one site that does a good job of keeping important content in view above the fold. In fact, Sun's Home page requires <em>no</em> scrolling at all in "normal" sized browser windows (see below).</p> <IMG SRC="assets/wb_images/WBloop32_Sun.gif" WIDTH=562 HEIGHT=484 alt="Sun.com example of Web Blooper"> </div> <div class="span3 sidebar"> <h3>Posted: Sep 2004</h3> <h4> <a href="wBloop31.html">< Prev</a>       <a href="wBloop33.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