WP8.1 Learning Series (18th)--windows Phone interaction and usability

This topic discusses how layouts affect the usability of your app. Other common UIs, such as search and settings, are also discussed in the context of the usability of your app.

Before you continue to use controls and interactions, do the following:

• For a strategy for conceptualizing apps, see Designing the best Windows Phone app for you, whatever you can.
• Read about the content of standard system controls in the control design Guide.

Touch Target and text

Your app should present a touch target of sufficient size to the user. The user should be given feedback when clicking on the control, stating that the click has been applied to the control and allows it to continue the operation within the app. For this reason, Windows Phone has some specific requirements for touch targeting and text usage.

Size requirements

Touch design requires a multiple balance between size, spacing, and visibility. Achieving this balance reduces the so-called "target Acquisition Difficulty index"-in other words, it makes the control easier to press.

Extensive user testing has shown that the 9 mm block is the ideal touch target size for all Microsoft touch platforms.

9 mm or larger blocks are ideal touch targets for touch UI assets

Allows for a smaller hit target height, with a minimum target size of 7 mm. In these cases, it is better to have a wider visual asset. For example, a list item or menu item should be wide.

7 mm is the lowest target size

About 9 mm requirements

It is recommended that the touch target size is no less than 9 mm blocks. Use it for controls that support most tasks.

If the space is severely restricted, you can use the minimum touch target size of 7 mm in large widths.

Nine mm This number is determined by a hundreds of-hour user test and can represent the minimum average error rate (or the ratio of incorrect clicks to total hits) for non-contiguous tasks and continuous tasks. The minimum touch target size of 9 mm limits the error rate to as low as 1.6%.

The minimum touch target size is 7 mm. Use it for less-used controls or for controls that are wide enough (not less than 15 millimeters), and are only used when the design is too highly restrictive.

Minimum visible size

The minimum visible size of a touchable item should not be less than 4.2 millimeters. If it is smaller than this size, the user will not consider the item to be touchable at all. This size is used when smaller visual assets are needed. The target should be 10-15 millimeters or greater.

tip: In most cases, the visual size must be equal to the touch target size. Use spacing to make the control's appearance easier to hit.

Evaluate the consequences of wrong clicks

Always keep the task context in mind and evaluate the error rate when assigning a target size to a control. Controls that have major error consequences should have a larger target. Controls that are used in motion should also have larger targets.

For example, the system Phone Dialer should have a very large touch target, because error clicks can have a high cost: The user may dial the wrong number. In high-fault-tolerant operations, you can choose to use smaller targets.

Displays the non-contiguous portion of the touch target.

Touch the target section

In the previous tile map, note the following:

• visual spacing: the proper spacing between controls and buttons increases the comfort of touch.
• Visual Assets: This is the actual size of the icon/control/text that the user will see.
• Touch target: This is the green border around the visible asset that is displayed. Touch targets can be equal to or greater than the visible asset size, but must not be less than the visible asset size. In the common control style guide, they are represented by a green line.
• Dead Space: Two The spacing between touchable items is the area where no action is taken.

To learn more about making great-looking tiles, see the Tile and badge guides.

Use a smaller target

If space and tasks prevent you from using the right touch target, consider how to transform the following properties of the touch target to improve the experience:

• Shape
• Position
• Frequency of Use
• Task context
• Visual design (padding/spacing)
• Error consequences

	make the target size larger than the visible asset. if the visible size of the asset is less than the target, the size of the visual asset must not be less than 4.5 millimeters.
	the spacing is introduced between adjacent visual assets. in these cases, a more appropriate hit target is achieved by adding a gap (minimum 2 mm) between adjacent assets to adjust the hit target size.
	Create a visual fill around the asset. by introducing visual fills to create a secure boundary, you can reduce the difficulty of hitting smaller targets. This will reduce the perceived difficulty of hitting the target.

When defining the appropriate size for a UI element, consider the importance of the element and its accompanying tasks. Ordinary tasks, such as checking e-mails, should not get too much attention from the user; Special tasks should attract more attention.

Adjust the spacing of small controls

If you have small elements, you can adjust to the target size by using spacing. Small controls that use spacing to adjust tight intervals. Remember to use spacing for small, tightly spaced controls.

Important: use sufficient spacing, regardless of the size of the actual control, so that the minimum touch target size of 9 mm can still be accommodated.

Suppose you have a 4-millimeter check box control. Increase the touch target by 3-5 mm to reach a size of 7-9 mm. If you want to further reduce the error, add a gap between the check box control and the next adjacent 9 mm target (or about 90 pixels on a 262-dpi device). Use a vernier caliper to measure an image on a device; it is important to size, not pixel count.

Abnormal

Some controls, such as on-screen keyboards and hyperlink controls, use algorithms to improve touch precision.

Exceptions like keyboard and hyperlink lists require a correction mechanism (such as hitting the target sizing algorithm) or scaling to get a more appropriate hit target. In most cases, the target height is more important than the width, but there are some exceptions (for example, the width of the keys on the soft keyboard may affect the target acquisition). Make sure that you achieve the desired target size in at least one dimension.

Soft keyboard

If everything fails, try not to place too many adjacent hit targets around a small hit target.

Too many adjacent hit targets

Minimum text size

The size and position of the layout elements are critical to the composition of the screen layout. The foundation of modern design lacks flanger elements, which means that text and typography are very important elements.

tip: make font labels and hints clearly visible and have the appropriate spacing. The minimum font size on the Windows Phone is 15 points.

Core elements typically use extra elements such as boundaries and frames to subtly construct the layout of the content. Make sure that you create the hierarchy you want on the screen with different font sizes, colors, or styles so that users can easily identify primary and secondary tasks.

To create a custom control

When you consider the fill scheme or display of your app's content, you can create your own custom controls until you have consulted the standard System Control design Guide in your control.

You create a custom control just to make a feature, task, or operation easier to complete or understand.

Consider using the system standard control as an example of an operation in a custom control. If you use controls while viewing content, use these controls sparingly. The control should fade out during full-screen viewing.

Button

To provide a consistent experience across the Windows Phone platform, it is important to follow the common structure when placing buttons. Doing so will provide a simple and consistent structure for the user's navigation.

It is also important to know what hardware and software will be available to you free of charge. For starters, each Windows Phone contains three manipulation buttons:-back, start, and search. Understanding how these three buttons are used across the system can help prevent problems in the UI and application flow.

Home button and back stack

Placing a home button in your user interface is an exception to the typical navigation model. Innovation on the platform is not necessarily a bad thing, but changing the platform's expected interaction model can confuse the user. This standard does not include situations when a user has launched an app from a deep link and does not have a back stack, in which case a few methods are needed to return to the first page.

Implementing the Home button in your app can also cause another problem that has a more serious impact on your app: it could accidentally cause users to get stuck in an infinite loop (or near an infinite loop) when navigating with the home button and hardware Back button. If they use the back button to move back to your app from one app to another, the loop gets worse. Make sure that these issues do not affect your app.

All applications have different interaction flows, some of which may be more complex than others. However, try to keep your app's architecture as brief as possible, and use the list and perspective to the fullest, so that users can navigate back to the login screen and get to the app that was launched before, without much steps. If in doubt, try to emulate common elements and navigational structures that already exist in the platform, which can reduce the likelihood that users will feel confused.

"Back" and "Close" buttons

You should never have a back or Close button in your app's UI. Windows Phone provides a physical back button on each device so you can keep your app's navigation simple.

Incorrect: The "back" and/or "Close" buttons are included in the app

Floating button

Floating buttons produce inconsistent and confusing navigation. Using the app bar is the best way to add commands to a page. For more information about the app bar, see Basic graphics, visual indicators, and notifications (Windows Phone store app).

Floating button

If you cannot place all the commands on the application bar, be sure to place them consistently in your UI. Variable locations can interfere with content browsing, and icons that are placed randomly may not even look like elements that can interact with the user.

The Windows Phone Library for common controls provides a consistent way to implement the command UI within the UI. Follow the layout concepts recommended by Windows Phone's design resources to achieve common interactivity across the platform.

Using Search

The search is built into the hardware and software of each Windows Phone. You cannot modify or change the behavior of the hardware search button. For more information, see the "Search Button" section in the first impression of Windows Phone.

Display settings in a standard way

In Windows Phone, app settings are executed within the app itself. You do not have permission to place app settings within system and application System application settings.

tip: You need to be familiar with system setup options and consider how various user settings affect UI or app behavior. For example, if you are creating an app that is connected to a WEB service, you should consider the behavior that is applied when the user sets the phone to airplane mode.

For apps with several settings that you can choose from, you should create a settings page in your app and emulate it by using the layout and behavior in your system and application settings.

Follow the system settings page to mimic the app settings page.

Changes to the app settings should be implemented immediately. This means that you do not need to complete, OK, or another confirmation dialog box. In some cases, even if the change occurs immediately, the user may not be able to change the feedback that has changed until there is an ongoing event complete or a future event occurs. For more information about providing feedback, see animation, actions, and output for Windows Phone.

Keeping application settings short and clear should be a design goal. Complex multi-page, multi-level application settings can make users feel frustrated or confused, assuming they have completely entered another application.

Important: Avoid creating app settings with more than two pages.

Also, keep in mind the following things:

• Settings that require multiple screens should use a half-screen overlay to avoid losing context when the soft keyboard is displayed.
• If a task cannot be undone, the user is always provided with a cancellation option. For example, text input.
• Provides a Cancel button for an operation that overwrites or deletes data, or an action that is not recoverable.
• If you are using a different screen with the Apply and Cancel buttons, clicking the buttons should perform the associated action and return the user to the main settings screen.
• Provides options to disable how data is used to get data over the network within the app.

To keep the title of the settings control Panel consistent, the title of the settings page should look like this:

Application settings

< control Panel name/application name >

In-app ads

Here are the basic guidelines for minimum quality of ad units in Windows Phone. When reviewing these guidelines, keep in mind that your ads must also be consistent with the Windows Phone design principles.

When there are no ads to display, AdControl will hide itself. Include code in your app to deal with this situation and reclaim free space.

Suggested AD unit size

The default size and recommended size for AdControl is 480 x 80 pixels. This is the recommended size for ads in Windows Phone.

Even if you create an ad unit in PubCenter with a format size of 50 pixels, you need to set the AdControl size to 480 x 80 for a better user experience. The smaller AD unit format will be centered within this space and rendered in AdControl with the ad unit size set in PubCenter. For example, a 50-pixel ad will be displayed in 50 pixels, and the middle of its ad unit is in AdControl. This configuration is shown in.

Centered AD Control

tip: include a AdControl size of 50 pixels to maintain backward compatibility. It may be deprecated in the future. To avoid revising your ad units later, consider creating a new ad in the standard AdControl size of 480 x 80 pixels.

Advertising targeting

Place the AdControl at the top or bottom of the screen. The recommended location is the top or bottom of a given view.

Full-size AdControl

Scroll Viewer

Ads contained within the scroll viewer will appear or disappear on the page as users scroll through the content. If you want your ad to stay fixed when the user scrolls, place AdControl outside the scrolling viewer. Place the scroll viewer at the top or bottom of the screen.

Using ADS with center or pivot controls

When a user pans to a nearby section or item, it will not see ads that are contained within a section of the central control (or in an item within a perspective control). To keep your ad on all parts or items, place AdControl outside the control, as shown on the left. To display different ads on various sections or items, create a new instance of AdControl in each section or project for each individual ad, as shown on the right.

Ads in the center control

Ads in perspective controls

Color

Use System theme colors. If you want to change the theme color, select the appropriate color so that the AdControl border and text are still readable.

WP8.1 Learning Series (18th)--windows Phone interaction and usability