We develop faster and better using prototypes
The old saying “It’s better to see once than hear a hundred times” very precisely describes what developers can create by creating an interface prototype: a visual presentation that describes the design design and functionality development much more clearly. In an iterative approach to user interface design, rapid design is used in the process of creating system sketches (be it a website or an application) and approving them from an extensive group of customer representatives, stakeholders, developers and designers. If you follow this approach, you can get feedback earlier (most often directly during the 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 broad - 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 quick assessment based on feedback and a flexible approach to prototyping. Rapid prototyping helps teams 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 said, reduces risks and increases the chance of getting good The design is really fast.
The process of quickly creating a prototype involves multiple iterations in a workflow consisting of three steps:
Creature
Translate customer words into sketches based on the standards in the field of 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 the feedback, identify areas of the prototype that need to be improved or reworked.
The prototype, as a rule, begins with a simple outline, in which only the main zones are present, but later on multiple iterations become much more complex and detailed, as close as possible to the product, which should be the result of 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 word “prototype” itself is often perceived as a full-featured version of an application or website. Rapid prototypes are not designed to get a fully functional product - they allow customers and developers to visualize ideas and create the most user-friendly user interface of the final product. Having remembered this, we can proceed to the main nuances that we need to consider before proceeding to the creation of any prototype.
Good candidates for prototyping include complex interactions, new functionality, and changes in workflow, technology, or design. For example, designing search results is useful when you want to significantly change the approach to the information search process — 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 challenge of rapid design is to visually show how the product will work or, in later stages, what the design will look like, but not modeling the entire product.
After you decide on the areas that will be designed - connect them into one or more real-world scenarios: think over the sequential ways that the end user will use in their daily work with the product. For example, for an online shoe store, such scenarios might be: “Busy Bob”, buying the same sneakers that he bought six months ago, and “Curious Bob” looking through the tenth pair of his size to find the one he really likes.
The prototype is usually not done in a single iteration, but more often it is done step by step. A good design approach should involve the creation of a general concept and only then go into specific details. For a website, this would mean creating a layout of the main page and an internal page for the first iteration (sometimes this approach is called a “horizontal prototype”), then think over the details of the layouts and the next steps. Subsequent iterations can go into one of the sections of the site (“vertical prototype”). For example, for a media content site, this could be the steps a user takes to find a video and upload 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 goals 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 the prototype, if it is not designed correctly, all the work may be useless. From a visual point of view, prototypes should not be very beautiful, but should be proportionate. For example, if the left navigation area should take up one-fifth of a screen per 1024 pixels, it should not be exactly 204 pixels wide as long as it is proportionally displayed in the prototype. Directly during the design process, increase visual accuracy as needed, introducing elements of style, color, identity and graphics.
Functional accuracy (static interactive)
The prototype only shows how the final product will work (static prototype) or is it functional (interactive prototype) and can it interact with the user? This question is not so important for the customer, but noticeably 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 fictitious text (for example, “lorem ipsum”) are useful to avoid some difficulties in the early design stages. But since the prototype is constantly being improved, there is a need to replace the fictitious 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 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 coarse designs mockups and sample product concepts, as well as get feedback from customers. Paper mock-ups are ideal during brainstorming and can be done alone with a notebook or during a board meeting and with markers.
Paper prototypes are static and usually reflect only an approximate view of the product — this forces the client to focus on how they will use the system instead of thinking about what it will look like. This makes designers more open to change based on customer feedback.
Low accuracy design is a quick design, it does not require much study, but allows you to make changes easily and quickly.
Average accuracy
At this stage, we are starting to use software, such as Visio and Omnigraffle, to model and increase the accuracy of layouts. The frameworks, tasks and scenarios created using them take more time and effort, but as a result we get a neat and more advanced prototype. At this stage, visual elements, such as identity, colors can already be used, but designers often avoid them, focusing instead on demonstrating the behavior of the application as a whole. Interactivity can be shown through link building, but functional accuracy is better left to medium. Such prototypes are best suited to understand whether customer needs are met and whether the layout is optimal in terms of usability.
There are two reasons why one could intentionally make a medium-precision prototype not look like a medium-precision prototype:
- First of all, make the prototype look like a layout with low accuracy so that customers view it as a draft or layout in the development stage, 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 accuracy
High-precision prototypes are the most realistic and are often mistaken for the final product. A few years ago, the only way to create high-precision prototypes was to actually program a prototype, and for this, two specialists would have to work on creating a prototype — a programmer and a designer. Now, fortunately, application modeling tools allow all users (even technically not very savvy) to drag and drop graphic interface fragments to create highly accurate 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 in the form of a web-app). Most of these prototypes cannot be converted into usable code, but they serve as excellent reference information for developers, as well as for usability testing 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 requirements documentation, further accelerating the design and development process. Despite the fact that you do not need to learn a new programming language, such tools really do have some need for learning.
In choosing the accuracy of the prototype there is no one right approach. Most of the prototypes of new products are best to start with sketches, then moving either towards medium accuracy or toward high-precision prototypes, depending on the complexity of the system and accuracy requirements.
When working with one of our clients in the pharmaceutical industry, we went from sketches on boards to interactive prototypes that had high functional and content accuracy to, but had rather low visual accuracy. They were less concerned about the appearance of the product and focused on adhering to corporate standards.
For another customer, this time in retail sales, our interactive prototype should have 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 bring the appearance of the portal to "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 capabilities and strengths. Based on your needs and project requirements, you can evaluate and choose which tool would be optimal for you. Here are some questions that will help determine the choice:
Before you proceed to the rapid design - read a few points about the effective work on the prototype:
Good approach
- Work together with customers, their business and stakeholders in the IT departments during rapid design. In addition to providing valuable feedback, they also gain experience with their own use of the final product.
- Avoid misunderstanding the meaning of prototyping — make sure that customers expect what they need from the design process — including ones that affect purpose, accuracy, scope, and duration. Remind everyone, including yourself, that rapid prototyping is a means to create a product, but not a product by itself.
- When creating interactive, high-precision prototypes, implement realistic product delays (for example, to refresh a page or navigate through the steps of a transaction) so that users do not expect an immediate response from the final product.
- Reuse multiple times! For computer design, this means saving templates, stencils, graphic fragments for use in future projects.
- The most important thing is to start each review of the prototype with the proviso that this 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 functionality that cannot be implemented during product development. If you have any doubts - consult with the developers before starting.
- Do not make every change or request that leaves the prototype discussion as a new requirement. Fast design allows you not to miss the necessary features, but you should be careful about the new functionality. Some features can be implemented, while others are worth moving to future versions.
- Do not start discussion of the prototype without clear recommendations for feedback. Clearly determine what type of feedback you are looking for (for example, “Is the structure logically clear?”, “Is the navigation clear and intuitive?”). Otherwise, you need to be prepared for comments such as “I don’t like the blue color in the title,” “Can we not use this font instead?” Or “Can you make it bigger, fatter, red and flickering?”
- Don't be a perfectionist! In most cases, fast 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 broad - 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 quick assessment based on feedback and a flexible approach to prototyping. Rapid prototyping helps teams 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 said, reduces risks and increases the chance of getting good The design is really fast.
The process of quickly creating a prototype
The process of quickly creating a prototype involves multiple iterations in a workflow consisting of three steps:
Creature
Translate customer words into sketches based on the standards in the field of 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 the feedback, identify areas of the prototype that need to be improved or reworked.
The prototype, as a rule, begins with a simple outline, in which only the main zones are present, but later on multiple iterations become much more complex and detailed, as close as possible to the product, which should be the result of 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.
We determine the terminology
The word “prototype” itself is often perceived as a full-featured version of an application or website. Rapid prototypes are not designed to get a fully functional product - they allow customers and developers to visualize ideas and create the most user-friendly user interface of the final product. Having remembered this, we can proceed to the main nuances that we need to consider before proceeding to the creation of any prototype.
What needs to be designed?
Good candidates for prototyping include complex interactions, new functionality, and changes in workflow, technology, or design. For example, designing search results is useful when you want to significantly change the approach to the information search process — for example, to introduce the ability to preview the result without leaving the search page.
How many prototypes are needed?
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 challenge of rapid design is to visually show how the product will work or, in later stages, what the design will look like, but not modeling the entire product.
Come up with scripts
After you decide on the areas that will be designed - connect them into one or more real-world scenarios: think over the sequential ways that the end user will use in their daily work with the product. For example, for an online shoe store, such scenarios might be: “Busy Bob”, buying the same sneakers that he bought six months ago, and “Curious Bob” looking through the tenth pair of his size to find the one he really likes.
Plan your iterations
The prototype is usually not done in a single iteration, but more often it is done step by step. A good design approach should involve the creation of a general concept and only then go into specific details. For a website, this would mean creating a layout of the main page and an internal page for the first iteration (sometimes this approach is called a “horizontal prototype”), then think over the details of the layouts and the next steps. Subsequent iterations can go into one of the sections of the site (“vertical prototype”). For example, for a media content site, this could be the steps a user takes to find a video and upload 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 goals 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 the prototype, if it is not designed correctly, all the work may be useless. From a visual point of view, prototypes should not be very beautiful, but should be proportionate. For example, if the left navigation area should take up one-fifth of a screen per 1024 pixels, it should not be exactly 204 pixels wide as long as it is proportionally displayed in the prototype. Directly during the design process, increase visual accuracy as needed, introducing elements of style, color, identity and graphics.
Functional accuracy (static interactive)
The prototype only shows how the final product will work (static prototype) or is it functional (interactive prototype) and can it interact with the user? This question is not so important for the customer, but noticeably 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 fictitious text (for example, “lorem ipsum”) are useful to avoid some difficulties in the early design stages. But since the prototype is constantly being improved, there is a need to replace the fictitious text with real content in order to get an idea of how this will affect the design development.
Spectrum design
Low accuracy
The fastest way to start designing is also the easiest: start with paper and 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 coarse designs mockups and sample product concepts, as well as get feedback from customers. Paper mock-ups are ideal during brainstorming and can be done alone with a notebook or during a board meeting and with markers.
Paper prototypes are static and usually reflect only an approximate view of the product — this forces the client to focus on how they will use the system instead of thinking about what it will look like. This makes designers more open to change based on customer feedback.
Low accuracy design is a quick design, it does not require much study, but allows you to make changes easily and quickly.
Average accuracy
At this stage, we are starting to use software, such as Visio and Omnigraffle, to model and increase the accuracy of layouts. The frameworks, tasks and scenarios created using them take more time and effort, but as a result we get a neat and more advanced prototype. At this stage, visual elements, such as identity, colors can already be used, but designers often avoid them, focusing instead on demonstrating the behavior of the application as a whole. Interactivity can be shown through link building, but functional accuracy is better left to medium. Such prototypes are best suited to understand whether customer needs are met and whether the layout is optimal in terms of usability.
There are two reasons why one could intentionally make a medium-precision prototype not look like a medium-precision prototype:
- First of all, make the prototype look like a layout with low accuracy so that customers view it as a draft or layout in the development stage, 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 accuracy
High-precision prototypes are the most realistic and are often mistaken for the final product. A few years ago, the only way to create high-precision prototypes was to actually program a prototype, and for this, two specialists would have to work on creating a prototype — a programmer and a designer. Now, fortunately, application modeling tools allow all users (even technically not very savvy) to drag and drop graphic interface fragments to create highly accurate 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 in the form of a web-app). Most of these prototypes cannot be converted into usable code, but they serve as excellent reference information for developers, as well as for usability testing 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 requirements documentation, further accelerating the design and development process. Despite the fact that you do not need to learn a new programming language, such tools really do have some need for learning.
Choosing the accuracy level of the prototype
In choosing the accuracy of the prototype there is no one right approach. Most of the prototypes of new products are best to start with sketches, then moving either towards medium accuracy or toward high-precision prototypes, depending on the complexity of the system and accuracy requirements.
When working with one of our clients in the pharmaceutical industry, we went from sketches on boards to interactive prototypes that had high functional and content accuracy to, but had rather low visual accuracy. They were less concerned about the appearance of the product and focused on adhering to corporate standards.
For another customer, this time in retail sales, our interactive prototype should have 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 bring the appearance of the portal to "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 capabilities and strengths. Based on your needs and project requirements, you can evaluate and choose which tool would be optimal for you. Here are some questions that will help determine the choice:
- How easy is it to learn how to use the program?
- Is software flexible enough to develop prototypes for the Internet, desktop and mobile applications?
- Is there a repository with a sufficient number of useful stencils, templates and elements?
- How easy is it to share a prototype with other contributors 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 in iterations?
- Are there opportunities to work together on a project, for example, the possibility of simultaneous work of several people?
- On which license is the software distributed and how much does it cost?
Useful tips
Before you proceed to the rapid design - read a few points about the effective work on the prototype:
Good approach
- Work together with customers, their business and stakeholders in the IT departments during rapid design. In addition to providing valuable feedback, they also gain experience with their own use of the final product.
- Avoid misunderstanding the meaning of prototyping — make sure that customers expect what they need from the design process — including ones that affect purpose, accuracy, scope, and duration. Remind everyone, including yourself, that rapid prototyping is a means to create a product, but not a product by itself.
- When creating interactive, high-precision prototypes, implement realistic product delays (for example, to refresh a page or navigate through the steps of a transaction) so that users do not expect an immediate response from the final product.
- Reuse multiple times! For computer design, this means saving templates, stencils, graphic fragments for use in future projects.
- The most important thing is to start each review of the prototype with the proviso that this 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 functionality that cannot be implemented during product development. If you have any doubts - consult with the developers before starting.
- Do not make every change or request that leaves the prototype discussion as a new requirement. Fast design allows you not to miss the necessary features, but you should be careful about the new functionality. Some features can be implemented, while others are worth moving to future versions.
- Do not start discussion of the prototype without clear recommendations for feedback. Clearly determine what type of feedback you are looking for (for example, “Is the structure logically clear?”, “Is the navigation clear and intuitive?”). Otherwise, you need to be prepared for comments such as “I don’t like the blue color in the title,” “Can we not use this font instead?” Or “Can you make it bigger, fatter, red and flickering?”
- Don't be a perfectionist! In most cases, fast 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.
Source: https://habr.com/ru/post/97216/
All Articles