<p>Published on <a href="https://blog.prototypr.io/sketches-wireframes-prototypes-levels-of-fidelity-and-what-to-expect-from-each-c381d54a23db?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> UX Boot Camp </p>
<h4>#30dayUXchallenge [Day 15]</h4>
<p>We are halfway through our #30dayUXchallenge and it’s time to start solidifying the ideas we captured in the previous steps, so let’s talk about how to do it through prototypes!</p>
<blockquote><p>Prototyping is all about giving concrete form to abstract ideas.</p></blockquote>
<p>It’s a way to validate or invalidate our assumptions. It simulates the experience we want to deliver without requiring us to build the real thing.</p>
<p>We shouldn’t worry about making it perfect. It doesn’t need to look good as long as it communicates the idea and is appropriate for the feedback we are aiming to get. We will talk about how to plan our user tests properly on day 19, but it’s important to understand which prototype methods will help us achieving each goal beforehand!</p>
<blockquote><p>The only prototyping rule is: <strong>do it early and do it often.</strong></p></blockquote>
<h4>Prototypes help us to:</h4>
<ul>
<li><strong>Work through a design:</strong> to shape our own ideas, even if it is only for the sake of solidifying our own ideas. A quick session of paper prototyping can help brainstorm solutions if you’re currently stuck with your digital prototype.</li>
<li><strong>Communicate Concepts: </strong>By visualizing the concept, the team is able to build a different level of understanding about that concept. Prototypes make it a lot easier to analyze, estimate efforts and feasibility.</li>
<li><strong>Sell our idea: </strong>Prototypes can be amazing to help our stakeholders/clients visualizing our ideas. Whenever I talk about a “white dog”, it’s up to you to follow my description and picture your own “white dog”. When I show you one, it’s much easier to get buy-in on my concept. We are all talking about the same “white dog”</li>
<li><strong>Estimate feasibility: </strong>By knowing exactly what the prototype intent is, teams can easily and accurately estimate its feasibility and effort. It’s black and white.</li>
<li><strong>Test usability earlier:</strong> Testing our prototypes empower us to learn quickly while we still have high flexibility to adapt and fix the points that still need improvement.</li>
</ul>
<blockquote><p>According to the book <a href="http://rosenfeldmedia.com/books/prototyping/">Prototyping: A Practitioner’s Guide</a>, prototypes helped increase accuracy by 50% while reducing requests for clarification by 80%. The same case study cited above saw 25% reduction in post-release bugs thanks to prototyping.</p></blockquote>
<h3>So what type of feedback are you willing to get?</h3>
<h4>Low-fidelity Prototypes</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*WgmjM7LmUJJO4TStthArOA.png">Example of how a sketch can help communicating the concept and the navigation</p>
<ul>
<li>Quick, cheap and can be easily changed. Ideal to quickly solidify ideas, to estimate effort on concepts and to test navigation. It also stimulates our creativity and helps to unblock ideas.</li>
<li>However, low-fi prototypes like paper prototypes for example, still demands a lot of imagination from users and stakeholders. Needs explanation of context, and can be harder to ge the users to focus on the actual “feature” being tested. It can also end up being slower to build than other tools.</li>
<li>Examples: Sketches, ‘Post-it’ notes, Storyboards, Wireframes (e.g. Balsamiq)</li>
</ul>
<blockquote><p>Evidence suggests that low-fidelity mock-ups are as effective in revealing design flaws as high-fidelity mock-ups, at least in this early stage (Virzi et al, 1996)</p></blockquote>
<h4>Middle and high-fidelity Prototyping</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bPl6P4N-PSFaPXS70U-eGA.png">An example of a prototype made with Sketch App, Craft plugin and Invision</p>
<ul>
<li>Middle-fi prototypes are usually black and white to help setting up the expectations of “limited prototype”. It’s ideal to show a high functional version of the concept, while still quick to design and cheap to discart.</li>
<li>Hi-fi prototypes tend to use assets and to showcase interactions that will be part of the final product. Ideal to get feedback on visuals, estimate effort on interactions (like animations) and to help as final guide for implementation. However, it’s tricky for users and stakeholders to understand limitations, as high-fidelity visuals tend to create expecation of full-functional products.</li>
<li>Common softwares are: InVision, Sketch App, Axure, Figma.</li>
</ul>
<h4>How to choose the ideal tool?</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*d2qt6A60SKOaWykkkLrQbw.png">A few examples of different tools and its outcomes</p>
<ul>
<li><strong>HTML</strong> is a great tool when you need high fidelity cross functionality and visuals. It’s great to sell your idea to a client, for example — but works better when we have time to invest on it.</li>
<li><strong>Prototyping tools such as Invisino </strong>are really handy for interactive prototypes that demands high fidelity screens and some sort of interaction, but are still built based on mockups.</li>
<li><strong>Sketch App </strong>is a handy software as it makes prototyping/wireframing really quick for both low-fi and hi-fi mockups. It has a bunch of plugins available that enable us to create clickable prototypes (such as Craft, that is integrated to Invision), but, on its own is not a very powerful tool to demonstrate interactions or animations.</li>
<li><strong>Axure</strong> is extremely powerful for interactions, but slower to build hifi designs. Ideal to get feedback on interactions as it creates an extra layer of interactivity that is only achievable with coded prototypes (like HTML) .</li>
<li><strong>Paper prototypes </strong>are really efficient to communicate ideas and functionality, but hard to communicate how branding and visuals will be applied.</li>
</ul>
<h4>So what is your favourite prototyping tool? Aaand why?</h4>
<p>Share with us on the comments!</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2F5eb5ba-2%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2F5eb5ba-2%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252F5eb5ba-2%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/8d5e2c740a04faf463af9accfa7e3c31/href">https://medium.com/media/8d5e2c740a04faf463af9accfa7e3c31/href</a></iframe><img alt="" src="https://cdn-images-1.medium.com/max/119/1*g1xXlc-Yf5xkdPNdA_gxEg.png">Gabi Braga — UX Designer at Envato Elements, freelancer at Toptal &amp; beer enthusiast in her spare time</p>
<p><em>This post is part of the #30dayUXchallenge: you can read more about why we started it </em><a href="https://medium.com/envato/why-were-embarking-on-a-30dayuxchallenge-e3d9f1bc1ac6"><em>here</em></a><em>, and don’t forget to follow us on </em><a href="https://twitter.com/ux_bootcamp"><em>Twitter</em></a><em> and </em><a href="https://www.instagram.com/ux_bootcamp"><em>Instagram</em></a><em>!</em></p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=c381d54a23db" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/sketches-wireframes-prototypes-levels-of-fidelity-and-what-to-expect-from-each-c381d54a23db">Sketches, Wireframes, Prototypes. Levels of fidelity and what to expect from each</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Sketches, Wireframes, Prototypes. Levels of fidelity and what to expect from each

#30dayUXchallenge [Day 15]

Top Stories