By Dani Beaumont
When you send out a prototype to be viewed by your stakeholders, you can't always control which browser they'll use to view the design. In the latest release of Adobe XD, we've added a number of navigation improvements when viewing an XD prototype in a mobile browser. Let me show you what I mean.
I'm here in my messaging doc and someone has texted me a prototype that they'd like me to take a look at. I can go ahead here and in this nice preview area, just click to bring up the native browser in my iOS device. If you're familiar with the way mobile prototypes have been in the past, we're now defaulting to this nice fullscreen view. If this was a scrolling artboard, I could scroll down on the design and the navigation up towards the top, the default browser navigation, would minimize as I scrolled down. For now, I kind of want to immerse myself in the experience, so I'll go ahead and click on the Book Tickets button. If these seats look ok, say Confirm Purchase. I'm gonna go ahead and click on that microphone button because I'd like to speak to my prototype. I'll go ahead and click Allow. Now once again, I'll hold it down and say a command: Confirm Purchase. Your tickets are booked. Great!
Well, once I have a sense of this immersive experience, I might want to flip back and look at individual artboards. To do that, I can just pinch to zoom out on the layout. Having done that, I now have a next arrow on the right-hand side and a previous arrow on the left-hand side that I can navigate between artboards. At any time, if I want to confirm the time and date that this prototype was created, I can do so by clicking on the eye icon towards the lower left. If I click off, it will dismiss that dialog. I can also click the Home icon towards the bottom center and return to the first artboard in the sequence. And if I want to jump back into the full screen experience, all I need to do is click on the visible artboard right here in the center. One last point, you don't have to republish your old prototypes in order to take advantage of these new UI elements — they'll automatically show in a mobile browser. I encourage you to give this new capability a try.
The best way to test a mobile prototype or design is on a mobile device. Prototypes can be viewed from the Adobe XD mobile app, but if that is not available they can easily be previewed on a mobile browser to test interactions and gestures. Sharing an Adobe XD mobile prototype is the same as any other, the only difference is that you open it on a mobile device instead of a desktop browser.
