In the first post of our blog series "The Edge of Reality," we got to know the various "Extended Reality" (XR) technologies and variants. Some of you may have already gotten some initial ideas about what can be implemented with XR technologies. But what do we need to pay attention to when implementing XR applications?
For displaying XR applications on tablets and smartphones, familiar tools can be used in the design process. However, this is not the case for designing holographic applications. Designing for MR is a unique experience that requires different thinking compared to designing user interfaces for "on-screen" applications. But how do we design graphical interfaces for MR?
Microsoft itself claims that mixed-reality applications are unique, and that designing good MR experiences is hard work. The key to success here is definitely extensive testing loops and iterations during the design and development phases. Through such iterative loops, there are also valuable insights into what needs to be considered when designing graphical user interfaces for MR applications.
“Logic will take you from A to Z. Imagination will take you everywhere.”
– Albert Einstein
A hologram is a technical projection of an object that seems to float freely in space. You can move around the projection and view it from all angles.
Since holograms are displayed within a three-dimensional space, they require completely different UX/UI considerations compared to on-screen applications, presenting a whole new challenge for UX/UI designers. The placement of interface elements and their size within the space must be carefully thought out in order for them to be perceived as "natural" by the viewer. When using transparencies and colors, the positioning of holographic UI elements must also be taken into account to ensure that the elements do not get lost within the setting.
Copyright: Microsoft
The use of colors is one of the important components that need to be considered when designing MR applications. Since holograms consist of light, they rely on an additive color representation. This means that white areas reflect the most light and are thus the brightest. In contrast, black areas do not receive any light and are rendered transparent on data glasses. This means that everything black becomes invisible.
However, we should be cautious with the use of white areas. Pure white should be avoided for large surfaces. Bright colors on large areas can cause glare and strain our eyes. Therefore, light gray should be used for bright areas instead. In general, dark colors are recommended for larger surfaces and backgrounds. They are more natural and comfortable for the human eye.
If holograms are placed in particularly vibrant and cluttered environments, such as a production hall, bright colors should be used for important elements to maintain contrast in different lighting situations. White text on a dark background, for example, serves better than black text on a white background.
Colors in holograms are displayed as slightly transparent and appear less vivid and intense in the usage environment than in design drafts on a PC screen. Nevertheless, the use of colors, especially signal colors, should be well thought out and applied in a way that communicates necessary information effectively.
Copyright: Microsoft
When creating dark backgrounds, it must be noted that black areas in holograms are displayed as transparent.
Copyright: Microsoft
The same rules apply for using text in MR applications as in any other design field. Text, both in the physical and virtual world, must be readable and legible. Microsoft recommends avoiding "light" and "semi-light" font weights for text sizes smaller than 42pt, as the vertical lines of the font would be too thin, causing the text to flicker and, in turn, impair readability.
Copyright: Microsoft
In XR, animations are more than just a nice feature in the application. With the help of small and meaningful animations, information about the behavior of controls can be communicated, or they can be used to draw the user's attention to the essentials. For example, this can highlight a control outside the field of view, animate the opening and closing of menu items, or communicate the status of activated elements more clearly.
As we can see, designing 3D experiences is much more than pure graphic design. It combines different disciplines of UX design and, in addition to creating graphics, it draws on expertise from storytelling, product design, sound design, and stage design.
In this second part of our blog series, we focused on graphical interfaces and what to consider when designing them. In the next part of our blog series “The Edge of Reality”, we will dive into the topics of storytelling, UX, and ergonomics.