By Dani Beaumont
In just a few clicks you can convert a design concept in Adobe XD to a fully working prototype ready for usability testing and feedback. Let me show you how easily this can be achieved.
An usability study usually begins with a question. In this example I'm testing a variety of interaction types as a means of navigating this mobile application and I want to understand if the users can figure that out. Here in design mode you'll notice that I have a number of artboards here towards the top. Basically, allowing the viewer to choose between a few different national parks clicking any one of these tiles will bring up a detailed view of that park and from there they can click the visit button and actually purchase the tickets.
When I switch over to the prototype mode by clicking here in the upper left-hand corner on that prototype workspace, you'll notice that if I select all I have a number of wires that I've defined wiring these artboards together. If I come and click just one artboard let's say Yosemite and then hover over the wires notice that I have both a tap gesture and speech recognition or a voice command that's going to transition over to that detailed artboard. If I roll up just a bit you can see the drag gesture that I've defined to drag between artboards and simulate the carousel experience.
With that all set and ready to start conducting some usability studies and I have a few different approaches I can take. One is to come here to the upper-right hand corner of the application and click the desktop preview icon. When I bring up that desktop preview I have the ability to come in record my interaction with this preview. Here on the right hand side I can select enable microphone this will capture my narration as I click through the experience. In the main window again I can click the record button and as I press and drag and as I interact with the design using my voice I can narrate the experience and communicate my concepts. If I want a more real-world experience I can close out the desktop preview and instead come here to the upper-right-hand corner and click device preview.
What I would do in that instance is actually connect a real mobile phone using a USB cable to my computer when I click the desktop preview it sends that design to the phone from there I can actually disconnect the phone from the cable hand it to my user let them interact with the actual prototype on their device and take notes or observe their interaction and get feedback in that way. I can also deliver a web prototype I created one originally for my client so that they can interact with the design and submit some visual comments back to me. I can access the prototype that I created for that purpose here by clicking the upper left hand corner in Share mode from here on the right hand side, you can see that I select a design review for the type of prototype I was generating and generated that URL for that link that I shared with my client.
If I click now on that link to bring it up it loads up in a web browser and once again I can interact with the design with drag gestures Auto-Animate transitions between individual artboards. Notice on the right hand side if I expand the comments area my client has given me specific comments that focus on individual aspects of the design. Notice also that here towards the bottom I have more information for my stakeholder. I can go back to the first artboard in the sequence I can also navigate previous and next and notice that there are a total of 10 artboards that have been uploaded, If as a viewer I didn't know where to click I could just kind of click anywhere and as I do so I get some pretty subtle hotspots that let me know where those click areas are.
Now if I'm doing a real usability study I may not want to give these hints to the viewer of my design. I don't want them to know how many artboards there are or where it is that they can click. For that it can come back over to XD here within the application what I want to do is generate an usability prototype that's specifically geared towards usability studies. I can do that by selecting here in the view settings drop down the user testing option. If I switch over to custom you can see what those choices are. So this is where I enabled comments I also enabled the hotspot hints and show those navigation controls. If I were to switch back over to user testing it would deselect those options and give me that more controlled environment. From there I can just come in and update the link that I've already created or generate a new one for this different usability study.
Well as you can see I've just scratched the surface around how easy it is to build out a prototype for usability studies in Adobe XD. I encourage you to try it out yourself.
When user testing, a focused environment is crucial for distilling down what is causing friction in a user flow. Adobe XD makes it easy to share focused links specifically for user testing. Adobe XD user testing links show no hotspot hints and remove all navigation elements from the web view, leaving the user free to navigate the prototype and interact with it as they explore the functionality.
