Guidance for shopping apps

1. Guidance for shopping apps Mark Hopkins Program Manager, Windows Scenario Adoption 2-111

2. Agenda • Realizing the opportunity • User journey • Platform features for shopping apps • Completing the sale • Branding

3. Realizing the opportunity • Engage users deeply • Tailor the UX • Touch is a first-class citizen • Windows Store apps are fast, fluid • Apps are more personal • Reimagining the purchase process

4. User journey • App hub • Catalog experience • Buying a product • Checkout experience

5. App hub • The first thing your users see • Make products the hero • Content before chrome • Think about: app bar, content prioritization

6. Catalog experience • One way to get to products • Searching and filtering is key • Stand out from the crowd • Think about: layout, app bar, search contract

7. Buying a product • Compelling and easy to buy • Informed simplicity • Focused, flat designs • Think about: app bar, sharing

8. Checkout experience • Fewer steps == better • Carts should roam • Remember info in-app • Think about: app bar, share (after checkout)

9. Platform features for shopping apps • Sharing • Search and filtering • Settings • Live tiles and toast notifications • App bar • Roaming data

10. Sharing • Way to engage users • Focus on your data • Think about: share target opportunities

11. Search and filtering • Search everything, search everywhere • Frequency == prominence • Return results fast, let users filter • Think about: filtering on AppBar, layout

12. Settings • Login/Logout • Account info • Payment data • Privacy Policy • Location

13. Live tiles and toast notifications • Ambient vs. time-sensitive • Bring your brand to your tile • Friends don’t let friends overdo toast notifications

14. App bar • Use to focus on content • Navigation on top bar • Contextual actions on bottom bar • Good place for filtering controls

15. Roaming data • Wish list • Shopping cart • Account info • Recently viewed items

16. Completing the sale • Finishing the sale within the app • Web-based solution in an IFrame • Payment options

17. Finishing the sale within the app • End-to-end shopping scenario • Consistent user experience • Keep the user focused • Context switches cost a lot

18. Web-based solution in an IFrame • Limited support for touch • Navigation issues Large touch targets Use IFrames purposefully

19. Payment options • Your own commerce solution • Third-party solutions • In-app purchase

20. Branding • Let your brand shine • Tie the app to your marketing • Brand your Windows Store listing

21. Let your brand shine • Bring your brand end-to-end • Your app is uniquely yours • Every pixel matters • Think about: colors, fonts, live tile

22. Tie the app to your marketing • Bring apps into dialogue • Build apps that you would prefer users to engage with • Drive app adoption for residents • Think about: app bridge on IE, protocol handlers

23. Brand your Windows Store listing • Use compelling imagery • Provide promotion images when submitting • Set your application color • Localize

24. Resources • Index of UX guidelines for Windows Store apps • http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx • Designing UX for apps • http://msdn.microsoft.com/library/windows/apps/hh779072/ • MSDN Magazine Windows 8 Special Issue • http://msdn.microsoft.com/en-us/magazine/jj660298.aspx • MSDN Magazine Design and UX column • http://msdn.microsoft.com/en-us/magazine/jj651577.aspx Please submit session evals on the Build Windows 8 App or at http://aka.ms/BuildSessions

25. Resources • Develop: http://msdn.microsoft.com/en-US/windows/apps/br229512 • Design: http://design.windows.com/ • Samples: http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples • Videos: http://channel9.msdn.com/Windows Please submit session evals by using the Build Windows 8 app or at http://aka.ms/BuildSessions