Solving the Interactive Design Challenge with jQuery

6.14.2010 »
Stay up to Date

“I want to do something different with this report. I don’t just want to put a PDF on the site; I want this to be a standalone experience, and I’d like it to be similar to the experience of the book.”

So came the challenge from our client, who wanted to generate excitement and interest as well as to substantially cut costs for a major printed piece. If we could make the primary experience online engaging enough, we’d need significantly fewer copies of the actual book printed—and that could save tens of thousands of dollars. Plus, it would be fun.

The catch was that we still wanted the online experience of the text-heavy content to be like the experience of the printed piece, without traditional navigation or long, scrolling text—but still with a good, intuitive user experience. Our client used the visual of an animated page turn to describe what she was looking for, though she knew that wasn’t the right solve. I agreed—combining the weaknesses of one medium with the weaknesses of another doesn’t leave much hope for a good user experience.

So there we are. Well. I love a challenge.

Knowing I had to fit the experience into what’s comfortable for the user to look at on the screen, I started working through the options while I visualized how the end result should look and flow. Putting the book online isn’t a clean transition from print—it’s more like a presentation than a website. I initially thought about Flash, but I wanted an easily searchable, truly accessible experience. So how could we get the dynamic qualities of Flash combined with the user-friendly qualities of HTML and CSS?

I walked through my thinking with my programming partner on this project, Aaron. He suggested jQuery as a solve. If you’re not familiar with it (I wasn’t), it’s a cross-browser JavaScript library that streamlines interactions between JavaScript and HTML, and provides the capability to do what we were trying to achieve with this experience. A quick check with the client’s IT group confirmed it would not only run in their environment, but was actually their preferred solution. Sold!

Aaron built a prototype to test the idea, which was a big win. It confirmed the idea would work as we envisioned it, and brought it to life for the client. The solution allows the user to focus on a single page while still having awareness of the other pages in the document—similar to a book, but without the added tools and navigation of a standard web implementation. The navigation mechanism is clearly visible and moves with the user, creating the illusion of the eye moving to focus on a different part of the document (think of a newspaper with multiple articles artfully arranged on a single large-format page and you’ve got the idea).

Adding value to the solution, it’s also easily searchable and indexable by search engines, and meets accessibility standards—a growing requirement for online content as well as a passion area of mine. Accessibility is not only key for an equitable user experience—it’s a growing legal concern. Developing sites and online experiences to be accessible just makes sense, for the business as well as from the human perspective.

So how did it work? Really well. Our client was able to share the information, provide an excellent user experience with great search visibility, and dramatically reduce her printing costs—final savings are in the tens of thousands of dollars. 

Keep reading.
Load All
View More