Today's internet is full of highly interactive software, and prototyping interfaces has never been more important. Designers can't lay down pixels in Photoshop or Fireworks and expect the intended experience to transfer to their users. For example, an AJAX request can take anywhere from a few milliseconds to several seconds to return to the browser. Animations take time to complete. Hover effects add context that you can't always convey through a static image properly. The easiest way to see how these interactive elements will function is to prototype them.

In this article I'm going to cover how to plan your prototype, setup the HTML file and make a revision to the design after the first round of testing. As a demonstration, I'm going to design a new feature for the article page on Wired.com. Let's assume that the research phase of my project found that readers of Wired were curious to see what the next article was going to be and how long ago it was published before they decided to read it. I'm going to prototype this interaction before I pitch the idea to management.

Step 1: Isolate Static Elements

The first step I take in starting a new prototype is to figure out what elements are going to remain static and save them as an image directly from the design mockup. This allows you to stick the PNG in the page body's background and avoid the time it takes to write and test real HTML/CSS.

body {
        background: url(background.png) top left no-repeat;
}

Step 2: Create HTML for the Interactive Elements

Next, create, style and position any HTML elements you need the user to interact with via jQuery. I tend to use inline CSS to keep the number of files to a minimum. This technique only requires an index.html file and any additional images you've created. For quick prototypes, it is easiest to absolutely position your dynamic elements. For clarity, only the left link and box is shown.

#leftlink {
        position: absolute;
        left: 93px;
        top: 313px;
        color: #007CA5;
        text-decoration: none;
}

.box {
        background: #fff;
        border: 1px solid #ccc;
        padding: 20px;
        z-index: 5;
        -moz-box-shadow: #888 2px 2px 8px;
        -webkit-box-shadow: #888 2px 2px 8px;
        box-shadow: #888 2px 2px 8px;
        display: none;
}

< a href="javascript:void(0)" id="leftlink">PREVIOUS POST</a>

Step 3: Add in jQuery

Once you've got all of your elements in the HTML file, it's time to add some interaction. I'm a huge fan of the jQuery library, but you can use any other library or just vanilla Javascript if you want. As an aside, I'm intentionally being a bad person by including Google's copy of jQuery directly, but this allows me to keep a text snippet of my "base" prototype that doesn't require any extraneous files to start from.

In this example I'm going to have a summary box appear when the user hovers over the previous or next article links. Most of this effect will be done by toggling the HTML element to be visible and changing some CSS when the link is hovered over.

$(document).ready(function() {
                        
        $("#rightlink").hover(function(){
                $("#rightmore").show();
                $(this).html("NEXT POST ››");
        }, function(){
                $("#rightmore").hide();
                $(this).text("NEXT POST");
        });

});

Step 4: Iterate the Design

Now that you've got a working prototype, you can test this out with real users very effectively. You don't have to explain your thought process, just as "Show me how you would travel to the next post". Suppose that after this testing you realize that your users still aren't sure where that link is going to take them. Perhaps adding an animation that reveals the preview box from the direction of the next article. We are implicitly using the convention that the left side is older content and the right side is new content, just as pages are laid out in a book

$("#rightlink").hover(function(){
        $("#rightmore").show().animate({
                left: '460px',
                opacity: 1
        }, 100);
        $(this).html("NEXT POST ››");
}, function(){
        $("#rightmore").animate({
                left: '770px',
                opacity: 0
        }, 100);
        $(this).text("NEXT POST");
});

Conclusions

It turns out that the second iteration of the effect is way too intense for my taste, but that shows you the value of prototyping. As a designer, it is difficult to predict how that interaction might feel to the user while remaining within Photoshop or Fireworks. Once you've made a few simple prototypes you can graduate to simulating or making real AJAX requests, you can enhance them by simulating loading indicators, ajax requests, or other elements to make the page pretend to be alive.

If you found this tutorial helpful, please leave a comment. If you run into any problems or would like specific advice on how to set up your prototype, please feel free to contact me.