A while back, I wrote a series on the UX practice of rapid prototyping: the fabrication of working models for a given web interface to give users something to evaluate early in the project life cycle.
At its core, prototyping is based on that old adage “seeing is believing.” Rapid prototyping can be immensely valuable in getting a quick, effective take on how well a given user responds to, understands, and can effectively navigate our designs.
What most people don’t realize is that the depiction of the interface doesn’t have to be high fidelity. Just as we use wireframes to get a basic sense of layout and priority, our prototypes can be of a similar rough draft variety (depending on what is being tested, of course). In the series, I dedicate a post to each of three approaches I use to create prototypes, ranking them based on how fast and easy they are to do.
Paper prototypes are by far the fastest and easiest way to rough out a layout. All you need is paper and marker and the ability to draw boxes to give a tester a basic understanding of where web elements will appear. Plus, the sketch-like quality of the images along with the more casual one-on-one interaction is less intimidating and encourages a candid, unfiltered response. (I have done a similar process using a whiteboard, too.)
Faux prototyping, or the “fake it ‘til you make it” approach uses presentation software (like PowerPoint or Keynote) to create what appear to be clickable models of an interface. The learning curve is much lower when using these types of programs, and they offer the use of animation, a key element in creating cognitive connections between changing states on screen.
I wrapped up the series with good old HTML & CSS prototyping. Yes! Creating actual web pages as prototypes — crazy, huh? Web evolution has taken off so rapidly and we are so inundated with more and more powerful tools and libraries that the plain and simple workhorse of the web, HTML, gets too often overlooked. You can quickly and easily create a working HTML prototype that can be shared with a tester online, on any device (important for responsive projects), and which is fully clickable/interactive.
Some of you bleeding edgers out there might be thinking, isn’t rapid prototyping a prime candidate for implementation via AI? Like many questions surrounding AI and web development, I’m not sure there’s a clear cut yes or no answer here. What I will say is that UX, at its heart, is an exercise in empathy and human connection. From a business perspective, AI is seen as a way of completing work faster and cheaper. UX is about the quality of a given experience for humans trying to complete a specific task within a variety of contexts. I worry that the UX baby could potentially be thrown out with the cost-saving bathwater.
The rapid prototyping approaches I outline are ones I still rely on in my professional practice, especially in light of how rapidly web tools and interfaces are changing. Hopefully, they can help you explore human-centered design options quickly and effectively on your next project.
