Designing UX for Shopping apps – Windows 8

 

Choosing the Colors:

Most of the Apps like ebay, amazon, ocado etc have very simple and clean UV design which highlights the items or the content. Usually the background of the canvas is set to WHITE or preferably light color or a very light blurred image which doe snow meddle with the content. To add color in the app use of solid colors for buttons, menu items, and option grids to make it look more vibrant.

clip_image002

Your content shines in your app without any chrome and enables users to be immersed in the experience that they care about.

Layout and navigation

All space on the landing page is dedicated to what this app is great at: items to shop for.

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

The navigation pattern you choose will be informed by the types of scenarios your app will support. If you have multiple rich experiences in your app (in this case, presenting a wide variety of products and items), with organization and structure between them, a hierarchical pattern can help bring all of your content to the top level instead of burying it behind menus or tabs. However, if your app doesn’t have a lot of information density or scenarios that need hierarchy and structure, consider a flat pattern that lets users swiftly navigate between the experiences in your app. Apps with "master/details" views (seller, details of the items, shipping details etc) might use a list view to best showcase their content.

Hierarchical pattern

Productivity apps that have a hierarchical structure and a big data set, can use a hierarchical pattern that showcases all of the user’s content at the top level. This model delights users by putting all of your content right in front of them.

clip_image004

Use Search contract to centralize the search experience

Instead of creating a search input interface that is permanently part of the app canvas, we should implement the search contract. Users can consistently invoke Search through the charms, and the results can be presented in the app in a way that is natural for the content. By using the Search contract, users can invoke the Search charm from anywhere in the system to look for content from apps that support the contract.

clip_image006

Use the Share contract to reach more destinations and people you care about
Let the user share the items in the app to social networks.

The sharing capability into the Windows Store app, we use the system's Share contract. This contract simplifies design and development because there is no need to connect with every service that a user might want to use. In addition to social networks, users can also save content to other services, such as a note taking app like Notespace or EverNote. Using just a small amount of code, our app becomes connected with every Windows Store app that has implemented the Share contract. There's no need to deal with API changes to external social networking sites or web services. From the user's perspective, they can always share from a consistent location by accessing the charms bar and opening the Share pane.

clip_image008

Semantic Zoom

Implementing Semantic Zoom when the list of item is big is advisable as it enables user to browse quickly and select only those items user is interested in. In shopping apps usually the content is big (list of items/product), do not make the user scroll through a big panel of items and it can get frustrating.

In the app ENVVIED, they have used flyouts very innovatively. They give full view of the items presented by the models with appbaricon style buttons on the items with bold colors to highlight the item and displays details on flyout when clicked

clip_image010

U can include flyouts everywhere in your app as it makes more user interactive, sign in, fliters, and even toggle options.

Snap View

clip_image012

Windows 8 lets users multitask by "snapping" an app next to another app. The snapped view is a great way to increase the app's time on screen and engage users for longer periods. It's easy for a user to change the main app and the snapped app by manipulating the splitter between the two, so it is important to maintain context across resizes. We don't want users to lose app state as a result of resizing their app.

Live Tiles and Notifications

Use live tiles to draw user’s attention towards the app. Enable Live tile experience to show news products or offers or discounts so keep the user hooked to the app.

clip_image014

Conclusion

When building a Windows Store app based on an existing shopping website, always ask yourself what your app is best at. When you have an answer, optimize your Windows Store app for that scenario. Always remember to emphasize content over chrome: use built-in commands in the system like Share, Search, Settings to provide access to common functionality through a familiar and intuitive mechanism. Hide commands off-screen when not needed using the app bar and semantic zoom controls. And take advantage of live tiles and notifications so users continue to derive value from your app, even when it’s not running. If you do these things, you'll end up with a compelling Windows Store app that your users will love, and that can help you grow your business.

Here is the list of some very cool apps that can help you design your app.

(app links are given)

CBAZAAR | Ebay | Amazon | Sharaf DG | Ocado | ENVVIED

https://31daysofwindows8.com/

https://msdn.microsoft.com/library/windows/apps/hh779072

https://msdn.microsoft.com/en-US/library/windows/apps/jj635241

https://msdn.microsoft.com/en-us/library/windows/apps/jj659079.aspx

For more Updates on Microsoft Technologies follow us on twitter @msgulfcommunity

Developers can join us on our FB Group Windows 8 Warriors for more insight on developing W8 and WP8 apps!