Bureaucrats, csmoderator, Interface administrators, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Administrators, Widget editors
2,963
edits
Changes
Jump to navigation
Jump to search
Replicating cohort pages
<div class="_responsive _mission">
__NOTOC__
<div style="font-size:40px;"><center>'''TOOLKIT: Prototype and Test'''</center></div>
----<br>
{{Margin-limit|left=150px|right=200px|content=<br>
{{Content-A
|color=#5F574F
|title=Rapid prototyping techniques
|content=<br>
The goal of rapid prototyping (also called "low resolution prototyping") is to make ideas as tangible as possible to develop them more and communicate them to others to obtain feedback, instead of just talking about the idea.<br><br>
'''1. Sketching:''' This is a great form of rapid prototyping that helps you visualize and refine ideas. You don't need to be an artist! Rough sketches are OK and force you to consider details that you initially wouldn't have thought of. You can sketch a product, but you can also sketch a storyboard of a service or process (describing the different steps in the journey of the stakeholder, like scenes in a movie).<br><br>
[[File:TOOLKIT-proto-test-1.jpg|500px|thumb|left]]{{clear}}
{{Clickable button 2|Click here for some sketching tutorials|url=http://storyviz.com/content/category/rapid-visualization/|class=mw-ui-progressive}}<br><br>
'''2. Building physical objects:''' Building objects using simple materials is a big step towards making our ideas tangible, even if they look very different than how you imagine the final product or service.<br><br>
[[File:TOOLKIT-proto-test-2.jpg|500px|(Low resolution prototype of an educational computer game)|thumb|left]]{{clear}}
'''3. Role-playing/ Skits:''' If your idea is a process or service, role playing is a great option to rapid prototype it. You can act out the critical roles and reproduce the scenario as the stakeholders use the service or go through the process. This requires imagination from you and the tester, and you can explain this to him/her. Again, the idea here is that the role play will allow you to discover new details you had not considered when thinking of the ideas in more abstract terms. In many cases, you might need to build props/artifacts to support the role play (see #2).<br><br>
[[File:TOOLKIT-proto-test-3.jpg|500px|(Students role playing a prototype of a new tour of Stanford for visitors)|thumb|left]]{{clear}}
<br>
Role-playing is useful even in a physically-distanced world. You can assign roles to people in a videocall and role play a process or service.
<br><br>
'''4. Videos:''' Videos can help you convey your vision to others. You can simply use your phone to record a quick video, or use simple video editing software such as iMovie (Mac) or Movie Maker (PC), as well as other web-based tools.<br><br>
Take as an example this prototype of a mobile phone game for kids:<br><br>{{#widget:Youtube|id=-SOeMA3DUEs|width=75%}}<br><br>{{Clickable button 2|Click here to learn more about making good videos|url=http://storyviz.com/content/category/video/|class=mw-ui-progressive}}<br><br>
'''5. Paper prototyping:''' If the implementation of your idea is a website or app, before you start writing the code or think about what color and font to use for the text, you should think about the key elements of the experience of those using the website or app. This can be modeled with paper, as seen on the video lecture.<br><br>See a 5 year old kid showing his paper prototype of a game here:<br><br>{{#widget:Youtube|id=L3yl9vaJuFE|width=75%}}
}}<br>
You can also use whiteboarding program such as Mural, Google Jamboard, or Google Slides to create digital prototypes that serve the same function of a paper prototype: visualize the flow of information and be able to make changes quickly, before committing to implementation that requires coding and other time-intensive design work at higher resolution.
<br>
{{Content-A
|color=#5F574F
|title=Prototyping guidelines
|content=<br>
Beyond which techniques you use to build your prototypes, here are some important elements to keep in mind:<br><br>
:* '''Building over planning:''' Start building your prototype as soon as possible, even before you have a good sense of what you are building. Building is a way of thinking (just one that we are not very used to).
:* '''Essence over details:''' In your first prototypes, don't worry about small details. Instead, figure out what are the assumptions that are at the core of your idea (that is, if you are wrong in those assumptions, your idea won't work) and build prototypes to test those first.
:* '''Stay at low resolution:''' It's natural to be reluctant to show others work that looks unfinished and unpolished. However, when prototyping, the only thing that matters is that your prototype answers your questions. And in fact, people will be more likely to give you more candid feedback and point out potential problems if you show them something that looks unfinished.
:* '''Materials to use:''' You can use anything you have access to. The best materials for rapid prototyping are those that "move at the speed of thought" (in the words of Tom Chi, formerly of Alphabet's X), that is, those you can manipulate quickly without the need for specialized tools. For example: paper, rubber bands, clips, tape, fabric, post-it notes, popsicle sticks, pipe cleaners (note: if you don't have access to any of these, no worries! Work with what you have, even if it's only paper). Also, your prototype might be a role play or video, so you might not need those. In digital form, this could be sketches or postits on a digital whiteboard.
}}<br>
{{Content-A
|color=#5F574F
|title=Testing Guidelines
|content=<br>
'''Testing is about "failing forward / more intelligently."''' You want to make sure that you are investing time and resources on building the right "it" before you figure out how to build it right. What sounds like a great solution might not work at all in practice, while an idea that didn't seem that good might turn out to be a success when you test it. The faster you test your idea with real people, the earlier you will know if you are on the right path. Also, if you ask people what they think of an abstract idea, all you are going to get are opinions. If you make them experience your solution, you will get usable feedback to make that solution better (or discard it altogether).<br><br>
Here are some elements to keep in mind when you test your prototype:<br><br>
:*'''Do not sell your idea:''' Your goal is NOT to convince someone that your idea is fantastic. You want to find out what can be improved.
:*'''Let the tester experience the prototype''' instead of just showing them the prototype.
:*'''Capture the feedback:''' as with ideation, you need to capture the feedback to be able to analyze it later.
:*'''Be open to unexpected outcomes and misunderstandings:''' If the person who is testing your prototype didn't get your idea, embrace that as an opportunity to learn more about how they interpreted it and why. That might inform your next iteration.
:*'''Don't get attached to your prototype:''' Low resolution prototyping is a way of quickly and cheaply figuring out what doesn't work. That means that you should be ready to discard your ideas. Think of each prototype as a learning opportunity, and a temporary step towards the final solution.
}}<br>
{{Content-A
|color=#5F574F
|title=Additional Resources on Prototyping and Testing
|content=<br>
Book: [https://www.amazon.com/Right-Many-Ideas-Yours-Succeed-ebook/dp/B07CKRYYZK The Right It, by Alberto Savoia]
{{Clickable button 2|Pretotyping manifesto by Alberto Savoia|url=https://docs.google.com/file/d/0B0QztbuDlKs_ZTk2M2RhZWItYzk3YS00ZDZmLTgyZjItY2Y2ZWIyYjZkOTE3/edit|class=mw-ui-progressive}}
}}
}}
{{ResourcesBar2023}}
----
<center>{{Copyright2023}}</center>
[[Category:2023 Resources]]
</div>
__NOTOC__
<div style="font-size:40px;"><center>'''TOOLKIT: Prototype and Test'''</center></div>
----<br>
{{Margin-limit|left=150px|right=200px|content=<br>
{{Content-A
|color=#5F574F
|title=Rapid prototyping techniques
|content=<br>
The goal of rapid prototyping (also called "low resolution prototyping") is to make ideas as tangible as possible to develop them more and communicate them to others to obtain feedback, instead of just talking about the idea.<br><br>
'''1. Sketching:''' This is a great form of rapid prototyping that helps you visualize and refine ideas. You don't need to be an artist! Rough sketches are OK and force you to consider details that you initially wouldn't have thought of. You can sketch a product, but you can also sketch a storyboard of a service or process (describing the different steps in the journey of the stakeholder, like scenes in a movie).<br><br>
[[File:TOOLKIT-proto-test-1.jpg|500px|thumb|left]]{{clear}}
{{Clickable button 2|Click here for some sketching tutorials|url=http://storyviz.com/content/category/rapid-visualization/|class=mw-ui-progressive}}<br><br>
'''2. Building physical objects:''' Building objects using simple materials is a big step towards making our ideas tangible, even if they look very different than how you imagine the final product or service.<br><br>
[[File:TOOLKIT-proto-test-2.jpg|500px|(Low resolution prototype of an educational computer game)|thumb|left]]{{clear}}
'''3. Role-playing/ Skits:''' If your idea is a process or service, role playing is a great option to rapid prototype it. You can act out the critical roles and reproduce the scenario as the stakeholders use the service or go through the process. This requires imagination from you and the tester, and you can explain this to him/her. Again, the idea here is that the role play will allow you to discover new details you had not considered when thinking of the ideas in more abstract terms. In many cases, you might need to build props/artifacts to support the role play (see #2).<br><br>
[[File:TOOLKIT-proto-test-3.jpg|500px|(Students role playing a prototype of a new tour of Stanford for visitors)|thumb|left]]{{clear}}
<br>
Role-playing is useful even in a physically-distanced world. You can assign roles to people in a videocall and role play a process or service.
<br><br>
'''4. Videos:''' Videos can help you convey your vision to others. You can simply use your phone to record a quick video, or use simple video editing software such as iMovie (Mac) or Movie Maker (PC), as well as other web-based tools.<br><br>
Take as an example this prototype of a mobile phone game for kids:<br><br>{{#widget:Youtube|id=-SOeMA3DUEs|width=75%}}<br><br>{{Clickable button 2|Click here to learn more about making good videos|url=http://storyviz.com/content/category/video/|class=mw-ui-progressive}}<br><br>
'''5. Paper prototyping:''' If the implementation of your idea is a website or app, before you start writing the code or think about what color and font to use for the text, you should think about the key elements of the experience of those using the website or app. This can be modeled with paper, as seen on the video lecture.<br><br>See a 5 year old kid showing his paper prototype of a game here:<br><br>{{#widget:Youtube|id=L3yl9vaJuFE|width=75%}}
}}<br>
You can also use whiteboarding program such as Mural, Google Jamboard, or Google Slides to create digital prototypes that serve the same function of a paper prototype: visualize the flow of information and be able to make changes quickly, before committing to implementation that requires coding and other time-intensive design work at higher resolution.
<br>
{{Content-A
|color=#5F574F
|title=Prototyping guidelines
|content=<br>
Beyond which techniques you use to build your prototypes, here are some important elements to keep in mind:<br><br>
:* '''Building over planning:''' Start building your prototype as soon as possible, even before you have a good sense of what you are building. Building is a way of thinking (just one that we are not very used to).
:* '''Essence over details:''' In your first prototypes, don't worry about small details. Instead, figure out what are the assumptions that are at the core of your idea (that is, if you are wrong in those assumptions, your idea won't work) and build prototypes to test those first.
:* '''Stay at low resolution:''' It's natural to be reluctant to show others work that looks unfinished and unpolished. However, when prototyping, the only thing that matters is that your prototype answers your questions. And in fact, people will be more likely to give you more candid feedback and point out potential problems if you show them something that looks unfinished.
:* '''Materials to use:''' You can use anything you have access to. The best materials for rapid prototyping are those that "move at the speed of thought" (in the words of Tom Chi, formerly of Alphabet's X), that is, those you can manipulate quickly without the need for specialized tools. For example: paper, rubber bands, clips, tape, fabric, post-it notes, popsicle sticks, pipe cleaners (note: if you don't have access to any of these, no worries! Work with what you have, even if it's only paper). Also, your prototype might be a role play or video, so you might not need those. In digital form, this could be sketches or postits on a digital whiteboard.
}}<br>
{{Content-A
|color=#5F574F
|title=Testing Guidelines
|content=<br>
'''Testing is about "failing forward / more intelligently."''' You want to make sure that you are investing time and resources on building the right "it" before you figure out how to build it right. What sounds like a great solution might not work at all in practice, while an idea that didn't seem that good might turn out to be a success when you test it. The faster you test your idea with real people, the earlier you will know if you are on the right path. Also, if you ask people what they think of an abstract idea, all you are going to get are opinions. If you make them experience your solution, you will get usable feedback to make that solution better (or discard it altogether).<br><br>
Here are some elements to keep in mind when you test your prototype:<br><br>
:*'''Do not sell your idea:''' Your goal is NOT to convince someone that your idea is fantastic. You want to find out what can be improved.
:*'''Let the tester experience the prototype''' instead of just showing them the prototype.
:*'''Capture the feedback:''' as with ideation, you need to capture the feedback to be able to analyze it later.
:*'''Be open to unexpected outcomes and misunderstandings:''' If the person who is testing your prototype didn't get your idea, embrace that as an opportunity to learn more about how they interpreted it and why. That might inform your next iteration.
:*'''Don't get attached to your prototype:''' Low resolution prototyping is a way of quickly and cheaply figuring out what doesn't work. That means that you should be ready to discard your ideas. Think of each prototype as a learning opportunity, and a temporary step towards the final solution.
}}<br>
{{Content-A
|color=#5F574F
|title=Additional Resources on Prototyping and Testing
|content=<br>
Book: [https://www.amazon.com/Right-Many-Ideas-Yours-Succeed-ebook/dp/B07CKRYYZK The Right It, by Alberto Savoia]
{{Clickable button 2|Pretotyping manifesto by Alberto Savoia|url=https://docs.google.com/file/d/0B0QztbuDlKs_ZTk2M2RhZWItYzk3YS00ZDZmLTgyZjItY2Y2ZWIyYjZkOTE3/edit|class=mw-ui-progressive}}
}}
}}
{{ResourcesBar2023}}
----
<center>{{Copyright2023}}</center>
[[Category:2023 Resources]]
</div>
