This is the partnership of interaction designer, client, and user, and it is our job to facilitate it.<\/p>\n
Focus on practicality over glamour \u00a0<\/strong><\/h2>\nRecently, as part of a client project, I was tasked with creating a prototype for a page that involved some animation. This is a concept that I had recently been looking into from an interaction design perspective, and I was eager to explore its usefulness in client work.<\/p>\n
![\"UX](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/2c-design-funnel.png\")
<\/a><\/p>\nSource: UXBooth<\/a>\u00a0<\/em><\/p>\nHowever, in my eagerness to explore, I jumped headlong into creating a high-fidelity prototype. This was a mistake, because I didn\u2019t lay the right groundwork in creating feedback with the client\u2014 while we did get the desired feedback, it took far longer than I hoped, and required sifting through lots of irrelevant information.<\/p>\n
It was completely my fault.<\/p>\n
The client didn\u2019t know what kind of feedback I wanted, because I had forgotten a related-but-less-glamorous predecessor of prototyping\u2014 planning and framing the prototype.<\/p>\n
Present the right context or risk failure \u00a0<\/strong><\/h2>\nChances are, if you\u2019re reading this post, you recognize the value of a good prototype (that, or you\u2019d like to).<\/p>\n
The purpose of a prototype is to gather insights on interactions when flat mockups just won\u2019t suffice \u2014 when we want feedback on movement, interplay of elements, or changes in an interface. Before a large amount of code is written and time invested, we can see if our brilliant new idea truly has a leg to stand on with stakeholders and users.<\/p>\n
![\"Bad](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/MarkandPaddy2.jpg\")
<\/a><\/p>\nSource: <\/i>Sharp Suits<\/i><\/a><\/p>\nIf we present stakeholders with a prototype that is unclear in purpose, or perhaps overdone in aesthetics, then the fault is ours. You may present a prototype for feedback on interactions only to hear \u201cI don\u2019t like the colour.\u201d They are only trying to help, so without focus, they\u2019ll simply tell you everything that comes to mind.<\/p>\n
After all, if you\u2019re being shown something without context and being asked to comment on it, you won\u2019t know what\u2019s relevant or helpful (or worse, are expected to know but don\u2019t). So you\u2019ll say whatever comes to mind.<\/p>\n
As interaction designers, it is our job to guide the client and offer them the tools to give strong feedback. The prototype is just the endgame, the collector of the feedback rather than the enabler. We need to lay the foundations for good feedback ourselves, and these foundations have to be laid before the prototype even makes an appearance.<\/p>\n
Otherwise, we run the risk of wasting our time making a prototype which, though beautiful, is as useful to us as a wooden frying pan.<\/p>\n
Forge ahead\u2014 getting the best out of your prototype<\/h2>\n
So, what can we do to ensure we\u2019re wielding a cast iron pan instead of a wooden one?<\/p>\n
Our preparation begins before the prototype is created, and starts from within.<\/p>\n
1. Know what you\u2019re testing<\/b><\/p>\n
It seems fundamental, but identifying your own (or your team\u2019s) hypothesis and assumptions before the prototype is created will inform its shape.<\/p>\n
Ask yourself the following questions:<\/p>\n
\n- Am I testing form, function, interaction, or a mixture of the three?<\/li>\n<\/ul>\n
\n- What result would I expect, given previous research and the assumptions I\u2019ve made?<\/li>\n<\/ul>\n
\n- Is there a context to be taken into account?<\/li>\n<\/ul>\n
\n- What kind of feedback will you need to improve the product, and to inform your next iteration?<\/li>\n<\/ul>\n
Making sure these preliminary questions are answered is key to creating a focused prototype.<\/p>\n
2. Choose your fidelity accordingly\u00a0<\/strong><\/p>\nOnce you\u2019ve clarified the hypothesis and assumptions to test (and you\u2019re sure that a prototype is the best way to go), make sure you\u2019re aware of the different types of fidelity<\/a> available to you.<\/p>\n![\"UX](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/fidelity-grid-2.png\")
<\/a><\/p>\n <\/p>\n
Source: <\/i>Boxes & Arrows<\/i><\/a><\/p>\nHow refined do the visuals, functions, and content actually need to be? How much value will you stand to gain (that is, how will feedback improve) from turning the fidelity switch to high on all counts? Is this the best way to spend your time?<\/p>\n
Maybe it is, but you want to be able to clearly and thoughtfully justify that effort\u2014 after all, if all you need is a few sketches to test your hypothesis, there is no need to dive into Photoshop or Sketch.<\/p>\n
3. Be ruthless\u00a0<\/strong><\/p>\nMake as little as possible, just enough to test what it is you need to test.<\/p>\n
If you\u2019re testing a particular interaction, don\u2019t be afraid to just prototype that interaction, be it with a prototyping tool, HTML or CSS, or just with paper and pen. There\u2019s no need to spend time on other parts of the site (unless that context is necessary).<\/p>\n
![\"Prototypes](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/947011269114491.jpg\")
<\/a><\/p>\nSource: <\/i>Behance<\/i><\/p>\n
Don\u2019t be afraid of roughness: the artistic part of us may be afraid of something looking unfinished, and that untidiness reflecting negatively on our skill. But we should remember that at this point, that roughness can actually work to your advantage.<\/p>\n
To make this more apparent, you can try creating different parts of the prototype with different fidelities.<\/p>\n
4. Get away from the committee<\/strong><\/p>\nIsolate the person you want to gather feedback from.<\/p>\n
The group dynamic is useful in certain UX and interaction design contexts\u2014 affinity diagrams<\/a> or card sort exercises<\/a>, when a general consensus around a topic is desirable\u2014 but when we want frank and honest feedback, a group is the last thing we want.<\/p>\n![\"Danger](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/19th-cent-Ecce-Homo-church-fresco-painting-Elias-Garcia-Martinez-ruined-diy-437x275.jpg\")
<\/a><\/p>\n <\/p>\n
This may take a bit of time, but will be well worth the effort in the end.<\/p>\n
5. Focus the customer\u2014 but not too much<\/b><\/strong><\/p>\nOnce you\u2019ve created the prototype, be absolutely certain that the customer knows what they\u2019re looking at and why. Give them context and focus.<\/p>\n
If you\u2019re testing an interaction, the customer should be made aware (either explicitly by you or implicitly by the fidelity of the prototype) that you aren\u2019t looking for feedback on colour scheme or font choice. This is our responsibility as interaction designers\u2014 if we get the wrong feedback, it\u2019s due to a misstep we\u2019ve made somewhere along the line.<\/p>\n
![\"Testing](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/Introduction-Website-Usability-Testing-Car.jpg\")
<\/a><\/p>\nMake sure that the customer is just as focused and prepared to give feedback as we are to receive it. The right choice in prototype fidelity will go a long way to achieving this.<\/p>\n
6. Adapt and iterate<\/b><\/strong><\/p>\nOnce you receive feedback, act on it\u2014 good or bad.<\/p>\n
Be prepared to go a few rounds, test repeatedly, and slowly increase (or decrease) fidelity in order to direct feedback to test the initial assumptions and hypotheses. At first, the customer may be uncomfortable with seeing something in an unfinished state, but the quicker they understand that this is meant to be iterative, the more likely they are to see the forest for the trees.<\/p>\n
![\"Prototyping](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/prototype-cycle.jpg\")
<\/a><\/p>\nPrototyping is a process, after all, not a single act. Involve different people at different stages<\/a> \u2014 developers, visual designers, copywriters\u2014 whoever can best help your prototype achieve its goal and desired fidelity.<\/p>\nConclusion<\/h2>\n
Prototypes are exciting. They\u2019re innovative and interesting\u2014 after all, if the pattern we were testing was established, then we wouldn\u2019t need to test it.<\/p>\n
But the prototype is only useful when it\u2019s \u201cjust enough,\u201d otherwise work is wasted and focus is lost. I would even say that the hypothesis we choose and assumptions we identify are more important than the prototype itself\u2014 without an objective framework, we\u2019re prone to interpret results however we see fit.<\/p>\n
Prototype fidelity will help guide the feedback\u2014 the more detailed and polished something is, the more detailed the feedback will be. Rapid prototyping is all well and good, but calculated (and sometimes difficult) choices beforehand will make it that much easier and that much more fulfilling for everyone involved.<\/p>\n
To learn more about prototyping methods, fidelities, and tools, check out the Ultimate\u00a0Guide to Prototyping<\/a>.<\/p>\n
<\/a><\/p>\nSource: UXBooth<\/a>\u00a0<\/em><\/p>\n However, in my eagerness to explore, I jumped headlong into creating a high-fidelity prototype. This was a mistake, because I didn\u2019t lay the right groundwork in creating feedback with the client\u2014 while we did get the desired feedback, it took far longer than I hoped, and required sifting through lots of irrelevant information.<\/p>\n It was completely my fault.<\/p>\n The client didn\u2019t know what kind of feedback I wanted, because I had forgotten a related-but-less-glamorous predecessor of prototyping\u2014 planning and framing the prototype.<\/p>\n Chances are, if you\u2019re reading this post, you recognize the value of a good prototype (that, or you\u2019d like to).<\/p>\n The purpose of a prototype is to gather insights on interactions when flat mockups just won\u2019t suffice \u2014 when we want feedback on movement, interplay of elements, or changes in an interface. Before a large amount of code is written and time invested, we can see if our brilliant new idea truly has a leg to stand on with stakeholders and users.<\/p>\n Source: <\/i>Sharp Suits<\/i><\/a><\/p>\n If we present stakeholders with a prototype that is unclear in purpose, or perhaps overdone in aesthetics, then the fault is ours. You may present a prototype for feedback on interactions only to hear \u201cI don\u2019t like the colour.\u201d They are only trying to help, so without focus, they\u2019ll simply tell you everything that comes to mind.<\/p>\n After all, if you\u2019re being shown something without context and being asked to comment on it, you won\u2019t know what\u2019s relevant or helpful (or worse, are expected to know but don\u2019t). So you\u2019ll say whatever comes to mind.<\/p>\n As interaction designers, it is our job to guide the client and offer them the tools to give strong feedback. The prototype is just the endgame, the collector of the feedback rather than the enabler. We need to lay the foundations for good feedback ourselves, and these foundations have to be laid before the prototype even makes an appearance.<\/p>\n Otherwise, we run the risk of wasting our time making a prototype which, though beautiful, is as useful to us as a wooden frying pan.<\/p>\n So, what can we do to ensure we\u2019re wielding a cast iron pan instead of a wooden one?<\/p>\n Our preparation begins before the prototype is created, and starts from within.<\/p>\n 1. Know what you\u2019re testing<\/b><\/p>\n It seems fundamental, but identifying your own (or your team\u2019s) hypothesis and assumptions before the prototype is created will inform its shape.<\/p>\n Ask yourself the following questions:<\/p>\n Making sure these preliminary questions are answered is key to creating a focused prototype.<\/p>\n 2. Choose your fidelity accordingly\u00a0<\/strong><\/p>\n Once you\u2019ve clarified the hypothesis and assumptions to test (and you\u2019re sure that a prototype is the best way to go), make sure you\u2019re aware of the different types of fidelity<\/a> available to you.<\/p>\n <\/p>\n Source: <\/i>Boxes & Arrows<\/i><\/a><\/p>\n How refined do the visuals, functions, and content actually need to be? How much value will you stand to gain (that is, how will feedback improve) from turning the fidelity switch to high on all counts? Is this the best way to spend your time?<\/p>\n Maybe it is, but you want to be able to clearly and thoughtfully justify that effort\u2014 after all, if all you need is a few sketches to test your hypothesis, there is no need to dive into Photoshop or Sketch.<\/p>\n 3. Be ruthless\u00a0<\/strong><\/p>\n Make as little as possible, just enough to test what it is you need to test.<\/p>\n If you\u2019re testing a particular interaction, don\u2019t be afraid to just prototype that interaction, be it with a prototyping tool, HTML or CSS, or just with paper and pen. There\u2019s no need to spend time on other parts of the site (unless that context is necessary).<\/p>\n Source: <\/i>Behance<\/i><\/p>\n Don\u2019t be afraid of roughness: the artistic part of us may be afraid of something looking unfinished, and that untidiness reflecting negatively on our skill. But we should remember that at this point, that roughness can actually work to your advantage.<\/p>\n To make this more apparent, you can try creating different parts of the prototype with different fidelities.<\/p>\n 4. Get away from the committee<\/strong><\/p>\n Isolate the person you want to gather feedback from.<\/p>\n The group dynamic is useful in certain UX and interaction design contexts\u2014 affinity diagrams<\/a> or card sort exercises<\/a>, when a general consensus around a topic is desirable\u2014 but when we want frank and honest feedback, a group is the last thing we want.<\/p>\n <\/p>\n This may take a bit of time, but will be well worth the effort in the end.<\/p>\n 5. Focus the customer\u2014 but not too much<\/b><\/strong><\/p>\n Once you\u2019ve created the prototype, be absolutely certain that the customer knows what they\u2019re looking at and why. Give them context and focus.<\/p>\n If you\u2019re testing an interaction, the customer should be made aware (either explicitly by you or implicitly by the fidelity of the prototype) that you aren\u2019t looking for feedback on colour scheme or font choice. This is our responsibility as interaction designers\u2014 if we get the wrong feedback, it\u2019s due to a misstep we\u2019ve made somewhere along the line.<\/p>\n Make sure that the customer is just as focused and prepared to give feedback as we are to receive it. The right choice in prototype fidelity will go a long way to achieving this.<\/p>\n 6. Adapt and iterate<\/b><\/strong><\/p>\n Once you receive feedback, act on it\u2014 good or bad.<\/p>\n Be prepared to go a few rounds, test repeatedly, and slowly increase (or decrease) fidelity in order to direct feedback to test the initial assumptions and hypotheses. At first, the customer may be uncomfortable with seeing something in an unfinished state, but the quicker they understand that this is meant to be iterative, the more likely they are to see the forest for the trees.<\/p>\n Prototyping is a process, after all, not a single act. Involve different people at different stages<\/a> \u2014 developers, visual designers, copywriters\u2014 whoever can best help your prototype achieve its goal and desired fidelity.<\/p>\n Prototypes are exciting. They\u2019re innovative and interesting\u2014 after all, if the pattern we were testing was established, then we wouldn\u2019t need to test it.<\/p>\n But the prototype is only useful when it\u2019s \u201cjust enough,\u201d otherwise work is wasted and focus is lost. I would even say that the hypothesis we choose and assumptions we identify are more important than the prototype itself\u2014 without an objective framework, we\u2019re prone to interpret results however we see fit.<\/p>\n Prototype fidelity will help guide the feedback\u2014 the more detailed and polished something is, the more detailed the feedback will be. Rapid prototyping is all well and good, but calculated (and sometimes difficult) choices beforehand will make it that much easier and that much more fulfilling for everyone involved.<\/p>\n To learn more about prototyping methods, fidelities, and tools, check out the Ultimate\u00a0Guide to Prototyping<\/a>.<\/p>\nPresent the right context or risk failure \u00a0<\/strong><\/h2>\n
<\/a><\/p>\nForge ahead\u2014 getting the best out of your prototype<\/h2>\n
\n
\n
\n
\n
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\nConclusion<\/h2>\n
![\"Ultimate](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/blog-book.png\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"