The Essential Guide to UX for AR

  • By Cassandra Naji
  • 17 Jul, 2017
2017 looks set to be the year that augmented reality (AR) moves firmly into the mainstream. As the next big technology trend, it looks set to have a massive impact on user experience and, by extension, user experience design. The good news is that augmented reality has the potential to solve user problems that have […]

What is Augmented Reality?

Although it’s been around in some form since the early 90s, the term ‘augmented reality’ can still cause a little confusion. In a nutshell, augmented reality is technology that combines inputs from the real world with programmed components. These programmed components have to interact with real world data in some way, changing as the real inputs change.
Whereas virtual reality (VR) shuts users off entirely from the real world and places them in an entirely fictional alternative, augmented reality adds a programmed layer over actual reality to create a third, dynamic level of augmented experience.
So that hologram video of Michael Jackson dancing ? Plenty of people claimed it was augmented reality, but they were mistaken. The hologram Jackson did not respond to real world inputs and was incapable of dynamic change based on those inputs. If anything, as Angie Li and Therese Fessenden write for NN Group , the real world dancers augmented the fiction, rather than vice versa.
Examples of AR that the majority of users have at least heard of, if not used, are things like Snapchat, Pokémon Go and Microsoft’s HoloLens.

How Does Augmented Reality Work?

Designing delightful augmented user experiences requires an understanding of the technology’s functionality. A device’s numerous sensors—for example the GPS, camera and compass on a smartphone—feed inputs into a pre-installed software application on the device. The device interface then independently responds by adding sensorial enhancements to the scene. Therefore, an augmented reality interface is an example of what’s known as a ‘ non-command user interface ’; the interface acts and reacts without specific user commands.
It’s important to point out that even if you have the latest AR-friendly smartphone, that doesn’t mean you’ll be seeing augmented reality elements everywhere you go. The technology also requires the AR software to be fired up, and a real world ‘trigger’. These three elements combine to make the augmented user experience possible.

What Does Augmented Reality Mean for UX Designers?

Obviously, the implications of augmented reality for user experience are enormous. The technology has the potential to completely revolutionize the way users interact with devices. From designing user flows for reactive interfaces to imagining users existing in a screenless world where everything has the potential to become an interface on command, the changes to UX design will be fundamental.
Exciting, right?! But also terrifying. What with its unique blend of psychology, research, interaction design and software development, user experience is complex enough already. UX Designers need to futureproof themselves and ensure they’re ready for the opportunities and challenges that are already knocking on their doors.

UX Opportunities of Augmented Reality

Augmented reality is already changing users’ experiences of brands and digital platforms. At first glance the two most well-known examples, Pokémon GO and Snapchat, use AR in a pretty light way. After all, catching pokémons and jazzing up selfies with a flower crown hardly looks like ground-breaking UX. But let’s look at the numbers: Within a week of its release in 2016, 65 million people worldwide were playing Pokémon GO, and Snapchat valued at $24 billion when it went public in March (although share value later dropped and leveled out). Snapchat and Pokémon GO’s success is due to the fact they are using AR to provide users with a unique, customizable experience that keeps them hooked.
The reasons for the stickiness of AR experiences aren’t hard to define. AR decreases interaction costs, reduces a user’s cognitive load, combines multiple sources of information, and minimizes attention switches. Pretty much the Holy Grail of UX.
AR decreases interaction costs, reduces a user’s cognitive load, combines multiple sources of information, and minimizes attention switches. Pretty much the Holy Grail of UX.
It’s therefore no surprise that we’re seeing AR taking hold beyond social media and gaming. The technology is already being exploited by forward-thinking marketing departments as a great branding opportunity. Take Pepsi as an early-adopter: In a 2014 the soda company ran a campaign on London bus stops which saw AR technology transform a normal, boring bus shelter wall into a screen full of asteroids or tigers on the loose. Maybe the campaign didn’t sell Pepsi right there and then, but in terms of branding it was a powerful move. UX Designers will work closely with marketing teams to test and refine augmented experiences that reinforce brand image and engagement.
Conversions are another area where the potential of augmented reality is already being put to the test. Let’s take the example of a consumer shopping for a table. The simplified user journey might be: Research tables online, go to stores, take photos on mobile device, look at the photos in their home…And then uh-oh, it’s impossible to know which table is right just from some crummy photos taken in store. Would-be consumer is frustrated, fails to convert.
Stores such as Ikea are using augmented reality to solve this. Using an Ikea app, users can point their mobile at an area in their home, and generate an augmented view of the same scene complete with a device-generated piece of furniture.
The same works for buying pretty much anything online, from cosmetics to clothing. Consumers have already demonstrated their desire for this kind of experience: according to stats from MavenEcommerce , the type of AR app that people are most interested in for online shopping are:
  • Virtual dressing room – 88%
  • Shoe sampling – 87%
  • Virtual furniture sampling – 86%
  • Interactive vehicle manual – 75%
Allowing the user to see the object in context solves the obstacle to conversion and everyone is happy.
In the not-too-distant future augmented reality will probably provide even more out-there opportunities to improve user experiences. Think about augmented presence meetings and teleconferences, where a colleague from some place else on the planet, just like AR entrepreneur Meron Gribetz does in this TED talk . Devising the UX flows, interactions, gestures and UI animations for this kind of technology will fall to the augmented UX designer. Whereas now UX designers work with interactive prototyping tools to model and test realistic user interfaces, in the future they’ll combine UI prototypes with 3D prototypes from tools like Microsoft’s HoloLens. It could be that existing prototyping tools will introduce AR capabilities to keep up with the trend.

UX Challenges of Augmented Reality

But, as with any seismic tech shift, there will be challenges for UX designers designing for augmented reality. Let’s take a look at those challenges.

Terminology

Even before UX designers get started in AR, they’ll need to get to grips with a whole lot of new terminology. Familiarising yourself with terms such as modulated reality, HMD and HUD is a good starting place for meeting AR challenges head on, and starting to think realistically about augmented user experiences.

Overkill

This is going to be crucial to AR’s long-term success. To see what we mean by AR overkill just check out this video by Keiichi Matsuda , which presents a vision of an over-augmented user experience. The video is great, but would you really want to live with all that visual noise in your head all day? UX designers must avoid overwhelming users with useless or decontextualised information, instead using AR to add value in certain contexts.

Hardware and Physical Comfort

UX designers are used to designing experiences to reduce eye strain or thumb strain. But augmented reality will require consideration of other physical factors, such as arm strain: users will not walk around all day holding their mobiles at eye level. The comfort of wearables will become more and more important to AR adoption.

Conditions and Context

The environmental challenges thrown up by augmented reality are going to be huge. When designing for desktop experiences, UX designers are working with a relatively limited set of variables regarding the conditions a user might be in. With AR, a user could be absolutely anywhere, looking at anything, under any conditions, and still expect a stellar augmented experience. UX designers will have to run comprehensive user tests on software use in light and shady conditions, different weathers, interiors and exteriors, in motion or still. User testing is going to have to adapt substantially.

Safety

Users’ physical safety is also an issue. Pokémon GO designers ran across this when there emerged reports of players being so absorbed in the game that they were hit by cars or walked off cliffs. That’s probably the acme of bad user experiences, so augmented reality experiences will have to be designed that minimize dangerous outcomes.
These challenges mean that UX designers need to have a deep understanding of users’ expectations around the new technology before they start to design experiences to match.

Best Practices for AR UX Design

The field of designing augmented reality user experiences in still in its infancy, but there are many best practices that UX designers can start thinking about now.

Always Think About the Environment

Whether the AR campaign will take place on the side of a bus shelter like Pepsi’s, in user’s homes or on the streets, UX designers have to design interactions for those conditions, and test them fully in those conditions. Rob Manson from AR UX has helpfully broken down physical user scenarios into 4 main categories:
  • Public, in which the user uses their whole body to interact with the software
  • Personal, in which the user uses a smartphone in a public space
  • Intimate, in which the user is sitting with a desktop and is not really in movement
  • Private, in which the user has on a wearable
UX designers will have to define user journeys for the relevant physical scenarios and define how the interface will react to each.

Make it Comfortable for Users

Users hold their devices in the most comfortable, least effortful way they can. If you’re designing an AR experience for a handheld device rather than a wearable, you have to take that physical comfort factor into account. Make sure you’re up to speed with device use archetypes: for example, users will hold their device for longer when seated, or if they’ve got the device at chest level.

The Interface Should be as Automatic as Possible

The whole idea of a non-command interface is that it operates alone. Augmented Reality experiences should be designed to need as little physical input from users as possible. This makes sense, because if users are looking through the device screen at an augmented picture, it’s going to be hard for them to use gestures at the same time. Voice control is the obvious answer to this, and UX designers will have to start designing more voice interaction flows, as with Siri or Alexa.

Start Designing AR Experiences Now

As in right now. UX designers need to start understanding and trying out AR principles as soon as possible if they’re not to be left behind by the AR wave. Luckily, platforms like Coursera have some good introductory online courses , and some AR tools themselves also offer toolkits, such as Microsoft’s HoloLens .

How AR is Changing User Experience Design, Final Word

Augmented reality has the potential to give users the kind of experiences they crave: exciting, useful, usable and meaningful. It has the potential to marry user needs with business goals and create something digitally delightful in the process. But that kind of success story depends on UX Designers meeting the inevitable challenges thrown up by a new, exciting technology. UXers can do that by getting up to speed with current AR tech and, as always, empathising with the user to give them not only what they need, but also what they want.

Latest News

By Rob Johnson 09 Oct, 2017

The internet is such a big part of all our lives, it’s hard to remember a time when it didn’t exist. But in reality it only came into being as we now know it in 1991. The Internet cannot be attributed in its entirety to any one single person or organisation, but rather a collaboration that evolved over time and had many contributors.

The idea of a secure way of worldwide communication was first mooted by the US Government in the 1950s in response to the Cold War and the increasing security threat from the Soviet Union. After the USSR launched the world’s first manmade satellite in October 1957, the USA realised that something needed to be done. Although Sputnik was far from an unmitigated success, it did send shockwaves through the West and concentrated the minds of the most talented Western scientists and engineers.

Over the next few years, the US began to take scientific research and development much more seriously, adding various science-based courses to the schools curriculum and awarding government grants to scientific institutions. They formed NASA (the National Aeronautics and Space Administration) and ARPA (the Advanced Research Projects Agency) who were tasked with the development of space technologies such as weapons and computers.

By Rob Johnson 08 Sep, 2017

Have you ever wondered why your website doesn’t seem to attract as many people as your competitors’?

It’s actually far simpler than you think to create a website that will become a successful marketing tool for your business. Whatever business you’re in, everyone should have an online presence. But all too often business owners think of a website as just something that they think they should have rather than as the extremely effective marketing tool it should be.

It’s much easier than you think to get a website up and running and attracting visitors and there are many simple strategies you can implement that a) don’t cost the earth and b) don’t require a degree in marketing to understand. I have listed a few of them below to get you started…

1.  Don’t copy and paste your print material

Don’t simply copy your print marketing material. Writing for your website is completely different and is actually far easier than you think. Your visitors don’t want to sit and read a novel, they want clear and concise information that will draw them in and ultimately prompt them to carry out whatever it is you want them to do i.e. sign up to a newsletter, buy your products or make a booking

By Rob Johnson 30 Aug, 2017

One issue that we found and got many repeated complaints from clients that Magento takes more to load – essentially, it’s very resource consuming and has slow download speed. Major search engines like Google highly recommend and promote fast loading websites.

There are few tips and actions that our experienced Magento developers at Red Rocket have applied and we’d like to share that if it helps.

So, where do you start with speeding up Magentousing .Htaccess file? The first thing you need to do is to analyse the overall speed of your Magento page, before any changes have been made. We would recommend to use three tools which can be found below:

  • Google PageSpeed Insights
  • WebPageTest
  • GTmetrix

Speed Up Magento via Your .htaccess File

Step 1: Gzip Compression For Magento

By compressing this page with GZIP, 76.1% bandwidth was saved.  

You will need to enable Gzip Compression for Magento. To enable GzipCompression simple find add below code in your root .htaccess.

< ifModulemod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_includefile.(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_excluderspheader ^Content-Encoding:.*gzip.* < /ifModule >


Step 2: (optional) Compressing CSS and JavaScript files

Next we want to compress items such as CSS and javascript etc. Simply add the following lines of text directly into the htaccess file.

## compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript # Or, compress certain file types by extension: < files *.html> SetOutputFilter DEFLATE < /files>


Step 3: Leverage Browser Caching and Expires Headers

The third thing to do is Leverage Browser Caching and Expires Headers. This piece of code can make a huge difference and will reduce the number of HTTP request, which is a huge benefit for any returning visitors to your website.

< IfModulemod_expires.c> # Enable expirations ExpiresActive On # Default directive ExpiresDefault "access plus 1 month" # My favicon ExpiresByType image/x-icon "access plus 1 year? # Images ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" # CSS ExpiresByType text/css "access 1 month? # Javascript ExpiresByType application/javascript "access plus 1 year" < /IfModule>


Step 4: Enable Output Compression

This section will essentially turn on the module called apache mod_deflate, which will compress css, text, and javascript before it is sent to the browser. This will considerably reduce the download size. In order to enable, uncomment the appropriate lines so that it looks like the below:

## enable apache served files compression ## http://developer.yahoo.com/performance/rules.html#gzip # Insert filter on all content SetOutputFilter DEFLATE # Insert filter on selected content types only AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript # Netscape 4.x has some problems... BrowserMatch ^Mozilla/4 gzip-only-text/html # Netscape 4.06-4.08 have some more problems BrowserMatch ^Mozilla/4\.0[678] no-gzip # MSIE masquerades as Netscape, but it is fine BrowserMatch \bMSIE !no-gzip !gzip-only-text/html # Don't compress images SetEnvIfNoCaseRequest_URI\.(?:gif|jpe?g|png)$ no-gzipdont-vary # Make sure proxies don't deliver the wrong content Header append Vary User-Agent env=!dont-vary


Step 5: Enable Expires Headers

Normally browsers use Expires headers to checkfor how long a page component can be cached. Components that are static such as images, should have headers like far-future expires, but essentially, every page components should have expires headers. To enable this feature, simply uncomment the appropriate line and write “ExpiresActiveOn” just above it. Check below:

## Add default Expires header ## http://developer.yahoo.com/performance/rules.html#expires ExpiresActive On ExpiresDefault "access plus 1 year"


Step 6: Disable ETags

ETags are used by browsers to check and validate cached components across subsequent visits. They can slow down a site served from a cluster if the cluster hasn’t implemented them properly. It is best to just turn them off as follow

## If running in cluster environment, uncomment this ## http://developer.yahoo.com/performance/rules.html#etags FileETag none


By Inessa Brown 21 Jul, 2017
Have you ever encountered a website with confusing navigation? Been sent down the wrong path by misleading labels? Or needed your best detective skills to find a particular piece of content? It’s frustrating, isn’t it? What can companies do to ensure that users can find what they are looking for on a website? Usability testing […]
By Ben Moss 20 Jul, 2017
Google’s minimal search page has consistently been heralded as a minimalist masterpiece since it first appeared in 1996. It’s been argued by numerous designers—myself included—that it was the perception of Google as a ‘pure’ unadulterated search was more central to Google’s rise and eventual dominance, than the merits of its (in)famous algorithm. So it’s something […]
By Ezequiel Bruni 20 Jul, 2017
When I go to any website, I’m looking for something. I may want to buy a product, or find information, or browse random memes, but whatever it is, I have a goal in mind. That goal could even be subconscious, but it’s there. Human beings never do anything without a reason. Whether or not they […]
By _dm_templates 20 Jul, 2017
Red Rocket are pleased to announce the launch of the new website for Gillian Allard the winner of Sky Arts Master Of Photography award for 2017. The website is built on our platform and allows Gillian to update all parts of the website herself.
By Nick Babich 19 Jul, 2017
Transitions are a powerful way to communicate a change in a user interface. They can be used in apps to help offload a lot of the cognitive work into the visual cortex: they help transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy. Consequently they […]
By Mickey Aharony 18 Jul, 2017
Designing fun, visually appealing party banners can be a complicated task if you don’t have enough graphic design experience or know how to use image editing software, such as Photoshop or Sketch. Buying and installing an image editing software, installing custom fonts, designing the graphics and figuring out how to apply a text overlay can […]
By _dm_templates 18 Jul, 2017

Joan is applying for a small loan on all-online-loanzzz.com. She’s becoming frustrated with the number of financial-disclosure forms she has to fill out. She’s thinking about visiting her local bank to ask for a loan instead.

While waiting for a page to load, the application presents a cartoon image of a person wearing a business suit sitting in a jail cell. The image caption says, “Hey, everyone hates disclosures. We know you do, too. We’re doing our best to keep everyone out of jail. Please bear with us for a few more clicks. You won’t regret it, and our loan officers will stay out of jail.” Joan smirks at the image. She might not appreciate the number of forms she has to complete, but she understands the serious nature of applying for a loan.

Humor is an important aspect of life. Researchers find  humor has many positive benefits . It can reduce stress, increase psychological well being and increase tolerance for pain. Most of us have had experiences in which we’ve used humor to lighten a mood or cheer someone up. Humor is integral and inherent to human relationships.

You can use humor in your design (both in the process and the product) to create a positive user experience. We want to develop positive relationships with our users — humor can help make that happen.

But how do I do this?, you might ask. Do I need to be a comedian? Should I format all of my FAQs as knock-knock jokes? The answer is no to both of those questions. You can incorporate humor in your design, maintain your brand identity and not look like you are trying too hard in the process.


More Posts
Share by: