June 23, 2010 at 15:18We develop faster and better using prototypes
- Transfer
The old adage “It’s better to see once than hear a hundred times” very accurately describes what developers can give a prototype of the interface: a visual presentation, much more clearly describing the issues of project design and functional development. The iterative approach to user interface design uses rapid design in the process of creating system sketches (whether it is a website or application) and their approval by an extensive group of customer representatives, stakeholders, developers and designers. If you adhere to this approach, you can get feedback earlier (most often right in the process of discussion), which significantly improves the quality of the design of the final product and reduces the need for changes in the development process.
The concept of "Prototype" is quite extensive - from creating sketches on paper to interactive layouts that allow you to see how the product will look and function. The key to successful rapid prototyping is rapid feedback-based evaluation and a flexible prototype approach. Rapid prototyping helps working groups to experiment with several ideas and approaches, simplifies the discussion of the project, as it allows you to move from words to visual images, allows you to be sure that everyone correctly understands what is being discussed, reduces risks and increases the chance of getting good design really fast.
The process of quickly creating a prototype involves multiple iterations within a three-step workflow:
Creation
Translate customer words into sketches based on standards in interface design and the most successful usability techniques.
Evaluation
Show the prototype to customers and find out how it meets their needs and expectations.
Improvement
Based on feedback, identify areas of the prototype that need improvement or rework.
The prototype, as a rule, begins with a simple sketch, in which only the main zones are present, but after multiple iterations it becomes much more complex and detailed, as close as possible to the product that should result from the development. The speed of this process is very important - the time between iterations should be minimal - from making changes on the fly to cycles of several days, depending on the complexity of the prototype.
The very word "prototype" is often perceived as a fully functional version of an application or website. Fast prototypes are not designed to get a fully functional product - they allow customers and developers to visualize ideas and create the user interface of the final product as thoughtfully as possible. With this in mind, we can move on to the main nuances that we need to consider before proceeding with the creation of any prototype.
Good candidates for prototyping include complex interactions, new functionality, and changes to your workflow, technology, or design. For example, designing search results is useful when you want to significantly change the approach to the process of finding information - for example, to introduce the ability to preview the result without leaving the search page.
A good rule of thumb is to focus on 20% of the functionality that will be used 80% of the time, that is, the key features that will be used most often. Remember, the task of quick design is to visually show how the product will work or, in the later stages, what the design will look like, but not simulate the entire product.
Once you decide on the areas to be designed, combine them into one or more real-world scenarios: think out the sequential paths that the end user will use in everyday work with the product. For example, for an online shoe store, such scenarios could be: “Nerdy Vasya” buying the same sneakers that he bought six months ago, and “Curious Vasya” looking at the tenth pair of his size to find the one he really likes.
A prototype is usually not done in one single iteration, but more often it is done step by step. A good design approach should involve creating a common concept and only then go deeper into specific details. For a website, this would mean creating a layout of the main page and the inner page for the first iteration (sometimes called the “horizontal prototype”), then think through the details of the layouts and next steps. Subsequent iterations can go deep into one of the sections of the site (“vertical prototype”). For example, for a site with media content, this could be the steps that the user takes to find the video and download it, or how users could manage the contents of their network library.
Priorities should reflect how closely the prototype resembles the final product. Depending on the design stage and the objectives of the prototype, you need to adhere to three main criteria:
Visual accuracy (sketch design) The
ability to see and feel is the most important characteristic of a prototype, if it is designed incorrectly, all work may be useless. From a visual point of view, prototypes should not be very beautiful, but they should be proportional. For example, if the left navigation area should occupy one fifth of the screen by 1024 pixels, it should not be exactly 204 pixels wide, while it is proportionally shown in the prototype. Directly during the design process, increase visual accuracy as needed by introducing elements of style, color, identity, and graphics.
Functional accuracy (static interactive)
Does the prototype only show how the final product will work (static prototype) or is it functional (interactive prototype) and can interact with the user? This question is not so important for the customer, but it significantly adds clarity to subsequent iterations, increases functional accuracy and allows the prototype to be used to test usability.
Content Accuracy (lorem ipsum real content)
Another important component that often distracts users is the content displayed in the prototype. Abstract lines and dummy text (such as “lorem ipsum”) are useful to avoid some of the complexity in the early stages of design. But since the prototype is constantly being improved, it becomes necessary to replace the dummy text with real content in order to get an idea of how this will affect the design development.
Low accuracy
The fastest way to start designing is also the easiest: start with paper and a pen. Drawing sketches on paper is a low-precision approach that almost anyone can do. No special tools or experience are required. Most often used during the early stages of a design cycle, sketching is a quick way to create rough layouts of design samples and an approximate product concept, as well as get feedback from customers. Paper prototyping is ideal during a brainstorming session and can be done alone with a notepad or during a meeting on a whiteboard and with markers.
Paper prototypes are static and usually only reflect the approximate look of the product - this forces the client to focus on how they will use the system instead of thinking what it will look like. This makes designers more open to change based on customer comments.
Low-precision design - quick design, it does not require much study, but allows you to make changes easily and quickly.
Average accuracy
At this point, we begin to use software such as Visio and Omnigraffle to model and increase the accuracy of layouts. Frames, tasks, and scenarios created with them take more time and effort, but as a result we get a neat and better prototype. At this stage, visual elements such as identity, colors can already be used, but designers often shun them, focusing instead on demonstrating the behavior of the application as a whole. Interactivity can be shown by creating links, but the functional accuracy is better left average here. Such prototypes are best suited to understand whether customer needs are satisfied and whether the layout is optimized in terms of usability.
There are two reasons why you could intentionally make a prototype of medium accuracy not look like a prototype of medium accuracy:
- First of all, make the prototype look like a layout with low accuracy so that customers consider it as a draft or a layout under development rather than a polished and finished product. This can be achieved using Balsamiq or special layouts for Visio.
- Secondly, giving the prototype high visual accuracy (for example, in the form of a beautiful layout made in Photoshop), you force the client to focus on assessing the quality of visual design - colors, fonts, logos and images.
The speed of creating a prototype of medium accuracy is achieved using templates, stencils and typical graphic elements.
High precision
High-precision prototypes are the most realistic and often mistaken for the final product. A few years ago, the only way to create high-precision prototypes was to actually program the prototype, and for this two specialists would have to work on creating the prototype - a programmer and a designer. Now, fortunately, application modeling tools allow all users (even those who are not very technical savvy) to drag and drop graphic fragments of the interface to create high-precision prototypes that simulate the functionality of the final product. Axure and iRise are good examples of application modeling tools that can be used to create high-precision prototypes.
These prototypes are necessary when high visual and functional accuracy is required. For example, when introducing a new technology (for example, when you adapt your desktop application to work as a web-app). Most of these prototypes cannot be converted to usable code, but they provide excellent reference information for developers, as well as for testing usability or user training.
High-precision design is relatively fast, with a reasonable level of interactivity and accuracy. In addition, some of these tools facilitate the collection of user feedback and documentation of requirements, further accelerating the design and development process. Despite the fact that you do not need to learn a new programming language, such tools really have some need for learning.
There is no one right approach in choosing the accuracy of a prototype. Most prototypes of new products are best started with sketches, then moving either towards medium precision or towards high-precision prototypes, depending on the complexity of the system and the accuracy requirements.
When working with one of our clients in the pharmaceutical industry, we went from sketching on whiteboards to interactive prototypes that had high functional and content accuracy to, but had a fairly low visual accuracy. They cared less about the appearance of the product and focused on compliance with corporate standards.
For another client, this time in the retail industry, our interactive prototype should have had high visual and functional accuracy. The accuracy of the content did not matter, because the clients themselves wanted to do the filling and were already quite familiar with it. The visual design of the project and interactivity were of great importance, because this was their first implementation of SharePoint, and they wanted to make the portal look “different from SharePoint”!
Depending on your approach, you have a wide variety of tools to choose from. Dan Harrelson has compiled a list of popular design tools on the Adaptive Path blog.
Each tool has its own set of features and its own strengths. Based on your needs and project requirements, you can evaluate and choose which tool would be best for you. Here are some questions to help you make your choice:
Before you start rapid design, read a few points about working effectively on a prototype:
A good approach
- Work together with customers, their business and stakeholders in IT departments during quick design. In addition to providing valuable feedback, they also gain experience in their own use of the final product.
- Avoid misunderstanding the meaning of prototyping - make sure customers expect what they need from the design process - including those affecting purpose, accuracy, scope and duration. Remind everyone, including yourself, that rapid prototyping is a means to create a product, but not a product in itself.
- Creating interactive high-precision prototypes, implement realistic delays in the work of products (for example, to refresh a page or move through transaction steps), so that users do not expect an instant response from the final product.
- Use repeatedly! For computer design, this means saving templates, stencils, graphic fragments for use in future projects.
- The most important thing is to begin each consideration of the prototype with the caveat that it is only a prototype, a layout, not an actual solution. This reminds users that this is a development process. This encourages feedback, and in the case of high-precision prototypes, prevents users from making this a working decision.
Bad approach
- Do not design features or functionalities that cannot be implemented during product development. If in doubt, consult the developers before starting.
- Do not make every change or request that comes out of the prototype discussion as a new requirement. Quick design allows you not to miss the necessary features, but you should approach the new functionality carefully. Some features can be implemented, while others should be transferred to future versions.
- Do not start prototype discussions without clear recommendations for feedback. Clearly define what type of feedback you are looking for (for example, “Is the structure logical?”, “Is navigation clear and intuitive?”). Otherwise, you need to be prepared for such comments as “I don’t like the blue color in the title”, “Can't we use this font instead” or “Can you make it bigger, more bold, red and flickering?”
- Do not be a perfectionist! In most cases, rapid prototyping should not be 100% perfect, but only good enough to give everyone a common understanding.
- Do not design everything, design only what you really need to see as a prototype.
The concept of "Prototype" is quite extensive - from creating sketches on paper to interactive layouts that allow you to see how the product will look and function. The key to successful rapid prototyping is rapid feedback-based evaluation and a flexible prototype approach. Rapid prototyping helps working groups to experiment with several ideas and approaches, simplifies the discussion of the project, as it allows you to move from words to visual images, allows you to be sure that everyone correctly understands what is being discussed, reduces risks and increases the chance of getting good design really fast.
The rapid prototype process
The process of quickly creating a prototype involves multiple iterations within a three-step workflow:
Creation
Translate customer words into sketches based on standards in interface design and the most successful usability techniques.
Evaluation
Show the prototype to customers and find out how it meets their needs and expectations.
Improvement
Based on feedback, identify areas of the prototype that need improvement or rework.
The prototype, as a rule, begins with a simple sketch, in which only the main zones are present, but after multiple iterations it becomes much more complex and detailed, as close as possible to the product that should result from the development. The speed of this process is very important - the time between iterations should be minimal - from making changes on the fly to cycles of several days, depending on the complexity of the prototype.
Define terminology
The very word "prototype" is often perceived as a fully functional version of an application or website. Fast prototypes are not designed to get a fully functional product - they allow customers and developers to visualize ideas and create the user interface of the final product as thoughtfully as possible. With this in mind, we can move on to the main nuances that we need to consider before proceeding with the creation of any prototype.
What needs to be designed?
Good candidates for prototyping include complex interactions, new functionality, and changes to your workflow, technology, or design. For example, designing search results is useful when you want to significantly change the approach to the process of finding information - for example, to introduce the ability to preview the result without leaving the search page.
How many prototypes do you need?
A good rule of thumb is to focus on 20% of the functionality that will be used 80% of the time, that is, the key features that will be used most often. Remember, the task of quick design is to visually show how the product will work or, in the later stages, what the design will look like, but not simulate the entire product.
Come up with scripts
Once you decide on the areas to be designed, combine them into one or more real-world scenarios: think out the sequential paths that the end user will use in everyday work with the product. For example, for an online shoe store, such scenarios could be: “Nerdy Vasya” buying the same sneakers that he bought six months ago, and “Curious Vasya” looking at the tenth pair of his size to find the one he really likes.
Plan iteration
A prototype is usually not done in one single iteration, but more often it is done step by step. A good design approach should involve creating a common concept and only then go deeper into specific details. For a website, this would mean creating a layout of the main page and the inner page for the first iteration (sometimes called the “horizontal prototype”), then think through the details of the layouts and next steps. Subsequent iterations can go deep into one of the sections of the site (“vertical prototype”). For example, for a site with media content, this could be the steps that the user takes to find the video and download it, or how users could manage the contents of their network library.
Prioritize
Priorities should reflect how closely the prototype resembles the final product. Depending on the design stage and the objectives of the prototype, you need to adhere to three main criteria:
Visual accuracy (sketch design) The
ability to see and feel is the most important characteristic of a prototype, if it is designed incorrectly, all work may be useless. From a visual point of view, prototypes should not be very beautiful, but they should be proportional. For example, if the left navigation area should occupy one fifth of the screen by 1024 pixels, it should not be exactly 204 pixels wide, while it is proportionally shown in the prototype. Directly during the design process, increase visual accuracy as needed by introducing elements of style, color, identity, and graphics.
Functional accuracy (static interactive)
Does the prototype only show how the final product will work (static prototype) or is it functional (interactive prototype) and can interact with the user? This question is not so important for the customer, but it significantly adds clarity to subsequent iterations, increases functional accuracy and allows the prototype to be used to test usability.
Content Accuracy (lorem ipsum real content)
Another important component that often distracts users is the content displayed in the prototype. Abstract lines and dummy text (such as “lorem ipsum”) are useful to avoid some of the complexity in the early stages of design. But since the prototype is constantly being improved, it becomes necessary to replace the dummy text with real content in order to get an idea of how this will affect the design development.
Design range
Low accuracy
The fastest way to start designing is also the easiest: start with paper and a pen. Drawing sketches on paper is a low-precision approach that almost anyone can do. No special tools or experience are required. Most often used during the early stages of a design cycle, sketching is a quick way to create rough layouts of design samples and an approximate product concept, as well as get feedback from customers. Paper prototyping is ideal during a brainstorming session and can be done alone with a notepad or during a meeting on a whiteboard and with markers.
Paper prototypes are static and usually only reflect the approximate look of the product - this forces the client to focus on how they will use the system instead of thinking what it will look like. This makes designers more open to change based on customer comments.
Low-precision design - quick design, it does not require much study, but allows you to make changes easily and quickly.
Average accuracy
At this point, we begin to use software such as Visio and Omnigraffle to model and increase the accuracy of layouts. Frames, tasks, and scenarios created with them take more time and effort, but as a result we get a neat and better prototype. At this stage, visual elements such as identity, colors can already be used, but designers often shun them, focusing instead on demonstrating the behavior of the application as a whole. Interactivity can be shown by creating links, but the functional accuracy is better left average here. Such prototypes are best suited to understand whether customer needs are satisfied and whether the layout is optimized in terms of usability.
There are two reasons why you could intentionally make a prototype of medium accuracy not look like a prototype of medium accuracy:
- First of all, make the prototype look like a layout with low accuracy so that customers consider it as a draft or a layout under development rather than a polished and finished product. This can be achieved using Balsamiq or special layouts for Visio.
- Secondly, giving the prototype high visual accuracy (for example, in the form of a beautiful layout made in Photoshop), you force the client to focus on assessing the quality of visual design - colors, fonts, logos and images.
The speed of creating a prototype of medium accuracy is achieved using templates, stencils and typical graphic elements.
High precision
High-precision prototypes are the most realistic and often mistaken for the final product. A few years ago, the only way to create high-precision prototypes was to actually program the prototype, and for this two specialists would have to work on creating the prototype - a programmer and a designer. Now, fortunately, application modeling tools allow all users (even those who are not very technical savvy) to drag and drop graphic fragments of the interface to create high-precision prototypes that simulate the functionality of the final product. Axure and iRise are good examples of application modeling tools that can be used to create high-precision prototypes.
These prototypes are necessary when high visual and functional accuracy is required. For example, when introducing a new technology (for example, when you adapt your desktop application to work as a web-app). Most of these prototypes cannot be converted to usable code, but they provide excellent reference information for developers, as well as for testing usability or user training.
High-precision design is relatively fast, with a reasonable level of interactivity and accuracy. In addition, some of these tools facilitate the collection of user feedback and documentation of requirements, further accelerating the design and development process. Despite the fact that you do not need to learn a new programming language, such tools really have some need for learning.
Choose the level of accuracy of the prototype
There is no one right approach in choosing the accuracy of a prototype. Most prototypes of new products are best started with sketches, then moving either towards medium precision or towards high-precision prototypes, depending on the complexity of the system and the accuracy requirements.
When working with one of our clients in the pharmaceutical industry, we went from sketching on whiteboards to interactive prototypes that had high functional and content accuracy to, but had a fairly low visual accuracy. They cared less about the appearance of the product and focused on compliance with corporate standards.
For another client, this time in the retail industry, our interactive prototype should have had high visual and functional accuracy. The accuracy of the content did not matter, because the clients themselves wanted to do the filling and were already quite familiar with it. The visual design of the project and interactivity were of great importance, because this was their first implementation of SharePoint, and they wanted to make the portal look “different from SharePoint”!
Choosing Tools
Depending on your approach, you have a wide variety of tools to choose from. Dan Harrelson has compiled a list of popular design tools on the Adaptive Path blog.
Each tool has its own set of features and its own strengths. Based on your needs and project requirements, you can evaluate and choose which tool would be best for you. Here are some questions to help you make your choice:
- How easy is it to learn how to use the program?
- Is the software flexible enough to develop prototypes for the Internet, desktop and mobile applications?
- Is there a repository with enough useful stencils, templates, and elements?
- How easy is it to share the prototype with other development participants in order to get their opinion? Is it possible to automate the collection of such information by the program itself?
- How easy is it to make changes "on the fly" or as soon as possible for iterations?
- Are there opportunities for working together on a project, for example, the ability to simultaneously work for several people?
- Under what license is the software distributed and how much does it cost?
Useful Tips
Before you start rapid design, read a few points about working effectively on a prototype:
A good approach
- Work together with customers, their business and stakeholders in IT departments during quick design. In addition to providing valuable feedback, they also gain experience in their own use of the final product.
- Avoid misunderstanding the meaning of prototyping - make sure customers expect what they need from the design process - including those affecting purpose, accuracy, scope and duration. Remind everyone, including yourself, that rapid prototyping is a means to create a product, but not a product in itself.
- Creating interactive high-precision prototypes, implement realistic delays in the work of products (for example, to refresh a page or move through transaction steps), so that users do not expect an instant response from the final product.
- Use repeatedly! For computer design, this means saving templates, stencils, graphic fragments for use in future projects.
- The most important thing is to begin each consideration of the prototype with the caveat that it is only a prototype, a layout, not an actual solution. This reminds users that this is a development process. This encourages feedback, and in the case of high-precision prototypes, prevents users from making this a working decision.
Bad approach
- Do not design features or functionalities that cannot be implemented during product development. If in doubt, consult the developers before starting.
- Do not make every change or request that comes out of the prototype discussion as a new requirement. Quick design allows you not to miss the necessary features, but you should approach the new functionality carefully. Some features can be implemented, while others should be transferred to future versions.
- Do not start prototype discussions without clear recommendations for feedback. Clearly define what type of feedback you are looking for (for example, “Is the structure logical?”, “Is navigation clear and intuitive?”). Otherwise, you need to be prepared for such comments as “I don’t like the blue color in the title”, “Can't we use this font instead” or “Can you make it bigger, more bold, red and flickering?”
- Do not be a perfectionist! In most cases, rapid prototyping should not be 100% perfect, but only good enough to give everyone a common understanding.
- Do not design everything, design only what you really need to see as a prototype.
