Designing Windows 8 application - Microsoft Techdays 2013
•
9 likes•5,666 views
Presenting the design and UX paradigms when designing for Windows 8. The presentation is focused around the 5 design principles from the Microsoft design guidelines for Windows 8 applications. The presentation was performed during the Microsoft TechDays 2013 in Helsinki, Finland by Markus Jönsson & Arturs Polis.
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Designing Windows 8 application - Microsoft Techdays 2013
Similar to Designing Windows 8 application - Microsoft Techdays 2013 (20)
Recently uploaded
Recently uploaded (20)
Designing Windows 8 application - Microsoft Techdays 2013
- 1. Windows 8 and how to design Régis Windows Store Laurent Director of Operations, apps Global Knowledge Competencies include: Gold Learning Silver System Management
- 2. Who Markus Jönsson UX/ UI Designer Designs and develops apps, websites and digital tools for many different clients. Arturs Polis CTO likes to facilitate Luxus’s designers, UX developers, and coders in producing consistent and well-thought digital solutions that meet and exceed the clients’ expectations.
- 3. Intro - Luxus Digital agency Helsinki, San Francisco and Singapore - What are we going to talk about Intro 5 Principles of good app design Designing your app Q&A #td2013fi
- 4. Windows 8 User Interface Quick recap
- 5. Why do you need to follow the design guidelines?
- 6. The five principles of good app design 1. Do more with less 2. Pride in craftsmanship 3. Be fast and fluid 4. Authentically digital 5. Win as one #td2013fi
- 7. 1. Do more with less
- 8. Focus - Solve for distractions, not discoverability. Let people be immersed in what they love and they will explore the rest. - Create a clean and purposeful experience by leaving only the most relevant elements on screen so people can be immersed in the content. #td2013fi
- 9. What are you best at? - What is your “best at” statement? - My app is best in its category at _______________. - Focus on what you are great at - Content before chrome #td2013fi
- 10. Content before chrome Traditional RSS app Windows 8 RSS app
- 11. From website to app 1. Layout and navigation 2. Commands and actions 3. Contracts: search, share, and settings 4. Touch 5. Scaling and views 6. Notifications #td2013fi
- 12. From website to app A. Top and left margins are consistent throughout an app. B. Use a consistent margin to separate different categories. C. Use a consistent margin to separate pictures within a category. This margin is smaller to convey page layout hierarchy. D. The group title of each category is also aligned to the grid. #td2013fi
- 13. From website to app #td2013fi
- 14. 2. Pride in craftsmanship
- 15. Pay attention to detail - Devote time and energy to small things that are seen often by many. - Engineer the experience to be complete and polished at every stage. #td2013fi
- 16. Use typography Typography #td2013fi
- 17. Align to grid Grid system #td2013fi
- 18. Align to grid Page header Content regions #td2013fi
- 19. Negative space Continuity in white space #td2013fi
- 20. 3. Be fast and fluid
- 21. Alive and touch first - Let people interact directly with content, and respond to actions quickly with matching energy. - Bring life to the experience, create a sense of continuity and tell a story through meaningful use of motion. #td2013fi
- 22. Support all inputs - Design touch-first - Add mouse, keyboard and pen support - All actions should be accessible using all input methods - Visual feedback for everything #td2013fi
- 23. Delight with motion - Use animations as part of the design - Use Expression Blend to design your animations #td2013fi
- 24. Think touch-first - Ergonomics and touch - Reading areas - Interaction areas for touch - Use the Windows 8 touch language #td2013fi
- 25. Reading areas Reading areas #td2013fi
- 26. Touch interaction areas Touch interaction areas #td2013fi
- 27. Touch language Windows 8 touch language #td2013fi
- 28. 4. Be authentically digital
- 29. Break away from physical world - Take full advantage of the digital medium. - Remove physical boundaries to create experiences that are more efficient and effortless than reality. - Embrace the fact that we are pixels on a screen. - Design with bold, vibrant and crisp colors and images that go beyond the limits of real world material. - Use motion meaningfully. #td2013fi
- 30. Stay connected - Connect to the cloud so that your users can stay connected to each other. - Be dynamic and alive with communication. - Share #td2013fi
- 31. Segoe font - Segoe UI font - Segoe UI Symbol - Glyphs #td2013fi
- 32. 5. Win as one
- 33. Ecosystem - Leverage the ecosystem and work together with other apps, devices and the system to complete scenarios for people. - Fit into the UI model to reduce redundancy. Take advantage of what people already know to provide a sense of familiarity, control, and confidence. #td2013fi
- 34. The Enablers - Consistent UI model - Contracts Search Share Devices Settings File picker - Charms #td2013fi
- 35. So, the five principles of good app design are: 1. Do more with less 2. Pride in craftsmanship 3. Be fast and fluid 4. Authentically digital 5. Win as one Windows 8 UX Fundamentals Training http://channel9.msdn.com/Events/Windows-Camp/Windows-8-UX-Fundamentals-Training-Workshop-2012 #td2013fi
- 37. Right tool for the job CORE AUTHORING DESIGN TASKS CODING TASKS TASKS Styling Control creation Code editing Path-editing Layout Refactoring VISUAL Animation BLEND Property editing Debugging Visual States Basic data STUDIO Code analysis Transitions View authoring Profiling
- 38. Checklist 1. Decide on basic elements of an app 2. Follow the design guidelines 3. Draw, discuss, refine 4. Be creative while following the best practices #td2013fi
- 39. Navigation structures Hierarchical Flat #td2013fi
- 40. Navigation structures Hierarchical Flat #td2013fi
- 41. Semantic zoom Semantic zoom #td2013fi
- 42. View states Full Snapped Fill #td2013fi
- 43. Live tile designs Live tile displaying image Live tile displaying text Source: http://www.windows8designhandbook.com/choosing-windows-8-live-tiles.html #td2013fi
- 44. Live tile designs Live tile displaying data and number counter Source: http://www.windows8designhandbook.com/choosing-windows-8-live-tiles.html #td2013fi
- 45. Sketching UI
- 46. Sketching UI
- 48. How to prototype - Designers and developers can easily share prototypes - VS 2012 and Expression Blend - Use Expression Blend for animations - Sketch, Photoshop, code are all valid prototyping tools - Show work in progress to others Codeplex: http://www.codeplex.com/site/users/view/win8templates #td2013fi
- 49. Examples of good design #td2013fi
- 50. Examples of good design #td2013fi
- 51. Examples of good design #td2013fi
- 52. Examples of good design #td2013fi
- 53. Examples of good design #td2013fi
- 54. Let your imagination run wild #td2013fi
- 55. Get in touch Thank you for coming! Feedback can be given via mobile or laptop through techdays.fi seminar schedule. Markus Jönsson Arturs Polis UX/ UI Designer CTO markus.jonsson@luxus.fi arturs.polis@luxus.fi +358 (0) 40 45 16 047 +358 (0) 40 500 52 27
- 56. Follow the design guidelines Designing UX for apps http://msdn.microsoft.com/en-us/library/windows/apps/hh779072.aspx Windows 8 UX Fundamentals Training http://channel9.msdn.com/Events/Windows-Camp/Windows-8-UX-Fundamentals-Training- Workshop-2012 Windows 8 template apps http://www.codeplex.com/site/users/view/win8templates Windows 8 Design handbook http://www.windows8designhandbook.com/windows-8-resources.html UI Stencils for sketching http://www.uistencils.com/products/windows-8-stencil-kit #td2013fi
Editor's Notes
- We are a digital design and marketing agency specializing on crafting beautiful designs and interfaces. Building apps on our own and with our partnersWe are here to talk about how you can use well crafted and beautifully designed apps to delight your users while concentrating on what your app is best a
- The step from Windows 7 to Win 8 was a leap rather than a step. One of the biggest reasons for this is that Microsoft for this release is focusing more on input from all different interaction types rather than focusing on good old mouse/keyboard interaction.From now on we need to think about and align our apps with users of all types of interaction and try to make our apps ready for the future.Demo:Hub pageTilessemantic zoomCollection page Detail pageContracts (search)Closing appChanging app
- 1.Contentbefore chromeHide unneeded functionalityFocus, focus, focus2.Attention to detailGridsTypography3.Touch firstUse animationResponsive app4.Break away with physical metaphorsUse the cloudLive tiles and toast notifications5.Reduce redundancyPlay nice with others through contractsFollow the UI guidelineshttp://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx
- Confidentusers by helping themConfident user = happy user – will use app more frequently in greaterextentFocused so that your users can be immersed in what the love – explore the restBe great at somethingNot to clutter your app with custom controlsWindows have not had strict visual guidelines previouslyEmbrace the guidelines we got with win 8
- Best at statementMy app is best in its category at _________.Focus what you are great atHelp you whole team to compare functionality against and see if they fit in your app scope."Content before chrome".
- Traditional layoutfocus lies on presenting the user with the rss articletraditional panel layout where the user can select, add, mark etc25% screen real estate for contentWindows 8 layoutUser can press headline for collection viewAdd feeds in the app barSearch in feed in the charmShare content in share charmShow only what is crucial, hide everything else smartlyMake your content shine!
- A typical website is pretty busy, but the different elements can still be translated into good Windows Store app design.1. Layout and navigation2. Commands and actions3. Contracts: search, share, and settings4. Touch5. Scaling and views6. Notifications
- A. Top and left margins are consistent throughout an app. B. Use a consistent margin to separate different categories. C. Use a consistent margin to separate pictures within a category. This margin is smaller to convey page layout hierarchy. D. The group title of each category is also aligned to the grid.
- The resulting app is much cleaner and clearer than the website it is derived from.http://msdn.microsoft.com/en-us/library/windows/apps/hh868264
- Attentionto details,Safe & reliableSymmetryBalanceGrid& AlignmentTypographyDesign with bold, vibrant colors
- Segoebeautiful - recommendedSense of structure & rhythmA set of size/weight that fines content hierarchyOk with custom font to match brandTry then to align size/weight to default modern style typpographyhttp://msdn.microsoft.com/en-us/library/windows/apps/hh700394.aspx
- 5 pixel based units5px sub unit20px 1 unithttp://msdn.microsoft.com/en-us/library/windows/apps/hh872191.aspx
- Gridsystem define header and content regionsSame left margin throughout apphttp://msdn.microsoft.com/en-us/library/windows/apps/hh872191.aspx
- Negative space is imporantHelp user “scan” for content10px between content / hard edges items (images)20px between list rows40px between columns80px between groupshttp://msdn.microsoft.com/en-us/library/windows/apps/hh872191.aspx
- Show progress indicator when loadingMake app useful in different contexts: snapped, fill view, horizontal & portraitDemo cocktail app
- Windows touch languageProvide visual feedback to give the user the feeling that something just happenedDemo touch selection
- Plan for animations early on in developmentUse expression blend to implement the animations.Subtle animations can show users how to interact with the content of the app.Make use of the animation libraries that are aligned with the Modern style UI and has optimized performanceShow Blend animationShow Cocktail apphttp://msdn.microsoft.com/en-us/library/windows/apps/hh465165.aspx
- Windows Store apps are designed to be touch first. They leverage the hands and fingers for what they are great at, with comfort and ergonomics in mind. Demo IE10
- Show content in areas that are not blocked by hands or fingershttp://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx
- Easy to reach touch regionsApp bar layout matches this patternhttp://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspxDemo app bar layout & interaction
- Tap for primary actionPress-hold to learnSlide to panSwipe down to selectTurn to rotatePinch and stretch to zoom / semantic zoomSwipe up from bottom for app commandsSwipe from side for system commands / charmsWindows Store apps are designed to be touch first. They leverage the hands and fingers for what they are great at, with comfort and ergonomics in mind. http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx
- Don’t imitate the physical world.Make most of the digital mediumtrue to the digital nature of devicesClean and modern looking UI. Try not to use physical boundaries and terms
- Connect to the cloud so that your users can stay connected to each other.Be dynamic and alive with communication. (toast notifications)move seamlessly between devices
- Segoefont – simple and beautifulDefined set of weight/size to be consistent100s of iconsMonochrome iconsUse them with brand colorWith a round border for interaction
- strict style of structure, make use of it to make users confidentReduce redundancy by removing custom navigation etchttp://msdn.microsoft.com/en-us/library/windows/apps/hh465304.aspx
- Leverage the ecosystem and work together with other apps, devices and the system to complete scenarios for people.Share settings is personal to user.If user isnt user of pinterest and has app – you don’t need to show sharing to pinterest.http://msdn.microsoft.com/en-us/library/windows/apps/hh465304.aspx
- 1.Contentbefore chromeHide unnecessary functionality2.Attention to detailGridsTypography3.Touch firstanimationResponsive app4.Break away from physical metaphorsUse the cloudTiles and toast notifications5.Play nice with others through contractsFollow the UI guidelineshttp://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx
- VS and Blend overlapping many use caseshttp://channel9.msdn.com/Events/Build/2012/3-006http://video.ch9.ms/sessions/build/2012/3-006.pptx
- (High level app structure, built-in app functionality, touch vs mouse and keyboard UI and UX, snapping, suspending and resuming, charms...)http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspxhttp://go.microsoft.com/fwlink/p/?linkid=258743
- Hierarchical navigationDetail viewCollection viewApp hubFlat navigationBetween sectionshttp://msdn.microsoft.com/en-us/library/windows/apps/hh761500.aspx
- Hierarchical navigationFlat navigationhttp://msdn.microsoft.com/en-us/library/windows/apps/hh761500.aspx
- http://msdn.microsoft.com/en-us/library/windows/apps/hh761500.aspx
- http://msdn.microsoft.com/en-us/library/windows/apps/hh465304.aspx#touch_keyboard_handwriting_panelDEMO: Switch between Skype and Wikipedia
- Gentle reminders with live tiles and toast notificationshttp://www.windows8designhandbook.com/choosing-windows-8-live-tiles.html
- http://www.windows8designhandbook.com/choosing-windows-8-live-tiles.html
- Sketching with pen and paper is fastQuick itterationsTry out workflowsDetail view firstCollection view
- Thinkof hub as a magazineSort the groups by importanceFeature pageGroupsHeader leads to collection
- Move on to wireframingA good way to find out if your app is going to be great is to do a quick prototype.You’ll be able to find out what works, what doesn’t, and what’s missing.
- Easy to create graphicsDrag and dropSet up things with a click – e.g. SnappingAnimations
- Good sematic view in large amount of content
- Nice use of animationsGot ridog the “boxyness” that win8 apps otherwise can have
- Nice structureGood use of large images
- Fresh Paintbuilt-in windows components like the app bar in an unconvential way.regular app components, but used in a fresher manner.
- Additional resources