Best Practices for UX Design in Windows 8 Apps

Developers who are shifting into application development for the Windows 8 (aka Windows Store) platform will need to adapt their user interface (UI) design approach for Windows 8 applications. Although Windows 8 brings with it a new design language—that is, a set of design principles, patterns, and content and visual guidelines geared toward producing a consistent user experience (UX) in apps, if you've invested in learning about how to design for good UX, the vast majority of that knowledge still applies. The Windows 8 design language builds on fundamental UX principles by providing constraints that ultimately make it easier for developers to create well-designed apps.

My intent with this article is to first explain the design language concept, which will provide a context to help you understand the Windows 8 design approach. Then I will provide some essential tips—"dos and don'ts"—for you to follow as you explore the brave new world of Windows 8 UI and UX design and development. Also see "Design Resources for Windows Store Apps" at the end of this article for more information to guide you in UX design for your Windows 8 apps.

Design Languages

Some articles on Windows 8 app design refer to the specific interface guidelines that Microsoft provides. I will briefly discuss these guidelines, as they are required knowledge for developing Windows 8 applications. However, knowledge of these guidelines will only get you so far in designing UX/UI for Windows 8 apps. Microsoft's interface guidelines do push you toward making better choices for your app designs. If nothing else, the strong design language will provide helpful constraints and eliminate design options that were previously available, all of which will help your apps fit within the overall Windows 8 experience.

Windows 8 has a distinct design language, and, to some extent, that language is influencing many parts of Microsoft to become the language for the company. This design language started with Windows Phone 7, and its influence has been spreading since then. Whether or not you like the Windows 8 design language, it is the new language for Microsoft application design, so it's important that you become familiar with it.

For Microsoft developers, the design language is a new concept. Windows 7 and earlier had some aspects of a design language, but this quasi design language was very loose and certainly not enforced. Although some developers might like that freedom—a kind of "Wild West" of UI design, this rather unstructured design approach wasn't and isn't optimum for an application's end users.

The web is another example of the "Wild West" approach to UI design—even more so than Windows was. Websites were created using only the bare bones of a design language, provided by the commonalities of the browser experience (e.g., back buttons display the previous web page, address bars let you navigate to sites) and the commonalities more or less prescribed by the standard HTML elements. Sure, plenty of patterns have developed and continue to develop, but they're more like suggestions than constraints in the web world.

Apple, on the other hand, has long provided a well-defined design language in its Human Interface Guidelines. Although until recently Apple did not enforce these guidelines, there seemed to be a more common understanding among Mac app developers and designers that the guidelines were important and should be followed. And with the new app store models, it is now more typical than not for Apple to enforce the design language.

The downside of having a strong design language is that apps can start to look and feel all the same and, to some extent, boring. A good compromise is to follow standard design patterns 95 percent of the time, but the other five percent of the time strive to work into your apps an element that is interesting and innovative.

Think about Flipboard. You could almost say that application's entire experience is built around the app's "flip" interaction. And Flipboard is hugely successful. Of course, the app does other things well; you can't neglect the 95 percent, but if you are following patterns 100 percent of the time, you risk boring your users. What is important is that 100 percent of your app has a good quality bar in terms of its UX design. Details matter.

The best design languages allow room for this kind of innovation, and Windows 8 is no different. As you can see on the MSDN topic page "Branding your Windows Store apps" MSDN, at least in terms of visual style, it is possible to create in a Windows 8 app some beautiful deviations from the in-the-box norms.

Essentials of Windows 8 UX Design

My goal here is to condense some essential points that will help you craft Windows 8 apps that provide an excellent UX. Before you delve fully into designing a Windows 8 app, though, you might want to take a look at "UX Manifesto: 7 Principles for Better Software." All these principles are relevant for Windows 8 design. In fact, if you're a developer who has put off learning about UX so far or maybe only touched on it here and there, getting into Windows 8 app development will likely motivate you to hone your UX skills.

Now let's look at some of the things you should—and should not—do in regard to UX in your Windows 8 apps.

Do Design Your App Before You Code It

This principle touches on the "Keep your hands off the keyboard" principle in "UX Manifesto: 7 Principles for Better Software," and it also dovetails with Microsoft's guidance to "plan your app." Don't jump right into coding. If you do, you'll get too distracted by details, which could lead to problems later.

Do Take Advantage of Cross-App Flow Enablers

For a developer, one of the best features of Windows 8 is the broad interoperability and cross-app/feature leverage it exposes with app contracts and extensions. This is one of the single most important capabilities of the Windows 8 platform in terms of improving UX.

App contracts and extensions help you situate your app in a way that more closely mirrors the reality of the way people work rather than as a monolithic solution that has to provide everything on its own. Contracts and extensions also take some of the burden off you by providing OS-level shared services and coordination, letting you make your app services and data more available outside of your app.

Do Think About Splitting Monolithic Apps into Smaller, Focused Ones

When you approach Windows 8, especially a Windows 8 redesign of, say, a large, monolithic enterprise line-of-business (LOB) app, think about how you can tease apart meaningful chunks of that big application into smaller, more focused apps.

This is similar to how you would approach designing mobile apps in general, but Windows 8 gives you some nifty tools to let you do this while still keeping the apps coordinated. The first are the app contracts mentioned previously. For example, you can leverage the Windows 8 search contract to help people find relevant in-app information; doing so can also help limit the size and scope of your app.

Another tool that can help make apps more focused is Live Tiles. So, for example, you can use Live Tiles for a particular app or several apps together in a group to create a good dashboard experience that will keep end users apprised of key indicators and information across your apps.

The benefit of using contracts and Live Tiles as opposed to using intra-app dashboards is that the information that contracts and Live Tiles provide is available to users even while they are multitasking with other apps. These tools also help you keep your in-app navigation simpler, which is just generally a good idea.

Don't Just Squish Your Existing LOB UI into Windows 8

This is the inverse or corollary to parts of the previous principles, but it needs to be said. You shouldn't (and probably can't) just do a "technology refresh" to get your apps onto Windows 8. You have to take a step back and "reimagine" how each of your existing apps fits into this brave new world. As noted earlier, if you've already begun work on other mobile apps, take inspiration from them, as many general mobile design principles also apply to Windows 8 app design. Microsoft put together a helpful enterprise LOB case study that you can use as a good starting point. Additional useful resources from Microsoft for Windows 8 LOB app development include the following:

I've seen a lot of developers who more or less reject Windows 8/Windows Store for LOB apps because they think Windows 8 is not for LOB. The problem is not that Windows 8-style is not for LOB—it is. The entire Windows 8 design language is geared toward encouraging better UX. The old-style typical LOBs are notorious for their poor UX. Devs need to break out of that old-fashioned way of thinking about their LOB app designs.

In addition, the new improvements in Windows 8.1 will help here as well. You can now have multiple apps open at arbitrary widths, which allows you to put together sophisticated combinations of apps in a more intensive dashboard-like experience, if that's what you need to do.

Do Think About Responsive Design

Even if you absolutely know for certain that your app will only be used on fixed hardware (e.g., corporate desktops), you still need to think about responsive design. At least, you ought to consider how your app looks and works in Snap View, but with Windows 8.1, there are more layout "breakpoints," as they are called in responsive web design. (Again, here is another area you can probably leverage your existing mobile design efforts.) Consider how your app will look and function with these varying widths, factoring in how the app will be used on small tablet devices as well as larger desktop screens, and even on TVs and walls.

Do Think About Devices

What if your CEO buys a Microsoft Surface and wants to use your app on it? In that case, you'll need to think about portrait orientation. More than that, there are more sensors—such as geolocation, gyrometers, built-in cameras, and Near Field Communication (NFC)—that can enable you to be more context-aware and provide for other kinds of input into your apps than you might be accustomed to.

In the Build 2013 keynote on Windows 8.1, Microsoft executives showed a recipe app that used the camera to detect hand gestures for hands-free control. This capability could be useful in any number of situations where a person is using a screen for reference while working with dirty hands. Or maybe you could leverage the built-in mics for some amount of voice control, which could be useful for apps that will be used in hands-free environments.

Don't Ignore Touch

This principle might seem a bit obvious. As most of us know, touch changes things fairly significantly in UI design. Even if you have good reason to think most of your users won't be touching your app, the interesting thing is that in many, if not most, cases, designing a UI as if it were going to be touched regularly actually improves its usability.

Yes, there are exceptions to this rule. However, generally speaking, elements such as larger text, more white space between text or images, and larger buttons and other touch targets are easier to use whether you are using a mouse or a finger. Furthermore, when you let your designs breathe, they almost always look better and feel better.

The good news is that designing (or redesigning) for touch is less daunting than it might seem. You didn't know how to use a mouse and keyboard when you were born, but you learned them, and now all those "gestures" are second nature to you. Touch manipulation is more direct and more "natural." Many touch interactions are closer to their real-world counterparts and, at least, are not mediated by a pointing device. So you have a leg up on designing for touch just by being human.

Beyond that, designing for touch is just a matter of learning some fairly simple rules and the particular touch gestures that are part of the Windows 8 design language. The Windows 8 platform helps you out a lot here, too, when it comes to implementation time, by providing right out of the box many good defaults and built-in appropriate events. Finally, as you turn your focus to touch, consider your mouse users, too.

Do Learn the New Controls, Layouts, and Transitions

You'll make your life considerably easier if you become familiar with the built-in Windows 8 goodness. That goodness includes new controls, familiar controls that look and feel different, new layouts (and layout controls), and new transitions. All these elements have the Windows 8 design language baked in. As you get to know them, you will inevitably become more familiar with the design language itself. Once you're comfortable with the Windows 8 controls, layouts, transitions, and design language, you'll be better equipped to determine what you can and cannot do in your app and better prepared to turn the idea for an app into reality.

Don't Be a Curmudgeon

Windows 8 style is different from what traditional Windows developers are accustomed to. If you're a developer, especially a veteran dev, you've acquired tons of essentially subconscious knowledge about "the way of Windows." You are very opinionated about software. Windows 8 will likely challenge your cherished notions about software design. To succeed in the new world of Windows 8 app design and development, you'll need to adapt and embrace the change.

To do so, it will serve you to become a Windows 8 fan. Use Windows 8 often. Use the built-in apps and explore new ones. Not only will doing so give you a positive outlook on the work you need to do, it also will teach you about what works and what doesn't work so well in Windows 8 apps. You'll get inspired, and you'll get frustrated—all of which is great input into your own designs.

Windows 8 is still young and takes some getting used to. The upside of Windows 8's newness is the opportunity it offers you to explore both the OS itself and your own apps. Windows 8 will mature. It will lose its rough edges, as we've already seen happening in8.1. Windows 8 will eventually become familiar. In the meantime, take advantage of the opportunity to hone your UX skills as you learn to navigate the terrain of Windows 8 development.