- Mar 18, 2020 A website prototype takes it to a whole new level by adding interactions and animation and giving a user a look and feel of what an end product will look like. But before we dive into details of how to create a prototype for a website, let’s take a moment to clear out any confusion around the UX design terminology.
- The digital products, from around the world, that you know and love have been built with Marvel. Our customers range from Fortune 100 companies, to startups and schools - all using our online design platform to ideate fast, collaborate and optimise prototypes before development.
Design and test website responsive prototypes Liquid layouts. Define liquid containers to allow elements on a page adapt to different screen sizes, orientations, or aspect ratios. Auto-resize UI components.
A prototype is a draft version of a product that allows you to explore your ideas and show the intention behind a feature or the overall design concept to users before investing time and money into development. A prototype can be anything from paper drawings (low-fidelity) to something that allows click-through of a few pieces of content to a fully functioning site (high-fidelity).
Benefits of Prototypes
It is much cheaper to change a product early in the development process than to make change after you develop the site. Therefore, you should consider building prototypes early in the process. Prototyping allow you to gather feedback from users while you are still planning and designing your Web site.
Nielsen has found that the biggest improvements in user experience come from gathering usability data as early as possible. He notes that it’s cheaper to make changes before any code has been written than to wait until after the implementation is complete.
The Difference between Sketches and Prototypes
Although the difference between sketches, wireframes, and prototypes isn’t always clear, there are differences in their intentions. Bill Buxton, in his book Sketching User Experiences, provides a list of descriptors that help explain the differences:
Prototyping Software
Sketch | Prototype |
---|---|
Evocative | Didactic |
Suggest | Describe |
Explore | Refine |
Question | Answer |
Propose | Test |
Provoke | Resolve |
Tentative | Specific |
Non-committal | Depiction |
Tracy Lepore further defines the differences by visually showing the continuum from sketch to design by depicting the relationships between what the design is trying to communicate, the amount of iteration between phases, and the fidelity of the design.
High-Fidelity and Low-Fidelity Prototyping
There is an on-going debate about using low versus high fidelity prototyping and how much a prototype should resemble the final version of your design. Both have been found to be basically equivalent in finding usability issues (Walker et al 2002). With that said, there are things to consider when trying to decide which option is best for your project:
- Low-fidelity prototypes are often paper-based and do not allow user interactions. They range from a series of hand-drawn mock-ups to printouts. In theory, low-fidelity sketches are quicker to create. Low-fidelity prototypes are helpful in enabling early visualization of alternative design solutions, which helps provoke innovation and improvement. An additional advantage to this approach is that when using rough sketches, users may feel more comfortable suggesting changes.
- High-fidelity prototypes are computer-based, and usually allow realistic (mouse-keyboard) user interactions. High-fidelity prototypes take you as close as possible to a true representation of the user interface. High-fidelity prototypes are assumed to be much more effective in collecting true human performance data (e.g., time to complete a task), and in demonstrating actual products to clients, management, and others.
Creating Paper Prototypes
Paper-based prototyping is the quickest way to get feedback on your preliminary site information architecture, design, and content. Paper prototypes are easy to create and require only paper, scissors and sticky notes.
Use one piece of paper for each Web page you create and then have users try them out in a usability test. Users indicate where they want to click to find the information and you change the page to show that screen. Sync folders pro 3 4 6.
The process helps you to gather feedback early in the design process, make changes quickly, and improve your initial designs.
References
- A Case Study of How Interface Sketches, Scenarios and Computer Prototypes Structure Stakeholder Meetings by Johanson and Arvola
- M. Walker, L. Takayama and J.A. Landay, High-fidelity or low-fidelity, paper or computer? Choosing attributes when testing web prototypes, Proceedings of the Human Factors and Ergonomics Society 46th Annual Meeting, September 29–October 4, 2002, Baltimore, USA, HFES, Santa Monica (2002), pp. 661–665.
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 Amazon price tracker.
– Frank Lloyd Wright Amazon price tracker.
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. Face4pass 1 17. But a fully interactive prototype allows them to visualise what is needed quickly and easily.
Disadvantages of website prototyping
Paper 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.