Sometimes questions are more important than answers

What is a website prototype?

Website prototypes are interactive demos of a website. These are often used to gather feedback from project stakeholders early in the project lifecycle, before the project goes into final development

what-is-a-website-prototype

Website prototyping is a key part of the UX 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 which 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 PowerPoint, PDF documents and even MS Word. 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 than some project managers and stakeholders get uncomfortable that the project will not meet deadlines. However, if planned in 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 opinion 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 which doesn’t work.

 

You may also like

More UX Methods Questions

What is usability testing?
What is user centred design?
What is wireframing?
What is a website prototype?
What is user requirements capture?
What is customer profiling?
What is card sorting?
What is usability testing?

Usability testing is a way to see how easy to use something is by testing it with real users. Users are asked to complete tasks, typically while they are being observed by a researcher, to see where they encounter problems and experience confusion. If more people encounter similar problems, recommendations will be made to overcome these usability issues.

What is user centred design?

User-centred design is a process or set of tools used to design a service which focuses on what users need at the very beginning and continues throughout development until launch. Typically services are designed from a technical and business perspective, with consideration for users added in later. Instead, User-centred design ensures the service focuses on what users need before balancing this with the technical and business requirements.

What is wireframing?

Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added.

What is a website prototype?

Website prototypes are interactive demos of a website. These are often used to gather feedback from project stakeholders early in the project lifecycle, before the project goes into final development

What is user requirements capture?

User requirements capture is a process used to understand what typical users will need from a service which is about to be designed. Users are observed using similar services and interviewed about the ways they go about planning and completing their goals. This information is used to identify a list of content, features and functionality the new service must have in order to satisfy the needs of its users.

What is customer profiling?

Customer profiling is a way to create a portrait of your customers to help you make design decisions concerning your service. Your customers are broken down into groups of customers sharing similar goals and characteristics and each group is given a representative with a photo, a name, and a description.

What is card sorting?

Card sorting is a technique that involves asking users to organise information into logical groups. Users are given a series of labelled cards and asked to organise and sort them into groups that they think are appropriate. Card sorting helps you to design an information architecture, workflow, menu structure or website navigation paths.

What are user journeys?
What are focus groups?
What is remote usability testing?
What is an expert review?
What is service design?
What is ethnography research?
What is tree testing?
What are user journeys?

A user journey is a path a user may take to reach their goal when using a particular website. User journeys are used in designing websites to identify the different ways to enable the user to achieve their goal as quickly and easily as possible.

What are focus groups?

Focus groups are a research method used to gather feedback and opinions from customers. Each person in the group is encouraged to participate in a discussion which is pre-planned by a researcher and is guided by a facilitator. Focus groups are typically used to gauge opinion and gather information from users about products, services, and features before they have been developed.

What is remote usability testing?

Remote usability testing is a way to test how easy to use a website is with users who are in a different geographical location. Traditional usability testing brings users and researchers together in one place to conduct the test, whereas remote usability testing allows the researcher and user to be in different locations while the test is completed.

What is an expert review?

An expert review is where a usability expert uses his/her knowledge and experience of testing websites with users to walk through a website in the shoes of a typical user. The expert will spot problems and recommend changes to improve usability when budgets and timescales don’t allow for user research.

What is service design?

Service design makes a service easier to use, more useful and more desirable for the customers who need to use it: the service user. Whether creating an entirely new service or improving an existing one, service design focuses on what customers really need at each stage of their interaction with an organisation.

What is ethnography research?

Ethnography is a study through direct observation of users in their natural environment rather than in a lab. The objective of this type of research is to gain insights into how users interact with things in their natural environment.

What is tree testing?

Tree testing is a way of evaluating a proposed site structure by asking users to find items based on the sites organisation and terminology. This online test only displays the navigation links and removes any additional clutter.

Menu