Website prototyping is a key part of the UX research process
A website prototype can be any mock-up or demo of what a website will look like when it goes live. It can be anything from a paper sketch to a clickable HTML prototype. However, typically when people talk about a prototype they are referring to an interactive prototype of some kind that allows users to navigate from page to page and use functionality such as drop-down menus.
There are a variety of different ways to create an interactive prototype. We’ve seen clickable prototypes in Figma, Axure, Adobe XD, or even PowerPoint or PDF documents. But there are a variety of specialist prototyping tools available on the market that are specifically designed to make prototyping easy. Check out Blasamiq, Axure and Mockingbird for just a few examples.
Advantages of website prototyping
Essentially, a website prototype allows the project stakeholders to see what the final product will look like early in the project lifecycle. There are many reasons to do this: to gain agreement on what is in and out of scope, to generate support or even investment for the project, to test theories and ideas regarding layout and structure of the website, and more importantly to gather user feedback through usability testing. Typically a website prototype will go through a few rounds of usability testing where it is constantly refined until the project team is confident it can progress to the next phase of development.
A lot of people ask why they should spend the time and effort creating a prototype, when you can just go straight into development. The answer will always depend on the project, but typically the benefits of prototyping are in saving time and money. We’ve seen plenty of clients come to us a couple of months after launch saying that what they had hoped the site would do, isn’t working. When we test it with users we then find that some big assumptions were made at the start which were never tested, and unfortunately, those assumptions were found to be wrong.
It’s easier to use an eraser on the drafting board, than a sledgehammer at the construction site.
– Frank Lloyd Wright
The key reason for creating the prototype is to get feedback from stakeholders and users to make sure it is going in the right direction. It allows you to fix any areas which receive negative feedback, and it allows for discussion about what is really needed in the final build and what could be removed. This can save a huge amount of money in development later on in the project.
In addition, we find that a website prototype can be an excellent specification document for designers and developers. A lengthy functional specification document is often difficult to interpret and difficult to engage with. But a fully interactive prototype allows them to visualise what is needed quickly and easily.
Disadvantages of website prototyping
The most obvious disadvantage is that it takes more time to plan the project before actual development can start. This can mean that some project managers and stakeholders get uncomfortable that the project will not meet deadlines. However, if planned properly, the time to create a prototype is minimal and can often save time down the line by making sure the developers are clear on exactly what they need to create. As mentioned before, the cost of having to make changes to a fully developed website can be much larger than the time needed for prototyping.
A problem we see people face, particularly when creating a prototype for the first time, is that they have trouble deciding which prototyping method or tool to choose. This can be tricky as there are so many options available and all will require some element of learning or training. Our advice would be to choose one of the dedicated prototyping tools such as Axure (our preferred tool) and stick with it. Once you have used it a few times the speed and ease of creating prototypes increase dramatically.
Conclusion
Website prototypes are typically interactive demos of a website early in the project lifecycle. They are used to gain agreement and gather opinions from the various project stakeholders, including the end-users. Typically a website prototype will go through a couple of rounds of usability testing to ensure everything is working before the project moves into development. The question of whether to bother creating a prototype should be met with a different question: are you willing to risk going straight into development without testing your assumptions first? Although it can take some time to choose the right tool and learn it, this time is far outweighed by the costs involved in launching an untested website that doesn’t work.
You may also like