Designing Windows Store Apps for Perceptive Pixel Displays
Total Page：16
File Type：pdf, Size：1020Kb
Designing Windows Store apps for Perceptive Pixel displays February 2014 Abstract This document provides guiding principles for designing the user interface of a Windows Store app for large-screen touch displays, such as 55-inch and 82-inch displays from Perceptive Pixel by Microsoft (PPI). The user experience on a large touch display differs in some significant ways from that on smaller screens. The design principles here help you create a Windows Store app that scales from a tablet computer to a large-screen display and provides a great user experience across the range of devices. This info applies to the following operating systems: Windows® 8 Disclaimer: This document is provided “as-is”. Information and views expressed in this document, including URL and other Internet website references, may change without notice. Some information relates to pre-released product which may be substantially modified before it’s commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here. You bear the risk of using it. This document does not provide you with any legal rights to any intellectual property in any Microsoft product. You may copy and use this document for your internal, reference purposes. © 2014 Microsoft. All rights reserved. Designing Windows Store apps for Perceptive Pixel displays - 2 Contents Introduction .................................................................................................................... 3 Who this document is for ........................................................................................... 3 What this document covers ....................................................................................... 3 The opportunities in large-screen touch displays ...................................................... 3 Planning your app ........................................................................................................... 4 Identify your core scenarios ....................................................................................... 4 Design your app for scaling ........................................................................................ 4 Screen resolution ................................................................................................... 4 User-experience patterns for large displays................................................................... 5 Design principles ........................................................................................................ 5 UI placement .............................................................................................................. 5 App bar placement................................................................................................. 5 Toast notification placement ................................................................................. 5 Dialog placement ................................................................................................... 5 Navigation patterns .................................................................................................... 6 Navigation layers.................................................................................................... 6 Semantic zoom ....................................................................................................... 8 Command patterns..................................................................................................... 8 Comfort zone ......................................................................................................... 8 Command placement ........................................................................................... 10 Keyboard text entry ............................................................................................. 12 Touch patterns ......................................................................................................... 15 Sizing gestures...................................................................................................... 15 Content page zoom .............................................................................................. 16 Accept multiple-finger touch ............................................................................... 16 Stylus patterns .......................................................................................................... 17 Ink patterns .......................................................................................................... 17 Animation and visual patterns ................................................................................. 17 Use appropriate background colors .................................................................... 17 Minimize excessive motion and animations ........................................................ 18 Considerations for multiple simultaneous users ..................................................... 20 Evaluating your apps..................................................................................................... 20 Windows Store app certification requirements ....................................................... 21 Additional resources ..................................................................................................... 21 Appendix: Common programming tasks for working with large-screens .................... 22 Determining screen size and pixel density ............................................................... 22 Determining app position......................................................................................... 22 Detecting the PPI stylus GUID .................................................................................. 22 Detecting stylus button presses ............................................................................... 22 February 2014 © 2014 Microsoft. All rights reserved. Designing Windows Store apps for Perceptive Pixel displays - 3 Introduction This document offers a set of guiding principles for designing the user interface (UI) of Windows Store apps for large-screen touch displays, such as the 55” and 82” displays from Perceptive Pixel by Microsoft (PPI). The success of such apps can hinge on how easily users can navigate them, run commands in them, or touch elements of their UI. Follow the principles here to design apps that scale well from tablet computers to large-screen displays and provide a great user experience across the range of devices and form factors. Who this document is for If you’re a member of a development team that creates Windows Store apps for large-screen touch displays, this info is for you. Whether you’re a UI layout artist, a UI developer, or a developer responsible for crafting the view-model classes that power your app’s UI, you’ll find this document helpful. What this document covers This document gives you a thorough, high-level overview of UI patterns specific to large-screen displays. That’s a fair amount of info, so we’ve not included detailed examples of the code required to accomplish these patterns. We also don’t address programming issues related to business logic or data access. The Appendix does offer a few suggestions about how to approach certain common coding tasks. But in general, we introduce you to the patterns and leave the implementation to you. We also don’t cover the basics of Windows Store app development. For info about that, see Additional resources. The opportunities in large-screen touch displays Windows Store apps that follow Microsoft® design guidelines for Windows 8 work well on a large-screen touch display. To optimize the user’s experience, however, consider the form factors of a large screen device, laptop, desktop, or tablet. The size difference between a large display and smaller form factors can change the way users interact with the info on screen, see and use controls and notifications, and navigate the app. Its size, multi-touch capabilities, and stylus create many new opportunities for data presentation and manipulation, content creation, and collaborative scenarios. Figure 1 gives you an idea of the size difference we’re talking about. Figure 1 – Large-screen touch display compared to a tablet. February 2014 © 2014 Microsoft. All rights reserved. Designing Windows Store apps for Perceptive Pixel displays - 4 The size of a 55” or 82” PPI display presents interesting challenges for Windows Store app developers like you. When writing apps for the large-screen display, you can no longer assume that users can easily touch any point on its surface the way they can with a tablet, laptop, or desktop touch display. When users of average height interact with a large display, they may not be able to comfortably reach edges of the display where app bars and charms appear. Sweep gestures that work well on a tablet can be quite difficult on an 82” display. Visually, a large display can present another challenge to users. Unlike with a tablet or desktop display, where a user can scan the whole surface at a glance, a user may have to deliberately turn and look at the edges of a large display to interact with cues as they appear. Because of this, a user who’s not already looking where an important app cue appears can miss it altogether. Planning your app When you plan a Windows Store app for large displays, like the PPI 55” and 82” displays, you can achieve an ideal user experience if you build your app according to the design principles presented in this document.