Designing the AdventureWorks Shopper user experience (Windows Store business apps using C#, XAML, and Prism)
In this article we explain the design process for the AdventureWorks Shopper user experience and the Windows 8 features that were used as part of the reference implementation.
After you download the code, see Getting started with AdventureWorks Shopper for instructions on how to compile and run the reference implementation, as well as understand the Microsoft Visual Studio solution structure.
- 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.
- Which Windows 8 features to consider as you plan your app.
- Windows Runtime for Windows 8
- Extensible Application Markup Language (XAML)
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 Windows 8 features you want to include. We recommend that you follow these steps:
- Decide the user experience goals.
- Decide the app flow.
- Decide what Windows 8 features to include.
- Decide how to monetize your app.
- Make a good first impression.
- Validate the design.
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:
- Outline the flow of the app. What interaction comes first? What interaction follows the previous interaction?
- Storyboard the flow of the app. How should users move through the UI to complete the flow?
- Prototype the app. Try out the app flow with a quick prototype.
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 8 features to use.
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.
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.
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.
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 Windows Developer Center, and by prototyping and team discussion. We brainstormed on which platform features would best support our app flow and decided on the features outlined here.
- Splash screen. The splash screen will be used to smooth the transition between when users launch the app and when it's ready for use. The splash screen should reinforce the AdventureWorks Shopper brand to users, rather than distract them or advertise to them. For more info see Guidelines for splash screens.
- Controls. The app's UI will showcase its content. Distractions will be minimized by only having relevant elements on the screen so that users become immersed in the content. For more info see Index of UX guidelines for Windows Store apps.
- Suspend and resume app state. Users will switch away from the app and back to it, and Windows will terminate it in the background when it's unused. The AdventureWorks Shopper reference implementation will save and resume state when required, in order to maintain context. This state includes the scroll position on the product catalog pages and partially entered data on the checkout pages. For more info see Handling suspend, resume, and activation, and Guidelines for app suspend and resume.
- Globalization, localization, and app resources. Because the app could be used worldwide, the app will be designed so that resources, such as strings and images, are separated from their code to help make localization easier. For more info see Guidelines and checklist for globalizing your app and Guidelines for app resources.
- Accessibility. The app will be available to all users regardless of their abilities, disabilities, or preferences. For more info see Plan for accessibility.
- Layout and navigation. The UI will have a layout that users can intuitively and easily navigate. For more info see Navigation design for Windows Store apps.
- Layout and commanding. Commands will be placed consistently on the UI, to instill user confidence and to ease user interaction. For more info see Laying out your UI and Commanding design for Windows Store apps.
- Layout and page design. Pages in the app will use a grid layout so that they adhere to the Windows 8 silhouette. For more info see Laying out an app page.
- Typography. The app UI will be clean and uncluttered, and so will use appropriate font sizes, weights, and colors. For more info see Guidelines for fonts.
- Flexible layouts. The app will handle landscape and portrait orientations and let users manipulate the content to fit their needs and preferences. For more info see Guidelines for layouts.
- Snapped and fill views. The app will be designed for users' multi-tasking needs. Users will be able to use the app while they perform tasks in another app, and so snapped views must be useful and maintain context when switching between snapped and unsnapped views. For more info see Creating and navigating between pages and Guidelines for snapped and fill views.
- Scaling to screens. The app UI must look good on different sized devices, from small tablet screens to large desktop screens. For more info see Guidelines for scaling to screens.
- Scaling to pixel density. Images in the app must look good when scaled. Windows scales apps to ensure consistent physical sizing regardless of the pixel density of the device. For more info see Guidelines for scaling to pixel density.
- Resizing. The app must look good when Windows resizes it. Windows automatically resizes apps when the user changes the view state. For more info see Guidelines for resizing.
- Touch interaction. The app will provide a consistent and well-performing set of user interactions. For more info see Using touch and Guidelines for common user interactions.
- Touch targeting. The app will provide appropriately sized and located touch targets. For more info see Guidelines for targeting.
- Visual feedback. The app will provide clear visual feedback for user actions. For more info see Guidelines for visual feedback.
- Semantic Zoom. The app will help users to navigate large amounts of related data. For more info see Using touch and Guidelines for Semantic Zoom.
- Swipe and cross-slide. The app will use this standard interaction to select items from a list. For more info see Using touch and Guidelines for cross-slide.
- Panning. The app will use this standard interaction to browse through content. For more info see Using touch and Guidelines for panning.
- Selecting text and images. The app will use this standard interaction with content. For more info see Using touch and Guidelines for selecting text and images.
- Mouse interaction. The app will provide a good mouse experience for users without touch screens. For more info see Using touch and Responding to mouse interactions.
- Keyboard interaction. The app will provide a complete interaction experience for users who prefer using a keyboard. For more info see Responding to keyboard interactions.
- Search. The app will let users search the app's content quickly from anywhere in the system. For more info see Guidelines and checklist for search.
- App tiles and secondary tiles. The app's tile will engage users, encouraging them to use the app, and keeping the app feeling fresh and relevant. In addition, you can use secondary tiles to promote interesting content from your app on the Start screen, and let users launch directly into a specific experience within your app. For more info see Working with tiles, Guidelines and checklist for tiles and badges, and Guidelines and checklist for secondary tiles.
- Notifications. The app's tile will be updated with new content through periodic notifications. For more info see Guidelines and checklist for periodic notifications.
- Roaming. The app will roam the user credentials. For more info see Managing application data and Guidelines for roaming app data.
- Settings. The app's settings will be accessible from one UI surface, so that users can configure the app through a common mechanism that they are familiar with. We decided that billing, shipping, and payment data should be accessed from the Settings charm. Initially we used flyouts to display and enter this data, but after using the app we decided that it would be more appropriate to use a page. This removed the problem of a light dismiss on a flyout losing any data that the user entered. For more info see Managing application data and Guidelines for app settings.
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 and checklist for globalizing your app and Guidelines for app resources.
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.
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.
Build date: 10/12/2013