Introduction to Designing Windows 8 Apps
3 likes1,343 views
The document outlines best practices and principles for designing Windows 8 apps, highlighting modern UI styles and the importance of user experience. It covers case studies, including the redesign of the Rhapsody and Walkseattle apps, emphasizing navigation, chrome reduction, and maintaining brand consistency. Key principles include attention to craftsmanship, fluidity, and authenticity in digital design.
Introduction to Designing Windows 8 Apps
- 1. Introduction to Designing Windows 8 Apps
- 2. The Blink Story • Established in 2000 in Seattle • User Experience Specialists • Domain experts in Human interfaces • Research-driven design • 35 Employees, including 9 PhDs
- 3. Clients
- 4. Our Panel and Agenda Joe Welinske Valentina Ferrari Geoff Harrison • Quick Intro to the Windows 8 UI • A look at Windows 8 Design Principles • Case Study Examples: Rhapsody and WalkSeattle • Lessons Learned • Q&A 4
- 5. Windows 8 and Modern UI Style • Modern UI Style is the new Microsoft design language • It is comprised of a set of principles that apply to Windows Phone, Windows 8, and Xbox • Navigation and interaction patterns do differ between them 5
- 6. Blink and Windows 8 • Working with Modern UI for about a year • Windows 8 Development Partner • Presented design practices at Microsoft developer conferences • Have designed new and ported existing apps to Windows 8 • Have a design principles reference site at blinkux.com/metro 6
- 7. Creating a Windows 8 App • Have a perspective - Elevator pitch - What singular thing is it great at? • Define the user activities • Decide how it will make money • Conform to the structure, but wear your own brand 7
- 8. Windows 8 and Modern UI Style • Modern UI Style is the new Microsoft design language • It is comprised of a set of principles that apply to Windows Phone, Windows 8, and Xbox • Navigation and interaction patterns do differ between them 8
- 9. Modern UI Style and Windows 8 Basics
- 10. Five Principles 1. Pride in Craftsmanship Pay attention to details. 2. Be Fast and Fluid Use animations to make the application feel responsive. 3. Authentically Digital Avoid skeumorphic design. 4. Do More with Less Try to remove buttons and chrome from the screen. Keep your application focused around your core task. 5. Win as One Try to use the UI patterns created by Microsoft. Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx 10
- 11. Five Principles 1. Pride in Craftsmanship Pay attention to details. 2. Be Fast and Fluid Use animations to make the application feel responsive. 3. Authentically Digital Avoid skeumorphic design. 4. Do More with Less Try to remove buttons and chrome from the screen. Keep your application focused around your core task. 5. Win as One Try to use the UI patterns created by Microsoft. Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx 11
- 12. Screen Hierarchy Hub Screen Section Screen Detail Screen 12
- 13. Navigation Patterns Section Labels Header Menu Charms Navigation Bar 13
- 14. Chrome and Navigation Designing the Rhapsody app
- 15. Starting Point: Android App Task Redesign the Rhapsody Android App to fit Windows 8. Challenge Remain consistent with other Rhapsody apps that users are used to. 15
- 16. Design Process 1. Studied the Android application 2. Sketched layout and information architecture 3. Wireframes 4. Created and tested paper prototype 5. Iterated on the wireframes 6. Visual Design 16
- 17. Three Key Problems 1. Reorganize the Navigation 2. Remove the Chrome 3. Achieving a 3-level hierarchy 17
- 18. Redesign the Navigation Task Reorganize the application to use the Windows 8 navigation patterns. Challenge Make it easy to navigate between various sections of the applications, and to return to the home screen. 18
- 19. Redesign the Navigation Solution 1. Navigation Bar 2. Header Menu 19
- 20. Remove the Chrome Challenge Make sure that Rhapsody users can easily access the Music Player. 20
- 21. Remove the Chrome Task Hide the Music Player. Solution Place the Music Player in the Navigation Bar so it is accessible from every page, without always being on the screen. 21
- 22. Remove the Chrome Challenge • All Rhapsody applications have a small add button next to each track title • In Windows 8, however, such buttons are considered chrome. Solution We decided to remain consistent with other Rhapsody applications and keep the button. 22
- 23. Achieving a 3-level Hierarchy Home Challenge The original Rhapsody app has both a wide Radio Browse My Music Player and a deep navigation structure. Genre Solution Sub-Genre • Use a Header Menu or Navigation Bar Album to make sure that the application is easy to navigate from any level of the hierarchy. • Use filters at the category level to remove some of the levels. 23
- 24. Beyond the Templates Designing the WalkSeattle app
- 25. The Templates • Created by Microsoft to help designers and developers design their apps • Standard grid-based layout with rectangular items 25
- 26. Going Beyond the Templates Why? • A lot of applications follow the templates too rigidly resulting in cookie cutter apps • Going beyond them is creates a more unique experience and a stronger brand How? • Follow the grid but play with shapes and layouts – not everything has to be rectangular • Make sure that your design still follows the principles 26
- 27. WalkSeattle – Version 1 • Started off following the templates, with the groups of rectangles. • But we wanted to create something different… 27
- 28. WalkSeattle – Final Version • Starting position places content on the left and right • Shapes that reflect the brand 28
- 29. Wrapping Up Joe Welinske Valentina Ferrari Geoff Harrison • We’ll send you a link to the recording and slides. • We will be having another webinar soon about designing with kids in mind. • UX Tools Survey in Progress conveyux.com/ux-tools-survey/ 29
- 30. 30
- 31. Windows 8 Resources • Making Great Windows Store Apps • Planning Windows Store Apps • Navigation Design for Windows Store Apps • Commanding Design for Windows Store Apps • Touch Interaction • PSD Resources from Microsoft • UX Guidelines for Metro Style Apps • Scaling to different screen • Gestures • Skeuomorphic Design 31
- 32. Thank You