Augmented Reality Design Guidelines

Design frameworks and guidelines are a plenty for traditional 2D mobile applications, whereas AR applications and its updates are relatively new with no standard guidelines as such. We look at the current recommendations made by practitioners in the light of Don Norman’s design principles.

Table of contents

  1. Primer
  2. Design
    1. Appearance
    2. Clues
    3. Interaction
    4. Feedback
    5. Experience
  3. Google guidelines in terms of Don Norman’s Design
  4. Conclusion

Primer

Almost all mobile AR applications are 2D applications with basic AR functions and its necessary to find ideal conditions for using the app in the real world. Essentially, an AR app should have some feature or value add that users can use, as they have utility value over novel value. A great example would be an app that provides restaurant rating in AR as we get closer to the restaurant.

Design

While experimenting with some features in various AR applications, we felt that it is worth categorising and explaining some design ideas for developers and designers to keep in mind before plunging into development.

  • Appearance - UI and VFX
    • Check how well you can present your UI.
    • 2D User Experience best practices will not work for 3D, as traditional UI limits users to a small screen and 360 degree AR/VR is not limited to these dimensions.
    • We understand from few AR articles that most AR designers believe, the design should be 3D but designs need not be so. AR UX Experts say that the same user interface can be achieved by tweaking lighting techniques in 2D. No matter if 2D or 3D, object should look appealing from any angle of view.
    • Do not change the screen layout unless the information is of high importance. Keep tools and configuration buttons at the bottom when in portrait mode. On the other hand in landscape mode keep them aligned to the side, so that the screen space is enough to view the real world, like the camera interface. Show icons/buttons in the screen based on functionalities and ensure they are intuitive.
    • Handling UI on auto-rotate mode is a must have feature in AR apps. As the AR SDK handles augmented object’s orientation, you need to handle the heads-up-display accordingly.

  • Clues - Visual hints to trigger the user for actions
    • Designer should look towards enhancing the experience for the user. There could be a character whose reactions draw the user to the AR space, by guiding them through the app. This can be achieved with the use of visual clues, effectively. The AR interface can be made to transform as and when a user interacts with such clues that will enable the transformation.
    • The designers should give special attention to the proximity levels of various objects. It would leave a bad impression if the user’s screen is filled with a large AR objects/indicators if they don’t want to see it. Instead, showing small arrows/pointers that leads the users to the destination is a better idea, just like roadside sign boards.
    • Users are not familiar with the actions. So show animated gestures to guide them for a better experience. For example, an animation that demonstrates phone movement to detect the surface in real world.

  • Interaction - User engagement with the application
    • The designer needs to understand the nature of users in terms of movement i.e. whether the user likes to move or is a static user. But we encourage the user to move around the space for a rich experience. If they do not wish to move, on-screen options can be given as an alternative.
    • Opt for direct interaction with objects over on-screen controls - because current AR applications mostly focus on on-screen controls instead of interaction with the models which affects AR immersive experience.
    • Enable voice interaction for any manually challenging functions like long text input, date and time selection etc. For instance, voice input for “Find me the address and book an appointment at the Renaissance Hotel” will save lot of time and effort for the users.

  • Feedback - Action taken and Accomplished
    • Communicate in terms of pop-up windows/sound/animation on potential challenges, difficulty with tracking, environmental limitations at the right moment.
    • Show visual changes on understanding a real-world environment. For example, translucent highlights on a detected surface for every movement of the user as a response for ones movements.
    • Indicate the minimum and maximum range for any transformation of augmented objects. For instance, the user can scale the augmented objects within the min and max range. If not, animations like bouncing can be shown to point out the range.
    • Reactions to user interaction by displaying animation or sound, like when user drags an augmented object, highlight that object and show destination point on the ground visually.

  • Experience - Effective use of techniques
    • Avoid enabling detection features that are unnecessary for the application. This helps reduce the performance overhead.
    • As AR supports augmenting 3D content, it is not always recommended to use them in most of the scenarios as they demand heavy computation costs. Instead a 2D object with 3D effects like shadows, bevels and emboss can be used. This makes the app lighter and prevents the drop in framerate.
    • In most of the apps available currently, AR is used as an alternative platform. This means the purpose of the app does not require the use of AR. As a developer, ensure that the user experience with AR in accomplishing a task does not take more time than the time taken by the app without AR. The user might certainly feel uncomfortable with the app if AR utility takes more time, which forces the user to uninstall the app immediately.
    • In AR, if the functionality requires more user movement or any physical gesture and the process is very long, users might feel uncomfortable to do them. So user should be given some break time in between the flow. For example, it will be tough to type text in augmented input field because it always require user to focus the augmentation and enter the text. Hence it is better to have input fields as on-screen overlay which gives ease of experience.

Google guidelines in terms of Don Norman’s Design

One of the popular guidelines on a UX is Don Norman’s Interaction Design Principles, It tops the list of any design framework because of its simplicity and convincing demonstrations. Having a standard UX design framework from Norman, we also have gone through the recent release of Google’s AR Design Guidelines. Comparing both in terms of UX factors and making the best use of these frameworks would be optimal while developing the application.

DNIDP/ GARDG Environment User nuances Initialization & adding virtual assets Interacting with virtual assets Designing the experience Realism
Visibility Visual changes on device movement on 3D space Text legibility from every angle Visually highlight detected surfaces Avoid full screen design & persistent 2D overlays Simulate object presence by leveraging lighting techniques
Feedback Indicate what went wrong & point them in the right direction provide simultaneous feedback on each move Use semi-transparent highlighting & shadow Error handling on dark environment, fast device movement etc.
Constraints Show the amount of space needed Encourage users to move in 3D space Optimal placement range - positioning objects in stages(top, center, bottom) Avoid overlapping gestures & high proximity for touch targets Don’t force any action & Don’t take users in & out of scene When no lighting is present, false ambient lighting
Mapping Ideal conditions for using app in real world visual distinctions between different planes Follow standard gestures like pinch to scale
Consistency Continuous understanding of real-world Design for comfort. Do not confuse users Following intuitive norms of designing like drag to trash in order to delete an item
Affordance Provide animations as clues for scanning surface Give clear guidance on movement clear visual cues to educate users highlight objects that users can interact with Visual hints on 2D to AR transition

Conclusion

There are no strict and concrete rules for making AR designs as yet, since the field and technology is still evolving. Meanwhile, we realize that the usual design tenets continue to apply and so recommend that we keep those in ming. It is great to see a lot of experimentation happening with VR/AR tech, as we can expect the experiments of today to yield the design principles to follow tomorrow.

Anitha Manikandan avatar
About Anitha Manikandan
A fast-track developer who loves solving problems with cutting edge technologies
Ramakrishnan Mohan avatar
About Ramakrishnan Mohan
An engineer, passionate in blending artistic ideas with technology
Abba Vishnu avatar
About Abba Vishnu
An artist, who is interested in coding and exploring new technologies