A Free Trial That Lets You Build Big!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
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:
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.
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:
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:
|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.
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.
If everything fails, try not to place too many adjacent hit targets around a small hit target.
Too many adjacent hit targetsMinimum 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 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).
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:
To keep the title of the settings control Panel consistent, the title of the settings page should look like this:
< 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.
Place the AdControl at the top or bottom of the screen. The recommended location is the top or bottom of a given view.
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
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service