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 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 on 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 on 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 checkbox 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.
