Updating your existing universal app for HoloLens

Universal Windows Platform (UWP) is about making it easy for app experiences to work across devices. This is a quick guide to making your 2D UWP app work great in mixed reality.

Universal App Resolution and Scale Factor

From responsive design
From responsive design

Windows 10 moves all visual design from real screen pixels to effective pixels. That means, developers design their UI following the Windows 10 Human Interface Guidelines for effective pixels, and Windows scaling ensures those effective pixels are the right size for usability across devices, resolutions, DPI, etc. See this great read on MSDN to learn more as well as this BUILD presentation.

Even with the unique ability to place apps in your world at a range of distances, TV-like viewing distances are recommended to produce the best readability and interaction with gaze/gesture. Because of that, a virtual slate in the Mixed Reality Home will display your flat UWP view at:

1280x720, 150%DPI (853x480 effective pixels)

This resolution has several advantages:

  • This effective pixel layout will have about the same information density as a tablet or small desktop.
  • It matches the fixed DPI and effective pixels for UWP apps running on Xbox One, enabling seamless experiences across devices.
  • This size looks good when scaled across our range of operating distances for apps in the world.

Interface Design Dos and Don'ts

Do:

  • Follow the Windows 10 Human Interface Guidelines (HIG) for styles, font sizes and button sizes. HoloLens will do the work to ensure your app will have compatible app patterns, readable text sizes, and appropriate hit target sizing.
  • Ensure your UI follows best practices for responsive design to look best at HoloLen's unique resolution and DPI.
  • Use the "light" color theme recommendations from Windows.

Don't:

  • Change your UI too drastically when in mixed reality, to ensure users have a familiar experience in and out of the headset.

Understand the App Model

The app model for mixed reality is designed to use the Mixed Reality Home, where many apps live together. Think of this as the mixed reality equivalent of the desktop, where you run many 2D apps at once. This has implications on app life cycle, Tiles, and other key features of your app.

App bar and back button

2D views are decorated with a app bar above their content. The app bar has two points of app-specific personalization:

Title: displays the displayname of the Tile associated with the app instance

Back Button: raises the BackRequested event when pressed. Back Button visibility is controlled by SystemNavigationManager.AppViewBackButtonVisibility.

App bar UI in 2D app view

Test your app

It is important to test your app to make sure the text is readable, the buttons are targetable, and the overall app looks correct. You can test on a desktop headset, a HoloLens, an emulator, or a touch device with resolution set to 1280x720 @150%.

See also