Magic Leap Human Interface Guide, Part One
This is the first article in a two-part series outlining the Magic Leap Human Interface Guidelines. For the most up-to-date information, more examples, and in-depth explanations, be sure to check out the Magic Leap documentation.
In this first part, we’ll cover general style best practices and discuss the native Lumin components. In part two, we’ll go over the Lumin OS conceptual framework and some common interaction patterns.
Style
Color
Color is used to bring focus to elements within your design and tie into your branding. The Magic Leap One uses an additive light model meaning black is not rendered, in other words transparent, and white is brightest color in the system.
To simulate black areas, it’s suggested to surround the area with light, emphasizing the darker, black areas. In contrast, brighter or whiter areas will create more noticeable visual distortion around content.
Avoid using gradients as they tend display with significant banding.
Audio
Sound is an excellent way to draw users into your experience and lead them around a space. For instance, if an item spawns outside field of view, spatial sound can be used to draw a user’s attention towards that area. Sounds can be used to complement movement or animations as well as provide feedback in menus and interactions. Experiment with spatial sounds in the environment to draw focus and headlocked sound for core interactions, such as music or audio for video.
Typography
The system font for Lumin OS is LominoUI and it’s been designed specifically for the Magic Leap One device with a focus on readability. As with all typography, care should be given to selecting an appropriate font size and weight. For longer pieces of text, aim for about 60 characters per line and minimize, if not eliminate, 3D text.
Iconography
Lumin OS also contains a default icon set of approximately 90 different glyphs. The general design focuses on circles and 45-degree angles. Appropriate sizes, line weights, and negative space should be considered when designing for the device.
Animation
Tasteful animations have been included in the operating system and judicious use in your designs can help guide users. Emphasis should be placed on keeping animations simple, smooth, and subtle.
Depth
Personally, my favorite style technique is depth. By layering content and moving the most important content closest to the viewer, experiences can very effectively guide users through complex choices and interactions. Care should be taken to not invoke too many layers, typically no more than four, as well tasteful use of blurring of content behind the current level to increase readability and minimize distraction.
Components
Buttons
A few important things to remember regarding buttons are to avoid crowding the interface and use text sparingly. Use buttons for common actions and relegate less essential functions to other parts of the interface. Text can be difficult to read in AR, so focus on presenting clear icons and fall back to text in more complicated scenarios.
Dialogs
Only use dialogs when absolutely necessary and when they make sense contextually. As mentioned in the button section, avoid large amounts of text and focus on clear intentions in the button labels rather than “yes,” “no,” or “cancel.”
Dropdowns
Use dropdowns to filter large numbers of options down to a manageable subset and minimize the amount of space required to display them.
Images
Images work well on grid-based layouts. Additionally, consider responsive layouts which allow the images to flow and resize as required by the layout, similar to responsive web pages. Images themselves can be used like buttons for executing actions however take care in communicating they are interactable. Use of blur, focus, and depth can provide this clarity for users.
Input Fields
Minimize text input fields unless absolutely necessary, such as logins and passwords. Raycasting or scrolling keyboards can be a real hassle for users. Try to provide shortcuts, such as numeric or email keyboards or “@gmail.com” keys, where applicable to improve user experience.
Labels
Use standard system styles and an appropriate size and weight for readability. Additionally, use a color background or legibility mask.
Legibility Mask
Legibility masks are semi-transparent colored backgrounds that give text something to be set against in your interface. Masks can be used to improve legibility of text and other elements as well as create a layer between various z-depths of an interface or workflow.
List
Lists can be used to reduce the number of options and present a filtered view of data, such as a contact list. Avoid long lines of text and keep the entries short.
Loading Indicator
Use loading indicators to communicate progress on lengthy or asynchronous tasks such as loading data from a web service or downloading files.
Panels
Use panels and tabs to group related items and provide a streamlined view of items.
Pickers
Pickers can be used to minimize text input and ensure correct formatting for data entry. Use an appropriate picker for the task, such as dates, numbers, or color selections.
Portal Icons
Portal icons are used to identify and launch apps. Creativity can be leveraged here to animate the content, provide depth into the portal itself, as well as communicate a simple preview of the application.
Scroll UI
Scrollbars can be used to display extra content in a given content well. Thought should be given as to where to clip content as displaying part of the next row or page can help the user identify there is more content to scroll. The view port is also wider and can allow for more content horizontally so be sure to consider that space in layouts.
Selectors
Selectors allow for the selection of one or multiple options. Radio buttons enforce one choice out of many while checkboxes can be used to select multiple items.
Sliders
Sliders can provide a variety of interesting interface interactions. A few common examples are horizontal, vertical, radial, range, and toggles.
System Keyboard
Lumin OS provides a software keyboard to enter text in native applications. Check out the Helio browser and wifi settings to see examples on your system.
Toggles
Toggles can be used in a variety of compelling ways, namely switches and icon buttons.
Conclusion
In this installment we covered the style recommendations and an overview of the most commonly used components from the Magic Leap Human Interface Guide. In Part 2, we’ll dive deeper into the Lumin OS conceptual framework and common interface interactions.
About the Author
Dave is a software engineer and creative technologist based out of Los Angeles specializing in interactive Unity3d, C#, and iOS mobile development. He’s also available for work in virtual reality, gaming, visualization, and interactive installations. He experiments in computer vision, computational photography, visual effects, and drone videography.
His educational background includes work in computer science and traditional architecture.
