7 tips to consider when designing for HoloLens
Over the preceding months, I have had the opportunity to design for the HoloLens app Colamo — furniture design & development tool in augmented reality. Development of this solution represents a part of the Microsoft Mixed Reality Partner Program certification of INLOOPX. Working on the MR experience, I have gathered a number of tips that might come handy to someone taking on a similar task.
Here are a few things to think over when designing for the Microsoft HoloLens:
1. Give thought to colours
Colour is one of the key considerations when designing for HoloLens. In general, colours look different in mixed reality. HoloLens use color-sequential see-through RGB displays to render holograms. Holograms are created by adding light to the real-world light. This means that white will appear bright, while black renders transparent.
Due to this limitation, you may want to avoid using full white R255 G255 B255 for large areas. It can be overwhelming for the user. Alternatively, try to mute your white down a little bit to the value around R235 G235 B235.
Same goes for the black colour. Using full black R0 G0 B0 will result in transparent colour. As an alternative to full black, use dark greys such as R16 G16 B16 or similar.
These specifics remain the primary reason why most UI in HoloLens use dark colours for background and white for text. If you choose a solid white background and black text, the whole background will be overwhelming and you will be able to see through the text.
And another thing! Every colour is always slightly transparent. Have no fear and be flexible. Work with more flashy colours than you are used to. It will be ok in real use.
2. Fit into the field of view
When you eventually get to use HoloLens, you will notice that the field of view is not particularly wide. This is likely the most critical flaw of the current generation and hopefully, it will be fixed in the future. For now, keep this in mind and work around it.
When designing UI, it is far more convenient to keep everything wider than taller, because it will better fit into the field of view.
3. The power of sound
When it comes to web/app design, we genuinely don’t bear in mind the sound. Well, not as we probably should. As with HoloLens, it represents a powerful way to create a more usable application.
For each action, you may consider not only the visual feedback, but also the sound feedback. For example, a simple button in various states (gaze, press, disabled) should not only have a unique visual look but a different sound as well.
And because everything in mixed reality exists in 3D space, your sounds should reflect this as well. Use spatialized sound as often as you can. When the user interacts with something in space, the sound should come out from this space. This way, the whole interaction feels more real.
The easiest way to add sounds to the app is to use an existing sound kit. I would recommend the free kit from the Facebook team or one of the paid sound packs from AppSounds.
Remember, if you mix sounds from various kits, you should always adjust all sounds to the same level. What you want to achieve is an objectively accurate distance attenuation. It is substantial to ensure the sound can be heard from a distance of several meters.
4. Communicate with animation
In typical UI design, we sometimes tend to think that animation is just a nice to have feature, and its primary purpose is to make UI more pleasant. In augmented reality, animation is a must. Don’t get me wrong, I’m not talking about jazzy animation. What you need is a meaningful animation that helps to communicate what is happening and get it across to a user.
In a menu, you can communicate opening, closing and different states of items in the menu with animation and play with sizing and timing not just with the colour.
In our HoloLens project, we purposely delayed selected items, so the user can clearly identify which item he selected.
5. Challenges of interaction
In comparison to web or app design, designing for AR is even now an unexplored territory. We’re on a learning path to discover the most appropriate patterns for interaction. The key point is, when something works on screen, don’t count on the same in AR. The very same interaction pattern may not work in augmented reality.
When you look at a basic interaction as drag and drop on screen, it is effortless. You hover over, press, and then you drag the item somewhere else and release.
But with HoloLens? You gaze on something, air tap and then? Will you maneuver the object by moving your hand or with your gaze? Do you still have to hold it or is it a toggle action? What if the user moves with a hand outside the field of view? What if drag fails, should you drop it on spot or return it to the initial location?
Indeed, there are questions to be answered at every step of the design process. And not surprisingly, there is not only one correct answer to each question. The solution varies for each case, interaction. As indicated above, some patterns may perform better for one experience, not the other.
6. Prototype!
Prototyping your MR design will help. It’s cheaper and quicker to try more versions in UI or animation program than recreate all versions in real code. Some interactions and animations are hard to explain to developers in words. It is obviously more effective to build a simple prototype.
In our case, to simplify the process, we did 2D prototyping with a tool called Principle. It’s easier and quicker to work with than After Effects. This way, you are able to smoothly create prototype (like the one below) in less than an hour.
7. Test, sleep, repeat
Alright, you may skip the sleep.
In case it wasn’t explicit from the previous tips, always test your design on the real device. You may be the greatest designer ever, yet you still must test colour combinations, the sound — whether it is excessively loud or extremely quiet, UI size, interaction, etc.
When you are done with testing by yourself, it is time to give it a go with a real user. I doubt I can put into words to what extend this will better your application.
Bonus tip:
Explore HoloLens design guidelines. It is time well spent — guaranteed! https://docs.microsoft.com/windows/mixed-reality/design
If you like this article don’t hesitate to give a ❤ and share this among your friends. Thank you!
