Try Before You Buy: Website Prototyping

Remember when “extreme makeover” was a thing? Not so long ago, it was a staple of cable TV, and everything was getting extremely made over: kitchens, cars, wardrobes, pets, investment portfolios, you name it. It was enough to make you not want to change anything in your life at all.

But have you thought about an extreme makeover for your website? Fashions and styles change, and the march of progress brings cool new features you can implement. Updating your site’s design and features from time to time can keep it fresh and interesting for your visitors.

But before you rush into anything, consider this: Architects have software that can show you what your remodeled bathroom will look like. And web developers have prototyping software.

Prototyping 101

Simply put, prototyping (sometimes called wireframing) is any method of simulating how a website—or any software, for that matter—will function when a user interacts with it. Prototyping enables developers and users to evaluate a design before committing actual development resources to it. Much of the functionality of a site, including links, forms, and other interactive features, can be simulated, and most of the visual design can be represented, too.

Taking Maximum Advantage of Prototyping

The main advantages of a good prototype are:

  • You can see whether the designer or developer has interpreted your (and your visitors’) wants and needs correctly.
  • You can catch and correct usability problems before they are committed to code.
  • You can simply see whether you like it and ask for design changes.
  • Design changes can be simulated rapidly, often in the same session.
  • You can effectively start testing your site before it’s even built.

A prototyping session is your opportunity to work with the designer or developer to ensure he has a clear understanding of what you’re looking for, and he can give you a clear understanding of what you can actually have, given your budget. (Almost anything is possible in software, but you might have to shell out more for more complex features.)

Limitations of Prototyping

Preparing a prototype takes some effort—not as much as actually coding HTML and JavaScript, but there will be some billable hours involved. (Remember, a few hours spent on prototyping can save you many more hours of rework later on.) So the more detail you want to include in the prototype, the more it will cost. Some other limitations to keep in mind:

  • Not every function can be (easily) simulated. Prototyping systems vary in sophistication, and they all have limits.
  • You may not want to expend the effort to simulate every possible click path. If not every use case is simulated, it doesn’t mean the final product won’t work; it just hasn’t been represented in the prototype.
  • Performance (such as page loading time) will be different from what is actually experienced by end users. The prototype may be faster or may be slower, but it will almost certainly be different.

Ready For Your Makeover?

The next time you talk to a developer or designer about giving your website an extreme makeover, ask about prototyping. For websites with even a moderate level of user interactivity, seeing how it will work can be a real eye-opener.