Partager via

Designing the user experience of a Windows Store business app using C#, XAML, and Prism

  • Article

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

From: Developing a Windows Store business app using C#, XAML, and Prism for the Windows Runtime

Previous page | Next page

Learn how to design the user experiences and app flow for a Windows Store business app, prior to storyboarding and prototyping the app.

Download

After you download the code, see Getting started using Prism for the Windows Runtime for instructions on how to compile and run the reference implementation, as well as understand the Microsoft Visual Studio solution structure.

You will learn

  • How to plan a Windows Store app.
  • How you can tie your "great at" statement to the app flow.
  • How storyboards and prototypes drive user experience design.

Applies to

  • Windows Runtime for Windows 8.1
  • C#
  • Extensible Application Markup Language (XAML)

Making key decisions

Good Windows Store apps share an important set of traits that provide a consistent, elegant, and compelling user experience. Planning ahead for different form factors, accessibility, monetization, and selling in the global market can reduce your development time and make it easier to create a high quality app and get it certified. The following list summarizes the decisions to make when planning your app:

  • How should I plan a Windows Store app?
  • What guidelines should I follow to ensure a good overall user experience?
  • What experience do you want to provide to your users?
  • Should the app run on different form factors?
  • How do I make the app accessible to users regardless of their abilities, disabilities, or preferences?
  • Should the app be available in the global market?

When planning a Windows Store app you should think more about what experience you want to provide to your users and less about what Microsoft Windows features you want to include. We recommend that you follow these steps:

  1. Decide the user experience goals.
  2. Decide the app flow.
  3. Decide what Windows features to include.
  4. Decide how to monetize your app.
  5. Make a good first impression.
  6. Validate the design.

For more info see Planning Windows Store apps and AdventureWorks Shopper user experiences.

There are many user experience guidelines that can help you create a good Windows Store app. However, the exact guidelines that you will follow will be dependent on the experiences present in your app. For more info see Index of UX guidelines for Windows Store apps.

In order to decide what experience you want to provide to your users we recommend that create a "great at" statement to guide your user experience planning. Following this, you should design your app flow. An app flow is a set of related interactions that your users have with the app to achieve their goals. To validate the design you should follow these steps:

  1. Outline the flow of the app. What interaction comes first? What interaction follows the previous interaction?
  2. Storyboard the flow of the app. How should users move through the UI to complete the flow?
  3. Prototype the app. Try out the app flow with a quick prototype.

For more info see Deciding the user experience goals and Deciding the app flow.

Apps should be designed for different form factors, letting users manipulate the content to fit their needs and preferences. Think of landscape view first so that your app will run on all form factors, but remember that some screens rotate, so plan the layout of your content for different resolutions and screen sizes. In addition, because Windows is used worldwide, you need to design your app so that resources, such as strings and images, are separated from their code to help make localization easier. Also, your app should be available to all users regardless of their abilities, disabilities, or preferences. If you use the built-in UI controls, you can get accessibility support with little extra effort. For more info see Deciding what Windows features to use.

[Top]

AdventureWorks Shopper user experiences

The AdventureWorks Shopper reference implementation is a shopping app, and so we wanted to design experiences that would enable users to shop easily and efficiently.

Deciding the user experience goals

Our first step was to create a "great at" statement to guide our user experience planning. Here's the "great at" statement for the AdventureWorks Shopper reference implementation:

AdventureWorks Shopper is great at letting users easily and efficiently order products from AdventureWorks.

The goal of the AdventureWorks Shopper reference implementation is not to provide a complete shopping app, but to demonstrate how to architect a Windows Store business app. We used our "great at" statement to guide the design tradeoffs as we built the app, making the focus on what our users want to do, rather than what the app can do.

[Top]

Deciding the app flow

We then brainstormed which aspects of a shopping app are the most crucial for a good user experience, to let these features guide us through the design process. The features that we came up with are:

  • Display and navigate products.
  • Search for products.
  • Authenticate user credentials.
  • Validate user input.
  • Order products.
  • Pay for orders.
  • Enable roaming data for user credentials.
  • Pin products to the Start screen.

There is plenty of other functionality that we could provide in the AdventureWorks Shopper reference implementation. But we felt that the ability to browse, search, and order products best demonstrate the functionality for creating a shopping app.

The app flow is connected to our "great at" statement. A flow defines how the user interacts with the app to perform tasks. Windows Store apps should be intuitive and require as few interactions as possible. We used two techniques to help meet these goals: creating storyboards and mock-ups.

A storyboard defines the flow of an app. Storyboards focus on how we intend the app to behave, and not the specific details of what it will look like. Storyboards help bridge the gap between the idea of the app and its implementation, but are typically faster and cheaper to produce than prototyping the app. For the AdventureWorks Shopper reference implementation, storyboards were critical to helping us to define the app flow. This technique is commonly used in the film industry and is now becoming standard in user experience design. The following storyboard shows the main app flow for the AdventureWorks Shopper reference implementation.

A mockup demonstrates the flow of the user experience, but more closely resembles what the end product will look like. We created mock-ups based on our storyboards and iterated over their design as a team. These mockups also helped each team member get a feel for what the app should look like. The following mockup shows the hub page.

During the planning phase of the app, we also created small prototypes to validate feasibility. A prototype is a small app that demonstrates the flow of the UI or some minimal functionality. For example, a prototype could be created that only contains page navigation and commands, but doesn't implement any other functionality. By making the experience real through software, prototyping enables you to test and validate the flow of your design on devices such as tablets. You can also create prototypes that demonstrate core aspects of the app. For example, we created a prototype that performs validation of user input and notifies the user of any invalid input. Prototypes enable you to safely explore design approaches before deciding on the approach for the app. Although you can prototype during the planning phase of your app, try not to focus too much on writing code. Design the user experience that you want and then implement that design when it's ready.

For more info see Laying out your UI, Laying out an app page, and Responsive design 101 for Universal Windows Platform (UWP) apps.

[Top]

Deciding what Windows features to use

When planning a new app it's important to provide an experience that's consistent with other Windows Store apps. Doing so will make your app intuitive to use. We researched the features that the Windows platform provides by looking at the Index of UX guidelines for Windows Store apps, by prototyping and team discussion, and by brainstorming which platform features would best support our app flow.

[Top]

Deciding how to monetize the app

Although AdventureWorks Shopper is a free app, its purpose is to drive sales for AdventureWorks through customers placing and paying for orders. In order to significantly increase the number of users who could use the app we decided to make it world-ready. Being world-ready not only means supporting localized strings and images, it also means being aware of how users from different cultures will use the app. For more info see Guidelines for globalization and Guidelines for app resources.

For more info about monetizing your app see Plan for monetization and Advertising Guidelines.

[Top]

Making a good first impression

Windows Store apps should convey their "great at" statement to users when they first launch the app. After referring back to our "great at" statement (AdventureWorks Shopper is great at letting users easily and efficiently order products from AdventureWorks) we realized that product promotion was key to allowing users to easily and efficiently order products from AdventureWorks. This could be enabled by:

  • Having a live tile, that uses tile notifications to promote products. When a user leaves the app, we wanted to maintain a good impression by regularly updating the live tile with product offers.
  • Using the splash screen to express the app's personality. We chose a splash screen image that fits the AdventureWorks branding and that reinforces the whole user experience.
  • Having a home page that clearly shows the primary purpose of the app. Users will be more likely to explore the rest of the app if their initial impression is favorable.

[Top]

Validating the design

Before beginning development, we presented our mockups and prototypes to stakeholders in order to gain feedback to validate and polish our design. We also cross-checked the design against the Index of UX guidelines for Windows Store apps to ensure that we complied with the Windows Store user experience guidelines. This prevented us from having to make core design changes later in the development cycle.

[Top]