Win8 Interactive ux--for touch interaction with Windows

Touch Interaction for Windows

Windows 8.1 Provides a set of simple touch interactions that are used throughout the system. Applying this touch language consistently allows users to feel familiar with your app. By making your app easier to learn and use, you can increase user confidence. For information about touch language implementations, see gestures, actions, and interactions.

In this article:

• Touch Design Principles
• Touch language
• Touch target
• Posture and Grip Method
• Related Topics

Touch Design Principles

Provide instant feedback

Give users immediate visual feedback whenever they touch the screen to increase confidence. Interactive content should show some sort of reaction-changing colors, resizing, or moving. Non-interactive content should display the system touch visualization only when the user touches the screen.

Content should follow the finger immediately after

Content that can be moved or dragged by the user, such as a canvas or slider, should be moved along with the user's finger. They should return to their default state when the user slides buttons and other content that cannot be moved or when the finger leaves them.

Make the interaction reversible

For example, after you pick up a book, you can put the book back in place. Touch interactions should have similar behavior-they should be reversible. Provides visual feedback to show what happens when the user lifts his finger. This will enable your app to safely navigate using touch actions.

No limit on the number of fingers

People often inadvertently use multiple fingers for touch. That's why touch interactions shouldn't change quickly based on the number of fingers on the screen. As with the real world, sliding content using one or three fingers should be no different.

Touch language

Long Press to view

This touch interaction displays details or instructional visualizations, such as tooltips or context menus, and does not allow actions to be performed. Any content displayed in this manner should not prevent the user from panning if the user starts to swipe his finger.

important When you have both horizontal and vertical panning enabled, you can select by pressing and holding down.

Click to do the main action

Clicking on an element can invoke its main action, for example, launching an app or executing a command.

Swipe to Pan

Sliding is primarily used for panning interactions, but it can also be used for moving (panning is limited to One direction), drawing, or writing. Sliding can also be used to locate tightly arranged small elements by wiping (swiping a finger on a related object, such as a radio button).

Swipe to select, make command actions, and move

You can select an object in a list or grid by sliding the finger a little bit perpendicular to the translation direction (panning is limited to One direction). Displays the app bar with related commands when the object is selected.

Pinch and stretch to scale

Although pinch and pull gestures are often used to resize, they can also be used to jump to the beginning, end, or any other location in content that supports semantic scaling. The semantic zoom control provides a zoomed-out view that shows the grouping of items and returns them in a quick manner.

Turn to rotate

Rotating with two or more fingers drives the corresponding object to rotate. Rotating the device itself can cause the entire screen to rotate.

Swipe from edge to use app commands

Swipe from the bottom of the screen or the top edge of the page to display the app commands. Use the app bar to display app commands.

Swipe from edge to use system commands

Swipe from the right edge of the screen to display a charm that contains system commands.

Swipe from the left edge to cycle through the currently running apps.

Swipe from the top edge of the screen to the bottom edge to close the current app.

Swiping down from the top edge of the page and to the left or right edges places the current app on the screen side.

Note The user can perform some direct actions at the same time, such as sliding to pan, pinch to zoom and rotate to rotate the interaction, and use any of the touch points.

Touch target

Size and efficiency: the size of the target object has an impact on the touch error rate

No perfect size for any touch target. Different sizes are suitable for different situations. Operations that have serious consequences (such as delete and close) or common operations should use a larger touch target. Operations that have minor consequences and are less frequently used can use smaller targets.

Target Size Guide

	7x7 mm: Recommended minimum value If the touch of the wrong target can be corrected by one or two gestures or within 5 seconds, then 7x7 mm is the appropriate minimum value. The spacing between targets is just as important as the target size.
	When accuracy is very important Close, delete, and other serious consequences do not withstand accidental clicks. If the touch of the wrong target requires more than 2 gestures, 5 seconds, or major contextual changes to correct, the target of 9x9 mm can be used.
	When the screen is hard to fit If you find it difficult to load the desired content on the screen, you can also use the 5x5 mm target, as long as the touch of the wrong target can be corrected by a gesture. In this case, it is important to use a 2 mm spacing between the targets.

Accessibility features

As you plan the UI and interactions your app will support, keep in mind your users ' wide range of abilities, disabilities, and hobbies. Follow the replication feature design from the start to help make your app accessible to as many audiences as possible. For more information about planning for accessibility, see Accessibility Guidelines.

Finger size

Some people often complain about their "fingers too thick". But even the baby's fingers are wider than most touch targets.

The figure on the left shows that the average adult finger width is about 11 mm (mm), the baby's finger width is 8 mm, and the basketball player's finger width exceeds mm!

Posture and Grip Method

The design for touch is not just what is displayed on the design screen. It needs to be designed for the device's holding style (grip method).

Often, different people like to hold a tablet in a different way.

The current task and how it is displayed usually determine which grip to use. However, direct environmental and physical comfort can also affect the length of a grip and the frequency at which it is replaced.

Try to optimize your application for different types of grip methods. However, if an interaction is naturally suitable for a specific grip, the grip method can be optimized.

Interactive area

Because people usually hold the side and bottom corners of the tablet, the side is the ideal place to put all the interactive content.

Reading area

The contents of the upper half of the screen are easier to see than the contents of the lower half, and the contents of the lower part are often obscured or ignored by hand.

Common method of Grip

Grip Method	Grip and Interaction	Design-time Considerations
	One hand grip, the other with a small to moderate interaction	Enables fast interaction at the right and bottom edges. The lower right corner may be blocked by hands and wrists. Limiting the range of effective touch can improve touch accuracy. Read, browse, send e-mail, and simple typing.
	Two hand grip, thumb for a small to moderate interaction	Quickly interact in the lower-left and bottom-right corners. A fixed thumb can improve touch accuracy. Items in the center of the screen are hard to reach. You need to change posture when you touch the center of the screen. Read, browse, simple type, game.
	The device is located on the desktop or leg, with a small amount of interaction between the two hands	Quickly interact at the bottom of the screen. The bottom corner may be blocked by hands and wrists. Reducing the effective touch range increases the accuracy of touch control. Read, browse, send e-mail, and complex typing.
	Place your device on the desktop or shelf, use interactive or non-use interactions	Quickly interact at the bottom of the screen. Touch actions at the top of the screen will obscure the content. A touch operation at the top of the screen may cause the device in the connected state to lose its physical balance. Interacting at a certain distance reduces readability and accuracy. Increasing the size of the target object can improve readability and accuracy. Watch movies, listen to music.

Win8 Interactive ux--for touch interaction with Windows