App Design Inspiration for Windows 8

Point of sale line of business app design inspiration for Windows 8 and Windows RTNovember 26, 2012

Abstract

This white paper provides inspirational guidance to app developers for designing point of sale (POS) line of business (LOB) apps for Windows 8 and Windows RT.

Disclaimer: This document is provided “as-is”. Information and views expressed in this document, including URL and other Internet website references, may change without notice. Some information relates to pre-released product which may be substantially modified before it’s commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here. You bear the risk of using it.

Some examples depicted herein are provided for illustration only and are fictitious. No real association or connection is intended or should be inferred.

This document does not provide you with any legal rights to any intellectual property in any Microsoft product. You may copy and use this document for your internal, reference purposes.

© 2012 Microsoft. All rights reserved.

Point of sale line of business app design inspiration for Windows 8 and Windows RT - 2

ContentsIntroduction...................................................................................................................3Understanding the scenarios.........................................................................................3Scenarios.......................................................................................................................4

Starting the workday.................................................................................................4Managing the customer queue.................................................................................5Choosing products to purchase.................................................................................6Completing the sale.................................................................................................15Browsing sales Info..................................................................................................19

For more info...............................................................................................................19

November 26, 2012© 2012 Microsoft. All rights reserved.


IntroductionThis white paper describes a fictional point of sale (POS) line of business (LOB) Windows Store app for Windows 8 and Windows RT. You can gain inspiration for the design of your own POS app by reviewing the scenarios in this white paper and learning how the Microsoft design style is used to create this app.

Understanding the scenariosThe POS app described in this white paper uses Microsoft design style to create an engaging and productive POS experience for both salespeople and customers.In these scenarios, the salesperson works at an electronics retail store that sells items such as PCs, laptops, mobile phones, cameras, and their corresponding accessories. The salesperson fulfills two primary roles: to help a customer choose the right products, and to guide the customer through the purchase process.For these particular scenarios, the POS app enables the salesperson to:

Attend to an individual customer from a queue of waiting customers.

Add new customer accounts into the system and retrieve existing customer account info.

Show the customer a product's details and answer the customer's questions about the product that's shown.

Add products to the customer's shopping cart from either the system's products catalog or by using a barcode scanner.

Complete the purchase by using the customer's credit card.

Report aggregate purchase info to the salesperson's supervisor to help improve the salesperson's future sales performance.

Although not shown here, the POS app also enables the salesperson to:

View the customer's past shopping history.

Apply discounts to the final sales price by using coupons or other promotions.

These scenarios don’t cover the following, but you might want to consider them as you develop your own app:

Enable the customer to customize a chosen product.

Enable the customer to complete the purchase without a salesperson's help.

Enable the retail store's management team to distribute pending sales orders among available salespeople, or to order products from manufacturers when those products' inventories are low.

Enable the salesperson to schedule a delivery instead of an in-store pick up, including setting a delivery date and time, setting a delivery location, and adding shipping and handling costs to the sales order.



Scenarios

Starting the workdayAs the salesperson starts his workday at the store, he picks up his Windows 8 tablet. On the Start screen, the POS app's tile cycles between showing him summarized info about his last sale and an important promotional sales offer that he should know about, as shown in Figures 1 and 2.

Figure 1. Live tile showing summarized info about the salesperson’s last sale.

Figure 2. Live tile showing info about an important promotional sales offer.

The salesperson taps the tile and then signs in to the POS app with his assigned credentials.

This scenario demonstrates tiles, the Start screen tiles that represent and launch an app. Tiles can also display a continuously changing set of content that can be used to keep the user aware of events associated with that app. For more info, see:

Index of UX guidelines for Windows Store apps , "Tiles and notifications" section

Tiles, badges, and notifications

Tile and tile notification overview

Quickstart: Creating a default tile using the Microsoft Visual Studio manifest editor

Quickstart: Sending a tile update

Guidelines and checklist for tiles and badges


http://go.microsoft.com/fwlink/p/?LinkId=272636








Managing the customer queueBefore the salesperson started his workday, a greeter at the store's front door has already welcomed several customers and has added them to the waiting queue, as shown in Figure 3.

Figure 3. Adding a customer to the waiting queue.

After signing in, the app shows the salesperson info about the customers in the waiting queue, what each customer is looking for, and how long each customer has been waiting, as shown in Figure 4.

Figure 4. App hub with waiting customers queue info.

The salesperson calls out the name of the customer who is at the front of the queue.The customer waves his hand, and the salesperson walks up to him to help him with questions and buying decisions.



This scenario demonstrates a combination of flat and hierarchical systems of navigation for Windows Store apps. Specifically, the top navigation bar demonstrates the flat system, while the area beneath the top navigation bar demonstrates the hierarchical system. For more info, see:

Index of UX guidelines for Windows Store apps , “Microsoft design” section

Navigation design for Windows Store apps , “Hierarchical system” and “Flat system” sections

Laying out an app page

Choosing products to purchaseAs the salesperson and the customer begin to talk about various products, the salesperson taps the Products tile to show the products catalog, as shown in Figure 5.

Figure 5. The products catalog.




http://go.microsoft.com/fwlink/p/?LinkID=272630


The customer wants to begin discussing PCs and laptops, so the salesperson taps the PCs and Laptops heading to show more detailed info about PCs and laptops, as shown in Figure 6.

Figure 6. Products page.

The customer then wants to know more about a specific product, so the salesperson taps the corresponding tile to show detailed info about that product, as shown in Figure 7.

Figure 7. Product details page.



As the salesperson and the customer continue talking about the product, the customer wants to see some product reviews. The salesperson taps the Reviews heading to show all available reviews for that product, as shown in Figure 8.

Figure 8. Product reviews page.

The customer wants to look at other products. The salesperson can quickly navigate between various products by doing one of the following:

From the product catalog in Figure 5, pinching to zoom out to a summarized view of product categories, as shown in Figure 9.

From the products page in Figure 6, pinching to zoom out to a summarized view of price categories, as shown in Figure 10.

From the product details page in Figure 7, pinching to zoom out to a summarized view of product info categories, as shown in Figure 11.

Figure 9. Summarized view of product categories.



Figure 10. Summarized view of price categories.

Figure 11. Summarized view of product info categories.



The salesperson knows that there’s an interactive video for a particular product on the store’s website. He wants to wants to open a web browser and show the customer this video in order to help close the sale. However, the salesperson also wants to leave the POS app open but docked to the left side of the screen. He swipes the POS app to the left edge of the screen to snap it to the side, also known as snapped view, as shown in Figure 12, and then opens the web browser on the right side, also known as fill view.

Figure 12. Snapped view of products catalog.



While the web browser is still open on the right side, the salesperson can navigate in snapped view between various pages such as the products page, the product details page, and the reviews details page, as shown in Figures 13, 14, and 15.

Figure 13. Snapped view of products page.



Figure 14. Snapped view of product details page.



Figure 15. Snapped view of product reviews page.

When the salesperson wants to return to the app’s original view, he swipes the snapped view toward the right side of the screen to return to full screen view.After reading the reviews, the customer decides to buy that product. The salesperson taps the back button to return to the PCs and Laptops view in Figure 6, presses and holds the product's tile, and then taps Add to Cart in the app bar. The salesperson repeats the preceding process for any additional products that the customer wants to buy.



At any time during the process, the salesperson can add a product to the customer’s electronic cart by using a handheld scanner to scan a barcode on a product’s physical box, as shown in Figure 16.

Figure 16. Adding a product to the customer’s electronic cart after scanning a barcode.

This scenario demonstrates the following:

Navigating between hub pages and details pages. For more info, see Navigation design for Windows Store apps, “Navigation anatomy” section.

The app bar, a container control that holds user interface components for commanding and experiences. For more info, see:

Commanding design for Windows Store apps , “Use the app bar” and “Command placement” sections

Laying out your UI , “App bars” section

Quickstart: adding app bars

How to add contextual commands to an app bar

How to share an app bar across pages

AppBar class

Guidelines and checklist for app bars

Semantic zoom, a touch-optimized technique for presenting and navigating large sets of related data or content within a single view. For more info, see:

Navigation design for Windows Store apps , “Navigation anatomy” section

Quickstart: adding SemanticZoom controls

SemanticZoom class

Guidelines for Semantic Zoom

Guidelines and checklist for SemanticZoom controls

Snapped view, which shows the app snapped to a narrow region of the entire screen. For more info, see:

















Index of UX guidelines for Windows Store apps , “Snapping and scaling” section

Laying out your UI , “View states” section

Guidelines for layouts

Guidelines for snapped and fill views

Completing the saleThe customer has finished shopping and asks the salesperson to be checked out. The salesperson presses and holds the customer's tile near the top of the screen in Figure 4 and then taps Check Out in the app bar.First, the salesperson confirms the customer's order, and then he taps Confirm & Pay, as shown in Figure 17.

Figure 17. The customer’s electronic shopping cart.







The app confirms the sales price and is now ready for the salesperson to swipe the customer's credit card, as shown in Figure 18.

Figure 18. Ready to enter the customer’s credit card info.

The customer confirms details about the credit card and then taps Next, as shown in Figure 19.

Figure 19. Confirming the customer’s credit card info.



The sale is approved, and the customer is asked to approve the amount. The customer agrees by tapping Yes, as shown in Figure 20.

Figure 20. The customer confirms the sales amount.

The app asks the customer to sign for the sale. The customer signs and taps Done, as shown in Figure 21.

Figure 21. The customer signs for the sale.



The app shows the final Order Complete screen, as shown in Figure 22.

Figure 22. The completed order.

The salesperson asks the customer if she would like the receipt printed or emailed to her. The customer wants it printed. The salesperson taps Print Receipt, gets a copy of the receipt from a nearby printer, and hands the receipt to the customer. At the same time, another copy of the receipt is printed in the back storeroom. An inventory specialist in the storeroom puts the products on a cart and brings the cart to the front of the store where the salesperson and customer are waiting. The salesperson and customer confirm that the correct products were brought from the storeroom. The salesperson thanks the customer for her business, and then the inventory specialist helps the customer get the products into her car.This scenario demonstrates the following:

Inking. For more info, see Quickstart: Capturing ink data and Windows.UI.Input.Inking namespace.

Printing. For more info, see Printing and Quickstart: Printing from your app.







Browsing sales InfoWhen the salesperson's workday is done, but before he signs out of the app, he taps My Profile and meets briefly with his with his sales manager to review the day's sales transactions and sales so far against his monthly and yearly sales targets, as shown in Figure 23.

Figure 23. Reviewing the day’s sales transactions and sales targets.

For more info Windows Dev Center for Windows Store apps

Learn to build Windows Store apps

Designing UX for apps

Windows 8 Product Guide for Developers

Developer downloads for programming Windows Store apps

Windows Store app samples

Developer support for Windows Store apps

Community resources






http://go.microsoft.com/fwlink/p/?linkid=244361




Documents

App Design Inspiration for Windows 8