AR mockup for a task management tool done in Microsoft Maquette. First dive into extended reality design 🙂 Lots of fun and a couple lessons learned!

Design Challenge

As apps become more complicated, how might we

leverage VR technology to give better overview of the state of the project?

Context

It felt natural to start AR mockup with modeling the environment. Adding objects surrounding the user during the typical use case will keep you grounded.

Use of space

Turns out complicated apps need a dedicated surface. This space needs to be clearly communicated and it should be possible to readjust it.

Adding arc to scrollviews allows to display more cards, while also keeping them close to the user’s eye. Even the top card was clearly readable in Valve Index.

3D Interactions

Interactions in 3D also brought me a set of interesting challenges:

Example 1: Every button needs to be pushed into something. All interactive elements can be approached from different angles, so their direction of movement needs to be clearly visible.

Example 2: Information Architecture in AR is more complicated. Visual connection needs to be clear, yet distributed in a 3D space. Showing hierarchy requires using different layer angles and materials (the way they reflect light). Putting text in front of the background makes it easier to read and helps properly judge the distance from an object.

Example 3: Linking the card to its last position as an indicator it will return there automatically once dropped.

Example 4: Board picker had to be physically connected to the drag&drop area, so it’s obvious they work together. Proximity didn’t seem like enough.

Conclusion

Designing for AR/VR feels completely different! It resembles designing a device that’s supposed to do one specific thing, something you might find on a production line. The amount of possibilities is overwhelming at first, but it’s relatively easy to get a hang of this new reality 😉