The shopping app idea book describes a fictional shopping app for Windows 8. You can gain inspiration for the design of your own shopping app by reviewing the scenarios in this topic and seeing how the Windows 8 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 Browsing | Search and Snap | 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.
|
Matt Berg is using his Windows 8 tablet on the bus as he travels home from the office.
|
|
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.
|
|
Matt needs a new jacket, so he clicks on the "Over the Shoulder" category.
|
|
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.
|
|
Matt pinches to activate semantic zoom, which enables him to quickly view and navigate the list of items.
|
|
After clicking on the "Jackets" section, Matt selects a jacket to see it in the item view, and adds it to his shopping cart.
|
|
Matt completes his shopping by buying the jacket along with a shirt that he had added to his shopping cart earlier.
|
Summary of live tiles and browsing
In the first scenario, we see that...
- 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:
- Live tile guidance
- Live tile sample
- Semantic zoom guidance
- Semantic zoom sample (C#/VB/C++)
- Semantic zoom sample (JavaScript)
Drive user engagement
You can use the Microsoft design language to engage users when they are ready to shop by implementing the Search contract and enabling user multi-tasking by using the snapped view.
|
Jon Rodman is using his Windows 8 tablet to browse a style blog.
|
|
From Internet Explorer, or any other app, Jon can bring in the Search charm from the right and search for a similar jacket.
|
|
|
|
Jon selects the "Head to Toe" app which displays his search results for the term "Jacket".
|
|
Jon uses a filter to narrow the search results based on price. He then selects an item.
|
|
Jon snaps 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.
|
|
While still in snap view, Jon decides to complete his purchase.
|
Summary of driving user engagement
In the second scenario, we see that...
- The Search contract puts your app in the potential target list when your customer intends on shopping.
- A fully-featured snapped view lets customers browse and compare your content to other apps and web sites.
For information on search and snapped view, see the following:
Connect with Share
You can use the Microsoft design language to connect users to any other app, contact, or social network.
|
David Hamilton just bought a new jacket. After placing his order, he is encouraged to share the news.
|
|
David uses the Share contract to share the promotional code with his friends.
|
|
|
Summary connect users with Share
In the third scenario, we see that...
- You can make your content into a share source and Windows 8 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:
Explore the possibilities
Windows 8 is full of new features that can make your app shine. For more information, see the Windows 8 Product Guide for Developers.
Related topics
- Making great Windows Store apps
- User experience (UX) design patterns for Windows Store apps
- UX guidelines for Windows Store apps
- Samples and Guidance
- 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
- Snapped view sample
- Snapped view guidance
- Share source sample
- Share target sample
- Share guidance
Build date: 3/12/2013
