By Dani Beaumont
One of the really exciting aspects of Adobe XD is its ability to prototype all sorts of user experiences in addition to websites and mobile applications. XD can be used to simulate interactions with touchscreen kiosks or voice-enabled devices like an Amazon echo.
With the latest version of Adobe XD, we're taking this power even further by enabling keyboard shortcuts and gamepad triggers to simulate native desktop applications and gaming consoles.
Let's take this desktop mail application for an example. I want to confirm some shortcut keys with customers and some usability studies before I sign off on the interface design. When I bring up the desktop preview, what you can see is I have all the usual ways to interact with the prototype. So if, for example, I wanted to simulate closing out this left menu, I can click to close out the menu. It's using Auto-Animate to transition to another artboard.
From there I can click in the second and third email to simulate paging through those emails. I can click to move back up again and once again click the menu to expand it back out.
In addition to the traditional trigger types, I've gone in and also added keyboard command combinations that I'd like to test.
I'm gonna go ahead and turn on a camera here, so you can see my
keyboard. When I come to the keyboard now I can just come in and type the letter L to actually simulate hiding that left menu. From there I can hit the Down Arrow to advance to the second in third email. I'll click the Up Arrow to advance back to where I had started and then type L to expand that left menu out one more time.
I can do keyboard command combinations. So if I type Command + N I can simulate that new email and then, just hitting
Escape on the keyboard, dismissing that new email window.
Let's look at how I went about adding these additional keyboard commands into the prototype. Here in Adobe XD I'm gonna switch over to prototype mode and let's zoom on in a bit more tightly so that you can see what I've got going on.
In this first artboard I'll come in and select all of the wires. What you can see is they have all the traditional tap and drag gestures that have been defined, but two additional wires to simulate the keyboard commands.
So for example to compose an email, if I click here you can see I have a tap gesture that auto animates to that next artboard. If we
move down a bit more so that I can see the lower part of this initial artboard and then click to isolate the wire that I've drawn between the two there, notice in the trigger drop-down in addition to tap, drag time, and voice, I have keys and gamepad.
If I come in and select that I can then click in the key area and enter
the keyboard command that I'd like. I'll bring up the camera once again and notice I could decide that just typing the number three would dismiss that email window. I can go back to what I had
set before by clicking the Escape key to actually tag that with that keyboard command.
One point worth noting: keyboard and gamepad triggers can be dragged from object to artboard or artboard to artboard -- so it doesn't have to be at an artboard level.
Let's go ahead and take a look now at a very different type of prototype and that would be for a gaming device.
At this point I've closed out the mail application prototype and I've just opened up my gaming prototype that works with the DualShock controller. Before I show you how you wire these artboards together, let's take a quick look at the prototype in action.
From here I'll go ahead and flip on my camera and bring up the DualShock PlayStation controller that I have here and I'm going to start to interact with a variety of the buttons here. So when I hit the Option key, it brings up a carousel of sorts with a number of games.
Here towards the bottom, I can go ahead and move this joystick towards the right a bit to go to that second tile. If I go back to the left it'll take me to that first tile.
Pressing down on the joystick is going to bring up the detailed view of that individual game and then hitting the triangle will in essence escape that detail view and take me back out to the carousel. Let's take a look now at how you can go about wiring up those individual artboards.
So I'm going to minimize the previewer and here within the XD application in the Prototype mode. Let's zoom on in to get a better sense of how these wires have been defined.
So as you might expect, I'm going to come to the first artboard and I'll click on the wire that I've dragged between the two
artboards. Here within the trigger dialog box you can see I have keys and gamepad selected and in the key area the Option button was selected. I'll go ahead and click in there to highlight it and let's
flip the camera back on for a moment.
With my gaming controller I can just come through and select which button I'd like to associate with this transition. So the triangle key, the circle key, I can come to the joystick and just move it down to indicate what I'd like that trigger to be or go back to use the Options button as we had it before.
There is one thing I should point out. You'll want to use the Gamepad controller type that you'll be using in your actual prototype. So, for example, if I were testing both an Xbox and the DualShock controller, I could create a separate flow for each. You can attach each of the gamepad controllers to your computer, be it Mac or Windows, by way of either a USB cable or a Bluetooth connection.
So for example if i zoom out here, you can see I've got the DualShock controller selected. If I scroll up a little bit you can see that I also have the same exact artboards that are interacting with the Xbox gamepad controller there as well. So same artwork but a different set of wires based on which device I'll work with. Now, this interaction works both in the desktop preview app and in the web as a prototype, so I'm free to get that feedback in either way.
Well, that's about it. We can't wait to see what you'll do with these new device capabilities.
Designing for video games in Adobe XD is easy to do with the Keyboard and Gamepad trigger in Prototyping mode in Adobe XD. Adobe XD triggers initiate a prototype action like Auto-Animate and speech playback, and come in a variety of types, including gamepad support. This means you can connect an Xbox One or Playstation DualShock 4 controller to Adobe XD and prototype experiences with the button mappings on the controllers as a trigger.
