Cheap Interactive Prototyping with HTML

Mark Dezelon / Interaction Design / Web & Software

An interactive prototype is a useful tool for a designer to relay and test their vision.  Send a prototype to your stakeholders for their approval.  Have participants use it during user testing.  Give it to your developers so they understand the final product.

There are many prototyping tools out there, from Visio to iRise, OmniGraffle to SketchFlow, Flash to Expression Blend, all with widely varying costs, features and limitations. Might I suggest using HTML, CSS and JavaScript?  Often used for web development, they can also be used to create your interactive prototypes.

Training materials are abundant and free. The Internet is full of free, comprehensive guides and tutorials for these languages. For those that prefer books, any bookstore with a computer section will have appropriate reference books.

You can build a prototype for no cost. All one requires is a free text editor (like Windows Notepad) to build an interactive prototype.  Other designers can edit your prototype without having to obtain proprietary licenses. And there are many graphical editors available on the Internet.

It’s easy to make changes. Presenting your prototype to upper management and they want to see the background color change from a light red to a dark red?  Fire up a text editor, change the color value, save it and refresh your browser.

Anyone can run your prototype for free. No need to install additional software to launch your prototype.  Any user on any system (Windows, Mac, Linux, etc.) can run your prototype with a web browser.  Upload your prototype to a public web server, and now iPhone users can run your prototype, too.

So what is HTML, CSS and JavaScript? Let’s say I wanted to create a simple “Save Changes” dialog:

HTML (“HyperText Markup Language”) describes a page’s content, like its buttons and text.  Here’s an HTML snippet for the above dialog:

<div class="dialog">
====<p>You have unsaved changes!</p>
====<ul class="button-list">
========<li><input id="saveButton" type="submit" value="Save Changes"/></li>
========<li><input id="discardButton" type="submit" value="Discard Changes"/></li>
========<li><input id="cancelButton" type="submit" value="Cancel"/></li>
====</ul>
</div>

CSS (“Cascading Style Sheets”) describes a page’s appearance. This includes background colors, button borders, font styles and text placement.  Here’s a CSS snippet for the dialog:

ul.button-list input
{
====margin: 2px;
====border: outset 2px #7f7fff;
====padding: 2px;
====background: #efefff;
}

JavaScript describes how a page interacts. Anything that is dynamic is specified with JavaScript. Here’s a JavaScript snippet for the dialog which uses jQuery:

$(document).ready(function()
{
====$("#saveButton").click(function()
===={
========alert("Changes Saved.");
====});
});

HTML, CSS and JavaScript will take time to learn, and you will run into the odd inconsistency between web browsers. And the more complex the prototype, the more you’ll need to know about HTML, CSS and JavaScript. But the information is out there to create accessible, cheap prototypes from typical web technologies.

Feel free the download the prototype sample code for reference.

Leave a comment...

Name (Required):

Mail (Required):