1. Adapt your app for Xbox One and TV
Lynnette Reed
Rob Cameron

2. So how can you easily do it?

3. common scenarios for a UWP app coming to Xbox2
common scenarios for a UWP app coming to Xbox

4. 4/28/2017 3:29 PM 1
scenario
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5. XAML or Web
So you have a phone app in XAML or Web

6. ? desktop and Xbox But you want to bring it to Desktop and Xbox
(how to you take it to desktop and Xbox?)
desktop and Xbox

7. So, what things should you be considering….

8. 1
When designing…

9. for desktop

10. More space means more area for content. Density really is your friend.

12. Multi-inputs. More things to consider but more ways people can interact with your content.
More things to consider and more ways people can interact with your content.
Multi-inputs. Many more ways you can interact and response to the content.

13. Mouse, keyboard, voice, touch, ink and pen, and now game pad which you can plug in a use.
Get voice icon

14. Padding, spacing and consistency, oh my!

16. for xbox

17. Space is your friend. Think less density, much like mobile.

18. Legibility is key. Make sure they can see it.

19. A For 10’ experience… 20 px and below 24 px and above A
200% - text should always be 12 epx or higher
For 150% text should be 18 epx or higher
20 px and below
24 px and above

20. Keep it simple. Reduce clicks to under 6 on a single screen.

21. Know your place. Single item always in focus = user happiness.
Single item with focus = happiness
Keep it simple. Single mode of focus = happiness.

22. Respect the safe area. Always think broadcast-safe for colors.

23. R G B XAML @ 540p 0-15 Web app @ 720p 0-255 16-235 236-255 27 48 32 64
CALIBRATION
FULL BLACK
FULL WHITE
0-255
16-235
0-15 32
Add in call out the sizes for title safe areas
Web 720p 64 64 32

24. 2
When coding…

25. for desktop

26. Keep on keep’n on… It’s coding you know.

27. for xbox

28. There’s the default behavior… then there’s the experience you really want to build.

29. Bring on the Demo…

30. Microsoft Build 2016
4/28/2017 3:29 PM
Opening tool kit provided by dev.windows.com/design
Talk briefly about the tool kit and bring in other modules from other apps.
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

31. Default - Mouse Cursor Emulation (RequiresPointerMode=“Auto”) - 200% scale factor - Automatic Adjustment for Title Safe Area Premium - <Application RequiresPointerMode=“WhenRequested”> - Build for cross device family, design at 540p - AppView.SetDesiredBoundsMode (Windows.UI.ViewManagement.ApplicationViewBoundsMode.UseCoreWindow)
Build for accessibility and in a great place for premium experience with controller navigation
<MapControl IsEngagementRequired=“true” RequiresPointer=“WhenEngaged”/>
API to turn off scaling: Windows.UI.ViewManagement.ApplicationViewScaling.TrySetDisableLayoutScaling(true);
Change to: Cross device family

32. Bring on the Demo…

33. Microsoft Build 2016
4/28/2017 3:29 PM
Opening tool kit provided by dev.windows.com/design
Talk briefly about the tool kit and bring in other modules from other apps.
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

34. Default - Mouse Cursor Emulation - 150% scale factor - Automatic Adjustment for Title Safe Area Premium - navigator.gamepadInputEmulation = “keyboard” - Build for cross device family, design at 720p - appView.setDesiredBoundsMode (Windows.UI.ViewManagement.ApplicationViewBoundsMode.useCoreWindow)
Build for accessibility and in a great place for premium experience with controller navigation
CSS to turn off scaling:
@media (max-height: 1080px) { {
        height: 1080px;
    } }

35. 4/28/2017 3:29 PM 2
scenario
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

36. XAML or Web
So you have a desktop app in XAML or Web

37. ? phone and Xbox But you want to bring it to Phone and Xbox
(how to you take it to desktop and Xbox?)
phone and Xbox

38. So, what things should you be considering….

39. 1
When designing…

40. for phone

41. Single person device. More personal experience and use.
• always in reach
• usually just for single use
• used generally in small burst

42. Give ‘em some room. Remember the app bar when the keyboard is up.

43. Twice the inputs. Twice the interactive fun.

44. voice and touch

45. Small screen. Means single window drill-down.
Common pattern and behavior.
Single frame view. Single device.

46. for xbox

47. Just apply what you’ve learned today and your all set!

48. 2
When coding…

49. Microsoft Build 2016
4/28/2017 3:29 PM
Opening tool kit provided by dev.windows.com/design
Talk briefly about the tool kit and bring in other modules from other apps.
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

50. For desktop and xbox its super simple!

51. keep on keep’n on for desktop…

52. And just apply what you’ve learned today for XAML or a Web app on Xbox and your golden!

53. From theory to application
4/28/2017 3:29 PM
From theory to application
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

54. The proof really is in the pudding…
4/28/2017 3:29 PM
The proof really is in the pudding…
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

55. And this is what we’ve learned from our partners…
--we had a hackfest.  They gave us permission to show.  Early builds but here’s their experience.

56. --Basic XAML app that shows default and premium coding requirements
--Basic WWA app that shows default and premium coding requirements

57. Behold demo magic!

58. --Basic XAML app that shows default and premium coding requirements
--Basic WWA app that shows default and premium coding requirements

59. Behold demo magic!

60. Thx!