Microsoft Surface User Experience Guidelines
Total Page:16
File Type:pdf, Size:1020Kb
Microsoft Surface™ User Experience Guidelines Designing for Successful Touch Experiences Version 1.0 June 30, 2008 1 Copyright This document is provided for informational purposes only, and Microsoft makes no warranties, either express or implied, in this document. Information in this document, including URL and other Internet Web site references, is subject to change without notice. The entire risk of the use or the results from the use of this document remains with the user. Unless otherwise noted, the example companies, organizations, products, domain names, e-mail addresses, logos, people, places, financial and other data, and events depicted herein are fictitious. No association with any real company, organization, product, domain name, e-mail address, logo, person, places, financial or other data, or events is intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Microsoft. Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property. © 2008 Microsoft Corporation. All rights reserved. Microsoft, Excel, Microsoft Surface, the Microsoft Surface logo, Segoe, Silverlight, Windows, Windows Media, Windows Vista, Virtual Earth, Xbox LIVE, XNA, and Zune are either registered trademarks or trademarks of the Microsoft group of companies. Apple and iPod are trademarks of Apple Inc., registered in the U.S. and other countries. Bluetooth® is a registered trademark of Bluetooth SIG, Inc., and is used under license from Bluetooth. All other trademarks are property of their respective owners. 2 Contents 1.0 Introduction _________________________________________________________________________________________ 6 1.1 Who this document is intended for _________________________________________________________________ 6 1.2 How this document is organized ____________________________________________________________________ 6 2.0 Vision and Philosophy______________________________________________________________________________ 7 2.1 Vision ________________________________________________________________________________________________ 7 2.2 Philosophy ___________________________________________________________________________________________ 7 2.2.1 From Command Line Interfaces to Natural User Interfaces _________________________________ 8 2.2.2 Designing Immersive Experiences ____________________________________________________ 9 2.2.3 Benefits of Touch and Gesture for Microsoft Surface Experiences __________________________ 10 2.2.4 Designing for Object Interaction _____________________________________________________ 10 3.0 Principles and Benefits ____________________________________________________________________________ 11 3.1 Design Principles ____________________________________________________________________________________ 11 3.1.1 Seamless _______________________________________________________________________ 11 3.1.2 Social __________________________________________________________________________ 13 3.1.3 Spatial _________________________________________________________________________ 15 3.1.4 Superrealism ____________________________________________________________________ 18 3.1.5 Contextual Environments __________________________________________________________ 19 3.1.6 Scaffolding _____________________________________________________________________ 21 3.1.7 Performance Aesthetics ___________________________________________________________ 22 3.1.8 Direct Manipulation ______________________________________________________________ 24 3.2 Key User Experience Benefits _______________________________________________________________________ 25 3.2.1 Microsoft Surface Is Natural and More Intuitive ________________________________________ 26 3.2.2 Microsoft Surface Is Unique and Magical ______________________________________________ 26 3.2.3 Microsoft Surface Is Premium and Authentic ___________________________________________ 26 3.2.4 Microsoft Surface Is Aware and Responsive ____________________________________________ 27 3.2.5 Microsoft Surface Is Social and Collaborative ___________________________________________ 27 4.0 User Interface Overview __________________________________________________________________________ 28 4.1 Putting the Philosophy and Principles into Practice ________________________________________________ 28 4.2 Considerations ______________________________________________________________________________________ 28 4.2.1 Project Considerations ____________________________________________________________ 28 4.2.2 What Qualifies as a Good Microsoft Surface Application? _________________________________ 30 4.2.3 Social __________________________________________________________________________ 32 4.2.4 Object and Device Interaction ______________________________________________________ 34 4.2.5 End User Considerations ___________________________________________________________ 39 4.2.6 Business Considerations ___________________________________________________________ 40 4.2.7 Brand Considerations _____________________________________________________________ 40 4.2.8 Microsoft Surface Software Environment _____________________________________________ 41 5.0 Interaction Design _________________________________________________________________________________ 56 5.1 Approach____________________________________________________________________________________________ 56 5.2 Guidelines ___________________________________________________________________________________________ 57 5.2.1 Seamless _______________________________________________________________________ 57 5.2.2 Social __________________________________________________________________________ 58 5.2.3 Spatial _________________________________________________________________________ 59 5.2.4 Super-Realism ___________________________________________________________________ 60 3 5.2.5 Contextual Environments __________________________________________________________ 61 5.2.6 Scaffolding _____________________________________________________________________ 62 5.2.7 Performance Aesthetics ___________________________________________________________ 63 5.2.8 Direct Manipulation ______________________________________________________________ 64 5.3 Gestures _____________________________________________________________________________________________ 65 5.3.1 Gesture Parameters ______________________________________________________________ 65 5.3.2 Enabled Gestures ________________________________________________________________ 66 6.0 Visual Design _______________________________________________________________________________________ 74 6.1 Approach____________________________________________________________________________________________ 74 6.1.1 Creating Visual Design Vocabularies __________________________________________________ 74 6.1.2 Visual Design Attributes ___________________________________________________________ 75 6.2 Guidelines ___________________________________________________________________________________________ 77 6.2.1 Visual Branding Principles __________________________________________________________ 77 6.2.2 Layout _________________________________________________________________________ 78 6.2.3 Depth _________________________________________________________________________ 82 6.2.4 Shape and Form _________________________________________________________________ 87 6.2.5 Texture ________________________________________________________________________ 89 6.2.6 Colors _________________________________________________________________________ 92 6.2.7 Typography _____________________________________________________________________ 93 6.2.8 Iconography ____________________________________________________________________ 94 6.2.9 Motion Design___________________________________________________________________ 97 7.0 Physical Design ___________________________________________________________________________________102 7.1 Industrial Design ___________________________________________________________________________________ 102 7.1.1 Approach______________________________________________________________________ 102 7.1.2 Guidelines _____________________________________________________________________ 104 7.2 Environment Design _______________________________________________________________________________ 106 7.2.1 Approach______________________________________________________________________ 106 7.2.2 Guidelines _____________________________________________________________________ 106 8.0 The Microsoft Surface User Interface ___________________________________________________________110 8.1 User Interface Components ________________________________________________________________________ 110 8.1.1 Attract Application ______________________________________________________________ 110 8.1.2 Launcher ______________________________________________________________________ 116 8.1.3