Designing Windows 8 application - Microsoft Techdays 2013

8,368 views

Published on

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.

Published in: Design
1 Comment
9 Likes
Statistics
Notes
No Downloads
Views
Total views
8,368
On SlideShare
0
From Embeds
0
Number of Embeds
412
Actions
Shares
0
Downloads
3
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide
  • 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
  • Designing Windows 8 application - Microsoft Techdays 2013

    1. Windows 8 andhow to design RégisWindows 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 InterfaceQuick recap
    5. Why do you need to followthe 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 chromeTraditional 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 oneWindows 8 UX Fundamentals Traininghttp://channel9.msdn.com/Events/Windows-Camp/Windows-8-UX-Fundamentals-Training-Workshop-2012#td2013fi
    36. Designing your app
    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
    47. Rapid prototyping#td2013fi
    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 othersCodeplex: 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

    ×