HTML prototyping is a rewarding experience with many great benefits, including improved customer communication, valuable early user testing and faster, more effective use of your software development time.
What is a HTML prototype?
A HTML website prototype or a HTML app prototype is one of the earliest versions of a website or web application, and is a working prototype of how the finished software solution might work.
An HTML prototype is interactive, allowing the customer or end users to fire up their web browser, navigate to the prototype and actually engage with it as they would the final software solution.
Often it’s the case that a wireframe (grayscale block diagram that only illustrates the overall navigation and the blocks of elements such as content, functionality, etc.) is used first for high-level discussions and to obtain broad agreement, with the HTML prototype created next.
The HTML prototype adds basic design and is normally a series of linked static HTML pages to show to the customer or end users the basic flow and functioning of the proposed software solution.
With even a basic HTML prototype you, your customer and end users get all the benefits of interacting with the website or web application and seeing the flow and functionality of what the finished software will look like, with none of the downsides of implementing the actual functionality, only to change or throw it away if it’s not fit for purpose.
Using HTML prototypes in this way speeds up software development time and means that no work on the software project is ever wasted.
HTML prototype example
The screenshot below shows one page of this sort of HTML prototype. This HTML5 prototype is online and you can interact with it to see the flow and functionality of the proposed system. This HTML prototype example is for a fictional back office system for a software development company to keep track of their projects, clients and software releases.
Notice that it shows that the software will have primary navigation with four categories (Dashboard, Projects, Clients and Releases), user integration (top righthand corner), a search box and an email inbox (with 2 messages waiting).
This HTML5 prototype is a linked set of HTML5 pages for the website that can be shown to the customer and/or used for some early user testing to get valuable early feedback on the flow, functionality and use of the software.
Why avoid HTML prototyping?
We’ve all heard the many reasons why developers don’t want to use HTML for prototyping. The most common reason for their reluctance to use HTML for prototyping is because they are already comfortable with the long-standing staple of the web design and development prototyping toolkit, image and graphics software such as Adobe Illustrator, Adobe Photoshop and old favourite OmniGraffle, that allows them to quickly produce HTML prototype images and graphics.
But, technology has moved on and several HTML prototype tools exist to allow technical and non-technical users alike to create low-fidelity prototypes very quickly. Our preferred rapid prototyping software is Balsamiq , which is a GUI prototype tool. Other tools for quickly creating wireframes and prototypes include Wireframe , Moqups , UXPin , axure and Invision .
Let’s have a quick look at the benefits of HTML prototyping that could convince you to replace your static prototype images with HTML prototypes.
Creating customer value from the start
The biggest benefit of a HTML prototype is visible value for the customer at the very beginning of the software project.
Some of our customers are confused about the difference between interaction and visual design. By focusing on creating an interactive HTML prototype at the beginning of the software project, we can easily demonstrate that the focus of our work will be on how end users will use the final software product as opposed to how it looks visually.
To make producing a quick responsive HTML prototype faster we use Twitter’s front-end framework – Bootstrap , as it contains user definable responsive layouts and common website/web application components like buttons, tables, lists, etc in an easy to use format.
By using Bootstrap we cut down significantly on the creation time and work involved in producing the HTML prototype and by using a well-documented front-end framework design decisions are removed from the equation of the HTML prototype, so the emphasis is on the flow and functionality of the prototype and not on the visual design.
Then when we show the customer how we have envisioned their software solution from their requirements, we are also demonstrating our awareness of the software project’s technical constraints.
Even if your prototype is based on the simplest HTML out there and only takes a couple of hours to create, the fact that you have ventured out of the realm of graphics software programs demonstrates your concern with creating something that is implementable and not just a pie-in-the-sky concept.
Improved communication
When it’s time to show your work to the customer and demonstrate its value, the next benefit of HTML prototyping becomes improved customer communication.
Sometimes it may be difficult for a customer to understand the cleverness of the User Interface (UI), User eXperience (UX) or Customer eXperience (CX) that is being proposed, because they cannot experience it for themselves if they are merely shown static images either on a computer screen or as mock-ups printed on card and displayed on an easel.
Miscommunication is a very common problem and can result from misunderstood verbal descriptions of how end users will interact with the final software product if only static images are available to show the customer and/or the end users.
We used to have this problem when we started 10-years ago, but we now understand the need for our customers to see and more importantly use early wireframes or HTML prototypes. So much so in fact, that we now do wireframes and HTML prototypes on nearly all of our software projects, due to the fact that it really adds value to the software development project for both the customer and us.
Communication through demonstration is especially important when the software project does not have a pre-defined functional specification, i.e. a complete and definitive list of the functionality and/or content areas that the final software product must have.
For example, when we worked with the homeless charity, Shelter to create a new back office information sharing platform, we worked them through the software development process to define and develop their new platform as they had never engaged a software development company before.
As with most of the online platforms we develop, usability was an important factor and we used rapid HTML prototyping to mock up the screens to match the end result. This allowed Shelter to share the HTML prototype with third party representatives for sign off and ensured everybody shared the same vision from the outset.
Validate ideas
Another customer communication benefit becomes apparent when your customer suggests some interaction scheme that they are sure will work, and you are sure from an end user point of view, won’t.
If a gentle suggestion to steer the customer in another direction doesn’t work, we’ve found that creating an HTML prototype to demonstrate the problems of the proposed idea is much more convincing than further discussion. Always remember the old saying, “Show, don’t tell”.
Often experiencing an idea is very different from describing it and since the idea is now prototyped, it can easily be validated through user testing if you need more end-user feedback to convince the customer that their idea is not the right solution in this instance.
Valuable user testing
An important interaction design benefit of a HTML prototype is the way it lends itself to valuable user testing. Because of their interactivity, HTML prototypes are regularly used to user test software flow and functionality on the fly with the end customer, end users and in-house software developers and testers.
We use Slack in the office to ask software developers, testers and other members of staff to quickly look and use early prototypes to get some quick and normally very useful feedback.
We normally start out by testing wireframes and then when everyone is satisfied with the wireframes, we can then easily translate the wireframes into HTML pages and link them all together into an HTML prototype and conduct more formal usability testing without having to do additional setup work.
Of course, for formal usability testing, we still have to create a test plan and scripts for the tasks that we need to test. Your HTML prototype might need more or less modification to fully cover those areas you need to test depending on your setup.
However, we’ve found that our wireframe and HTML prototypes convert to end-user test material with minimal effort because the framework for every page is already in place and is very flexible.
Return On investment (ROI)
If we haven’t yet convinced you of the benefits of HTML prototyping, perhaps this point will: return on investment (ROI).
These days, everyone is talking about ROI. By emphasising your use of HTML prototypes to your customers, you can also make legitimate claims about decreasing software development costs through more consistent implementation and quicker specification.
We use our HTML prototypes directly in our specification to communicate to our software developers exactly how the final software product needs to work. More complex functionality, not in the HTML prototype, can always be explained via bullet points under the screen itself.
Although the HTML prototype perhaps lacks the final graphical design flourish, it demonstrates the functionality and the flow of the final software solution, leaving little room for software developer confusion, which in turn saves time during the software development cycle. Furthermore, your customer saves money because your time isn’t spent explaining every detail in a text-heavy specification document.
HTML prototype to marketing prototype
Finally, the last customer benefit is a potential follow-up project for you. Since you saved the customer money in the specification, you can now spend it by selling them a robust version of the HTML prototype.
A well-crafted HTML prototype can easily be turned into a marketing prototype once the visual design is complete.
Many projects that we’ve worked on take a long time to implement due to the complex nature of the software solutions we are building, but inevitably the marketing team always needs something to show next month at a big conference or event. With an existing HTML prototype, it is easy to apply the final visuals for your customer to show their users before the final project is complete. Everybody wins.
HTML is for more than just the Web
Hopefully, now that we’ve sold you on HTML prototyping, the important thing to note is that HTML wireframing and prototyping is for more than just web projects.
In the past, we have used HTML prototyping for both desktop and smartphone applications. For example, we worked with Inform Direct to create an HTML prototype of their company secretarial software to identify and mitigate the risks inherent in their requirements for their software. The finished HTML prototype gave Inform Direct the confidence they needed in order to take their system, and their business forward. We also worked with Sigma-Aldrich to create an Android-based barcode scanner and inventory management system that scanned a range of items and generated reports via a Microsoft .NET web application. The team at Sigma-Aldrich were delighted and work commenced building a web-based inventory management solution that would go on to replace their entire system.
Once you get hooked on HTML wireframing and prototyping, you really can’t go back.
Conclusion
Although it might be hard to abandon your use of graphics image software like Illustrator, Photoshop or OmniGraffle for prototyping and get turned on to HTML wireframing and prototyping, hopefully, we have emphasised that in today’s tight economy, the benefits are well worth your time and are valuable for not only you and your team but most importantly your customers.
Have a different view on HTML prototyping? Share your thoughts in the comments below.
