Planning Windows Store apps

[This topic is featured in Develop great apps for Windows 8.]

When planning your Windows Store app, think less about what features you want to include and more about what experience you want to provide your users. If you haven't already, you might want to read Making great Windows Store apps.

We recommend that you follow these steps to plan your Windows Store app.

1. Decide what your app is great at

The most important part of designing a Windows Store app is determining what the app will be great at. For example, say you want to create a photo app. You do some thinking about the reasons users work with, save, and share their photos, and you realize that they want to relive memories, connect with others through the photos, and keep the photos safe. These are the things that you want the app to be great at, and you use these experience goals to guide you through the rest of the design process.

What's your app about?  Start with a broad concept and list all of the things that you want to help users do with your app.

For example, suppose you want to build an app that helps people plan their trips. Here are some ideas you might sketch out on the back of a napkin:

• Get maps of all of the places on an itinerary, and take them with you on the trip.
• Find out about special events happening while you're in a city.
• Let travel buddies create separate but shareable lists of must-do activities and must-see attractions.
• Let travel buddies compile all of their photos to share with friends and family.
• Get recommended destinations based on flight prices.
• Find a consolidated list of deals for restaurants, shops, and activities around your destination.

What's your app great at?  Take a step back and look at your list of ideas to see if a particular scenario really jumps out at you. Challenge yourself to trim down the list to just a single scenario that you want to focus on. In the process, you might cross off many good ideas, but saying "no" to them is crucial to making a single scenario great.

After you choose a single scenario, decide how you would explain to an average person what your app is great at by writing it down in one sentence. For example:

• My travel app is great at helping friends create itineraries collaboratively for group trips.
• My workout app is great at letting friends track their workout progress and share their achievements with each other.
• My grocery app is great at helping families coordinate their weekly grocery shopping so that they never miss or duplicate a purchase again.

This is your app's "great at" statement, and it can guide many design decisions and tradeoffs that you make as you build your app. Focus on the user scenarios that you want to enable, and be careful not to turn this into a feature list. It should be about what your users will be able to do, as opposed to what your app will be able to do.

Common techniques to help with this step: brainstorming, association diagrams, mind mapping.

2. Decide what user activities to support

A flow is a set of related interactions that your users have with your app to achieve their goals. Every flow should be tightly tied to your "great at" statement, and should help users achieve that single scenario that you want to light up. Great apps have flows that are easy to learn and that require the fewest interactions.

Common techniques to help with this step:

• Outline the flow: What comes first, what comes next?
• Storyboard the flow: How should users move through your UI to complete the flow?
• Prototype: Try out the flow with a quick prototype.

What should users be able to do?  For example, the travel app is "great at helping friends collaboratively create itineraries for group trips." Let's list the flows that we want to light up:

• Create a trip with general information.
• Invite friends to join a trip.
• Join a friend's trip.
• See itineraries recommended by other travelers.
• Add destinations and activities to trips.
• Edit and comment on destinations and activities that friends added.
• Share itineraries for friends and families to follow.

3. Decide what features to include

Once you know what your users want and how you can help them get there, you can look at the specific tools in your toolbox. Explore the Windows platform and associate features with your app's needs. Be sure to follow the user experience (UX) guidelines for each feature.

Common techniques:

• Platform research: Find out what features the platform offers and how you can use them.
• Association diagrams: Connect your flows with features.
• Prototype: Exercise the features to ensure that they do what you need.

App contracts  Your app can participate in app contracts that enable broad, cross-app, cross-feature user flows.

• Search  Let your users quickly search through your app's content from anywhere in the system, including from within other apps. And vice versa.
• Share  Let your users share content from your app with other people through other apps, and receive shareable content from other people and apps, too.
• Play To  Let your users enjoy audio, video, or images streamed from your app to other devices in their home network.
• File picker and file picker extensions  Let your users load and save their files from the local file system, connected storage devices, HomeGroup, or even other apps. You can also provide a file picker extension so that other apps can load your app's content.

For more info, see App contracts and extensions.

Different views and form factors  Windows 8 puts users in charge and your app in the forefront. 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. Learn more about planning for different form factors.

Touch first  Windows 8 provides a unique and distinctive touch experience that does more than simply emulate mouse functionality.

For example, semantic zoom is a touch-optimized way to navigate through a large set of content. Users can pan or scroll through categories of content, and then zoom into those categories to view more and more detailed information. You can use this to present your content in a more tactile, visual, and informative way than with traditional navigation and layout patterns like tabs.

Of course, you can take advantage of a number of touch interactions, like rotate, pan, swipe, cross-slide, and others. Learn more about touch interaction.

Engaging and fresh  Be sure your app feels fresh and engages users with these standard experiences:

• Animations  Use our library of animations to make your app feel fast and fluid. Help users understand context changes and tie experiences together with visual transitions. Learn more about animating your UI.
• Toast notifications  Let your users know about time-sensitive or personally relevant content through toast notifications and invite them back to your app even when your app is closed. Learn more about tiles, badges, and toast notifications.
• Secondary tiles  Promote interesting content and deep links from your app on the Start screen, and let your users launch your app directly into a specific page or view. Learn more about secondary tiles.
• App tiles  Provide fresh and relevant updates to entice users back into your app. More about this in the next section. Learn more about app tiles.

Personalization

• Settings  Let your users create the experience they want by saving app settings. Consolidate all of your settings under one roof, and users can configure your app via a common mechanism that they are already familiar with. Learn more about Adding app settings.
• Roaming  Create a continuous experience across devices by roaming data that lets people pick up a task right where they left off, and preserves the UX they care most about, regardless of the device they're using. Make it easy for users to use your app everywhere, from their kitchen family PC to their work PC to their personal tablet, by maintaining settings and states with roaming. Learn more about Managing application data and see Guidelines for roaming application data.
• User tiles   Make your app more personal to your users by loading their user tile image, or let the users set content from your app as their personal tile throughout Windows.

Device capabilities  Be sure your app takes full advantage of the capabilities of today's devices.

• Proximity gestures  Let your users connect devices, by physically tapping them together, to light up experiences where you expect multiple users to be physically nearby (multiplayer games). Learn more about proximity and tapping.
• Cameras and external storage devices  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. Learn more about Accessing content on removable storage.
• 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 rotates 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, find their position on a map, or get notices about nearby people, activities, and destinations. Learn more about geolocation.

Let's consider the travel app example again. To be great at helping friends collaboratively create itineraries for group trips, you could use some of these features, just to name a few:

• Share: Users share upcoming trips and their itineraries to multiple social networks to share the pre-trip excitement with their friends and families.
• Snapped and filled views: Users have the travel app on one side of the screen and the browser on the other for research and reservations.
• Search: Users search for and find activities or destinations from others' shared or public itineraries that they can include in their own trips.
• Notifications: Users are notified when travel companions update their itineraries.
• Settings: Users configure the app to their preference, like which trip should bring up notifications or which social groups are allowed to search the users' itineraries.
• Semantic zoom: Users navigate through the timeline of their itinerary and zoom in to see greater details of the long list of activities they've planned.
• User tiles: Users choose the picture they want to appear when they share their trip with friends.

As you can see, Windows 8 helps you create new, engaging experiences that will delight your users. For more ideas, explore Developing Windows Store apps.

4. Decide how to monetize your app

You have a lot of options for earning money from your app. If you decide to use in-app ads or sales, you'll want to design your UI to support that. For more information, see Planning for monetization.

5. Design the UI for your app

This is about getting the basics right. Now that you know what your app is great at, and you've figured out the flows that you want to support, you can start to think about the fundamentals of UI design.

How should you organize UI content?  Most app content can be organized into some form of groupings or hierarchies. What you choose as the top-level grouping of your content should match the focus of your "great at" statement.

To use the travel app as an example, there are multiple ways to group itineraries. If the focus of the app were about discovering interesting destinations, then you might group them based on interest, like adventure, fun in the sun, or romantic getaways. However, because the focus of the app is planning trips with friends, it makes more sense to organize itineraries based on social circles, like family, friends, or work.

Choosing how you want to group your content helps you decide what pages or views you need in your app. The project templates available in Microsoft Visual Studio Express 2012 for Windows 8 offer the common app layout patterns that will suit most content needs. See Navigation design and Templates to speed up your app development for more info.

What UI surfaces and commands do you need?  Review the flows that you identified earlier. For each flow, create a rough outline of the steps users take.

Let's look at the "Share itineraries for friends and families to follow" flow. We'll assume that the user has created a trip already. Sharing a trip itinerary could require these steps:

1. The user opens the app and sees a list of trips she created.
2. The user taps on the trip she wants to share.
3. The details of the trip appear on screen.
4. The user accesses some UI to initiate sharing.
5. The user selects or enters the email address or name of the friend she wants to share the trip with.
6. The user accesses some UI to finalize sharing.
7. Your app updates the trip details with the list of people she has shared her trip with.

During this process, you begin to see what UI you need to create and the extra details you need to figure out (like drafting a standard email boilerplate for friends who aren't using your app yet). You can also start eliminating extra steps. Perhaps the user doesn't actually need to see the details of the trip before sharing, for example. The cleaner the flow, the easier to use.

For more details on how to use different surfaces, take a look at Commanding design for Windows Store apps.

How should you organize commands?  Use your outline of the flow steps to identify potential commands that you need to design for. Then think about where those commands should live in your app.

• Always try to use the content.  Whenever possible, let users directly manipulate the content on the app's canvas, rather than adding commands that act on the content. For example, in the travel app, let users rearrange their itinerary by dragging and dropping activities in a list on the canvas, rather than selecting the activity and using Up or Down command buttons.

• If you can't use the content, place commands on one of these UI surfaces:

  • In the app bar: You should put most commands on the app bar, which is usually hidden until the users bring it up.
  • On the app's canvas itself: If the user is on a page or view that has a single purpose, you can provide commands for that purpose directly on the canvas. There should be very few of these commands.
  • In a context menu: You can use context menus for clipboard actions (such as cut, copy, and paste), or for commands that apply to content that cannot be selected (like adding a push pin to a location on a map).

Decide how to lay out your app in each view.  Windows 8 supports landscape, portrait, snapped, and fill views. Users can put your app in any of these views at any time, and you want your app to look and work great in each one. This means you need to plan the layout of your UI elements for each view, and map your layout implementation to each view state. When you do this, your app UI changes fluidly to meet your user's needs and preferences.

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

6. Make a good first impression

Think about what you want users to think, feel, or do when they first launch your app. Refer back to your "great at" statement. Even though you won't get a chance to personally tell your users what your app is great at, you can convey the message to them when you make your first impression. Take advantage of these:

Tile & notifications  The tile is the face of your app. Among the many other apps on a user's Start screen, what will make the user want to launch your app? Be sure your tile highlights your app's brand and shows what the app is great at. Make use of tile notifications so that your app will always feel fresh and relevant, bringing the user back to your app again and again.

Splash screen  The splash screen should load as fast as possible, and remain on the screen only as long as you need to initialize your app state. What you show on the splash screen should express your app's personality.

First launch  Before users sign up for your service, log in to their account, or add their own content, what will they see? Try to demonstrate the value of your app before asking users for information. Consider showing sample content that people can play around with to understand the purpose of your app before you ask them to commit.

Home page  The home page is where you bring users each time they launch your app. The content here should have a clear focus and immediately showcase what your app is tailored for. Make this page great at one thing and trust that people will explore the rest of your app. Solve for distractions on the landing page, not discoverability.

To better understand the success of your messages, see Assessing the usability of Windows Store apps.

7. Prototype and validate your design

Before you get too far into actual development, you should validate your design or prototype against guidelines, user impressions, and requirements, to avoid having to rework it later. Each feature has a set of user experience guidelines to help you polish your app, and a set of store requirements that you must meet to sell your app in the Windows Store. You can use the Windows App Certification Kit to test for technical compliance with store requirements.

Use the Detailed UX guidelines for Windows Store apps to keep you focused on important features.

See also

For more info about planning and designing Windows Store apps, see the following topics.

Build date: 3/12/2013