Design for different form factors (Windows Store apps)

Windows Store apps are at home on desktops, laptops, and slates. You need to design your Windows Store apps to handle all these different form factors gracefully. Your users can move between different devices, switch input method, change the screen orientation, or shut everything off and on, and your Windows Store app needs to move, change, and react with them.

Touch, pen, mouse, and keyboard interactions

When you design your app for touch interactions, you get support for pen, mouse, and keyboard interactions for free. Your users can switch from one input method to another and not miss a beat of the app experience. Plug a keyboard into a slate? No problem. Your app responds consistently and predictably to your users' choices.

For more info, see Touch interaction design and Responding to user interaction.

Device capabilities

Great apps take full advantage of the devices they run on. Windows 8 has built-in support for these device capabilities:

• Accelerometers and other sensors  Devices come with a number of sensors nowadays. Your app can dim or brighten the display based on ambient light, or reflow the UI if the user turns the display, or react to any physical movement. Learn more about sensors.
• Geolocation   Use geolocation information from standard web data or from geolocation sensors to help your users get around, locate their position on a map, or get notices about nearby people, activities, destinations. Learn more about geolocation.
• Cameras   Connect your users to their built-in or plugged-in cameras for chatting and conferencing, recording vlogs, taking profile pics, documenting the world around them, or whatever activity your app is great at.
• Proximity gestures   Let your users connect devices, by physically tapping the devices together, to light up experiences where you expect multiple users to be physically nearby (multiplayer games). Learn more about proximity gestures.

When planning your app's features, consider the devices your app might run on. Are some device capabilities required for your app to work well? Or can you get by without some? You have to declare which capabilities your app supports in your app manifest, but in the app itself, you can create fallbacks for optional capabilities. For example, let's say a travel mapping app lets users track their travels on a map, tag sites, include journal comments, send to social media, and add photos or videos from their trip. Geolocation would be a mandatory capability, but camera support could be optional. If the device doesn't have a camera, users could upload videos or photos taken on another device. Great apps cover all the options.

Fluid, multiple views of your app

Windows 8 puts users in charge. You want your app UI to shine on any device, using any input mode, in any orientation, in whatever circumstance the user decides to use it.

When you design your app with fluid views, your app UI reflows gracefully in response to changes in the orientation of the user's monitor, their mobile device, or their input method. Windows manages these behaviors for you.

• Landscape   Design for landscape view first so your app looks good on all form factors.
• Portrait    But remember some devices rotate! So optimize the layout of your content when in portrait view and retain functionality whenever possible.

The key to looking good in these views (as well as in snapped, fill, fullscreen, touch keyboard, and handwriting panel views) is defining layouts for the app in each view. When you plan ahead for each view, your app UI reflows automatically when a different view is triggered on the device.

For more info, see Choosing a layout and Guidelines for layouts.

Built-in graphical scaling

If users can access your app on multiple form factors, does that mean you have to design a different UI for every potential screen size Windows works on? That's a lot of different screen sizes! The answer is, not necessarily. Built-in scaling means your app and content always look great, whether on a small 7" device or on a big 30" monitor. You just need to use a fluid layout and make sure the graphics in your app look good when scaled.

For more info, see Guidelines for scaling.

Roaming data

What if your users go from their work desktop to their slate at home? Their files, app state, and app preferences go home with them. They can pick up right where they left off, across different machines and user sessions.

Learn more about roaming and Managing app data.

Build date: 6/20/2013