<p>Published on <a href="https://blog.prototypr.io/designing-for-ar-b276c8251c20?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Alexandra Olarnyk </p>
<p><em>How to move away from the wireframed box and into the infinite space of AR.</em></p>
<p><em>Written in collaboration w/ </em><a href="https://www.linkedin.com/in/kelly-graham-960a862b/"><em>Kelly Graham</em></a><em> &#8211; UX Designer, Microsoft Mixed Reality</em></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*MLzJ-QsqVTftnocW.">microsoft.com</p>
<h3>No More Boxes</h3>
<p>As UX Designers, it feels very familiar to start our ideas in a box, e.g. drawing within the parameters of an iPhone screen as we wireframe an app. These types of boundaries sometimes subconsciously limit the boundaries of our ideas that we’re so accustomed to.</p>
<p>In Augmented Reality (AR), we’re breaking down the boxed in screen and instead thinking about an interface as being flexible. This can be a weird concept and mental jump because a lot of things in AR are counterintuitive to the way things work on a screen.</p>
<p>This article helps you get over this mental jump by explaining how AR can be seen within a spectrum of devices, what AR is, and how to design for it… I also threw in a Brad Pitt easter egg somewhere below.</p>
<h3>The Spectrum of Devices</h3>
<p>Understanding diversity in our devices is important because by doing so, we can then design for the right experience for each device and its use.</p>
<p>Diversity can be chunked into 3 topic areas:</p>
<ul>
<li><strong>Amount of users:</strong> Is the device tied to a single person or certain physical space?</li>
<li><strong>Mobility:</strong> Is the device stationary or does it follow you everywhere?</li>
<li><strong>Fidelity of inputs and outputs:</strong> “<strong>High fidelity</strong>” inputs can be thought of things like mice, keyboards, etc., where you can be very precise and it is comfortable to use for a long time, while “<strong>Low fidelity</strong>” inputs can be thought of as things with higher error rates, that are less precise, and harder to do complex tasks with (like touch, voice, or using a controller).</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*wW6RRoKaBv5KhL1IpRJXfQ.png"></p>
<p>Your <strong>smartphone</strong>, for example, has <strong>low fidelity inputs</strong> since it only has one small on-screen keyboard. However, it tries to overcome this through things like speech-to-text typing and super high resolution screens.</p>
<p>Your <strong>desktop</strong>, on the other hand, has a much <strong>higher input</strong> of fidelity in that it has a keyboard, mouse, trackpad, etc. Your desktop is also usually tied to just 1 user and has many peripherals because it is stationary and has a lot of ports, so you can make use of things like printers and desktop speakers.</p>
<h4>Where does AR fall in the spectrum?</h4>
<p>AR is an edge case and one of the most immersive experiences.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*al2sXR0srjf3ntaY."></p>
<p>Microsoft’s <a href="https://www.microsoft.com/en-us/hololens">Hololens</a>, for example, is not about what is present on the screen but what is presented on top of reality. Depth cameras help the Hololens understand the space around you, that’s how it works for placing objects on real things and understanding the space of the room. Spacial audio is also used to make you feel more surrounded by sound, with no need for inputs like controls — you can just organically move your hands.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/788/0*KNyyn2jHeWmstlJT.">microsoft.com</p>
<h4>Re-organizing the spectrum</h4>
<p>You can reshuffle the spectrum based on certain attributes.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*JAf5MK0fr9rJrCet."><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*p1ZWSKPhBOgpYn-Q."><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*lJUqkimdr4F1uUmt."></p>
<h4>Practice applying the spectrum</h4>
<p>In a brief activity with yourself, think about how some of your apps might feel on other kinds of devices? What types of input/output would change the experience for the better?</p>
<p>For example, if you moved Tinder from your smartphone to a voice UI, like Amazon Alexa, what would it be like just meeting people based on their voice? How would inputs and outputs change?</p>
<h4>What do “Edge Cases” on the spectrum mean for the future of UX?</h4>
<ol>
<li>It becomes less about what tech demands, and more about human needs</li>
<li>Computing becomes more distributed</li>
<li>There becomes more devices but less of them are visible</li>
<li>People will need to use the right interface for the right task</li>
</ol>
<h3>What is AR?</h3>
<h4>Keep 3 tenants in mind when thinking about AR:</h4>
<ol>
<li>Real world + digital world</li>
<li>Has a flexible immersion level</li>
<li>Interface beyond a screen</li>
</ol>
<p>AR is more than just about seeing stuff float in mid air but it is instead about how the digital world interacts with the real world.</p>
<p>A great example of AR creating a new reality for people that is more productive for them than the one before is <a href="https://www.theverge.com/2017/9/20/16339006/apple-ios-11-arkit-ikea-place-ar-app">Ikea’s AR app</a>. You can see what Ikea products, like couches and lamps, look like within a physical space instead in a way you couldn’t do on any other medium.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*AVXr8n77e7fouuBE.">ikea.com</p>
<h3>How do we design for AR?</h3>
<h4>Remember when we talked about inputs and outputs earlier?</h4>
<p>Inputs can take the form of gesture, voice, touch, and controllers (which are inherently awkward — a lot of swinging your hands around).</p>
<p>However sometimes the fidelity of these inputs can be low — engaging us in an environment that can feel a little bit clumsy. So as designers, we need to find ways to compensate for the low fidelity, supplement user input, and make things easier through:</p>
<ol>
<li>Artificial intelligence (AI) assistants, like Apple’s Siri, that can provide recommendations</li>
<li>Autocomplete</li>
<li>Computer vision that can recognize things in our viewpoints</li>
<li>Natural language processing so you can ask things in the language that makes sense to you</li>
<li>Predictive text</li>
</ol>
<h4>The interface is in the social sphere by default</h4>
<p><em>(I love this)</em> AR will use the world around you to represent the information. Therefore you need to consider boundaries and what happens within each. For example, how will people tap on things that are two feet away? How will people read text that are on objects behind them?</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/882/0*uf85MoQsfEFnTjgJ."><a href="https://commons.wikimedia.org/wiki/File:Personal_Space.svg">WebHamster</a></p>
<h4>AR is a world of layers — how much of your interface will interact with the world around it?</h4>
<p>AR can be thought of as a world of layers and you, as the designer, need to decide how each layer interacts with another and the awareness users will have to those layers.</p>
<p>We have the luxury of choice to decide if we want the UI to be integrated into the users’ “world” or not. Not all things will exist in the same reality. Finding the right balance of context between the digital and real shapes the world you’re creating.</p>
<p>Two words you should know: Diegetic and Non Diegetic. You can understand these concepts by thinking of a <strong>movie and its characters</strong>.</p>
<ul>
<li>Diegetic: The sounds that exist in the world of that film, e.g. when Brad Pitt is in the casino, the slot machine are sounds in his world.</li>
<li>Non Diegetic: The movie’s soundtrack is not in Brad Pitt’s world — he can’t hear it.</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/720/0*L0M5kQ9C_Dax3eJJ.">(you’ve found the easter egg!)</p>
<p>Try asking yourself:</p>
<ul>
<li>How much do we want the UI elements to interact with the real world?</li>
<li>Do we want people to walk through stuff?</li>
<li>Do we want digital things to wrap around real-world things?</li>
<li>What if people walk in front of the digital aspects? What will happen to those aspects?</li>
<li>What user inputs will you allow at certain times?</li>
</ul>
<h4>Scenes not screens</h4>
<p>In UX we design within boxes, decide where to click or hover … it is a very static experience, all within a box. But AR is more like <strong>film</strong> than static wireframes. There are multiple ways users can move through an experience and that’s a decision we as designers have to listen to (go UX Research!).</p>
<h3>An activity to think in scenes not screens</h3>
<p>Use the reality sequence template below to create scenes of an AR experience. This mixed reality user flow template is created by<a href="https://www.lillianwarner.com/">Lillian Warner</a>, a UX Designer focused on immersive reality.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*okoHRHDkcaMfSzrl."><a href="https://docs.wixstatic.com/ugd/f06cb6_195a3170a7684c1f815667c96ac238e7.pdf">User Flow Template</a></p>
<p><strong>Here’s one I did:</strong> A mom is telling a bedtime story to her daughter, both are wearing AR headsets. As she tells the story the program recognizes key words from the story, like “Dinosaur” and displays characters right there in the room with them. Gestures they could use are increasing or decreasing the size of the dinosaur if the size is too scary for the child.</p>
<p>AR is a weird concept to think about sometimes — designing for a fully immersive experience can be a mental jump — but maybe something that feels counterintuitive is just what we need right now in UX.</p>
<h4>Additional Resources</h4>
<ol>
<li>Frank Chimero — “What Screens Want” <a href="http://frankchimero.com/writing/what-screens-want/">http://frankchimero.com/writing/what-screens-want/</a></li>
<li>Lillian Warner — “Mixed Reality User Flows: A New Kind of Template” <a href="https://blog.prototypr.io/mixed-reality-user-flows-a-new-kind-of-template-27d59991de4a">https://blog.prototypr.io/mixed-reality-user-flows-a-new-kind-of-template-27d59991de4a</a></li>
<li>Ethan Marcotte — “The Map is not the Territory” (lecture) <a href="https://vimeo.com/63525054">https://vimeo.com/63525054</a></li>
<li>Abdallah El Ali — “Multimodal Interaction — An Introduction” (presentation) <a href="https://www.slideshare.net/Abd0/multimodal-interaction-an-introduction">https://www.slideshare.net/Abd0/multimodal-interaction-an-introduction</a></li>
<li>Golden Krishna — “The Best Interface is No Interface”</li>
<li>Google Pioneer Program (Expeditions for Education) — <a href="https://edu.google.com/expeditions/ar/#about">https://edu.google.com/expeditions/ar/#about</a></li>
<li>Unity Virtual Reality: Types of UI Placements — <a href="https://www.zealousys.com/blog/unity-virtual-reality-types-ui-placements/">https://www.zealousys.com/blog/unity-virtual-reality-types-ui-placements/</a></li>
<li>Spatial Augmented Reality Merging Real and Virtual Worlds — <a href="http://pages.cs.wisc.edu/~dyer/cs534/papers/SAR.pdf">http://pages.cs.wisc.edu/~dyer/cs534/papers/SAR.pdf</a></li>
<li>The UX of VR — <a href="https://www.uxofvr.com/">https://www.uxofvr.com/</a></li>
<li>Tip and Tricks for using AR with Unity and Vuforia — <a href="https://gamedevelopment.tutsplus.com/tutorials/vuforia-tips-and-tricks-on-unity--cms-28744">https://gamedevelopment.tutsplus.com/tutorials/vuforia-tips-and-tricks-on-unity&#8211;cms-28744</a></li>
<li>VR prototyping for everyone — <a href="https://medium.com/inborn-experience/vr-ar-prototyping-for-everyone-ea6fb8f159b5">https://medium.com/inborn-experience/vr-ar-prototyping-for-everyone-ea6fb8f159b5</a></li>
</ol>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ffa2960%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ffa2960%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ffa2960%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/769d8e05d026d7a0fff09d7c2f6f8c2e/href">https://medium.com/media/769d8e05d026d7a0fff09d7c2f6f8c2e/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=b276c8251c20" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/designing-for-ar-b276c8251c20">Designing for Augmented Reality</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Designing for Augmented Reality

Top Stories