Take a look ARound #augmentedReality #UX

We all know how important it is to have great UI and UX, but how can we achieve it in augmented reality apps? In this post I'll explain few important concepts about UI and UX in augmented reality and you'll see video of application with such concept that I'll show you with my friend senior web developer Tomislav Leljak.

Imagine that you want to create interface with 100 virtual buttons in augmented reality. This is really a lot, especially if you want those virtual buttons to have some text and/or some icons representing their actions. Such interface would cover almost whole user view and that could result in experience where user is not able to see other real world objects. For user it is really important to stay aware of real world in augmented reality. Another example could be that a user walk on the street with AR glasses on and suddenly some ads start to popup so he would not able to see where he walks -  that could have some bad consequences for him, the user. In order to keep user aware of real world when presenting augmented reality we should use transparency: you can put as many transparent objects as you want in front of user as long as he is able to see through them.

Transparency can also help us achieve one other important thing: depth of augmented reality. Objects that are closer to the user will have less transparency than those which are far away from user. If we have interface that is location aware and we present some virtual buttons on this locations, it will be easy for user to figure out that he is closer to less transparent button than to some almost invisible virtual button. For full experience of interface depth we should also consider scaling buttons so less transparent buttons that are closer to user will be larger than those far away.

No matter how we position our virtual buttons in augmented reality, user will decide what he is interested in by looking at one of them. Common mistakes are to trigger some action as soon as user starts looking at virtual button or to remove transparency from that button. We should give user enough time to decide is this action that he wants to achieve by looking at virtual button, if user change his mind, not to trigger some action, he can always take a look in other direction. We should always keep virtual buttons transparent so user is still aware of his surroundings.

In following video you can see demo iOS application that shows how virtual buttons looks in augmented reality. 

Application was made with Unity3D and Vuforia SDK which works really great for image recognition. After application recognise predefined image it'll display virtual button and this button will start specific action after we look at it for few seconds. In order to record video we had to disable cardboard view, on following image you can see how cardboard view looks like:

Thanks for reading my post, I hope you learned something new about augmented reality, if you found it interesting feel free to like it or share it!