Device Interaction

Consumers take their devices everywhere and use them at work, home, and play. This section talks about designing for touch and interaction models for different form factors.

Device interaction

The visual cues created by branding, logo placement, and button and connector locations should support this design. Buttons and connectors should not block a user’s grip. When placing the Windows button, the optimal position is the bottom long bezel. If this doesn’t work, place the Windows button in the center of the right short bezel.

Designing for touch

Based on user research, core interaction models, orientation, and physical contact are the three areas to focus on when designing for touch.

Core interaction models

Core interaction models reflect common device-use scenarios. Because of core interaction models, you should think about how the customer will use the device. Another important thing to think about is how a device’s weight and dimension might affect a customer’s interaction experience. When asked to use a device, customers typically wanted to use both hands to interact with it. Therefore, the core interaction model is based on the user sitting in a chair while holding the device in their lap or putting it on a table, then using one or both hands. In a seated position, a device lets a customer use several hand placements and interactions:

• One hand holds the device, while the other hand interacts.
• Not holding with hands (device on a table, lap, or stand), both hands interacting with the device or user is passively consuming.
• Both hands are used to hold the device, and both thumbs are used for interaction.

Bezel width is defined as the space between the active display surface and edge of the device. Based on our user research, we learned the preferred bezel width is at least 17.75 millimeters (mm) (0.7 inches), and a maximum of 25.4 mm (1 inch). The following two-hand thumb interaction heat map shows the typical reach of people’s thumbs when two hands are holding a device with a 1-inch bezel. Green is comfortable and reachable by most, yellow can be reached by some, and red is typically uncomfortable to reach for majority. A bezel width wider than 1 inch reduces the reach.

Tablets

For tablets, the user is in constant physical contact with the device. For example, when a user is sitting and using their hands or their lap to hold the device, the hands and lap come in contact with the front, back, and sides of the device. This is unique to tablet mode devices and presents additional challenges in design.

• Flush bezel display surface. Make sure the edge-to-edge glass allows touch gestures at the corners and edges of the display.
• Ergonomic surfaces. All surfaces are smooth and comfortable. Protruding ports, seams and parting lines and rough and sharp edges sacrifice comfort and make the device seem less polished. Since a tablet is held a lot, having smooth and rounded edges is recommended.
• Stability. Materials must offer grip for extended, secure positioning against hands and clothing. Do not add excess weight or bulk to the system. Make sure the device is stable to use on hard and soft surfaces. It must be comfortable to pick up and grip, so the user can hold onto it easily.
• Surface temperature and venting. All surfaces must remain cool to touch. Venting (if necessary) is positioned to avoid contact with the user. For a right-handed user, the left side and bottom of the device are especially important to keep cool and clear, since they are held closest to the user’s hand and body. When considering heat management solutions, keep in mind scenarios where the customer has the tablet on their lap or resting flat on a flat table.
• Grip. Ensure handgrip regions (the left and right side of the device in landscape) are designed away from heat dispersion and venting areas. If the user is comfortable holding the device on a side or specific area that is hot, or blowing hot air, they must find an unnatural way to hold the device. As a result, the device is more problematic to pick up and hold for extended periods of time. Materials that help with grip (e.g., rubberized edges) are also ideal.
  • Palm grip. Bottom corner is held in the corner of the palm.
  • Edge grip. AVERAGE 9 cm from the top for landscape, holding the device along the edge. The distance from the top varies by individual, device, and UI element position.
  • Relaxed grip. User relaxes grip and holds the device partially in finger creases to gain more reach distance. We saw this in our research when users were working with the thumb keyboard. Observed with palm and edge grip, more common with edge grip.
  • Sliding edge grip. User is holding the device along the edge but slides hands up and down to reach UI elements along the edges.
  • Non-uniform grip. User is holding the device at non-uniform distances from the top (along the edges). For example, holding the top left hand corner and bottom right hand edge. Not common but observed.
• Durability. With typical use, assume that a device may be dropped by hands or slide off of a table. It must survive the drop mechanically, and materials and finishes must invoke confidence in durability--without compromising aesthetics. The device will be carried, shared, placed on nearby surfaces, and docked. Unlike clamshells, a tablet’s display is unprotected. Common activities, like putting the tablet into a bag and removing it several times a day, must not damage the display or its surface or cause user anxiety.
• Balance. Consider the center of gravity. For example, place near the handhold area when possible. The core interaction model of holding the device at an angle, in the user’s lap or on tabletop, must feel natural. If the top side or right side is heavier than the others, the device is difficult for the user to hold and use comfortably.

Clamshell

For clamshell form factors, there is less physical contact compared to a tablet. For example, when the user is sitting down, a clamshell device is usually on a table or lap with the hands resting on the palm/wrist rest or interacting with the touch display, keyboard or integrated pointing device.

• Flush bezel display surface. Ensure edge-to-edge glass allows touch gestures at the corners and edges of the display.
• Ergonomic surfaces. All surfaces should be smooth and comfortable. Protruding ports, seams, and parting lines and rough and sharp edges sacrifice comfort and make the device seem less polished.
• Stability. Materials should offer grip that makes the device comfortable to pick up and grip, so the user can hold onto it easily.
• Surface temperature and venting. All surfaces should remain cool to touch. Venting (if necessary) is positioned to avoid contact with the user or prevent the intake and exhaust vent from getting blocked in cases where the device is laid flat on a table or lab.
• Balance. Consider the center of gravity. For example, while interacting with the touch display, the device should not tilt backwards.
• Hinge. The hinge should allow for light touch interaction such as invoking charms or performing a select action without having to brace the display to prevent it from shaking or wobbling.

Mobile All-in-one

For All-in-One form factors, physical contact is limited even compared to a clamshell. For example, when the user is sitting down, an All-in-One device is usually on a table with the hands resting on the palm/wrist rest of the keyboard or interacting with the touch display, keyboard or integrated pointing device.

• Flush bezel display surface. Make sure edge-to-edge glass allows touch gestures at the corners and edges of the display.
• Fan noise and venting. Venting should be positioned away from the user and placed where the intake and exhaust vents are not blocked in cases.
• Balance. Consider the center of gravity. For example, while interacting with the touch display, the device or display should not tilt backwards.
• Hinge. The hinge should allow for light touch interaction such as invoking charms, performing a select action or gestures without the device or display shaking or wobbling.

All-in-one

For All-in-One form factors, physical contact is limited even compared to a clamshell. For example, when the user is sitting down, an All-in-One device is usually on a table with the hands resting on the palm/wrist rest of the keyboard or interacting with the touch display, keyboard or integrated pointing device.

• Flush bezel display surface. Make sure edge-to-edge glass allows touch gestures at the corners and edges of the display.
• Fan noise and venting. Venting should be positioned away from the user and placed where the intake and exhaust vents are not blocked in cases.
• Balance. Consider the center of gravity. For example, while interacting with the touch display, the device or display should not tilt backwards.
• Hinge. The hinge should allow for light touch interaction such as invoking charms, performing a select action or gestures without the device or display shaking or wobbling.

Orientation

Windows supports all PC form factors, and landscape is standard for notebooks, All-in-Ones and desktops. Windows is optimized for both portrait and landscape orientation, which enables a range of scenarios from heavy interaction, like content creation, to passive activities, such as video consumption. Portrait orientation enables some scenarios such as reading and viewing photos. Users can rotate the device to switch between landscape and portrait.

Device rotation

The user’s grip and how they turn the device helps you figure out where to place buttons and connectors.

Our research shows:

• Turn the device so the Windows button is at the bottom or on the right.
• Expect the power button at the top edge.
• Turn the device so the camera is on the left or at the top.
• Turn the device to portrait position so the book-style cover opens in the same direction as a physical book.
• (Some) Turn the device so the volume button isn’t on the bottom bezel.

Designated buttons and hotkeys

Some users prefer to use designated buttons or hot keys to perform common tasks. Windows devices support designated buttons and hotkeys.

Common tasks include:

• Launching a default mail client
• Opening a browser window.
• Launching a desktop application.
• Using designated button or launch a Windows Store app associated with a file or protocol handler.

Send comments about this topic to Microsoft