Download to read offline
Uploaded byFrédéric Harper
Toronto user groups workshop #1 - 2013-03-10 - Designing a Windows Store app
The document is an advertisement for Contoso Travel featuring a 7 night Alaska cruise. It includes details on ocean view cabins and suites that are available at discounted prices of $150 per night per person based on double occupancy. A call to action encourages booking by a certain date to receive the discounts and free onboard credit.
Toronto user groups workshop #1 - 2013-03-10 - Designing a Windows Store app
- 2.
- 14. 42pt 20pt 11pt 11pt 9pt 11pt
- 46. Contoso Travel Barcelona, Spain 7 night Alaska Cruise
- 47.
- 49.
- 52. Contoso Travel Featured destinations Last minute deals My Trips My Trips
- 53. Contoso Travel Featured destinations Last minute deals My Trips Ocean View Cabins Suites Upgrade from an inside cabin and save Upgrade from an inside cabin and save $43/night/person! $43/night/person! Picture windows with ocean and port views Picture windows with ocean and port view From $2,099 — only $150/night/person based on From $2,099 — only $150/night/person do double occupancy
- 67.
- 95.
Editor's Notes
- #3 8 traits of great Windows Store appsI can get content from and share content with people I care about
- #5 Content before Chrome is a core principle to Microsoft style design
- #6 The shift in focus is crucial – it means that the users, instead of remembering how to use the software, are remembering the content – the news story they read about, the social updates from their friends, the products they are shopping for.
- #8 Windows 8 is about putting the app on the center stage. Content is the heart of any experience, and everything else are only tools to let you consume and interact with your contentIt’s important to think about how to leverage this real estate and place content first, so that users can actually be immersed in the things they love.Where does chrome come from? LayoutCommandsNavigationLet’s look at how we handle these in a Content first world
- #9 Content before Chrome is a core principle to Microsoft design
- #11 Remove lines and boxes and create openness by using whitespace Use crisp visuals and avoid unnecessary graphical effects such as blurs and gradient on visuals
- #12 Another example of leveraging space to augment the content. Space is as much a part of the content and can be beautiful and aspirational.
- #13 Microsoft design is founded on clean typographyA Typographic ramp is used to establish a sense of hierarchy for the content.Only a fixed set of sizes (4) to convey hierarchical information – and each font sizes are multiples of 20px. The proportions allow users to really easily establish an understanding of the structure of the content. Beyond this size granularity, users will not be able to differentiate where a piece of content fits within the overall hierarchy
- #14 Use the default stylesheetto get the styling in a pre-defined type ramp with the Segoe UI font A Typographic ramp is used to establish a sense of hierarchy for the content.Only a fixed set of sizes (4) to convey hierarchical information – and each level is proportionally larger than the previous (42pt = 80px, 20pt = 40px). The proportions allow users to really easily establish an understanding of the structure of the content. Beyond this size granularity, users will not be able to differentiate where a piece of content fits within the overall hierarchy
- #15 HeaderSubheaderBody copyItem titleItem subtitleItem body
- #16 Microsoft design is founded on clean typographySegoe UI is the primary font for the Microsoft design languageOnly a limited set of sizes (4) to convey hierarchical information. Beyond this granularity, users will not be able to differentiate where a piece of content fits within the overall hierarchy
- #17 On panning: Design for landscape first to cater to all form factorsIn landscape, panning along the horizontally
- #19 When we had chrome, it formed the identity of the app (first sketch). In the absence of chrome, when users are focusing on the content, the formation of your content is what forms the identity. The silhouette is what allows your eyes to recognize something as a Windows Store app, as opposed to a webpage, or a traditional app, before you even really process it. This layout allows you to provide the users with a feeling of familiarity and confidence.
- #20 In the absence of chrome, when users are focusing on the content, the formation of your content is what forms the silhouette. This shape is what allows your eyes to recognize something as a Windows Store app, as opposed to a webpage, or a traditional app, before you even really process it. This layout allows you to provide the users with a feeling of familiarity and confidence.
- #21 In the absence of chrome, when users are focusing on the content, the formation of your content is what forms the silhouette. This shape is what allows your eyes to recognize something as a Windows Store app, as opposed to a webpage, or a traditional app, before you even really process it. This layout allows you to provide the users with a feeling of familiarity and confidence. Align elements on a grid to create a structured and consistent layoutTop, left, and bottom margins create a ‘C’ with negative space to indicate panning directionThe headers are in the same position, use the same type treatmentConsistent type sizes are used throughout and in parallel locations: Large, medium, small
- #22 There are specific pixel values to this layout: title is baselined at 100px, content starts 120px from the left.The easiest way is to get this layout is by starting with the templates.
- #23 http://www.aisleone.net/page/71/ The grid provides a plan and foundation.Gives a structure and basis to build out a design.Grids do not limit design – they help create balance give a framework for creativity.
- #24 Different silhouette
- #25 http://www.aisleone.net/page/71/ The grid provides a plan and foundation.Gives a structure and basis to build out a design.Grids do not limit design – they help create balance give a framework for creativity.
- #26 Content before Chrome is a core principle to Microsoft design
- #28 Integrate commands into the content
- #29 Integrate commands into the contentRemove the “remote controls”
- #30 Integrate commands into the contentLight dismiss model for transient UI such as flyouts. No need for close buttonFlyoutsFlyouts should always appear adjacent to item that the user tapped to invoke it. Users can respond to the flyout efficiently with touch and mouseThe flyout’s context as it relates to the anchor is very clearFlyouts are great as confirmation messages rather than using dialogsThe purpose of a confirmation is to make sure the user hasn’t tapped a significant command accidentally so all you need is a second tap – you should be a lightweight and unobtrusive as possible getting the confirmation since it’s likely that the user did mean to press it the first time
- #31 Integrate commands into the contentReducing chrome – no need for explicit on screen controlsThe whole app canvas can be the controller.
- #33 Bringing up the app barBringing up the app bar programmatically: Users will know to swipe from edge. There is no need to bring up the app bar programmatically just to show that it is there. If you find yourself going back to the app bar every few seconds… While doing a specific task, you can still use a transient app bar but make it non-light-dismissedAll the time while using the app, you can set the app bar to persistent
- #34 Leave only the most relevant elements are on screen Use the app bar to tuck away commanding chrome until needed by the usersUse the system charm for search and settings
- #35 Leverage the edgeIn an immersive
- #36 In the browser, their primary view is fully immersive, so the commands (moving between web pages) are in the bottom app bar and navigating the app (switching between multiple tabs) use the top app bar.
- #38 Contextual commandsCommands are generally on the rightNew is on the far rightWhen an item is selected, the app bar shows, and a new contextual command shows on the other side (easy to notice and differentiate)When the app bar comes up because of selection it is sticky – no longer light dismiss
- #39 Show commands contextually, only when needed, instead of at all times.
- #41 Provide errors information in the focal area, inline with where to resolve.
- #42 Content before Chrome is a core principle to Microsoft design
- #44 Viewsshould be about where you are at, not where you might go
- #45 Viewsshould be about where you are at, not where you might go
- #47 UI Structure
- #48 17:00
- #49 Integrate navigational elements into the contentThe group headers are a part of the content and inform you of what you are viewing.Reasons why people build tabs: Want a way for people to see all the groups availableWant to quickly jump from one group to anotherBoth of these can be accomplished with semantic zoom
- #52 Ex: Size of an item in the zoomed out view can show how big the group isEx: Color of an item in the zoomed out view can represent the popularity of the groupEx: Curated promotional images to attract users to different groups
- #53 Semantic zoom is the quick, fluid way of jumping within a long list. You can view all the groups available, and they can be presented in a visual, content-focused way.
- #54 UI Structure
- #57 1. Animation is a core part of the Microsoft design language, just as much as typography or imagery.2. Motion is more than just visual adornment. It provides information and helps people understand. Everything in the system comes from somewhere and goes somewhere. Imagine if there is no motion.3. The Animation Library provides a set of pre-designed motion tailored for common app scenarios. It is purposely scenario-centric and is designed to convey specific information. Scenario centric - there is NO flip or rotate or spin around animations – you can see from the name that each one is designed intentionally for a scenario, to help visually illustrate what is happening. Leverage standard animations to provide your users a sense of familiarity and confidence. The motions help users know what behaviors to expect, and they reinforce concepts and how the system works.
- #58 Animation Library: Animation is a core part of the Microsoft design language. The Animation Library is purposely scenario-centric and are designed specifically to convey information. Scenario centric - there is NO flip or rotate or spin around animations – you can see from the name that each one is designed intentionally for a scenario, to help visually illustrate what is happening. Leverage standard animations to provide your users a sense of familiarity and confidence. The motions help users know what behaviors to expect, and they help reinforce UI concepts and functionalities.
- #59 We have over 2 dozens pre-designed animations. Some are baked into the controls already. E.g. App barOthers can be easily added to your app. You can just specify what UI elements you would like to animation using one of these animations from the library and all the motion and timing will be taken care of. There will be a later deep dive into this topic.
- #62 RE: Actions should be reversible so users can safely explore. Example – swipe to select is reversible
- #63 RE: Actions should be reversible so users can safely explore. Example – swipe to select is reversible
- #65 Your app can be displayed in any of the following sizes:Snapped: 320x768 (a minimum of 1366x768 is required to support snapped view)Full screen landscape / filled: minimum 1024x768Full screen portrait: minimum 768x1024Although there are an infinite number of supported sizes, it is important to verify your application in the most common application dimensions, namely:1024px by 768px1366px by 768px
- #66 Call to action: Design your snap view to be useful so users will want to keep you on screenFor a content provider – lists/grids, then this is about relaying out.For other apps, think about the scenarios that are valuable and useful in the snapped view: Tile puzzle and Word Hunt are both great examples. They almost feel more tailored in snapped view. Example of leveraging the snapped view: In Word Hunt, in addition to the game board, provide a word list with links to definitions. Tapping on it will open the browser in filled.
- #70 As screen’s pixel density increase, UI elements will get smallerTo maintain consistent physical sizes of UI elements for touchability and readability, the system automatically scales UI up by 1.4x or 1.8x based on DPI & resolution
- #78 Use common system entry points, Charms, as a predictable consistent way of accessing contract functionalities so users do not have to relearn
- #79 Keep the look and feel the same between your share target page and your primary app.
- #81 Do not use Search for FindThe difference between Find and Search is in the scope. “Find” is looking for something that is already on the current page, but the user just need help locating it. For example, think: Ctrl+F in Word, or in IE – you would type in something that you expect to already be in the doc or the html page, and Find locates it for you. “Search” on the other hand has a much broader scope, and is looking across your application regardless of what the user is viewing (they can be anywhere within your app, or not even in your app at all!). The result of Search is usually a list of items within the app that contain the search term, and you can navigate to then navigate to view the item from the search result page (as opposed to Find, where you are already viewing the item).
- #85 Tile templates: A lot of rendering options available from Pure text to Pure images.
- #88 2 sizes: Small is required. Large is optional. Use Large if you have live content
- #89 Toast notifications use the same template architecture as live tilesRich set of rendering options available
- #94 Pride in craftsmanship: Layout, every pixel matter. Details like type size matters.Do more with less: Content before chrome. Showing less on screen to let people focus on what matters.Be fast and fluid: Designing with motion and designing for touchAuthentically digital: Being connected and alive with tiles & notifications, Leveraging the cloud to roamWin as one: Using contracts to work with other apps to complete scenarios. 1:1=3