Using Spark AR Studio for UX Design
Since we’ve started building augmented reality experiences, I’ve been searching for a tool that allows for more realistic mock-ups without the need to learn code. I may have found my quick fix in Facebook’s Spark AR Studio.
As UX designers, we have a mountain of tools that allow us to visualize a final product and communicate this design to our developers. This simply doesn’t exist yet in the world of AR software. The fledgling AR software landscape is marked by both highly technical and over-simplified, limited use case solutions. We have yet to find our ‘Sketch’ for AR. So what can we use in the meantime?
At first glance, Facebook’s Spark AR Studio seems like it has limited application for the UX designer. The focus of Spark is more ‘social media’ than UX design. Yet after getting to know the program a little, it can be quickly used to fill the gap I’ve experienced in designing for augmented reality. I’m not here to say I think Spark is/will be the best prototyping option overall, but it is a quick and easy way to make, test and frequently tweak a prototype design without any outside developer help.
At the end of experimenting, the design can be shown to the developer who can use it as a reference to build something more substantial in a tool like ARKit. Though Spark’s code can’t be integrated outside the Facebook framework, any design assets you created and tested can be passed over, providing a less rocky experience with more time to refine.
There isn’t too high of a learning curve for Spark, and the website has tutorials to get you started — but again most lean towards social media. I thought I’d put together a mini-tutorial with UX in mind that will show you a bunch of reusable techniques for future projects.
Tools you’ll need:
Spark AR Studio (free to download)
Adobe Photoshop
Adobe After Effects (optional)
AR Spark Player for mobile
LESSON: THE FLOATING INSTRUCTIONS
Covers: Spark basics, 2D Animation, Plane Tracker, Interactions, Patch Editor
For this project I created an example of ‘floating, interactive instructions’, something I see often in AR mockups.
To get started, design a UI or wireframe. I made two separate items for mine, a rotating circle icon and a card.
Animate it. This can be as simple or as complicated as you like, depending on how comfortable you are with the skill. You can animate in Photoshop, After Effects, or another program so long as it allows you to export image sequences.
Export your final animation as an image sequence. Spark recommends turning your image sequence into a sprite sheet for optimization, but I had issues with jittering when I did this so I stuck with sequences. It didn’t cause any optimization issues for my purposes. Make sure to note how many frames you have in this sequence.
Open Spark! The first thing to do is click the left top button named ‘Insert’ and choose Plane Tracker. This is the most useful tracker type for UX prototypes since you’ll most likely be tracking surfaces.
Create/Find a ‘target’. Plane Tracker doesn’t need a target to work, but if you don’t make a target your design will appear at a fixed place in the environment. For our purposes, we want our instructions to appear whenever Plane Tracker detects an outlet (or whatever you choose). Get a photo/image of what you want your tracker to be. You can even make and print out your own tracking symbol.
Go to the Assets section of Spark on the lower left side — you should have nothing imported yet. Hit the add button and import your target. Now click on your Plane Tracker. In the right panel of Spark you’ll see your Plane Tracker’s details. Click the add button next to the ‘Targets’ tab and click ‘Texture’. A drop down will appear — click the gray arrow and select your target image. You’ll now see it appear in the main scene!
At this point I like to readjust my view in the phone simulator. Double-click on it and you will be able to change your view. I usually adjust it so the camera is looking straight at my target.
We’re ready for the main design! Import your image sequence into the assets panel. Select all the images in the sequence and then check the ‘sequence’ box before you hit open. If you don’t see the sequence checkbox, it may be because you don’t have the Options box open. Now you can see your sequence under Textures in the Assets panel, AND under Animation as well.
Add a Rectangle object to the Plane Tracker. You can’t just drag 2D images or sequences into the scene like you can with 3D objects. They need to be put into a Rectangle on a Canvas. Go back to the top left ‘Insert’ button again and add a Rectangle. It should come within a Canvas already. Now, there are two things to do to make our Canvas appear to be part of the ‘World Space’. If it remains under Camera it will be stuck in a fixed position attached to the front of the screen, and we don’t want that. Drag and drop your Canvas right on top of your Plane Tracker so that it is nested within. Next, click on Canvas and in the right panel select ‘Screen Space’ under properties and change it to ‘World Space’. This will make our design appear more 3D.
Let’s add some Materials. Since all our 2D items are considered ‘Textures’, we will add them to a Material object before we apply them to a Rectangle. Add a new asset and select ‘New Material’. In the right panel for the new Material, you’ll see a ‘Texture’ option under ‘Shader Properties’. Click on that drop down arrow again and select your animation. One last thing here — if your object has any transparency at all I recommend scrolling all the way down and checking ‘Alpha Test’, otherwise transparency will appear as white. NOW we can add our new Material to our Rectangle. Click on it to reveal its right panel and add the Material to its Material property.
It’s working! You should see your animation looping now. You may want to adjust the Rectangle’s scale and position in the right panel. Make sure it is in front of your target texture in world space. I like to change my scene to a front view with orthographic projection for lining things up. You can change your views by right clicking on the 3D cube in the scene panel. Now that we have a texture on our Rectangle we can see its darker than the original design. Since it’s in world space we need to light it properly. Click on the Directional Light that came with your Scene in the Scene hierarchy area. Change the X value until your design is properly lit.
Let’s add interaction! This is probably the most difficult part of Spark for a non-coder, but once you figure out its logic, everything falls into place. As you saw, our animation is looping forever. In my case, it was checking off one item on a list again and again. We don’t really want that, instead let’s have our animation happen only once, and only after the user taps the screen. For that, we’re going to use Spark’s Patch Editor.
To kick off the Patch Editor, we’ll need to add a Patch. Patches can be added two different ways — right-clicking objects and selecting ‘Create Patch’, or going into an object’s right panel and selecting a property that has a radio button next to it. We’re doing the latter. To play a sequence, we’re going to need to manipulate its frames. Click on your sequence animation (the one under Animation in Assets, not the sequence under Textures). In the right panel, under Advanced, select the radio button next to ‘Current Frame’. The Patch Editor should appear with one item in it, a reference to your animation’s current frame in blue.
Next, let’s add a Screen Tap. To add code Patches, you just need to double-click anywhere on a blank space in the Patch Editor. A box will pop up with all the code Patch options listed and an explanation of how they work. Experiment with these, but for now search for Screen Tap and insert it. If you try to connect Screen Tap to your Current Frame, you’ll see it’s not even possible. There is not enough information between these two Patches to create an action. Let’s add two more. First, double-click and add a new Patch called ‘Animation’. Put Animation after Screen Tap, and connect the Tap node to the Play node. Now we’re saying “When the screen is tapped, play…”. You may think now we can just connect the Progress node to the Current Frame node of our sequence animation. But if you look at the Patch info for Animation, you’ll see Progress can only output numbers 0 or 1, 0 being the start of the Animation and 1 being its completed state. If we hook that up to Current Frame it will just go to Frame 1 of the animation, so we need more translation. Double-click and add another Patch, this time one called Frame Animation. Put that between Animation and your Current Frame. Connect Progress to Progress between Animation and Frame Transition. Remember when you made a note of how many frames were in your sequence? Type that number in Frame Transition in the ‘Frames’ node. Leave the First Frame node at 0. Now, connect the output node of Frame Transition to Current Frame.
At this point, we should have given the Patch Editor enough information to play our full sequence. You should have something like this:
Let’s test and see if it works. Go up to the docked mobile simulator and click the hamburger menu above it. Select the choice at the bottom called ’Simulate Touch’. Now, click the mobile simulation like a tap. Your animation should play! Click ‘Restart’ in the top menu bar to preview it as many times as you like.
Finally, preview on phone. You can preview your work on your phone using the AR Spark Player, which is free to download. Plug your phone into the computer you’re using, and with both programs open, hit the Mirror button in the top right corner of the Desktop application. It should sync to your phone, which you now can use to interact with your target in real life! Once the preview has been loaded you can disconnect it if you need to move around for your target. Also, you can record a screen capture in AR Spark Player, and use it to pass around and share your prototype.
You did it! I hope this brief tutorial was a springboard to build your own AR mock-ups using Spark AR Studio. Stay tuned for more tutorials.
