A prototype is something like a prototype that is used to check whether the desired behavior can be executed and whether the design is as desired when creating or developing a website or application. It is an essential process for improving the quality of websites and products and checking their functionality, and can be said to be indispensable for business.
In this article, we will explain in detail the overview and types of prototypes, the benefits of creating them, and precautions and points when creating them. If you are involved in web production for business, we recommend that you understand prototypes.
What is a prototype?
“Prototype” is often heard in places such as website production and application development. First, let’s explain the basic concept of a prototype.
A prototype is a prototype of a website, application, etc.
Prototype is a word that means “original model” and refers to a prototype of a website, application, etc. When creating and developing websites and applications, prototypes are used to improve design quality and confirm functionality and usability.
Prototypes are generally created without writing any code. Therefore, you can easily create a prototype that allows operations such as clicking and scrolling without asking a developer. Requesting a developer may incur a lot of cost in terms of budget and time, but if you use prototyping tools, even people with no development knowledge can easily create a prototype and create a high-quality prototype. It is possible to produce deliverables.
Difference between prototype, wireframe and mockup
In addition to prototypes, you’ll often hear terms like wireframes and mockups. Each of these has different characteristics.
A wireframe shows the general structure and layout of an entire project, and uses simple diagrams to express the arrangement and functions without considering design or color. There is no problem with hand-drawn sketches, or you can use specialized tools.
A mockup is an initial design model that has a physical form, and can also be called a “real model.” They are created to imitate the actual appearance and embody the initial design of the product to aid in understanding the design.
A prototype is a wireframe or mockup with added behavior and functionality. For example, in the case of a website, it is created to simulate actual operations such as button clicks and page transitions.
The process is to create a mockup, which is a model of the actual product, and a prototype, which is a “prototype,” and check various operations.
4 benefits of creating a prototype
Prototypes are useful tools for improving design quality and checking functionality and usability during the production and development of websites and applications. There are four benefits to creating a prototype:
Let’s take a look at the details.
can make high quality products
Creating prototypes can improve the quality of services such as websites and applications. Providing high-quality products and presenting them to customers can improve the company’s image and service reputation, and can also be expected to have
a branding
effect.
Of course, fine-tuning may be necessary even after a website or application is completed, but if you can maintain a certain level of quality by using a prototype, you should be able to proceed smoothly with revisions after publication.
You can discover correction points and issues early.
By creating a prototype, you can discover gaps between ideal and reality at an early stage and identify corrections and issues.
For example, when creating a website, you can actually test the user experience and usability, and make changes based on feedback.
Prototypes can be created without writing any code, so there is no need to rely on a developer. Even people without development knowledge can easily create and modify, so they can quickly brush up and improve their products.
Revision risk can be reduced
By creating a prototype in advance, you can reduce the risk of changes due to image discrepancies or large-scale revisions after completion. In particular, if the production side and the client share prototypes and communicate from an early stage, misunderstandings and misunderstandings can be avoided.
By using a prototype, you can identify areas that require changes or modifications at an early stage, which should help reduce unnecessary costs.
Confirmation work among related parties can be carried out smoothly
Since a prototype is a prototype, it is essential to confirm it among the parties involved. Whether you are creating a website or developing an application in collaboration with a client, or in a project within a company, using a prototype allows you to identify problems early on and consider improvement measures.
Having a common visual understanding through prototypes will help the project proceed more smoothly.
Three types of prototypes
There are three types of prototypes:
We will provide an overview of each type.
design prototype
A design prototype is a near-complete prototype that incorporates design concepts and visuals with added functionality. Because it is as close to a finished product as possible, it is realistic, and allows us to verify things like visibility and actual processing speed when used by users.
You can also check the first view, which is the first area that users see when they view your website, which can help you improve the quality of your products.
functional prototype
A functional prototype is a prototype for confirming operation and conduction. You can perform simulations to check whether clicks and other operations performed by the user are responded to, processed correctly, and function normally.
Functional prototypes do not include design structure, so they can be easily edited. If you create a functional prototype properly, you can significantly reduce the risk of later revisions.
contextual prototype
A contextual prototype is a prototype for sharing the usage image of a product. You can also provide an image of the actual product in use, publish a video of it in action, and convey the feeling of the user experiencing the service. This will also allow you to check user reactions and identify specific issues.
Contextual prototypes may also be used for video promotions, TV commercials, catalogs, etc.
Three things to keep in mind when using prototypes
Prototypes have many benefits, but there are some things to keep in mind when using them. From here, I will explain three points to keep in mind when using prototypes.
Thorough coordination among related parties
When using prototypes, focus on communication between stakeholders. In order to prevent misaligned images or differences in recognition from becoming major problems later on, it is important to review them frequently during the process. If you are nearing completion and have to start over from scratch because the image is drastically different, the costs up until that point will be wasted. If you always use a prototype to check during the creation stage, you can reduce unnecessary costs.
Don’t forget to create from the customer’s perspective
When creating prototypes, always keep the customer’s perspective in mind. The ultimate purpose of websites and applications is to be used by users. Evaluate functionality and design from the customer’s perspective during the prototype stage to ensure that users have a comfortable experience.
May not be suitable for large-scale projects
Ideally, you would create a prototype and proceed smoothly, but depending on the situation, modifications and improvements may be necessary, and small adjustments may be made many times. Keep in mind that if you need to re-create the prototype multiple times, you may incur additional costs and delay the schedule. If there are many revisions, there is a risk of significant delays in the overall project schedule, so it may not be suitable for large-scale projects involving many parties.
If revision work increases and schedule delays continue, there is a risk that the motivation of the production team will decrease and the trust from the client will decrease. It is important that the project progresses as planned, so proceed with caution.
Flow and procedure for using prototypes in website production
Prototypes are useful tools that can be used to build high-quality websites, applications, and other services. However, “just making it” does not have sufficient effects. It is important to take the appropriate steps. From here, we will explain the steps for using prototypes in website production. The main steps are:
Determining purpose and direction
First, let’s decide what purpose you want to create a website for and what kind of website will meet that purpose. By determining the purpose and direction, it becomes easier to imagine the finished product and to think about the necessary functions and appropriate layout.
However, if you get too focused on the details, you may end up having to make major corrections later on, or it may become difficult to make small course corrections, so it is important not to get too focused on the details.
Utilization and design of mockups
Once you have decided on your purpose and direction, create a mockup. We will roughly decide on the font size, photo layout, position of various buttons, color scheme, etc. and visualize it.
At the mockup stage, it is important to check the visibility of colors and layout, and to focus on whether it is easy for users to use (user-friendly). Also, if you are working collaboratively with the client or team, be sure to share the mock-up with everyone to ensure a clear understanding of the image. Through repeated communication, you should be able to get closer to what you have in mind.
Creating a prototype
After creating a mockup and finalizing the image, we will create a prototype based on it. While a mockup is a design sample, a prototype is a functional sample that simulates actual operation. This will allow you to experience the actual behavior, such as what happens when you click a button and page transitions.
Think about whether the structure is able to accomplish the actions you want the user to take, and whether it is easy for the user to use, and proceed with the creation according to the purpose and direction you set at the beginning.
verification
Once you’ve created a prototype, gather input and feedback from multiple sources, including your client and your team. Effective verification can be done by incorporating opinions and feedback from a variety of perspectives, not just your own or the producer’s.
Let’s check whether the content the creator wants to convey is conveyed correctly, whether it is stressful for the user, and whether the buttons are functioning properly.
Corrections and finishing of finished product
Let’s repeatedly verify and evaluate and make corrections as needed to get closer to the finished product. We collaborate with clients and teams to aim for deliverables that match the objectives and direction. Once the prototype is complete, we will move on to developing the actual website based on it.
We also recommend using prototyping tools
Until now, creating a prototype required skills such as system development and was time-consuming. However, recently, “prototyping tools” have appeared, and even people without development skills can now easily create prototypes. Now let’s talk about prototyping tools.
Various elements such as design and animation can be used
A major advantage of prototyping tools is that anyone can easily use them without any special skills or knowledge. You can use a variety of elements such as design and animation. Therefore, when creating a website, it is possible to verify things from the user’s perspective, such as “Is this function easy for the user to use?” and “How should this image be displayed most effectively?” This is extremely useful as it allows you to verify not only the overall direction but also detailed movements.
Types of prototyping tools
There are many different types of prototyping tools, each suitable for different purposes. We will explain the three types in detail below.
transition type
Transition type is a prototype tool that allows screen transitions. This is suitable when you want to check whether there are any problems with the overall flow of a website or application, such as screen transitions or operation flows.
Interaction type Interaction type is a prototyping tool that allows you to create animations. This is useful when you want to add detailed animation within the same screen or scrolling behavior. However, they are more difficult and may take more time to create than transition types.
Complex type
Complex types are prototyping tools that combine the functionality of both transition and interaction types. Screen transitions and animations can be verified at the same time, making it possible to handle large-scale projects.
However, since composite types have a richer set of functions, it should be taken into consideration that they are more expensive than transition and interaction types. After considering the required functions and budget, consider whether you should adopt a composite type.
Analysis is important even after the website is published
While it is important to create prototypes and aim to improve the quality of websites and applications, it is also important to analyze them after publication. Actual user reactions and results will only become apparent after publication. Only then can a final numerical evaluation be made.
Therefore, it is essential to utilize the prototype and evaluate and improve it based on actual data after publication.
Below, we will explain the recommended evaluation and analysis methods after publication.
AB test
AB testing is a test to quantitatively verify the effectiveness of a website etc. after it has been published. Specifically, we create Pattern A and Pattern B by changing specific elements such as first view, display them randomly to users, and compare the results of each. This allows you to find patterns that yield high results. You can examine both patterns simultaneously, allowing you to accurately assess which pattern is better.
When conducting an AB test, it is important to keep conditions other than the comparison target equal in order to collect accurate data. Try to avoid discrepancies as much as possible, such as in terms of advertising period and ad delivery frequency.
heat map
Heatmap
is a tool for evaluating and analyzing quantitative data such as
and qualitative data such as user behavior on a website. The data on the actions that users take on the page when visiting a website is visualized using color shading, and it is possible to visually understand things such as the amount of scrolling on the page, the viewing time, and the places clicked.
Heatmaps are applied to pages after they are published, and unlike other analysis tools or numerical analysis, heatmaps capture information visually, allowing you to intuitively understand user behavior. This analysis method is recommended if you want to understand user reactions after publication or if you want to continue the cycle of verification and improvement.
summary
Creating prototypes is essential for improving the quality of websites and applications and checking their functionality and operability. However, if you strive for perfection from the beginning and pay too much attention to details, you are likely to run into problems with the design or operation. This results in wasted time and effort in redesigning, and may reduce motivation for production.
When creating a prototype, be flexible and anticipate multiple modifications. It is important to communicate frequently with the client and team, and to combine verification and improvement to get closer to the finished product. By incorporating many other people’s and user’s perspectives, you will be able to create high-quality websites and applications. Use prototypes effectively to avoid wasting time and money.