The U P A voice
August 2004 Contents

Featured UPA Links:

Job Bank

Member Benefits:
Discounts and Special Offers:

Event Discounts
Order your usability books now from the link from this site. Part of all sales help fund UPA.

Tools and programming languages for creating interactive prototypes

By Amanda Nance
Georgia Tech

This the first in a series of articles exploring the ways practioners go about making effective prototypes. This article presents just one method - the use of HTML and JavaScript. Amanda has posted requests on several usability lists requesting information about different approaches, and would be keen to hear how you do it.

HTML + JavaScript

JavaScript and HTML can be used in combination to prototype just about any web application. The shortcoming of HTML alone is that it is cumbersome to remember data from one page to another. For example, if you wanted to remember a setting the user chose at the beginning, such as language, this is possible in HTML, but if you want to save many pieces of data and use them later, JavaScript would be better.

The technique I ve seen for saving data with JavaScript uses two frames, one visible and one hidden. The visible frame is, of course, where the content appears, and the hidden frame is where the data is stored. Since the two frames are independent, you can change the visible frame to go to another HTML page without losing the data you saved in the hidden frame.

One thing JavaScript allows is the rewriting of HTML based on a user s actions. For example, let s say I have two address forms, one for the US and one for other countries. At the top of the form, I might have radio buttons to allow the user to specify their country, with a default of US and the US form below it. If the user chooses the other countries option, the other form could replace the US form without the page reloading.

Another nice characteristic of JavaScript is that it doesn t require that you specify data types as many programming languages do. In C++, for example, if you want to store a number and do calculations with it, you have to specify not only that it is a number but how much precision you want to store. JavaScript makes assumptions about what type of data you are storing, which means one less thing you have to learn.

Most programming languages will require a basic understanding of variables and functions, and JavaScript is no exception. However, JavaScript is easier to learn than more comprehensive languages like VB and C++. It seems that there are a few concepts that will give most of what you need: how to write and call functions, store variables, and rewrite HTML by embedding it in DIVs.

How does learning JavaScript compare to learning a tool like Flash? I don t know, but if you do, write me and we ll put it in the next issue.

I'd also like to hear how well it behaves across different browsers.

  Usability Professionals' Association
140 N. Bloomingdale Road
Bloomingdale, IL 60108-1017
Tel: +1.630.980.4997
Fax: +1.630.351.8490
Contact the Voice