XR Nation collaborated with Torch in our first AR prototyping meet-up.
One of the biggest obstacles for designers in the field of XR is tools! Believe me, in the past 4 weeks I went through a painful and very intense course of learning Rhinoceros, Solidworks, Fusion 360 and Blender. The complexity of those tools is unbelievable!
So, when Torch gave me early access to their platform I was pretty excited to try something “made for people”! Torch is an iOS-based AR prototyping app that uses markerless tracking with plane detection. You can drag & drop a large variety of 3D models that are available through Google Poly and Sketchfab. There are modifiers such as position, scale, rotation, visibility, colour, spin, face camera. Currently, it supports interactions such as gaze in, gaze out, and tap.
I won’t sing odes, I’ll go straight to what I learned while playing around with it and what the challenges were to teach others during the workshop. (We cover the positive things, too, don’t you worry!)
The first thing is the UI. I guess there’s just no way to make it easy. There has to be some sort of training to learn it, taking the time to do it makes the difference =)
Second, but the most important thing, is that you have to think. Yep, use your brain to build a different sequence of steps to create a story. The greatest enemy in storyboarding is that the story is not limited by imagination but hard realise due to the limitations of the particular tool. Learning how to build realistic sequences is a necessary step in training, too. That was a missing element in the agenda of the workshop.
Organization and curriculum of the workshop
The workshop had 25 attendees, 5 teams of 5 people. I had made two main assumptions about the audience. I had expected to see 3 categories of people: designers, developers and students of the creative campus, which was mostly correct. Assuming they have prior knowledge to design workflows, I set up an agenda for the workshop without too much focusing on the workflow but rather on ideation. This assumption proved to be incorrect. That’s something we have to focus on next time.
The presentation slides included general 3D concepts such as occlusion, parallax and guidelines. It also covered trends and use cases. It didn’t have too much text as I generally tend to explain things with my hand, but I packed them with useful links that are worth checking out.
Most of the workshop time was devoted to getting hands-on skills. Out of 3h total time, the presentation took me 20 min at max. At least 40 min was devoted to getting through the Tutorial on how to place and manipulate objects, modify properties of objects and so on.
About the Torch tutorial
NB! The following part of the blog post assumes that you are either familiar with the Torch app or serves as helpful material.
The Torch tutorial is designed extremely well (and very well hidden)!
Keep in mind that the tutorial has three parts: the Design environment, the Gesture gymnasium and Adding collaborators. Certain things are not covered at all in this tutorial but are very important.
Image 1 — Duplicating and locking objects
For example, during the workshop I caught myself explaining several times what the anchor point is and why is it needed. Since we are used to designing for 2D frames, it’s hard to embrace the thinking that you now have an entire stage in the shape of a sphere around you to work with. And the anchor point is the center of that stage. This is where the AR project path starts!
There are two ways to reset your anchor point.
Both ways are done in two clicks. The first is done directly in the project.
The second way is from the main menu.
Torch doesn’t yet support the ability to type text and draw arrows, which is essential for prototyping. During workshop, we used a way around it. Teams would draw those elements on paper, take a picture of it then import those from the gallery into the app and modify them.
Ideation methods and each group’s problem statements
After participants got familiar with Torch I assumed that the audience would be familiar with the limitations of the app. Wrong assumption!
I gave teams 5 problem statements that would provide teams with an imaginary client for whom they needed to design the app! The storyboard task encouraged them to list objects and interaction steps that would use. To make it more of teamwork I chose a brainwriting technique: a person draws step 1 for 2 minutes and passes it to the person on his/her right to pick it up the storyline. Then the teams picked the best storyboard elements and combined them into an AR prototype.
Every case faced different sequence-building problems. Here are the problem statements the teams worked to solve. Let’s drill down.
Problem Statement n.1
Concept: There is a new building(s) in planning / old building getting renovated. You should build an AR prototype that introduce the locals with the story behind the building. It should include at least 3 elements of the story that appear one by one using interactions.
Problem: Rotation doesn’t work properly with some 3D models because it depends on the point of origin. (Good models have it in the centre of the volume/mass of an object, bad ones, somewhere outside of a model, which makes it rotate like it would stand on a vinyl record.)
Solution: Make the origin point visible.
Problem Statement n.2
Concept: Kindergarten X wants to have a treasure finding AR experience. They want to motivate kids and parents to spend more time outside. You should build an AR prototype that has, at least, 3 actions before finding a treasure, the character that moves through the space to guide the user.
Problem: The team came up with the concept of a bunny to follow around. It would jump from left to right. There was some confusion on the logic of the interactions.
Expectation: Bunny jumps left and right. Reality: Bunny keeps jumping left.
The problem was that the team started assigning interaction to the bunny itself which leaves them with either one interaction or an infinite repetition of same interaction.
Note on improvements:
Provide the audience of the workshop a step-by-step instruction using the bunny example. To make one object behave a different way, it’s safer to have interactions assigned to UI elements such as buttons and text that are positioned next to the object.
- Position all UI elements along the jumping path of the bunny. Toggle the visibility off of all elements except the first UI element “Tap to follow me” and “The Bunny” object.
- Assign two interaction to the first UI element: 1. Make the next UI element “Tap to follow me” visible 2. Roughly position the bunny object next to the second UI element.
- Repeat as many times as desired.
This is one way of doing it. If you want to directly tap on the bunny to make it move, follow these steps:
- Copy the scene, position the bunny where you want it to end up next, call it “Scene 2”.
- Return to Scene 1 and choose “The Bunny” object. Assign an interaction to it, choose Scene 2. Voila!
- Repeat as many times as you want!
Please note that the second method will make you lose the animation of moving through the space.
Problem Statement n.3
Concept: Meditation App X wants to have an AR experience that inspires new users to learn a few fact about meditation. They want to have “a magic forest on the table” AR experience. You should build an AR prototype that has at least one character that talks to their user and 3 facts that appear one by one using interactions.
Problem: Positioning objects is still very rough and painful! Swipe with fingers will move you along z, with one along x and y. The only way to move an object along one axis at the time is to x, y, z switchers in the app, and then use the slider to give it a value. The object ends up being too far away because the slider is very sensitive. In addition, this solution doesn’t feel intuitive at all.
Solution: I would rather like to have a switcher that would make my object move exclusively along one axis and control with a touch. Having gizmo highlights during that process would also help a lot!
Problem Statement n.4 & n.5
Concept 4: A user just received a package with Product X and downloaded the app of Product X. Client wants to have an AR how-to-use-tutorial for their product. You should build an AR prototype that has, at least, one product and 3 facts that appear one by one using interactions.
Concept 5: Concept Store X wants to have AR shop gallery. They want to enable their users to shop right in AR experience. You should build an AR prototype that has at least one piece and 3 elements of user shopping journey that appear one by one using interactions.
Problem: The team is not familiar with the concept of toggle on/off and how to align the object in 3D space.
Note on improvements:
Provide the audience of the workshop a step-by-step instruction. To align objects by location, follow these steps:
- Select object(s) and tap object properties and choose positioning.
- You can align an object at the same location by typing 0 at x,y,z values. Select object(s) and drag them to a prefered location.
- If you open the position tab, try dragging the object around the space. You will see the values on x, y, z change. Note those values. You can align other objects with the fist one by typing the same coordinates values.
To toggle on/off:
- Chose object then choose object properties. Tap visibility, choose invisible (you want to be invisible at first).
- Toggle visibility back when assigning interaction.
Conclusion
While feedback was positive, my assumptions that designers don’t need additional training on simple sequence building was incorrect. An improved workshop curriculum will be extended with a simple sequence building tutorial, like the video links I’ve posted below. That part of the training will happen directly after the tutorial. This way I hope attendees of the workshop will understand the capabilities and limitations of the app much better and let their imagination flow leading to a more realistic performance.
I’m looking forward to hosting more workshops on AR prototyping with an improved curriculum! And this time I won’t be alone because we’re all XR Nation! =)
Video Links
Triple interaction
https://www.youtube.com/watch?v=LISf7Wlf16s
How to change a scene
https://www.youtube.com/watch?v=IC769TjdG-8
How to align objects and toggle off the visibility https://www.youtube.com/watch?v=W7_4VniSIrU
