Prototyping with HTMLBermon Painter - 01/24/2011

Intro

There are lots of ways to communicate and document a design. There are requirements documents, wireframes, visual comps (photoshop/fireworks, etc), and prototypes. Each of these types of documentation has value in certain contexts.

“It’s one thing to talk about them and have storyboards and another thing to see them for real.”—Robert Hoekman, Jr.

This is where I could be cliché and say something like “a picture is worth a thousand words” and be craft and ask “how many words do you think it would take to describe a web interface?”

I won’t do that but I will say that no mixture of words and diagrams will never be able to accurately describe a dynamic web interface with multiple actions & outcomes.

Those representations just aren’t accurate enough and will lead to misunderstanding and in turn lead to adjustments. We want to avoid that.

Benefits of HTML prototypingPrototyping helps get ideas out of your head but prototyping with HTML gives you something you can play with, experience, work through and test.

Bridge the communication gap

Take a huge 50-60 page requirement doc into a meeting with 10-15 people. Have them read it and then ask them what you’re building. It just doesn’t work.

But take an HTML prototype into the meeting and things immediately change. Because it’s tangible and functional those in the meeting can understand it. When you’re discussion how things work, everybody will be on the same page. There won’t be a need to interpret the design or requirement docs. As an added benefit you can make functional or layout changes on the fly.

Using an HTML prototype will improve communication & feedback.

As you’re interfacing with clients or stakeholders they can click, touch and interact with the prototype. It’s easy to hold meetings, create documentation, revise that documentation, hold more meetings, and make more revisions. \

Providing a working prototype is the only real way to find and solve for problems that you may not have expected when working on estimates or timelines.

The sooner you find these problems, the sooner you will have concrete timelines. You just can’t do that with documentation & wireframes.

Reduce Waste and Save Time

In typical design processes (more so on larger, specialized teams) requirements are created, passed around through management to be approved, meetings are scheduled, then passed off to a designer or a developer who then has to interpret all of this documentation.

Requirement-driven processes inherently create waste, and lots of it (not only in the form of paper, but also time for everybody involved). They are written by the wrong person, are constantly changing (even after things are “final), individuals misinterpret and filled with non-essential features.

Including HTML prototyping in these processes can help reduce waste.

1. Decisions by the right people. Designers and developers can contribute to the process and ensure that the right people make the design/development decisions.

2. Survival of the fittest. Multiple ideas can be created and tested so that the strongest solutions survive.

3. Adaptive. HTML prototypes can be quickly updated.4. Reduced misinterpretation. An HTML prototype is a visual and functional

representation of the system. This leaves less room for misinterpretation that a huge requirements doc resulting in less rework, lower costs and faster time to launch.

5. Focus. Produce more focused products & produce less waste in design, development and rework.

6. Reduce risk. The earlier you can catch mistakes or problems during the dev/design cycles the lower the cost it will take to fix them.

Strenghts

1. Platform independent: Mac, windows, or linux. It doesn’t matter2. Free: There are plenty of free editors. You can even you text edit or notepad.

3. Gauge feasibility: Working with real code gives a better sense of what’s possible and how much effort it’ll take.

4. Modular & Reusable: HTML prototypes can include files that are modular and can be reused over and over again.

5. Free frameworks: jQuery, blueprint, etc.6. Collaborative. Multiple team members can work on a prototype at the same time. (if

working on large teams use version control like Git /w Github).