By Dani Beaumont
With the latest release of Adobe XD, you can now hide navigation controls in a web prototype to create a more controlled environment for user testing. Let me show you what I mean.
I'm here in Adobe XD and I want to test some pretty complex interactions with customers before I actually build out this application. I've got things like an onboarding tutorial here towards the top that has a skip introduction that I want to test. I also have drag gestures here on the right hand side. I have a keyboard that slides up. I have navigation that slides down. And I have some voice activation here on the right, pretty much a lot to handle. What I want to do is put this in front of users and make# sure that that they can navigate it. The way that I do that is to go ahead and set the beginning point of my flow. And in the Share drop-down, select Share for Review.
I've already published this prototype out to the web and if I click the icon in the upper-right hand corner here XD is gonna open up a web browser for me and take me into that experience. Now I can put this in front of a user and test if they can navigate all of the elements that I showed you, but unfortunately they get too many hints about what they should do. So if you notice here, towards the bottom, I've got a home icon that takes me back to the beginning of the flow. And then I have a list that shows one of 14 artboards are available with a previous and next arrow that allows the user to kind of cheat and not navigate through the site but actually just click through individual artboards. I want to suppress those so that I can really do a good test.
So if I swing back over into XD, what I want to do is publish a second time, but I'm gonna come on in and turn off hotspot hints. This is a feature we've had in the past but that gives them hints about where they should click. I want to disable that and I also want to hide the navigation controls. So I'll uncheck this box and I'll republish my prototype once again.
I'll go ahead and click the preview icon in the upper-right hand corner. XD is gonna open up a new web browser and in this instance I no longer have that navigation giving the user a clue about what they need to do. They have to actually interact with the interface. So the user can come to explore films from here, they can navigate the drop-down menu. They can engage with the onboarding tutorial. I can test whether or not they know how to skip outside of that tutorial by hitting that skip artboards. So it’s a much more controlled experience to do my usability studies.
One other point worth mentioning -- if you'd like to take advantage of this new feature, even for your existing prototype links, you'll need to republish the prototype with the show navigation controls tickbox turned off. I encourage you to give this new capability a try.
Usability testing is a critical piece to the design process for validating concepts and how whether a design serves it's purpose or not. When user testing with Adobe XD, hotspot hints and navigation elements from the XD web view can be hidden to provide a fully focused view of the prototype for users. This allows testers to focus on the flow and not get distracted by XD elements during the usability testing. To share a link for user testing simply select the "User Testing" option in Share mode.
