Imagine you are trying to describe an elaborate dance to someone and all you have available to you is a series of pictures. Sure you can add words to the pictures - "The dancer spins around moving her left arm in a wide arc while holding her partner by the right hand" - but you will never be able to communicate the rhythm of the dance or the subtleties of the movement.

The same is true for interface design. Static mocks alone are not able to communicate a dynamic design. Many designers are comfortable coding HTML and CSS but have stopped short of using JavaScript to make their designs interactive. Perhaps you have tried a JavaScript library like JQuery. These libraries are great, however, they were created for developers and offer much more power (and complexity) than what most designers really need.

The purpose of this article is to equip designers with a core set of skills that will allow them to demonstrate dynamic behavior in their HTML prototypes. The information here is intended for the designer, not the front-end web developer. Our focus is on demonstrating high-fidelity designs, not developing production code.

This question is probably best answered by an example. Let's say you are designing a list interface and want an intuitive way for users to remove items from the list. You want the experience to be obvious, smooth and maybe have a little bit of panache :-) So you come up with the design below. When the user positions the pointer over a row, the row highlights. When they click the X, the row fades and then animates closed. Go ahead and try it below.

This design is typical of the type of interaction common on the web today. A pretty simple interaction, but it would not be that easy to described in words. In fact, to get the details of this interaction correct, you really need to see it in action. How else are you going to know how to balance the speed of the fade and the close animations?

We call this "rapid prototyping" because our sole purpose is to demonstrate the design. Because we are not trying to deliver production-ready code, we can work very quickly. We need to be 100% accurate in the demonstration of the design. But once we've attained that, we're done.

So how does one create a prototype like the one shown above? It’s not as difficult as you might think. Let’s start with some basic concepts.

The Document Object Model (or DOM) defines the logical structure of a web page and the way the page is accessed and manipulated. Every web page has an inherent DOM structure. In addition, you can explicitly give names to objects on the page. Using JavaScript, you can manipulate these named objects. For example, you can hide and show objects, change their color, or move them to another position.

In the list example above, each row has a name and a style. When the user positions the mouse pointer over a row, an event is triggered that causes the background color to change. When the user clicks an X, another event is triggered. This event calls a JavaScript function that fades the row and then animates it closed.

Objects on your page have styles. Font size, font color, the width of input fields, are all style attributes that can be specified in Cascading Style Sheets (CSS). Classes are used to group style specifications together and give them a name. For example, you might have a class named “headerText” that specifies Gray 20 pixel Ariel font. Styles and Classes are very powerful, you can use them to define a way objects appear on the page, you can also use them to move objects around and hide them. Classes and styles can be changed using JavaScript. This is huge.

Events are things that occur on your web page that you can detect and take action on. In the example above two events are demonstrated. A "hover" event triggers a style change that causes the row color to change when the user positions the mouse over the row. An “onClick” event is specified that causes a JavaScript function to be called when the user clicks on the X. The JavaScript function animates the removal of the row.

We see in the example above that JavaScript can be used to hide and show objects by changing their styles. This concept is incredibly powerful. Much of what you do in a prototype involves hiding and showing elements.

JavaScript is a high-level programming language. We use JavaScript to perform the logic we need to make our web page interactive. For example, if you wanted to have different dialogs display depending on which choice a user makes, you would use JavaScript to determine the correct dialog, display it, and to perform any subsequent actions the user requested. The key thing to remember is that you can begin to use JavaScript to do simple things, and slowly begin to do more complex things as your skill increases. You don't need to become an expert all at once.

For a long time websites were limited to static pages. The user would view a page, perform an action (such as clicking a hyperlink or clicking a submit button) and a new page would load. Early attempts to make the web more dynamic failed miserably for two reasons. First, most users did not have the bandwidth necessary to download the JavaScript, and CSS necessary to make the page dynamic. The second (and more important) reason was browser incompatibility. Only a core subset of JavaScript and CSS would work the same across different browsers. To do anything interesting (such as show/hide, popup windows, or drag and drop) required the web application to detect the browser the user was using, and execute a different set of code depending on the result. This made it prohibitively expensive for designers and developers to deliver dynamic behavior. The web stagnated. It was a dark time :-)

Thanks to standards, the cost of development has dropped dramatically and the web has become much more dynamic. It is very common now to see web sites that take full advantage of technologies such as JavaScript, CSS, Webkit and AJAX to deliver a dynamic user experience.

Every medium has its own strengths and weaknesses. An artist working in oils can do things that one sketching in pencil cannot, and visa versa. If an artist tried to use pencil-sketching techniques while working in oil, chances are the results would not turn out very well. Just like an artist, the designer must understand the medium - i.e. the client technology that will be used in the product. The capabilities of Flash for example are very different from those of HTML. When a designer understands the client technology, they can exploit it. This is why it is important that prototypes be constructed using the same client technology as the product.

Here is a simple example that demonstrates some of the concepts discussed above.

Clicking "Show more..." does two things. First, it displays additional information about Massachusetts. Second, it changes the link to "Show less...". Below is the code for this example. You can copy and paste this code into a code editor, save the file with an extension of .htm or .html, and it will run in any modern browser.

Study the code. Notice that there are two functions, "showMoreClick" and "showLessClick", and three divs. Divs are containers. Two of the divs have ids, "moreInfoContent", and "moreInfoLink". We didn't bother to give the third div an id because we don't plan to manipulate it with JavaScript. The first two have ids so that we can.

The "moreInfoContent" div has a style, display:none. This hides this div by default. When the user clicks the link "Show more...", the function "showMoreClick" is called. This function does two things. First it changes the style of "moreInfoContent" to display:block, which causes the div to be displayed. Second it changes the innerHTML of the "moreInfoLink" to "Show less..." and a different function call. The other function "showLessClick" does the reverse, making this a toggle.

This is a simple example but it demonstrates some very important concepts:

 · Objects on a web page can be given ids.

 · Actions the user takes can call JavaScript functions.

 · Functions can manipulate objects on a page.

If you understand the concepts above you are well on your way to adding dynamic behavior to your prototype.