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

So how can you easily do it?

common scenarios for a UWP app coming to Xbox 2 common scenarios for a UWP app coming to Xbox

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.

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

? 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

So, what things should you be considering….

1 When designing…

for desktop

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

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.

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

Padding, spacing and consistency, oh my!

for xbox

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

Legibility is key. Make sure they can see it.

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

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

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

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

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

2 When coding…

for desktop

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

for xbox

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

Bring on the Demo…

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.

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

Bring on the Demo…

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.

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) {     @-ms-viewport {         height: 1080px;     } }

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.

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

? 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

So, what things should you be considering….

1 When designing…

for phone

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

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

Twice the inputs. Twice the interactive fun.

voice and touch

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

for xbox

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

2 When coding…

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.

For desktop and xbox its super simple!

keep on keep’n on for desktop…

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

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.

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.

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.

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

Behold demo magic!

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

Behold demo magic!

Thx!