Appropriate use of Flash or JavaScript interactivity can really help improve a site’s user experience. When implemented with consideration, those who have no Flash or JavaScript, or perhaps use a screen reader, should not be prevented from accessing the site. Lack of proper consideration during the implementation process can even catch out the web professional. A while ago I encountered an ecommerce site from which I was unable to purchase simply because I was using a Mac (read about it here). The following article looks at some simple but effective interactivity implemented on a site I worked on a couple of years ago. As it was some time ago, the site may look quite different by the time you read this article.

Search Menu

Site search

We wanted to have the search bar be as compact as possible. We also disliked the way many searches place the results on a new page, taking you away from where you were at the time of carrying out the search. After all, if you didn’t find anything of interest it’s annoying to have to navigate back from a search result to the the page you had been reading. We built the search so that the filter radio buttons remain hidden until the input field has focus, when they slide into view below. The first 10 results are displayed in a slide out layer, with each result linking directly to a product page. If there are more than 10 results, a link appears, after result 10, which loads the results in a new page.

Search with no JS

Someone browsing with JavaScript disabled experiences things differently. First, the search filters are displayed, as discreetly as we could manage, below the search input. Second, the search results are automatically loaded in a new page. The outcome is a smoother experience for those with JavaScript and full functionality is maintained for those without.

Music player

Flash mp3 player

We replaced a piece of code, that played .wmv files, with a small Flash movie, which loads mp3 samples dynamically. This we placed on screen using Lightbox. This was simple and quick to achieve, and at the time of construction we built this several years ago it seemed unique. Happily today such features are much more common. Using either server side code or swfObect style Flash placement, even a feature like this should not present a problem to visitors who have neither Flash nor JavaScript. A text link to the mp3 in place of the Flash and Lightbox is all that’s required.