Overview

The following guidelines are designed to provide you with practical ways to implement the user interaction design principles for Microsoft Surface experiences.

Each set of guidelines comprises three categories:

  • The must category provides the minimum requirements you need to meet to adhere to the design principles. The must guidelines also describe characteristics that are required by the Surface application certification process. Each guideline cites specific requirements as appropriate.

  • The should category describes guidelines that provide excellent experiences for users and that you can implement at a relatively low cost by using Surface tools.

  • The could category lists guidelines that we recommend so that your application provides a more complete, desirable, and fulfilling user experience. However, these guidelines might also cost more so you should prioritize them accordingly. These guidelines might also apply only to particular application scenarios.

1. Make Virtual Objects Behave Like Physical Objects

You can create a complete, believable universe by making objects on the screen behave just as objects in the real world behave. You can subtly incorporate principles of physics in how objects move, their inertia, and what occurs when multiple objects collide to help enhance the fidelity of the virtual environment.

Must

  • Make every transition fluid. Every object movement, property transition, and appearance or disappearance must smoothly animate. Nothing should abruptly appear or disappear.

Should

  • Create transition animations that communicate state and relationship changes, contribute to a consistent interaction paradigm, and give personality to the application.

  • Mimic the real world in your transitions by using notions such as mass, acceleration, friction, viscosity, and gravity. The ScatterView controls in the Microsoft Surface SDK enable you to create these effects.

  • Make sure users can always see the controls for starting and ending actions and for major state changes. This visibility differs from systems that embed major functions within menus.

  • Break from "real-world" behavior to match user intent. All interaction metaphors start with physical manipulation and then extend it.

Could

  • Consider what advanced functionality you want to enable in addition to natural interactions. Provide a mechanism that extends natural behavior to help users advance from novice to expert level.

 

2. Use Tagged Objects

You can affix either of two kinds of tags to a physical object to elicit a specific response. A tag is a special pattern of dots. The tag consists of a geometric arrangement of areas that reflect and absorb infrared (IR) light. There are two types of tags: byte tags (which encode an 8-bit number) and identity tags (which encode a 64-bit number). For more information about tags, see the Microsoft Surface SDK Help documentation.

When a user places a tagged object on a Microsoft Surface screen, the vision system reads the tag and determines its value, location, and orientation. The vision system also interprets any other portion of the object that reflects IR light as a contact and sends information to the application. You must then create a visual response appropriate to that object.

Must

  • There are no certification requirements that apply specifically to reactions to tagged objects. The same requirements that apply to finger and blob contacts (see "3. Use Untagged Objects" below) generally also apply to contacts from tagged objects.

Should

  • Respond to every object and contact, regardless of whether it has a tag affixed. Even if an object is not interactive, the experience still provides subtle feedback that acknowledges the object so that users do not wonder if the object is broken or malfunctioning.

  • Respond immediately to the presence of tagged objects. This immediate response blurs the line between the real world and the virtual world.

  • Consistently apply tags to the same physical location on objects so that the vision system can infer the location and shape of the object from the tag.

  • Use non-IR reflective objects for tagging so that the reflective portions of the object do not generate contacts in the application.

  • If IR-reflective objects are required, use your knowledge of the tag location and shape of the object to have the vision system filter (ignore) these contacts.

  • Use byte tags to identify a type of object (for example, a mobile phone of model # X-72), and use identity tags to identify a particular object (for example, the mobile phone of model # X-72 with telephone number 206-555-0100).

  • For identity tags, make the reaction consistent across object types, and specific to the object.

  • Clearly connect the effects of objects with the objects.

Could

  • Respond to a specific object and seamlessly extend it into the virtual world. Connect the user interface with the object itself, as though the virtual portion extends out of the object.

  • Use physical objects for input that requires a higher degree of freedom. The vision system can more consistently detect the orientation of tags than that of fingers or blobs.


3. Use Untagged Objects

An untagged object is referred to as a blob. Microsoft Surface can detect infrared (IR)-reflective objects that users place on the screen. In many cases, the Surface unit identifies these objects as multiple contacts (identified as either blobs or fingers) for each contiguous IR-reflective portion of the object. The vision system cannot determine whether adjacent blobs are part of the same physical object and cannot identify untagged physical objects. An application treats contacts from untagged objects the same as contacts from other objects that register as blobs, such as an entire hand that someone places on the Surface screen.

Must

There are no certification requirements that apply specifically to the reaction to untagged objects. The same requirements that apply to finger and blob contacts in general also apply to contacts from untagged objects.

Should

  • Respond to every object and contact. Even if an object is not interactive the Surface unit should provide subtle feedback that acknowledges the object so users don’t wonder if the object is broken or malfunctioning.

  • Respond immediately to the presence of untagged objects. This immediate response blurs the line between the real world and the virtual world.

  • Make feedback whimsical, magical, and playful by applying effects in response to the presence of objects to show that the Surface unit can see them even if it cannot identify them.

  • Do not rely on blob properties to represent the precise shape or size of physical objects. The Surface unit sees all objects as elliptical, and the size represents only the IR-reflective portions of objects.

Could

  • Tag all objects in your application. Even if your application does not need to recognize objects, we recommend against using untagged objects to generate contacts.

  • Tag all objects in your environment. Users are likely to begin to place other objects on the Surface screen to see how the system reacts. By providing many tagged objects, you can enhance the experience.


4. Create Single-User and Multiuser Experiences

Microsoft Surface is particularly well-geared to multiuser interaction, but you should also consider how a single user might use your application, and how you can encourage that user to invite other users to the experience.

Must

  • There are no certification requirements that apply specifically to social elements. Instead, consider the more specific issues that are outlined in the following guidelines.

Should

  • Create an experience that comes alive with several users so that the experience is more fun or effective when many hands are working simultaneously.

  • Enable a single user to enjoy the experience without requiring other users.

  • Enable new users to join in the middle of the experience so that newcomers can easily engage with your application without diminishing the other users’ experience.

  • Make sure your application can continue with fewer users, allowing one user to leave without diminishing the other users’ experience.

Could

  • Enable users to divide their tasks and to decide for themselves whether they will engage in a shared display, a single-user session, or a truly multiuser session.


5. Support Appropriate Levels of Inter-User Task Coupling

At any given time, multiple users who are working around a Microsoft Surface unit might be engaged in multiple levels of task coupling. Consider how to best support different levels of coupling in tasks, and how to support varying levels of coupling in the same application. There are three levels of task coupling:

  • Highly coupled tasks: Users help each other accomplish the same task. For example, two users touch two portions of the same object to perform a manipulation, or two users look for the same album in a large collection.

  • Lightly coupled tasks: Two users try to achieve a result that depends on them both, but they are engaged in different tasks to achieve it (sometimes called divide and conquer). For example, one user searches for an album in a large collection while the other users search for album art to apply to it, or the fire chief and police chief sit at a Surface unit and manage different elements of a crisis.

  • Uncoupled tasks: Users share the same space, but they are engaged in separate tasks. For example, two users search through the same collection of photographs, but each user looks for different pictures, or one user searches for photographs, while the other user checks e-mail.

Must

  • There are no certification requirements that apply specifically to supporting levels of coupling. The same requirements that apply to space sharing (see "6. Consider How Multiple Users Share Space" below) and content orientation (see "7. Provide a 360-degree User Interface" below) also apply to different levels of coupling.

Should

  • Support multiple coupling levels by enabling users to perform tasks together to varying degrees. Do not segment the Surface unit into areas for particular functions (for example, this side is for performing task A, and the other side is for task B).

  • Enable multiple users to use content and controls simultaneously. Do not require all users to use a common set of controls. Instead, allow users to break up portions of the task by dividing up the controls.

  • Do not break direct-touch input when users perform highly coupled or lightly coupled tasks. Direct manipulations create consequential communication. For example, if users search through objects by physically moving them, the speed of their movement and its location on the screen as seen through peripheral vision helps them see their progress. Changing this to a virtual device removes this communication.

    noteNote
    Consequential communication occurs when the behavior of users who are interacting with the system also provides another user with information about that interaction. This type of communication occurs often with Surface applications, because other users’ hand movements are always in the field of view.

     

Could

  • Provide methods for users to divide tasks with various levels of coupling so that users can work in parallel. For example, enable users to define interaction areas that they can dedicate to a particular function by specifying what is performed in a particular region of the Surface screen.


6. Consider How Multiple Users Share Space

Any applications that you design for use by multiple people simultaneously should enable users to easily see, reach, and use whatever they need for their respective activities. This guideline includes and goes beyond applications that use a 360-degree user interface. You might encounter instances where an application does not have a 360-degree user interface but various controls, screen elements, and content “belong” to a specific user who may be on any side of the unit.

Must

  • No certification requirements apply specifically to supporting situations in which multiple users share space. The same requirements that apply to content orientation (see "7. Provide a 360-degree User Interface" below) also apply to multiple-user issues.

Should

  • Support consequential communication by making system changes clear to all users. For example, when a person uses two hands to zoom in or out on a map, any observer can clearly see how and why the zoom changed.

  • Avoid the use of ambiguous audio feedback by making sure that a successful or erroneous touch is not associated with an audio cue. A Microsoft Surface unit has no mechanism to help users distinguish the cause of two simultaneous audio cues.

  • Do not provide multiple system modes for input touches. For example, in a GUI application, when a user selects a property to apply to an object, the mouse pointer changes mode (such as turning the mouse pointer into a paintbrush). This concept does not work with any multitouch system, including Surface; which 1 of the 52 contacts should become a paintbrush? This is an important, fundamental difference between single-touch and multitouch systems. In multiuser applications, a user who puts the system into a specific mode can significantly disrupt the experience of all other users.

  • Do not attach shared controls to one side of the display, because it could force users to reach uncomfortably close to another participant to use the control. Instead, enable users to move controls and share them or to dedicate all control to a particular user while they perform some lightly coupled or uncoupled task.

  • Indicate ownership through content location. If a specific user “owns” new content, position it in front of that user. If all users share ownership, place the content in the center.

Could

  • Provide modal spaces that allow for input to change modes based on the location of the touch. For example, if you want users to be able to paint and annotate an object, provide regions of the screen where they can drag the object and where touches are then mapped to either paint or annotate. Make sure that users can also move these regions so that they can divide tasks.

7. Provide a 360-Degree User Interface

Users approach a Microsoft Surface unit from all directions. To support multiple users, avoid having content that orients toward one edge of the display. No one likes to read text upside down, and this non-ideal experience creates the impression of a "preferred" side of the Microsoft Surface unit. The Microsoft Surface SDK includes a ScatterView control that enables you to orient content toward any edge of the screen. This control is the easiest way to achieve a 360-degree user interface.

Must

  • Orient the experience to users by orienting new content or interface elements in the same direction as the control (and therefore the user) that created it. For example, if a new piece of content is a “sub-experience” of a larger experience, and that larger experience has had an orientation assigned to it by the user, respect that orientation.

  • If an application must face a specific direction, orient it toward the side of the Surface unit that includes the access point that opened it, or follow the same orientation as Launcher. However, we strongly recommend that applications not face a specific direction.

Should

  • Enable users to change the orientation of content themselves, and do not tie content to a specific orientation. Users can use orientation as a means of communication (for example, to pass ownership or to call attention to a piece of content).

  • Make sure all users can read UI elements. For example, provide multiple copies of textual elements, and use graphical elements that make sense from all sides.

  • Make sure all users can reach and use all elements of an application in a useful way, from any side of a Surface unit.

  • Communicate ownership through the orientation of content. If new content faces a particular user, the content is interpreted as being owned by that user. You can mitigate this effect by adding multiple elements simultaneously at random orientations (but make sure that the orientation is intentional and not arbitrary).

Could

  • Design applications in which both the physical and software environments arrange content in a useful manner for users positioned on specific sides of the Surface unit. For example, in a banking environment, a bank employee might always be on one specific side of the Surface unit and the customer would be on the opposite side.

8. Support Using 2-D Planar Space

Depending on your application’s scenarios and context, the viewable space might be constrained. In some cases, the canvas is fixed and shows only a limited amount of content. In other cases, the canvas is flexible, which enables users to zoom in and out.

Use spatial memory if the canvas is larger than what appears on the screen. In all applications, backgrounds, objects, and controls must consider the z-axis for their behaviors and movements in response to users’ input. For example, the Concierge application includes an infinite canvas when users navigate the map screen, yet category cards and controls stay within the boundaries of the card screen.

Must

  • Optimize the environment for touch in its layout, feedback, icons/images, and behaviors. Any item that responds to touch must be at least 15 mm in size in all directions, and there must be at least 5 mm between minimally sized touch targets. Position interactive elements so that a user’s hand, arm, or input object does not block relevant content around an interactive element.

Should

  • Use spatial memory by enabling users to change the screen layout, and make sure that the application positions content and controls consistently. In situations with large canvases, maintain a clear and consistent spatial relationship between objects.

  • Consider the meaning of spatial relationships. Geographical and other naturally spatial content naturally lends itself to spatial relationships. For non-physical information, consider carefully how users consider and remember the spatial relationship between elements. For example, an organization’s management levels are strictly hierarchical because the physical distance between elements has no meaning. However, viewers generally associate vertical position with power, so the relative position of two equally ranked individuals should be the same, and not necessarily moved up because one person reports to a more senior leader.

  • Do not enable one user to shift the views of all users unless the task is highly coupled (see "5. Support Appropriate Levels of Inter-User Task Coupling" above). In loosely coupled or un-coupled tasks, users are disrupted if the entire canvas moves because of one user's actions.

Could

  • Use spatial navigation (flat and wide) instead of hierarchical navigation (menus).

  • Make sure that the application does not become too cluttered or too sparse. Enable users to quickly and dynamically repopulate the screen with an optimal information density for the task that they want to perform. For example, if users are viewing hierarchical data, provide preferred views of the data and note important information, such as organizational or other structural boundaries.

9. Adhere to Principles of 3-D Space Utilization (the Z-Axis)

Users can clearly see and recognize objects, content, and other elements from a distance. When users move closer, they see more detail, such as additional information, subtle textures, or hints of reflected light. When users interact with interface elements, those elements reveal a finer level of detail through sounds, visual feedback, and movement. For example, icons in Launcher transform into application previews when a user touches them, and then they change into the live applications when a user touches them again. These actions provide progressively more detail with deeper interactions. As users zoom in closer to objects, the objects should reveal unexpected visual or audible details.

Must

  • For all movable and free-form elements, use visual feedback (depth) to acknowledge objects or controls that users successfully touch by moving the item toward the user along the z-axis. (Exceptions to this guideline occur when the application uses the z-axis for another purpose, or when the application requires precise placement.)
  • Adhere to the standard gesture for moving forward and backward in the z-axis (see "22. Use Manipulation Gestures, Not System Gestures" below).

Should

  • Use an appropriate 3-D projection for Microsoft Surface. A standard perspective projection does not work because users can approach a Surface unit from any side.

    noteNote
    A projection is the mathematical mechanism by which a system maps 3-D images onto a 2-D plane, usually in such a way that the images appear to be 3-D.

     

  • Use 3-D space in a semantic way so that the relative z-axis position of each element has meaning to the user.

  • Structure each element so that it appears to have volume. The experience must encourage exploration and invite users to navigate through the volume of the element as though it exists in the real world.

Could

  • Use the zoom gesture to move the view in and out rather than to change the size of content. The functional difference is that all elements move toward the viewer, instead of a single element growing larger relative to the others.

  • Give 3-D behaviors to 2-D elements so that, for example, users can turn over flat elements and interact with the other side.

  • Remember that the potential volume of interactive space can be larger than what users can view on the Surface screen at a given moment. Show users that volume can be a vast 2-D canvas with 3-D depth that contains space for content and activities.

10. Make Experiences Natural, Better, and Real

Build a super-realistic application by creating rich, detailed representations of familiar real-world behaviors that are augmented with delightful capabilities. These two goals are deeply interconnected because "magical" capabilities are more believable if they emerge from a real environment. For example, the Microsoft Surface Photos application enables users to easily enlarge images that cannot be physically stretched in the real world.

Must

  • Create immediate responses to all user input. Pre-buffer content, provide a transition, or use other mechanisms to make sure that every touch causes an immediate and meaningful response. An application without immediate responses detracts significantly from the user experience.
  • Enable single-finger drag and flick movements on movable content. You must always define a single-finger drag-and-flick gesture to make sure that users can always apply these basic manipulations to all content.
  • Enable inertia on objects and content that users can move around on the screen. The inertia processor in the Microsoft Surface SDK makes inertia simple to implement, and it contributes significantly to the sense of a natural environment. The processor includes two types of inertia: realistic and goal-oriented.
  • Do not use time-based gestures (such as press-and-hold) on content. Time-based activations introduce mandatory delays for expert users, and they detract from the sense of a natural environment.
  • For content manipulation, work in an unmediated manner directly with the content. Do not offer UI controls as a direct replacement for manipulations (for example, no "rotate button" in place of the rotate manipulation).

Should

  • Use transitions consistently and make sure that the application does not slow the Surface unit until the screen and input display random movements.

  • Make the experience user-driven by ensuring that each state change results directly from user actions. For example, if a user prefers a particular orientation of content, do not "snap" to that orientation. Instead, use a slowing technique that does not use a step-function.

  • Break from "natural" behavior to match user intent. For example, when a user flicks a ScatterViewItem control hard towards the edge of a screen, the control should always bounce back only up to 1 inch, rather than what a real-world physics model would calculate. This break from "natural" behavior matches the user intent to move the control "out of the way." Similarly, when a user flicks a SurfaceScrollViewer or SurfaceListBox control, the control always moves one page, instead of a physics-calculated distance.

  • Do not innovate for the sake of novelty. All interactions in your application should be based on the foundation of the Microsoft Surface SDK (including both the manipulation and inertia processors) or should be natural extensions of user interactions.

Could

  • Consider what advanced functionality you want to enable in addition to natural interactions. Provide a mechanism that extends natural behavior to transition the user from a novice to an expert.

11. Create a Sense of Life

The application’s interface should always show movement and rarely be completely still. Moving and changing elements are pleasantly surprising and unobtrusive. Find the Microsoft Surface equivalent to a person breathing or blinking, or clouds gracefully passing in a summer sky. These things are constantly present, but never distracting. And the application should react instantly to any touch and should always provide something else to touch (but nothing to break the flow of attention).

Must

  • All content that responds to touch must do so immediately and visually. [Application Certification #04] Many of the requirements in "10. Make Experiences Natural, Better, and Real" also apply here.

Should

  • Always show signs of life, even if users are not actively using the application. For example, the Water attract application is constantly moving, but that motion is never distracting.

  • Make sure the motion is subtle and does not annoy or distract users. Do not cause the application's state to change; instead, change only background and graphical elements.

  • Provide instantaneous responses to every touch. These responses help users understand what is occurring in the system and why it is occurring. Operations that require time to complete should not delay the response of the system.

Could

  • Distinguish between system states and responses to touches. Even when controls or content are disabled, the application should provide a visual response that indicates their state.

12. Enable Playful, Pleasurable, and Exploratory Touches

Users enjoy "playing" with multitouch input and seeing responses for that input. This includes responses that are purely enjoyable and not necessarily functional, and responses that are integral to the action or purpose of the application. Microsoft Surface experiences should focus on highly crafted representations of content, motion, and sound to help create fun, pleasurable experiences of the highest possible quality. The interaction should focus on the quality of the journey, not just completing tasks. For example, the transition from a stack view of photos into a grid view supports the task of browsing more content, but the transition occurs seamlessly as the container’s shape changes and resizes and the content gently moves to indicate scrolling.

Design Surface experiences with a framework that starts with familiar metaphors and objects and then exposes additional possibilities as the interaction unfolds. Over time, this framework enables users to progressively enjoy more capabilities and draws them deeper into the experience.

Must

  • There are no certification requirements that apply specifically to this topic. However, many of the requirements discussed in "10. Make Experiences Natural and Better than Real" also apply here.

Should

  • Start the experience with a familiar environment and behaviors so that users quickly feel comfortable exploring. To create this type of experience, mimic the metaphors of Surface Shell or the natural environment around the Surface unit.

  • Enable quick discovery of delightful interactions so that users can quickly accomplish simple tasks or just play with the system. Early success creates familiarity, confidence, and a willingness to explore.

  • Design pleasurable transitions by using animation and other techniques.

  • Enable users to explore the interface by providing gentle barriers that constrain them to preferred values of parameters but that do not constrain users to a particular value. For example, if an application produces printed photographs, and if a user resizes a photo, the application might snap to sizes that do not require interpolation of pixels (such as 50% or 25%). However, users should always have the freedom to access all reasonable sizes, including 51% and 49%.

  • Make the technical performance flawless. The experience should run flawlessly without any delays or hiccups.

Could

  • Provide continued, discoverable delight over time, in minutes, hours, days, or months. For example, the Water attract application starts with gentle ripples to entice users, responds to their every touch to give a sense of success, and ultimately draws their attention to the access points to initiate a deeper engagement.

  • Provide a path for novice users to become experts. If the same user will use your application for an extended period of time, create distinct usage patterns and methods for novices and experts so that experts can interact more efficiently. Enable novices to become experts without instructions so that they use the application for the long term.

  • Incorporate a personality into your application and make it a character in the experience. For example, a mechanical application could use graphics that suggest gears and motors are driving it.

  • Enable users to have fun with each other so that the application drives social interaction. For example, require multiple users to perform a task together by requiring input from many controls simultaneously.

  • Consider all constraints in your application and visualize them as soft constraints. For example, if a user insists on pushing past the end of a list, allow the list to wrap around to the beginning again after the user has exerted effort.

13. Use Affordances and Constraints to Lead Interaction

Most Microsoft Surface experiences are highly exploratory and contextual to the environment. Applications should invite users to interact in a natural manner instead of telling them what to do. Design subtle affordances that invite users to discover through exploration, and create constraints that prevent users from doing anything "wrong.”

Must

  • There are no application certification requirements that relate directly to providing affordances and constraints.

Should

  • Provide affordances that invite users to interact even when input is not required. Affordances encourage exploration and provide opportunities for scaffolding. For example, enable users to always manipulate objects by using the manipulations processor or the ScatterView control.

  • Provide constraints that prevent users from doing anything "wrong." For example, do not allow users to move objects outside the bounds of the Surface screen where they cannot retrieve them.

Could

  • Develop and apply a detailed visual language that indicates where and how users should touch. For example, open forms invite touch, while closed forms discourage it.

14. Ensure the Experience Is Focused

Microsoft Surface experiences should trim features and focus on a few rich options. Narrow the number of options to only the most important choices, and make those choices drive a rich and rewarding experience.

Must

  • There are no application certification requirements that relate directly to this topic.

Should

  • Reduce the number of features in your applications. Additional features add both power and complexity. Instead, provide a premium experience that focuses on the primary task that the application offers.

  • Make sure that the set of available features focuses on the particular task. Many applications provide functionality that enables many separate tasks. Make sure that your application has a clearly defined task and that its features focus on performing that task well.

Could

  • Reduce the number of available paths and choices so that users always have access to the next step and available options. Achieve the correct balance between the number of choices and paths to ensure that your application meets the functionality needs of its users. User testing often helps determine the ideal balance.

15. Make Applications Intelligent but Not Presumptuous

Microsoft Surface applications should anticipate user responses to ensure a smooth and efficient experience but should keep users in control. For example, if a user interacts with an application about a recent trip to Europe, the application might automatically display trip photos. However, the user might perceive the automatic action as presumptuous, disruptive, or annoying if it is wrong. Instead the application should enable the user to choose to display vacation photos, which makes it easy and quick for the user to complete the anticipated action and puts the user in full control of the experience.

Must

  • There are no application certification requirements that relate directly to intelligent application design.

Should

  • Make obvious next steps available in the context of the application's use. Completely open applications that allow for all functionality at all times are good. But applications that give affordances for the "right" next step and make those steps available are even better.

  • Avoid taking automatic high-cost steps. If your application performs a task automatically, always make the user feel in control. And if the task is the "wrong" action, minimize the cost (in terms of time or other factors) of "undo.”

  • Keep users in full control at all times by enabling them to lead the experience. Do not ask the user to confirm actions (for example, "Are you sure you want to exit?"), but make sure that each step occurs because of the user's explicit actions.

Could

  • Make non-textual suggestions to users to help them make informed choices. If your application anticipates two possible paths, demonstrate the results of those paths instead of describing them. For example, if the user can choose between two preferred fonts, put those fonts at the top of a list that users can select from, and illustrate the user’s text in those fonts. However, the application should always keep all font choices available.

16. Integrate Learning with Doing

A Microsoft Surface application should contain levels of depth that move users smoothly from their first touch to full engagement with the application. If instructions are necessary, integrate them with the natural flow of use and do not steer attention away from content. If you are trying to reveal the existence of functions, make those functions apparent at the right moment (when they have an effect). If the application teaches techniques, such as gestures, demonstrate those techniques through affordances and constraints that guide the gesture.

Must

  • There are no application certification requirements that relate directly to learning integration.

Should

  • Provide a clear path from novice to expert so that users can move from the initial view of the application to where you ultimately want them to go. For example, if the novice users are individuals who are working on highly coupled tasks and you want them to perform different, loosely coupled tasks, you should visually divide your application by using tools to support each task on any side of the Surface screen.

  • Make sure users can discover essential features immediately. For example, if your application enables users to create documents, provide a blank document and tools for creating content immediately.

Could

  • Provide instructions in the flow of the application instead of requiring users to break concentration and search a Help system.

17. Use Progressive Disclosure to Reveal Functionality

Because of the spatial capabilities of Microsoft Surface applications, you can enable users to navigate through an environment and provide on-demand, deeper views of an object (also known as progressive disclosure). For example, users can zoom into a photo to reveal deeper content and functionality.

The following guidelines describe how to use progressive disclosure to help users learn as they use Surface applications.

Must

  • Show users that unseen content exists and show affordances that guide users to access the unseen content. For example, animate a list of songs when it appears on the Surface screen so that users see the additional content, and visually show how to access it (for example, by moving a finger along the same axis as the animation moved the list of songs).

Should

  • Encourage discovery through exploration, so that the application reveals additional functionality as users continue through the experience. For example, in the Music application, album covers are ScatterViewItem controls, so users can touch them and flip them over to reveal the contents of the album.

  • Use consistent interaction metaphors throughout your application. For example, if you use the flipping technique that is described in the preceding point, make all objects use the flipping technique and provide additional interaction capabilities on the back of each object.

  • Hint at deeper possibilities without taking the focus away from the content. For example, when users first open the Music application, the albums appear on the display, and some flip over to demonstrate the functionality.

Could

  • Provide progressive disclosure for content and interaction paradigms and metaphors. For example, when students learn the piano, they start with songs that have a limited set of notes. The set of notes and the complexity of the pieces expand as the student gains knowledge and skill.

18. Ensure Instant Gratification and a Sense of Success

Users might try an action that does not work, but the resulting feedback should help them learn, resolve problems, or encourage them in a correct direction.

Must

  • Require explicit and intentional user input to activate destructive functions or to cause larger changes or transitions. This input is especially important for transitions that affect more than one user, and even more so when the users are engaged in tasks that are not highly coupled. For example, to open an application from Launcher, users must touch the application once to see the application preview, and then touch it again to open the application.
  • Give every touch an immediate visual response, even if the ultimate result of the input takes time to compute. A pre-made response is better than a delayed custom response.

Should

  • Make sure that visual indications of touch are accurate so users do not believe something is touchable when it is not. For example, disabled buttons must be visually distinct from enabled buttons.

  • Make sure feedback helps the user better understand the system and its state. For example, when a user touches a ScatterViewItem control, it moves to the front, grows, and displays a drop shadow, which indicates a change in its position along the z-axis, reinforces its position, and demonstrates that it is on top of the content.

  • Put users in control so that they can always understand the state of the application and how to continue. Do not provide too many automated actions, and keep controls enabled and logical at all times.

  • Understand the technical constraints. The slowest element in the experience determines the performance of the application. Provide interactive content or buffer progress, or use other techniques to engage users and provide a sense of immediate feedback.

Could

  • Make all content touchable so that some visual response occurs regardless of where the user touches the Surface screen.

  • Buffer progress so that results do not arrive in bunches, but in a smooth and consistent manner. For example, as an application loads photos from a memory card, set an achievable pace and have the application display each photo at that pace instead of in bunches as the system provides them.

  • Clarify errors so that when the users touch the application, they can distinguish between hardware errors (the system did not detect the touch), state errors (the touch was detected, but the touched item is not in a state that they expected, such as disabled), and semantic errors (the touch was detected, the application is in the state they expected, but the application’s response to that touch is not what they expected). You can clarify these errors by providing clear visual feedback with information about all of these levels.

19. Appeal to Multiple Senses

Microsoft Surface applications should appeal to more than one sense at a time. Visuals, sound, motion, and physical interactions help communicate, create moods, convey personality, direct attention, and enchant.

Must

  • There are no application certification requirements that deal directly with appealing to multiple senses.

Should

  • Include pleasing and appropriate visual designs.

  • Include sounds that are appropriate to the application. Be sure to consider the social principle of Surface applications and provide unambiguous feedback when users perform simultaneous tasks. For example, if users perform many rapid input events simultaneously, do not give generic error feedback that they might misinterpret.

  • Include visual cues that lead users to discover new places, things, or effects within the application. These cues provide scaffolding, enable users to explore, and encourage them to reach further by hinting at elements that they have not yet discovered.

  • Provide problems that users can solve by making sure that those problems do not require frenetic action, impose time limits, or pose threats to the safety of the content.

  • Require decision-making based on a set of rules, a context, and a goal. Ensure that the decision-making moments in the experience occur at reasonable intervals and levels of expertise for the users.

  • Deeply engage users with the application by minimizing the UI and enabling users to focus on their content.

Could

  • Combine various physical, visual, and audio responses to create a single, yet complex, effect. For example, moving a physical object through water causes the water to move and provides sounds that enable users to experience the movement of the object and the water.

20. Use Continuous Input, Not Discrete Actions

Touch, gesture, and direct manipulation in Microsoft Surface experiences move away from discrete actions toward continuous action. In GUI applications, discrete actions are mostly brief, single-click actions that users perform in a sequence to complete a task. For example, to move an object from one location to another, a user would select the object, select the appropriate command, and then move the object.

In contrast, direct manipulation favors continuous actions. To move an object from one location to another, the user can just grab it and move it to its new location, as shown in the following illustration.

Gestures - Dragging object

Must

  • Give every touch an immediate visual response, even if the ultimate result of the input takes time to compute. A pre-made response is better than a delayed custom response.
  • Remember that size matters. In GUI applications, the position of the mouse is represented as a single point on the screen. When fingers and objects are input devices, you must properly size interactive elements to accommodate these input methods, and you must position them so a user’s hand, arm, or input object does not block relevant content around an interactive element.

Should

  • Position immediate visual responses at the point of contact so that every touch appears to cause a direct, physical reaction.

  • Use many fingers, many users, and many objects by ensuring that your application responds well to many forms of simultaneous input. Use the social principle and make sure that virtual and physical objects blend seamlessly.

  • Use affordances for contact types and methods. Microsoft Surface can distinguish between tags, fingers, and large areas of contact (blobs), but it cannot identify which fingers are on the same hand or user, and it cannot identify different types of blobs (hands versus arms versus untagged objects). Provide visual affordances and constraints to tell users how and where they should touch the Surface screen.

  • Design for accidental activations so that users can see and undo actions when they touch the screen unintentionally. Accidental activations typically occur with conversational gestures, when draping clothing touches the screen, and when users rest their arms on a Microsoft Surface unit.

    Note: A conversational gesture is a movement that one user uses to explain or articulate a concept to another user. This type of gesture typically occurs when one user points to an object on the Surface screen, which causes an accidental activation of that object.

Could

  • Extend direct manipulation by enabling user input in one area to cause a change in another part of the display. To create this type of manipulation, use super-realism to separate cause and effect, and use the principle of scaffolding. However, you must also include immediate, in-place feedback, and make clear to all users the connection between cause and effect.

21. Make the Content the Interface

The user interface should only have limited number of items that are not content. Users should directly move objects on the screen. Controls should reveal themselves from content and should be lightweight and relevant to the content. A Microsoft Surface application should always preserve the illusion that users can interact directly with the content itself. For example, the touch areas of the stack control in the Photos application are at the top of the z-order when the stack is at rest, but the touch areas are partially obscured when users touch photos in the stack.

Must

  • Do not connect external input devices to a Surface unit in such a way that they replace the primary interaction experience. For example, a teacher can use a physical control panel to manage content, but the primary experience for the students must be through touch and multitouch.

Should

  • Minimize the use of nonessential controls. For example, to zoom in or out, users should use the zoom manipulation, not a button.

  • Do not provide multiple system modes for input touches. For example, in a GUI application, when a user selects a property to apply to an object, the mouse pointer changes mode (such as turning the mouse pointer into a paintbrush). This concept does not work with any multitouch system, including Microsoft Surface; which 1 of the 52 contacts should become a paintbrush? This is an important, fundamental difference between single-touch and multitouch systems. In multiuser applications, a user who puts the system into a specific mode can significantly disrupt the experience of all other users.

Could

  • Avoid using indirect controls such as sliders, buttons, and check boxes.

  • Demonstrate content parameters through physical reactions to user input by using the principle of super realism (see Super-realism).


22. Use Manipulation Gestures, Not System Gestures

A gesture refers to a physical action. Many systems use gestures like shortcut keys, which makes them independent of the particular physical location where the user interacts with content. In contrast, Microsoft Surface uses manipulation gestures. The distinction between system gestures and manipulation gestures is important:

  • Manipulation gestures are physical movements of virtual content within an application.

  • System gestures are movements that indirectly affect the on-screen content.

Both types of gestures can use identical physical actions, but on-screen graphics guide and provide affordances for manipulation gestures. The use of manipulations relates to the principle of scaffolding.

Must

  • Do not redefine the following standard manipulation gestures so that different manipulations cause the same behavioral response or the existing manipulations cause different behavioral responses. Use the manipulation processor in the Microsoft Surface SDK to always yield the correct results.
  • Move: One or more fingers on an object to move or flick it.

  • Resize out or enlarge: Two or more fingers (points of contact) on an object move apart. Resize in or reduce: Two or more fingers (points of contact) on an object move closer together (toward each other).

  • Rotate: One finger touches an object and drags it around in a circle so that it rotates and translates; two or more fingers on an object move in opposite directions along an arc (circle); one finger remains stationary on an object while other fingers rotate the object around that pivot point.

Should

 Do not replace these manipulation gestures with controls that enable users to zoom in or out by pushing a button.


23. Properly Integrate with Surface Shell

If your application integrates properly into Surface Shell, you can help preserve the overall context of the Microsoft Surface experience and ensure a baseline behavior across all applications.

Must

  • Provide a video, slide show, or images for the application preview in Launcher. This preview should lead users into your application and teach them how your application behaves. A single, static image does not accomplish these goals.
  • Include descriptive text with the application preview to give users more information about what they will be interacting with.
  • Maintain an attract application in your Surface deployment. This application entices users to approach the Surface unit and educates them about multitouch, which they can extend to their experiences with other applications. Such an application must ensure that every touch creates a response from the Surface unit. Multiple touches in the attract application must receive visibly different responses from single touches. Objects (blobs) must receive yet another different response.

Should

  • Enable access points in your application by making sure that they are visible and visibly distinguishable from the rest of the graphical content.

  • Demonstrate successful interactions in your preview movie to help users learn how to perform a few basic interactions.

  • Transition your application when it loads. Make sure that elements enter the application in a natural transition (see "1 Make Virtual Objects Behave Like Physical Objects" above).

  • Minimize how many resources your application uses when it is not in focus. Do not design your application so that it continues to require the processor or other system resources when it is not in focus. The Microsoft Surface SDK Help documentation describes how to use special .NET event mechanisms to manage resources.

Could

  • Follow the color and interaction methods in the Water attract application and Surface Shell to provide a more seamless experience throughout the system. For example, use water as the underlying metaphor for the application, and extend the use of the linear scroll viewer to drive your experience.

24. Consider the Physical Environment

The physical environment around a Microsoft Surface unit (such as the location, audience, lighting, and objects) influences the Surface experience. For example, cultural differences in audience significantly affect how closely you should arrange clustered seating, and the seating density also influences how people use the Surface unit. Internal décor can also affect how effectively a Surface unit might attract people in a given venue.

If a Surface application requires users to place certain objects on the Surface screen, the location of those objects on the screen and the location where users store them when they are not in use can affect how quickly users discover certain functionalities and how they perceive the overall goals of the experience.

Must

  • There are no application certification requirements that relate directly to the external environment.

Should

  • Consider the physical space where the Surface unit will be located. Make sure that your application reflects the environment. For example, if your application appears in lounge environments, match the virtual lighting to the kind of mood that lounge environments typically have.

  • Make sure users can access the Surface unit from all sides. Never place a Surface unit in a location where it touches another object, such as a table, wall, or other furniture.

Could

  • Reflect the outside environment in your application, such as the weather, time of day, and season.