Finger size has nothing to do with touchscreen accuracy, or touch sensing with modern devices. But fingers, hands and thumbs are opaque, and can get in the way. Since we shift our grip, and use different devices, where are fingers and thumbs are varies so it’s hard to plan that specifically. == Fingers Are Opaque == I said earlier, briefly, finger size doesn’t matter. And it’s true, but only for touch target size, and touch accuracy. But fingers are opaque. They get in the way. This is anecdotal, but I have seen similar results on real projects. When I updated to the new Twitter, I kept hitting [CLICK] the Add-person icon. Not just because I focused on the middle first, not just because that icon has got this very inviting “plus”… But mostly because the compose area down here [CLICK] is obscured by my thumb as I naturally scroll through the content. I simply missed it while glancing around at the actual tweets in the middle of the page. ...overview of finger sizes from old days, and how that barely matters as there are hands, thumbs, etc. Overlay images, do some new math about % of screen covered at various times. Maybe a neat chart about it. ...reiterate how old ISO standards don't apply! == Seeing Around Fingers == So where ARE our fingers on the screen? Well, it depends on what we do and how we grasp. It is hard to say not to place items below, or to the side. You need to simply provide room. Room to make sure that you can see the target, see the label, and see the clicked state when the target is selected. [CLICK} When you click a whole row, and especially one multiple lines long like this, that works great [CLICK] Little icons like the retweet are too small, so the user can’t accurately target them, can’t confirm which one he selected, and can’t see that the selected state changed on tap so cannot be sure he tapped it at all. ...Norman esp. guidelines on seeing around targets, with example from PPTs of clicking items in Twitter. == Scrolling with Fingers and Thumbs == This also influences how we gesture. In some contexts, we know even better what users do. For example, this is where people scroll. Interesting… but why those three distinct areas? Because they have to do with what content is being displayed. Here, the content is a list with very small amounts of information, so there are large blank areas in the middle of the screen. The users prefer to touch… the center. Get used to that coming up over and over. All other things being equal, people want to touch and look at the center of the screen. Yes, there are outliers and I included all data, but most users are gesturing in the middle. And here, where there were fairly long pieces of content occupying much of the screen width, users did most of their scrolling to the far right. Even left handed users were more inclined to avoid touching the content so reached across the screen. Someone shared with me they have similar observations with the Arabic-language apps they build, just… reversed. Blank spaces to the left are used for gesturing. Users are not always confident scrolling in areas where there are items, or content they want to see or worry they will interact with. When the page is simply full of content and there’s no room, they will choose to scroll to the right side (or left for Arabic or Hebrew) or near the bottom. Yes, this also varies a bit based on device size. On tablets, your content might be shorter so there’s more room. (I normalized the data to the handset so you could compare it more directly here). You might think that users would stick to the edges on tablets, because they are bigger. Of course people can’t reach the center. But wrong. They are always inclined to tap the center of the screen, so when room is available to confidently scroll without covering content, they will move their finger, thumb or stylus over there even if it’s a reach, or requires repositioning their finger or their device. DUPEs: Users will scroll by dragging along the middle of the screen—no surprise there—but only when they will not cover content. When your selectable list has long labels, people scroll to the far right to get to the most empty area they can. And for Arabic or Hebrew, right-to-left languages, the opposite is true. Always provide room to make sure that touch targets can be seen, enough room to see the clicked state when the target is selected, and try to provide room for users to feel comfortable scrolling. == Conclusion == summarize... * Make room for fingers around targets. * Put your content or functions where they won’t be covered. * Leave room for gesture and scroll. Make sure people can see content around their fingers and thumbs. Make sure selectable items are large enough to clearly indicate when a tap is successful. Try to place functions and the content that changes so users can see the results, or to invite them to perform actions you think are important. And think about what users are clicking or scrolling on. White space may be really important to give them confidence to gesture. ---- === References === * d