The New Windows UI - Intel Ultrabook AppLab Berlin

Editor's Notes

• #3: Windows Experience is the code name for our design languageIt’s rooted in modern, Swiss design, and has the same emphasis on reduction, cleanliness, readability, simple and beautiful visuals.
• #4: 8 traits of great Windows Store AppsI can get content from and share content with people I care about
• #5: 8 traits of great Windows Store AppsI can get content from and share content with people I care about
• #6: The way that this principle can be expressed in apps can be summed up by: Content before chromeVisual clarity
• #7: 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: 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.
• #9: For any app, content is the heart of any experience. Whether you’re designing a shopping, a food and dining, a media, a social app…Everything outside of the content are just tools to let people consume and interact with your contentBy leaving only the most relevant elements on screen, we help people focus on the content.Content before chrome is about taking away distractions and letting people be immersed in the things they love. It’s about letting the content, as opposed to the software, shine
• #10: Remove lines and boxes as a way to group and organize contentUse crisp visuals and avoid unnecessary graphical effects such as blurs and gradient on visuals
• #11: It doesn’t necessarily mean that it has to be plain – it can also be visually rich and beautiful. The background here is as much a part of the content as the numbers on screen – it’s augmenting the content
• #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.
• #14: Integrate commands into the content
• #15: Integrate commands into the contentRemove the “remote controls”
• #17: Leverage the edgeThere is a lot of 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
• #18: Leverage the edgeIn an immersive
• #19: 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.
• #21: 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
• #22: Show commands contextually, only when needed, instead of at all times.
• #24: 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
• #25: 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.
• #26: Sensitivity to detailsEach pixel makes a difference: 2 places where this is really expressed are in the use of Typography and the Grid system.
• #27: Segoe UI is the most recognizable font used in Windows User Interface.This is our type ramp for Segoe UI: just 4 sizes. You will see that within Windows UI, all text uses one of these 4 sizes The largest size indicates the entry point to the content. It is the hero to the page and everything is anchored from thereRecommended weights are shownUse 42pt on a single line without wrapping.
• #28: HeaderSubheaderBody copyItem titleItem subtitleItem body
• #29: 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
• #30: Segoe UI is the most recognizable font, particularly designed as a clean, legible interface font that best show off the Windows UI personality. You can also use other fonts – but the key is that whichever font you choose to use, establish a consistent type hierarchy. Consistently use a small (3-5) set of size and weight combinations and vigorously apply it to all text in the UI.
• #31: YesFor example, for immersive reading, such as in a ebook reader, serif fonts are the convention. Cambria is a font family that was designed specifically for reading long texts onscreen. Here is its type ramp, with only 3 sizes. For brandingYou can also use a different font for branding – if type is a part of the brand’s identity.Take a look at the brand’s current properties: apps on different platforms, websites – do they have a single font that is used throughout? This is outside of the Logo – every brand has a distinct font for the logo. This is For example: NYT uses a serif font Key: Establish and follow a consistent type ramp
• #32: Grid’s base unit is proportional to the type rampProportion: multiples of a base unit
• #33: Looking at the type ramp againBaseline for the starting line of text is always on a 20px grid lineWhen they are all aligned, the proportional size differences are obvious (e.g. header is 2x as large as the sub-header)In order for the type ramp to be effective, the text have to start at the same baseline.
• #34: Top left corner of content is always anchored on 20px grid lines (horizontally & vertically)Padding between items is always multiples of 5px sub-units10px between items of the same group
• #35: Padding between items is always multiples of 5px sub-units80px between groups of objectsThe proportional difference in padding makes the separation between the groups of items clear (you can tell that without any context that there are 2 groups here)
• #36: Example of a page laid out on a grid
• #37: In addition to using the grid to determine sizing and margins of individual items, we also use the grid to guide the overall page layoutPage header is baselined at 5 units (100px) from the top
• #38: Content region has a left margin of 6 units (120px) from the left
• #39: …and aligns to 7 units (140px) from the top
• #40: Together, this forms the Windows User Interface app silhouetteA silhouette provides an anchor for the eyes
• #41: You can tell right away that these are Windows Store Apps. The consistent top, left, and bottom margins forms a ‘C’ shaped silhouette, along with the intentional “peeking” of more content on the right indicate the panning direction (horizontal, and there is more content on the right).
• #42: 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.
• #46: These are just a couple different varieties of ways different content can be laid out. There are many, many possibilities here. This particular one is what we provided as a base template in Visual Studio. It uses the Windows UI silhouette, applies the type ramp, and all items are aligned to the 20px grid. This is a good starting point.However, don’t be limited by this exact layout. This is just 1 expression of the principles. There are many ways to leverage proportions, typography, graphical treatment to add visual variety to your pages. Having visual variety is *particularly* important when designing the landing page of your app. Treat it as the cover to your magazine.
• #47: These are just a couple different varieties of ways different content can be laid out. There are many, many possibilities here. This particular one is what we provided as a base template in Visual Studio. It uses the Windows UI silhouette, applies the type ramp, and all items are aligned to the 20px grid. If you have multiple groups of content each with several items you’d like to highlight – which is particularly common on apps’ landing pages – this is a good starting point.However, don’t be limited by this exact layout. This is just 1 expression of the principles. There are many ways to leverage proportions, typography, graphical treatment to add visual variety to your pages. Having visual variety is *particularly* important when designing the landing page of your app. Treat it as the cover to your magazine.
• #48: These are just a couple different varieties of ways different content can be laid out. There are many, many possibilities here. This particular one is what we provided as a base template in Visual Studio. It uses the Windows UI silhouette, applies the type ramp, and all items are aligned to the 20px grid. If you have multiple groups of content each with several items you’d like to highlight – which is particularly common on apps’ landing pages – this is a good starting point.However, don’t be limited by this exact layout. This is just 1 expression of the principles. There are many ways to leverage proportions, typography, graphical treatment to add visual variety to your pages. Having visual variety is *particularly* important when designing the landing page of your app. Treat it as the cover to your magazine.
• #49: These are just a couple different varieties of ways different content can be laid out. There are many, many possibilities here. This particular one is what we provided as a base template in Visual Studio. It uses the Windows UI silhouette, applies the type ramp, and all items are aligned to the 20px grid. If you have multiple groups of content each with several items you’d like to highlight – which is particularly common on apps’ landing pages – this is a good starting point.However, don’t be limited by this exact layout. This is just 1 expression of the principles. There are many ways to leverage proportions, typography, graphical treatment to add visual variety to your pages. Having visual variety is *particularly* important when designing the landing page of your app. Treat it as the cover to your magazine.
• #51: 1. Animation is a core part of the Windows UI 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.
• #52: Sensitivity to detailsEach pixel makes a difference: 2 places where this is really expressed are in the use of Typography and the Grid system.
• #53: More on contracts later.Search: Let people search your content from anywhere within the system
• #54: People don’t use apps to learn to use software, they use apps to get to their content.When an app uses the same UI model as the rest of the system, people don’t have to spend time learning new concepts.They can then focus on the content.Swipe charms in from the side
• #60: Demo: Semantic zoom in file pickerIn the physical world, if you zoom out (like when you look through a camera), you see more of the peripheral but objects become smaller. In the digital world, we are not bound by these physical constraints. When you zoom out, you can actually present more information and richer visual representations of the objects.
• #61: This is a simple example (note: bug in screen shot with text chopped off)The zoomed out view can be designed to semantically represent the groups of itemsPerhaps grouped by date
• #62: Or grouped by names
• #64: 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
• #66: You can enable operations on groups in the zoomed out view (select or rearrange)Ex: News app: Select a news source and pin to Start or rearrange news source order
• #71: Bring out the information in the content by reducing visual decoration
• #72: Tile templates: A lot of rendering options available from Pure text to Pure images.