#xboxappdev

App Dev on XboxLynnette Reed | @lynnettereedSenior Design Lead

uwp principles

keep it simpleWe start with simplicity as the ultimate unifier. When design is intuitive, we just know. We can feel it. The result is an experience that’s honest and timeless.

make it personalNext, we challenge ourselves to create emotional connection with an individual person. We design for the ways people really live and think and act. The result is an experience that feels like it was created for one person.

think universalWe design to embrace the things that make us human. It’s more far more than an attitude for making stuff – and into creating a world that makes lives better. The result is technology that’s inclusive.

create delightOur final principle is about energy within a structure. It’s how you know the experience was made by a real person. The result is an experience that surprises and has a sense of place.

design for uwp

colors

https://dev.windows.com/en-us/design/assets

AAASEGOE UI SEMIBOLD SEGOE UI REGULAR SEGOE UI LIGHT

type ramp

iconography

ui framework & foundations

dev.windows.com/design

designing for 10’

simpleTV is a unique medium to design for. Resolution and viewing distance can make it hard for people to process too much information. Try to keep your design clean, reduced to the simplest components. The amount of information displayed on a tv should be comparable to what you’d see on a mobile phone, rather than a desktop.

coherentWindows apps on TV should be intuitive and easy to use. Make focus clear and unmistakable. Arrange content so that movement across the space is consistent and predictable. Give viewers the shortest path to what they want..

captivatingOur most immersive, cinematic experiences take place on the big screen. Edge-to-edge scenery, elegant motion, and vibrant use of color and typography take your games and apps to the next level. Be bold and beautiful. 

key things to consider

space is your friend.think less density, much like mobile.

legibility is key.make sure they can see it.

20 epx and below

AA

24 epx and above

For 10’ experience…

keep it simple.reduce clicks to under 6 on a single screen.

know your place.single item always in focus = user happiness.

respect the safe area.always think broadcast-safe for colors.

tv safe area optimization

optimized uwp for tv default uwp for tv

Web app @ 720p

32

64 64

32

XAML @ 540p

27

48 48

27

R G BCALIBRATION

236-255

R G B

FULL BLACK

FULL WHITE

FULL BLACK

FULL WHITE

0-255 16-235

0-15

layout and controller optimization

layout optimized for controller input

not optimal for controller

default controls

sounds

designing for xbox with xaml

xbox uwp native scaling with xaml

200%

design at 960x540p

title-safe864 x 486px

spacing and gutters

designed at

when scaled 200% (aligned to xbox one shell)

4epx2epx

designing for tv with hosted web app

xbox uwp native scaling with hosted web app

150%

design at 1280x720p

title-safe1216 x 648px

spacing and gutters

designed at

when scaled 150%

6epx4epx

optimizing for 10’

defaults for 10’“it just works”

UWP Defaults – Works on Xbox / TV• Scale Factor applied by default • “Mouse Emulation” with Gamepad• Automatic TV Safe Area

acceptable method

UWP desktop example

optimized for 10’

“UWP XBOX” – Optimized for Xbox (TV)• Optimize for Gamepad (“X-Y Focus”)• Focus Rectangle for TV• Account for TV Safe area• Use TV Safe colors• Less dense control layout and bigger controls• Integrate SMTC (or use our media controls)• Use adaptive layout to account for snapped

apps

premium experience

UWP desktop example

turning off scaling, mouse mode & title safe area:

https://msdn.microsoft.com/en-us/windows/uwp/xbox-apps/tailoring-for-xbox

uwp examples for 10’

atmosphere app

atmosphere app

atmosphere app - tablet

atmosphere app - tablet

atmosphere app - tablet

atmosphere app - xbox

atmosphere app - xbox

atmosphere app - xbox

atmosphere app - xbox

atmosphere app - xbox

news app

news app

news app - tablet

news app - tablet

news app - tablet

news app - xbox

news app - xbox

news app - xbox

news app - xbox

audio app

audio app

audio app - tablet

audio app - tablet

audio app - tablet

audio app - tablet

audio app - xbox

audio app - xbox

other 10’ examples

xbox home

xbox home

xbox pc

xbox pc

xbox pc

xbox home

xbox home

xbox home

my profile

my profile

my profile on pc

my profile on pc

my profile on pc

my profile on xbox

my profile on xbox

my profile on xbox

trick 1

using a dark background with a the dark theme its a quick way to fix your app for safe area.

trick 2

let your pages breathe.reduce the density of content on the screen.

trick 3

reduce copy when possible.

trick 4

be the user.test out your apps from 10’ away.

trick 5

make your text readable.

trick 6

make sure you have peaks or affordances for content that isn’t visible.

trick 7

test with a controller.

• see designing for xbox and tv• optimize for gamepad (“x-y focus”): gamepad is the primary input

mechanism. watch out for focus traps• focus rectangle for tv: make sure your focus rect is visible (free in

xaml)• account for tv safe area: draw to the edge of the screen• use tv safe colors: tvs are not monitors – be aware of color

variance and tv safe colors • less dense control layout and bigger controls: “path of least clicks”

etc.• integrate smtc: gives bgm, remote, voice and smartglass support.

also no dimming during video playback• account for snapped apps: cortana (and other apps) can be

snapped next to your app. make sure that you use adaptive layout so that you work well in “fill” mode.

call to action: optimizing

thx!