By Brian | August 1, 2008
Don’t invest your resources in unproven ideas. Prototype the idea first, make it live, and make adjustments as necessary based on user feedback. This idea was reinforced on a recent project that I directed. The scope of the project was to redesign an online donation application with a goal of increasing donations. The redesigned page was originally a list of 50 funds available to donors. The initial enhancement made the list searchable by keyword, location, sponsor, and type of fund. For the most part it was a quick solution that would have marked results.

Shortly before the enhancement launched, additional features were requested by the project’s stakeholders. They suggested that the search form was not “visual” or “emotionally compelling” enough to increase donations. Their desired solution was the typical request for something interactive, engaging, and of course included Flash. Such a request would require resources beyond the scope of the project, so instead I suggested using an image map as a quick and easy prototype to roughly accomplished the desired effect.

The project was launched with both the form and map interface. After the redesigned page spent a few months in the wild I installed Crazy Egg, which provided a visual representation of the page’s click density. Crazy Egg allowed me to observe how each interface was performing in real-time.

Outcome
I can’t say I expected to see such a drastic difference, but users overwhelmingly preferred the form over the map. The feedback will now inform how I tweak the both the map and the form. If I don’t eliminate the map entirely, I will definitely modify the instructions; both “roll over” and “Partnership Projects” are not user-friendly terms. I’m very happy with the form, but will likely reorder the fields based on their usage.
Also posted in Design | Tagged Peace Corps |
By Brian | March 24, 2008
Flash has always been a great vehicle for delivering multimedia content on the web. I’m always wowed by its unlimited bounds, but I’m simultaneously disappointed by its poor handling of SEO and accessibility. While the rest of the web has evolved into a rich and standards-based medium, Flash and its developers have concentrated on beefing up the bling. In 2005 Macromedia published Best Practices for Accessible Flash Design, a white paper that did little to address real accessibility needs.
The issue stems from how Flash is referenced within a web page. Traditionally Flash was detected by HTML using either <embed> or <object> tags, however both tags have accessibility and plug-in detection issues, and <embed> is invalid XHTML. These methods can cause some browsers and screen readers to misinterpret or entirely ignore your Flash content.
My favorite solution to this problem has been Bobby van der Sluis’ Unobtrusive Flash Object (UFO), but it was recently deprecated and replaced by Geoff Stearns’ SWFObject 2.0. Like UFO, SWFObject is a DOM script that detects the Flash plug-in and embeds Flash objects. It’s JavaScript API provides an amazing and complete toolset for embedding SWF files and retrieving Flash Player-related information. It has its roots in the web standards community and is designed to support W3C standards-compliant, accessible and search engine friendly web design. The handy JavaScript detection determines whether Flash content or alternative content should be shown and avoids outdated Flash plug-ins break Flash content. The example below illustrates how simple it is to detecting Flash and add alternative content.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<title>SWFObject v2.0 dynamic embed – step 3</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<script type=”text/javascript” src=”swfobject.js”></script>
<script type=”text/javascript”>
swfobject.embedSWF(“myContent.swf”, “myContent”, “300″, “120″, “9.0.0″);
</script>
</head>
<body>
<div id=”myContent”>
<p>Alternative content</p>
</div>
</body>
</html>