Shopping apps

Applies to Windows and Windows Phone

The shopping app idea book describes a fictional shopping app for Windows 8.1. You can gain inspiration for the design of your own shopping app by reviewing the scenarios in this topic and seeing how the Microsoft design language is utilized in the app.

Sample code available: Tallan Inc. has created a great sample app based on the shopping app idea book. You can download their sample app to see a real implementation of the features described in this idea book and more. Download the Tallan sample shopping app here.

Shopping app scenarios

The shopping app described in this topic uses Microsoft design features to create an engaging shopping experience for users.

Live tiles and browsingSearch and window resizingShare
image of live tiles and browsingimage of searchimage of share

 

Draw users into the content of your app

You can use the Microsoft design language to create a casual browsing experience that is fun, easy, and powerful. You can also use live tiles to draw users into your app. Follow along with this scenario to see how you can make your shopping app engaging.

image of live tiles and browsing

Matt Berg is using his Windows 8.1 tablet on the bus as he travels home from the office.

image of live tiles and browsing

A live tile that says "Just Arrived:" alerts Matt of the arrival of a new featured fall fashion. Matt is interested, so he clicks on the tile to enter the app.

image of live tiles and browsing

Matt needs a new jacket, so he clicks on the "Over the Shoulder" category.

image of live tiles and browsing

The category view is laid out horizontally, with a detailed view of all of the options shown on the same canvas. Matt can browse without having to navigate through any content hierarchy.

image of live tiles and browsing

Matt pinches to activate semantic zoom, which enables him to quickly view and navigate the list of items.

image of live tiles and browsing

After clicking on the "Jackets" section, Matt selects a jacket to see it in the item view, and adds it to his shopping cart.

image of live tiles and browsing

Matt completes his shopping by buying the jacket along with a shirt that he had added to his shopping cart earlier.

image of live tiles and browsing

 

Summary of live tiles and browsing scenario

In this scenario, we see use cases that leverage the following design elements:

  • Live tiles draw users back into your app by displaying information that is relevant to the user.
  • Your content shines in your app without any chrome and enables users to be immersed in the experience that they care about.

For information on live tiles and semantic zoom, see the following:

For help choosing the best navigation pattern for your app, see Navigation patterns.

See the Flat navigation pattern in action as part of our App features, start to finish series.

Drive user engagement

You can use the Microsoft design language to engage users when they are ready to shop by adding a search box, by implementing the Search contract and enabling user multi-tasking, and by designing apps that work well when they are resized to narrow widths.

image of live tiles and browsing

Jon Rodman is using his Windows 8.1 tablet to browse a style blog.

image of live tiles and browsing

From Internet Explorer, or any other app, Jon can bring in the Search charm from the right and search for a similar jacket.

image of live tiles and browsing

image of live tiles and browsing

Jon selects the "Head to Toe" app which displays his search results for the term "Jacket".

image of live tiles and browsing

Jon uses a filter to narrow the search results based on price. He then selects an item.

image of live tiles and browsing

Jon resizes the app to the left so that he can compare the item with the jacket from the blog. Satisfied with his choice, Jon adds the jacket to his cart.

image of live tiles and browsing

While still at the narrow width, Jon decides to complete his purchase.

image of live tiles and browsing

 

Summary of driving user engagement

In this scenario, we see use cases that leverage the following design elements:

  • The Search contract puts your app in the potential target list when your customer intends on shopping.
  • An app that works well at narrow widths lets customers browse and compare your content to other apps and web sites.

For information on search and window sizes, see the following:

Connect with Share

You can use the Microsoft design language to connect users to any other app, contact, or social network.

image of live tiles and browsing

David Hamilton just bought a new jacket. After placing his order, he is encouraged to share the news.

image of live tiles and browsing

David uses the Share contract to share the promotional code with his friends.

image of live tiles and browsing

 

Summary connect users with Share

In this scenario, we see use cases that leverage the following design elements:

  • You can make your content into a Share source and Windows 8.1 connects you to other apps, email, and social networks.
  • You can make your app into a Share target and receive content, links, or any other type of structured data.

For information on share, see the following:

Related topics

Meet Windows Store apps
UX guidelines for Windows Store apps
Sample shopping app
Live tile sample
Live tile guidance
Semantic zoom sample (C#/VB/C++)
Semantic zoom sample (JavaScript)
Semantic zoom guidance
Search sample
Search guidance
Windows size guidance
Narrow layout guidance
Share source sample
Share target sample
Share guidance

 

 

Show:
© 2014 Microsoft