Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Mobile AR App Design Review #1: Torch Draws the Line

DZone's Guide to

Mobile AR App Design Review #1: Torch Draws the Line

Torch draws lessons for mobile AR design from four AR line-drawing apps.

· Mobile Zone ·
Free Resource

Torch put four augmented reality apps to the test.

At Torch, we have a weekly ritual: On Friday afternoons, we demo mobile augmented reality (AR) apps for each other, picking from them the design decisions we like, the ones we are not sure about, and the ideas we want to use (or “steal” in Torch parlance) in our own app, an AR prototyping tool.

After several sessions and dozens of apps reviewed, we started to recognize patterns and trade-offs or easily overlooked mistakes. We realized this information might be useful to other designers and developers getting started in mobile AR so we’ve decided to share the reviews. The format below cleaves pretty close to the format we follow in our demos. Hopefully, we have also captured a little of the sense of play and fun that pervades these sessions.

Let’s get started. On the docket for review this week, a representative sample from mobile AR line drawing app genre: 3DBrush, Space Paint AR, Lightspace, and Google’s Just A Line app, which I think by its name alone tells you a lot about what it does.

3DBrush

App Store Rating: 4.6 (661 Reviews) App Store Link

Summary: 3DBrush is rich in features, especially for this genre of app. Unsurprisingly, the overall design can sometimes make the camera view feel cluttered, which is unfortunate for an app where the camera is so integral to the experience. The app does about the same thing as every other app in the category except 3DBrush has lots of colorful, even garish, textures and effects. Basically, it lets you draw fancier “lines.”

A lot of screen real estate for features (and ads) that could easily be hidden in drawers or simple menus.

What we learned:

  1. Fast onboarding — Like all the apps we reviewed, 3DBrush doesn’t require surface detection, so no need for the wax-on/wax-off motion we’ve become accustomed to when initializing AR apps. And no lengthy tutorials. You open the app and find yourself in the camera where you can begin drawing. Simple, straightforward.
  2. Creation Mechanics — The mechanics of drawing are standard for the genre — you can either draw directly on the screen or touch the screen and move your device in space, leaving the drawing behind.
  3. Tubes, not lines — Unlike the other apps, 3DBrush elects to add lighting and shadows to the drawing on the screen which, along with the variegated colors, provides visual cues more suggestive of a tube than a line. The app feels a little like you are squeezing hallucinogenic toothpaste onto the screen.
  4. Screen real estate — Tools and configuration options crowd the bottom of the screen but having them all at the ready will tempt you to try every one. You can adjust tube thickness, change colors and “finishes,” and undo and redo drawing elements, and purchase new textures.
  5. Sharing — Standard picture or video. The tools selector drawer that takes up so much real estate (around one quarter of an iPhone X screen) does not show up in the video, which is nice for sharing (though not for demoing functionality).

What’s cool?

  1. Fast onboarding, drops you right into the camera authoring environment.
  2. Satisfying drawing mechanics.
  3. Single, concise drawer of features — all functionality is at the user’s fingertips at all times.
  4. Features drawer hides when authoring.


3DBrush does a great job simulating squeezing dollops of psychedelic toothpaste everywhere.


What to avoid:
  1. No landscape mode.
  2. No clear use case for squeezing hallucinogenic tubes of color into your virtual space.
  3. Too much space taken up with features, obscuring the camera.

Paint Space AR

App Store Rating: 4.6 (208 reviews) [App Store Link]

Summary: Paint Space AR is simple and easy to use but makes a few curious, and one deeply frustrating, design decisions.


Drawers hide and extend to maximize screen space for camera view. Note the weird “split” camera bug on the top/bottom of screen.

What we learned:

  1. Flat lines — The same general authoring dynamics as 3DBrush and others tested: Press on the screen and start to paint. Control line width or thickness as with the other apps, though Paint Space AR renders the line without 3D cues. This creates a flat effect — the line looks two dimensional from any angle. Cool, I guess.
  2. Don’t go overboard on the on-boarding — The onboarding is more extensive than any line drawing app we tried and, in the case of the tools menu walkthrough, superfluous. The app is simple and well-designed. I didn’t need seven screens to show me how to do it. I am left wondering why I have to try every single feature on my first project. Why?
  3. Wonder no longer — The reason, it turns out, for Paint Space AR’s extensive onboarding is that once you erase your first project, most features lock and require you to purchase the app. It may make sense business-wise but from a usability standpoint, this is something you’d be more likely to see in a mobile game. In fact, a fair share of the apps we looked at reveal a similar bias.
  4. UX Issues on the iPhone X — As the pictures below show, the app works well on older iPhones but splits the screen in distracting ways on the iPhone X.

What’s cool:

  1. Excellent menu design with heavy font weights on a transparent grey layer, making all controls easy to see no matter the background color or brightness.
  2. The color palette choices, at least when fully unlocked, offer a more practical range than 3DBrush.


With Paint Space AR, you can’t record while creating, only after you’re done.

Things to avoid:

  1. On-boarding is needlessly overdone given otherwise clean design; post-on-boarding feature lockout.
  2. “Record Video” feature UX is confusing and you cannot record while creating, only after.
  3. Lack of 3D visual cues means the drawings lack substance in AR and has us scratching our heads about even limited utility of drawings.
  4. Screen bug, perhaps because of iPhone X notch.

Lightspace

App Store Rating: 4.5 stars (408 reviews) [App Store Link]

Summary: Give Lightspace credit. It makes no pretense about what it is or what people can do with it. Lightspace’s own onboarding examples pretty much capture the app’s core use case. You use Lightspace to perform tasks like drawing legs on your hot dog and antennae on your dog. That’s it. Legs on hotdogs. Great, right?

The drawer, even when “hidden,” takes up a lot of camera real estate.

What we learned:

  1. Nada, zip, zilch — by this point, is there anything else we can learn from an AR line-drawing app?

What’s cool (in relative terms):

  1. Fixed time for video recording — The developers imposed a thirty-second limit to spare the phone. This makes sense. This is an AR line drawing app. If someone has a need for more than thirty seconds of contiguous video, I want to meet them.
  2. Feature names (maybe?) — The app developers decided to use fancy names for the line types on the tools menu: Glow (solid colored glowing line palette), Fire (multi-colored sparkling line palette) and Spark (select between two solid colored sparkling lines that are 100% definitely not the same as Fire). Definitely memorable.

Things to Avoid:

  1. Drawer behavior — The Glow/Fire/Spark drawer doesn’t automatically drop down to its otherwise sleek profile when you start drawing. You have to do that manually.
  2. The ads — Oh, the ads. I have to mention the ads. Unlike the ads in 3DBrush, which are omnipresent but subtle, the ads in Lightspace hijack your screen without a visible way to dismiss them, especially after you have finished recording a video. I had to quit the app a few times to escape them. For AR apps, this is actually a pretty big deal. AR apps depend on the camera, and on viewing the world through that camera. By hijacking the app and taking over the entire screen, the monetization strategy completely betrays the apps’ main purpose. Designers, we plead with you: Don’t let them ever do this to your app. It’s like a really annoying parasitic monetization wasp stung the app and deposited its ad larvae inside the app which then mature over the course of a user session until they take over the app’s functionality, turning it into a zombie app that just shows ads. It costs $2.99 to remove the larvae from this app.

Just a Line

from Google

Okay, first and foremost, bravo on the name, Google. I thought Lightspace had alignment between designer intention and overall execution, but Google really nails it. From the name to the design, this execution is cohesive. Imagine the conversation: What’s this app? Just a Line. What does it do? Draws a line. Just a line? Yep. Just a line. Etcetera. The only way you could create greater alignment is by calling this app Just A White Line.


What we learned:

  1. The code is available on Google’s GitHub repository. We think this is pretty cool.
  2. We know the team at Uncorked Studios that worked on this for Google. They told us that, at least in this case, the app is a proof of concept. It is intended as a reference for developers and designers just getting started. And that’s why this app actually nails the category. Line drawing apps for AR have about as much utility as line drawing apps would in 2D. It’s a feature. A very basic feature. We suspect Google is making this point with the app. That is the app’s utility.

What to Avoid:

  1. No iOS version. I have contacted Google for comment but at the time of publication, I hadn’t heard back.*
  2. * I never actually contacted Google.

Five Takeaways — I told you we actually learned something useful from this exercise. In fact, because the 3D components of these apps were relatively simple, we got to focus on the entire execution. So here is what we learned:

  1. Every mobile AR app is a 2D app with some AR functionality — Mobile AR is a curious hybrid. Apps need well-executed 2D UX but only to a point. Get the user into the camera and make sure you use as little of the camera space on the UI once they are in there. Apps that focused on AR tools often clutter the screen with their options.
  2. Mobile Game UX patterns don’t work outside that context — It should be no surprise that lots of people who have done game dev (mobile or otherwise) are trying their hand at mobile AR. But removed from the context of games, many of the conventions and patterns feel odd. Make sure you have a balanced team when you start building your app.
  3. Huge opportunity for mobile and web UX designers — The best apps were those that kept screens and interactions simple and designed clean, low-profile interfaces — what we have come to expect in good 2D design. We think the skills designers have developed over the last 10 years in mobile are far more valuable and needed than total mastery of 3D. Every mobile AR app is going to need 2D UX. There is too much functionality already available via the touchscreen that doesn’t need to be executed in 3D. Plus, mobile AR design is so new and undefined, it’s not like designers just getting started in AR have a huge learning curve to make up. This is a clarion call to experienced 2D UX designers — mobile AR UX is wide open for anyone who wants to jump in and help define it.
  4. Don’t confuse novelty with utility — Building a 3D line drawing app is cool. It will likely still be cool for a few more months. After that, everyone will hopefully come to their senses and realize line drawing in AR is just a feature.
  5. Speaking of utility — Where is it? Why have so many people built line drawing apps that don’t do anything much? Is it lack of imagination? Lack of market? Lack of tools? We will try to answer some of those questions when we dig deep into Vuforia Chalk — an app where drawing lines in AR is a feature in the service of a more complex app with actual utility. If you want to check it out beforehand, download it here.

Thanks!

UPDATE 20/06/2018: We’ve been asked by several people to review their mobile AR apps and we like the idea. If you have an app you would like us to look at and write about, get in touch at hello@torch3d.com. Our mission with these posts is for everyone to learn from each other, not to embarrass or belittle, so do not feel shy. It will be fun!

Topics:
augmented reality ,mobile apps ,mobile app design ,mobile ,mobile app development ,torch

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}