Article
10/21/2015

Special Windows 10 issue 2015

Volume 30 Number 11

UI Design - Responsive Design for Universal Windows Apps

By Mike Jacobs | Windows 2015

A Universal Windows app can run on any Windows-based device, from your phone to your tablet or PC. You can even create Universal Windows apps that run on compact devices, such as wearables or household appliances. You can limit your app to a single device family (such as the mobile device family), or you can choose to make the app available on all devices running Windows.

Designing an app that looks good on such a wide variety of devices can be a big challenge. So how do you go about designing an app that provides a great UX on devices with dramatically different screen sizes and input methods? Fortunately, the Universal Windows Platform (UWP) provides a set of built-in features and universal building blocks that help you do just that. This article describes the design features of the UWP and provides recommendations for creating a responsive UI that adapts to difference devices and form factors.

Let’s start by taking a look at some of the features you get when you create a Universal Windows app. You don’t have to do anything to benefit from these features—they’re baked into the UWP.

One such feature is platform scaling, which optimizes the UI based on the type of Windows-powered device being used. The system employs an algorithm to normalize the way controls, fonts and other UI elements display on the screen. This scaling algorithm takes into account viewing distance and screen density (pixels per inch) to optimize for perceived size (rather than physical size). The scaling algorithm ensures that a 24-pixel font on a Surface Hub display set 10 feet away is just as legible to the user as a 24-pixel font on a 5-inch smartphone screen that’s a few inches away. Because of how the scaling system works, when you design your Universal Windows app you’re designing in effective pixels, rather than actual, physical pixels.

Another built-in capability of the UWP is universal input enabled via smart interactions. Although you can design your apps for specific input modes and devices, you aren’t required to. That’s because Universal Windows apps by default rely on smart interactions. That means you can design around a click interaction without having to know or define whether the click comes from an actual mouse click or the tap of a finger.

Universal Building Blocks

In addition, the UWP provides useful building blocks that make it easier to design apps for multiple device families. These building blocks include universal controls, universal styles and universal templates.

Universal controls are guaranteed to work well on all Windows-powered devices, from smartphones to Surface Hub displays. They run the gamut from common form controls like radio button and text box to sophisticated controls like grid view and list view, which can generate lists of items from a stream of data and a template. These controls are input-aware and deploy with the proper set of input affordances, event states, and overall functionality for each device family.

The UWP also automatically imbues your apps with a default set of styles that optimizes presentation for every target form factor. You can customize the default styles or replace them completely to create unique, visual experiences. Universal styles deliver a number of capabilities, including:

A set of styles that automatically gives your app the choice of a light or dark theme and can incorporate the user’s accent color preference
A Segoe-based type ramp that ensures that app text looks crisp on all devices
Default animations for interactions
Automatic support for high-contrast modes. These styles were designed with high-contrast in mind, so when an app runs on a device in high-contrast mode, it will display properly
Automatic support for other languages. The default styles automatically select the correct font for every language that Windows supports. You can even use multiple languages in the same app and they’ll be displayed properly
Built-in support for right-to-left reading order

Finally, the UWP provides universal templates for Adobe Illustrator and Microsoft PowerPoint, and contains everything you need to get started designing UWP apps. These templates feature universal controls and layouts for every universal device size class. To download the templates, go to the Design downloads section of the Windows Dev Center at bit.ly/1KHun6J.

Know the Devices

To provide the best possible UX in your apps, it’s important to become familiar with the various device families supported by the UWP. When designing for a particular device, the main considerations include how the app will appear on that device, how the user will interact with that device, and where, when and how the app will be used on that device.

Smartphones The most widely used of all computing devices, phones can do a lot with limited screen real estate and basic inputs. Phones are available in a variety of sizes, with most ranging from 4 to 6 inches diagonally, while phones with screens larger than 6 inches are often called phablets. Though app experiences on phablets are similar to those on standard-size smartphones, the larger screens do enable some important changes in content consumption.

Phones are primarily used in portrait orientation, mostly due to the ease of holding the phone with one hand while interacting with it. Experiences that work well in landscape orientation include viewing photos and video, reading a book, and composing text. Regardless of size and usage modes, phones do share a few characteristics. They’re mostly used by just one person—the owner of the device—and tend to be almost always within reach, usually stashed in a pocket or a bag. Phones are also typically used for brief periods of time.

Users interact with their phones through touch and voice. Most phones provide a camera, microphone, movement sensors and location sensors.

Tablets Ultra-portable tablet computers bridge the gap between phones and laptops. Frequently equipped with touchscreens, cameras, microphones and accelerometers, tablets boast screen sizes that typically range from 7 to around 13 inches. Like phones, tablets are primarly used by a single person, the owner. They’re most commonly used at home, and are used for longer periods of time than phones. Users interact with tablets through touch, stylus, and sometimes a keyboard and mouse.

PCs and Laptops Windows PCs include a wide array of devices and screen sizes. In general, PCs and laptops can display more info than phone or tablets. Typical screens sizes are 13 inches and larger. Apps on PCs and laptops see shared use, but by one user at a time and usually for longer periods. Apps can be displayed in a windowed view, the size of which is determined by the user. PC and laptop users primarily interact with apps with a mouse and keyboard, but many laptops and some PCs support touch interaction as well. PCs and desktops don’t usually have as many built-in sensors as other devices, with most equipped with just a camera and a microphone.

Surface Hub Devices Microsoft Surface Hub is a large-screen, team collaboration device designed for simultaneous use by multiple users. The Surface Hub is available in 55- and 84-inch screen sizes. Apps on Surface Hub see shared use for short periods of time, such as in meetings, and can appear in one of four states: fill (a fixed view that occupies the available stage area), full (standard full-screen view), snapped (a variable view that occupies the right or left sides of the stage) and background (hidden from view while the app is still running, available in task switcher). Surface Hub supports touch, pen, voice, and keyboard interaction, and includes a camera and a microphone.

Windows Internet of Things Devices This emerging class is centered around embedding small electronics, sensors and connectivity within physical objects. These devices are usually connected through a network or the Internet to report on the real-world data they sense, and in some cases act on it. A device can either have no screen (a “headless” device) or be connected to a small screen (“headed” device) that’s 3.5 inches or smaller. Inputs and device capabilities can vary greatly from device to device.

Designing for Specific Devices

Because Windows works behind the scenes to ensure your UI is legible and functional across all devices, you don’t have to customize your app for any specific devices or screen sizes. However, there are times when you might want to do so. For example, when your app runs on a PC or laptop, you might show additional content that would clutter up the screen of a smaller device like a phone.

There are many ways to enhance your app for specific screen sizes; some of them are quick and simple, while others require some work.

Let’s start by talking a bit more about effective pixels. As I mentioned earlier, when you design your Universal Windows app, you’re designing in effective pixels, not actual physical pixels. Effective pixels enable you to focus on the actual perceived size of a UI element without having to worry about the pixel density or viewing distance of different devices. For example, when you design a 1-inch by 1-inch element, that element will appear to be approximately 1-inch on all devices. On an extremely large screen with a high pixel density, the element might be 200 by 200 physical pixels, while on a smaller device like a phone, it might be 150 by 150 physical pixels.

So, how does this impact the way you design your app? You can ignore the pixel density and the actual screen resolution when designing. Instead, design for the effective resolution (the resolution in effective pixels) for a size class. I’ll go into detail on size class resolutions a bit later in this article. Also, a quick tip: When creating screen mockups in image-editing programs, be sure to set the PPI to 72 and set the image dimensions to the effective resolution for the size class you’re targeting.

To ensure that your apps scale cleanly, it’s important to obey the rule of four: Snap your designs to the 4x4 pixel grid by making your margins, sizes and positions of UI elements—including the position of text—a multiple of four effective pixels. Figure 1 shows design elements that map to the 4x4 pixel grid. The design element will always have crisp, sharp edges. By contrast, design elements that don’t map to the 4x4 grid will have blurry, soft edges on some devices.

Figure 1 Align to the 4x4 Pixel Grid for Sharp Text and Image Rendering

Despite these resources and capabilities, there are certainly times when you might want to customize your app’s UI for a specific device family. For instance, you might need to make the most effective use of space and reduce navigation burden on users. An app designed to look good on a device that has a small screen, such as a phone, will be usable on a PC with a much bigger display, but there will likely be some wasted space. You can customize the app to display more content when the screen is greater than a certain size. For example, a shopping app might display one merchandise category at a time on a phone, but show multiple categories and products simultaneously on a PC or laptop. By putting more content on the screen, you reduce the amount of navigation the user needs to perform.

Other scenarios come to mind, for instance, when you need to take full advantage of a device’s capabilities. Phones are likely to have a location sensor and a camera, for instance, while a PC might not have either. Your app can detect which capabilities are available and enable features that use them.

Finally, you might want to optimize for input. The universal control library works with all input types (touch, pen, keyboard and mouse), but you can still optimize for certain input types by rearranging your UI elements. For example, if you place navigation elements at the bottom of the screen, they’ll be easier for phone users to access—but most PC users expect to see navigation elements toward the top of the screen.

Responsive Design Techniques

When you optimize your app’s UI for specific screen widths, you’re creating a responsive design. There are a number of useful responsive design techniques that you can use to customize your app’s UI and take full advantage of the screen real estate and available capabilities of different device types. There are six techniques to consider: reposition, resize, reflow, reveal, replace and rearchitect.

Repositioning app UI elements is one way to get the most out of each device. In Figure 2, the portrait view on a phone or phablet necessitates a scrolling UI, because only one full frame is visible at a time. When the app translates to a tablet or other device that allows two full, on-screen frames, whether in portrait or landscape orientation, frame B can shift to occupy a dedicated space. If you’re using a grid for positioning, you can stick to the same grid when UI elements are repositioned.

Figure 2 Reposition Frames to Take Advantage of Larger Screens

You can also optimize the frame by resizing the margins and UI elements to take advantage of smaller or larger screens. This could allow you to augment the reading experience on a larger screen, for example, by growing the content frame, making room for more text and reducing the amount of scrolling. By the same token, different frame sizes offer an opportunity to reflow UI elements based on device and orientation. For instance, when going to a larger screen, it might make sense to use larger containers, add columns, and generate list items in a different way than on a smartphone.

Revealing UI elements is a powerful technique that can surface functionality supported on a specific device—a smartphone camera, for example—while also providing options for taking advantage of different screen sizes and orientations. A common example of revealing or hiding UI applies to media player controls, where the button set is reduced on smaller devices and expanded on larger devices. The media player on a PC, for instance, can handle far more on-screen functionality than it can on a phone.

Part of the reveal-or-hide technique includes choosing when to display more metadata. When real estate is at a premium it’s best to show a minimal amount of metadata, while a laptop or desktop PC allows for a significant amount of metadata to be surfaced. Some examples of how to handle showing or hiding metadata include:

E-mail app: display the user’s avatar
Music app: display more info about an album or artist
Video app: display more info about a film or a show, such as cast and crew details
Any app: break apart columns and reveal more details
Any app: Take something that’s vertically stacked and lay it out horizontally; on larger devices, stacked list items can change to reveal rows of list items and columns of metadata

The last two responsive UI techniques are replace and rearchitect. The replace technique lets you switch the UI for a specific device-size class or orientation. For instance, a compact device might display a stacked series of buttons, while on a larger screen those controls are prelaced by tabs running along the top of the screen.

Finally, you can collapse or fork the architecture of your app to better target specific devices. In the example in Figure 3, going from the left device to the right device demonstrates the joining of pages. The image depicts a smart home app that, on a larger screen, combines the home controls and the settings pane on a single screen. On a smaller device, the controls and settings are shown on different screens.

Figure 3 Rearchitecting App Display for Different Screen Sizes

Design Breakpoints

The number of device targets and screen sizes across the Windows 10 ecosystem is too great to worry about optimizing your UI for each one. Instead, it’s recommended you design for three key widths (also called breakpoints): 320, 720 and 1024 effective pixels. Figure 4 describes the breakpoints.

Figure 4 Design Breakpoints for Responsive UI

Size Class	Small	Medium	Large
Width in Effective Pixels	320	720	1024
Typical Screen Size (Diagonal)	4” to 6”	6+" to 12"	13” and wider
Typical Devices	Phones	Tablet, phones with large screen	PCs, laptops, Surface Hubs

When designing for specific breakpoints, consider the amount of screen space available to your app (or the app window). When the app is running full-screen, the app window is the same size of the screen, but in other cases, it’s smaller.

When designing for a small UI, every pixel is precious, so it’s OK to hide functionality that isn’t essential to the primary scenario by placing it in a menu or a toolbar. It’s also a good idea to display one column or region of content at a time, and use an icon to represent search instead of showing a search box.

Move up to medium-sized UIs and you can take advantage of the extra space to display a search box (if you have one) and lay out the primary content in two columns or regions. As you step up to a large UI, more functionality and content can be displayed, reducing the number of clicks and UI interactions required to get to content or perform actions.

Keep in mind that a width of 320 effective pixels could mean your app is running on a phone or in a small window on a PC with a large screen, so be sure to consider the primary input for the device—mouse or touch. On touch devices, you can ease navigation and interaction on hand-held devices by placing navigation and command elements at the bottom of the screen where they’re easily reached with a thumb. When using a mouse, however, users expect navigation elements to appear at the top of the screen. Your app can use the Windows.UI.ViewManagement.UIViewSettings.UserInteractionMode property to discover the primary input device and adjust its UI accordingly.

The Universal Windows Platform opens up a spectrum of devices for your apps, from wearables with tiny screens to the enormous Surface Hub. By implementing responsive design techniques and taking advantage of the platform’s built-in features and building blocks (controls and styles), it’s possible to create a UI that looks great on devices of all sizes and shapes.

Mike Jacobs *works as a senior content developer for Microsoft. For many years, he’s documented the graphics and presentation aspects of Microsoft technologies, from Direct2D to Windows Presentation Foundation and Silverlight. *

Thanks to the following Microsoft technical experts for reviewing and contributing to this article: JeffArnold, Eugene Gavrilov, Ross Heeter, Chigusa Sansen, Joe Tobens, as well as to Mike Bottemiller (Murphy & Associates)
Jeff Arnold is a senior design lead in Windows. His team works tightly alongside the Developer Platform team to deliver creative, tangible solutions inside the evolving UWP story.
Mike Bottemiller is a senior consultant with Murphy & Associates who writes for Microsoft. His career path veered from software testing to content publishing to project management before settling down as a writer in design and user experience. He’s written design guides and articles for Visual Studio, Xbox and UWP apps.
Eugene Gavrilov
Ross Heeter is a senior design lead at Microsoft. He specializes in interactions across devices, platforms and inputs—having spent time at Xbox designing for Console dashboard, SmartGlass companion and Indie Games Creator’s Club experiences. He currently designs app experiences for the Windows and Devices Group.
Chigusa Sansen is a senior program manager at Microsoft who has worked with many different device UI experiences, from Windows CE to Windows Mobile, PC, Phone, Tablet, and Xbox. She has contributed to major UX evolutions that brought Windows Phone as well as Windows 10 (UWP) from the UI framework perspective.
Joe Tobens is a senior designer at Microsoft. He designed and documented responsive UI across multiple devices and applications for Windows 10. He is currently working on input for the Windows and Devices Group.