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>Mystery Plug-In Required</h2> <p>Nothing is more frustrating than finding a link to the content you seek, only to find that to view the content, you need a browser plug-in that you don't have. </p> <p>OK, I take that back. There is one thing more frustrating: not being able to find the @#!$!*&! plug-in because the website that requires it gives you no clues as to what plug-in you need.</p> <h3><a href=http://traffic2.bayinsider.com/traffic/ target="Web Blooper Window" title="BayInsider">BayInsider.com</a></h3> <p>BayInsider.com, a SF Bay Area information site run by local television station KTVU, offers traffic cameras so Bay Area residents can check highway traffic conditions before heading out on trips. The traffic images are updated every few seconds. Unfortunately, viewing the traffic images requires a browser plug-in. What plug-in? I don't know, because neither BayInsider.com nor Netscape.com (where BayInsider sent me to get the plug-in) would say.</p> <p>First, I clicked on the camera image I wanted to see.</p> <IMG SRC="assets/wb_images/WBloop31_BayInsider1.gif" WIDTH=426 HEIGHT=442 alt="BayInsider example of Web Blooper"> <p>In place of an image, a message appeared saying I needed a plug-in (without naming the plug-in), and providing a link to "get the plug-in".</p> <IMG SRC="assets/wb_images/WBloop31_BayInsider2.gif" WIDTH=354 HEIGHT=325 alt="BayInsider example of Web Blooper"> <p>Clicking on that link brought up a dialog box from Netscape.com saying that I needed a plug-in. Thanks, but I already knew that. There was a button to "Get the plug-in". I clicked it.</p> <IMG SRC="assets/wb_images/WBloop31_PlugInDialog.gif" WIDTH=639 HEIGHT=283 alt="BayInsider example of Web Blooper"> <p>Finally, I am taken to Netscape's page that lists plug-ins for viewing the content of the page on which we started this journey. I am supposed to choose a plug-in to download and install into my browser.</p> <IMG SRC="assets/wb_images/WBloop31_NetscapeDeadEnd.gif" WIDTH=306 HEIGHT=222 alt="BayInsider example of Web Blooper"> <p>Unfortunately, the list is blank: Netscape tells me (in poor English grammar) that it couldn't find any relevant plug-ins. As compensation, it offers to let me search Netscape's entire plug-in repository to find the one I might need. How am I supposed to do that, when neither BayInsider nor Netscape provided any information about what plug-in I need?</p> <h3><a href=http://micro.magnet.fsu.edu/primer/java/scienceopticsu/powersof10/ target="Web Blooper Window" title="FSU">Florida State U -- Powers of Ten Demo</a></h3> <p>BayInsider is only one of many, many websites that require mystery plug-ins to view their content. Florida State University, for example, has a nice demonstration of zooming from a view of a leaf up to the Milky Way galaxy and down to components of the atom, entitled "Powers of Ten". Unfortunately, when I tried to view the demo on my Mac, I got the dreaded "missing plug-in" symbol and a link to "get the plug-in", with no information about what plug-in was needed.</p> <IMG SRC="assets/wb_images/WBloop31_FSU1.gif" WIDTH=589 HEIGHT=584 alt="FSU example of Web Blooper"> <p>Predicably, it lead me down the same wild-goose chase as the BayInsider site had.</p> <IMG SRC="assets/wb_images/WBloop31_PlugInDialog.gif" WIDTH=639 HEIGHT=283 alt="BayInsider example of Web Blooper"> <p>Ending at the same dead-end. Aaargh!</p> <IMG SRC="assets/wb_images/WBloop31_NetscapeDeadEnd.gif" WIDTH=306 HEIGHT=222 alt="BayInsider example of Web Blooper"> <p>Why is it that so many plug-in quests dead-end at Netscape's archive, with Netscape coming up empty-handed?</p> <h3>Avoiding the Blooper</h3> <p>As Web designers and developers, we really must do better at assuring that visitors to our websites have or can get the required plug-ins. Otherwise, we are just blowing off a large number of potential customers.</p> <p>The following is a preliminary list of guidelines, but I'm open to suggestions for more.</p> <ul> <li>Go to great effort to avoid requiring unusual plug-ins. If your site requires plug-ins, try to make them the ones most people have, e.g., Flash, Acrobat Reader, Quicktime, Windows Media Player.</li> <li>Don't require the absolute latest version of a plug-in. Most people won't have it yet. To be safe, base your content on <em>last year's</em> version of the plug-in.</li> <li>Identify the required plug-in in the ALT text for the content-element, and perhaps nearby on the page. That way, if people try to find the plug-in at Netscape's archive, they will know what to look for.</li> </ul> </div> <div class="span3 sidebar"> <h3>Posted: Aug 2004</h3> <h4> <a href="wBloop30.html">< Prev</a>       <a href="wBloop32.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