Links, buttons, ads and forms are all tap targets. Tap targets should have enough space around them for a fingertip to ensure users can tap their desired item without accidentally selecting another tap target. The way your site pages appear on smaller screens is determined by several things, particularly for responsive pages. This includes the size of your font, the media queries used on a page and viewport configuration.
The size of tap targets varies depending on the importance of an item. A lot of tap targets are links in text, which can lead people to think they need to enlarge text excessively. However, as long as you follow the guidelines for legible text you should be fine unless you have several links next to each other.
Google recognises that not all tap target can be or should be 48 CSS pixels. They specify that if your tap targets are smaller than 48 CSS pixels, there should at least be 32 CSS pixels between any tap targets. A common situation in which tap targets are too close together for smaller screens is in lists. Ordered or unordered lists are often styled in a different way to normal text, meaning that sometimes these lists size differently on mobile screens.
Depending on your design, this CSS may or may not work. The instruction it is giving, however, is that when a list has a link in it and is being viewed on a small screen, a larger line height should be used whereas if the screen is larger a more regular line height should be used.
Another solution would be to move paired targets to be side-by-side rather than stacked, as the extra width gives more room for error compared with the short line height.
Of course, if the targets are too small, adding space between them is likely not going to help. To avoid accidental taps, targets must first be big enough, and then also spaced well enough. For example, on Instagram, the buttons to dismiss a follow suggestion were too small only 2mm — 0. Had the touch target for dismissing a suggestion been wider, the amount of space between the opposing actions would have been sufficient. Although there is plenty of vertical space, the extra width would allow users to tap near the farther edge to avoid potential mistaps.
Touch targets need to be large enough to 1 discern what the target is, and 2 to accurately acquire them. View—tap asymmetry occurs when elements are large enough to be seen e. This was a major problem with many designs in our early studies of the iPad.
A current common example of view—tap asymmetry is the tiny iOS-style carousel dot indicators : you can sometimes see that the dots are present, but they are far too small to tap individually to navigate. View—tap asymmetry is often caused by desktop designs that were not well-adapted for touchscreen use. Elements that are easily clicked using a mouse cursor are not always accessible by fingers.
For example, the David Yurman jewelry website included small circular swatches under each product photo on product-listing pages, to indicate alternate colors available for each. Clicking each swatch would update the product photo on the page, so users could preview the color without navigating to the detail page.
While this design worked well for mouse-based interactions, the small swatches were far too small only 1mm or 0. Perhaps they were left visible just so users could see that other colors were available, but the carousel controls to cycle through even more color options were also small-sized and untappable. Of course, 1cm 0. For example, primary calls to action often deserve great visual prominence and thus deserve a larger tap target.
The context of use may also demand tap targets larger than 1cm x 1cm: if an app or mobile site is to be used when the user is moving, targets will be harder to hit and thus should be bigger to allow for more room for error.
When driving or walking, controls requiring precise manipulation will be difficult, if not impossible to use. This design takes into account the fact that many users may be using the app while walking around the store, searching for the aisle which contains a desired item or whether there is a coupon available for a given product.
Audience needs can also be a reason for bigger tap targets. This is known as responsive design and makes it easier to read since you do not need to scroll both horizontally and vertically.
In reflowed content, the targets can appear anywhere on a line and can change position based on the width of the available screen. Since targets can appear anywhere on the line, the size cannot be larger than the available text and spacing between the sentences or paragraphs, otherwise the targets could overlap.
It is for this reason targets which are contained within one or more sentences are excluded from the target size requirements. If the target is the full sentence and the sentence is not in a block of text, then the target needs to be at least 44 by 44 CSS pixels.
A footnote or an icon within or at the end of a sentence is considered to be part of a sentence and therefore are excluded from the minimum target size. User Agent Control: If the size of the target is not modified by the author through CSS or other size properties, then the target does not need to meet the target size of 44 by 44 CSS pixels. Essential: If the target is required to be a particular target size and cannot be provided in another way, while changing it would essentially change the information or functionality of the content, then the target does not need to meet the target size of 44 by 44 CSS pixels.
0コメント