|
Size: 11126
Comment:
|
Size: 9333
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 10: | Line 10: |
| * [[Device Diversity is Human Diversity]] Stop saying “fragmentation” as though it is bad. Respect user choice. These devices are different, because people’s needs are different, and this is reflected in the way the devices are used. Large tablets, like the 10” iPads, are used almost as computer replacements, about 2/3rd of the time in a stand and ¼ of the time with physical keyboards. As devices get larger, they are used less and less held in the hand. And the smaller the device is, the more it is used on the move, walking around the house or office instead of finding time to stop and use that tablet on the table, or sit and type on a computer at your desk. Figure 4—Devices are not used in any one way, but analyzing the whole range of mobile devices, from handsets to large tablets reveals trends about their usage. You can start any design by assuming these usage patterns based on device class. The larger devices get, the further away from the eye they are used. Small handsets are held quite close to the eye, larger ones and phablets further away, and tablets at approximately desktop distance. Due to angular resolution, we have to adjust type sizes based not on screen size, but on this distance from the user’s eyeball. Minimum text sizes vary from 4 point for small handsets, to 10 points for devices set on tables or in stands. Yes, these are minimum sizes, and you should use at least 30% larger type or icons for almost all actual uses like body copy. Go even larger for more readability, for active environments, and for older populations. Support all input types, especially if you are building responsive websites, or expect to make an app for tablet and handset. Account for distance by adjusting the sizes of readable items like type, icons, text fields, checkboxes and buttons. |
* [[Different Devices are Used in Different Ways]] |
Intro about the project will follow. For a useful overview, if you got here by accident, visit http://www.4ourth.com/Touch instead.
People are never going to be able to precisely click your target. There’s always inaccuracy. But you can account for it in design.
For capacitive touchscreens, which is what almost everything uses today, the electrical conductivity of your finger is sensed by the screen. In part, this means, that what is always detected is the centroid (or geometric center) of the part of your finger that gets flattened against the screen.
The phone can’t sense how big your finger is, how hard you pressed, how big the contact area is, which way it is facing or anything. All it gets is a point that it assigns to be the touched coordinates. And that point is never, ever perfectly aligned.
Figure 5—Logging click points on an actual target, like this one, shows the inherent inaccuracy of tapping. Touch targets must be made big enough that almost all taps will result in the expected action.
Accuracy is never perfect, but has to be considered relative, and is defined with the Circular Error of Probability, or CEP which is just a mathematical representation of how much you miss a target. The touch target sizes I suggest are based on R95, which means 5% of taps still fall outside the area.
When we accept everything is imprecise, we stop calling these errors, and refer to tolerances instead. We need to plan for imprecision and problems as part of the process. Be sure to provide the largest practical touch targets and don’t just code the word or icon as a link inside a non-selectable box.
Look around and you’ll see this is a known best practice. The Google drawer menu isn’t as small as it appears, and it also opens when you on select the icon or title. Lots of hybrid apps and websites don’t notice this, and code it wrong, giving the “hamburger menu” a bad reputation for being too small.
Touch isn’t just inaccurate, but it’s inconsistently inaccurate. And what is most interesting is that the largest variable is not environmental conditions, familiarity with touchscreens or anything. It’s the position on the screen they are trying to tap.
We know that people are more accurate at the middle of the screen. And that’s pretty much any screen, any way they hold their phone or tablet. They also subconsciously know this — or it may be tied to their preference for reading in the middle — so are more confident at the center, but will slow down to tap corner or edge targets.
If we map the research to a screen the right way we can see how much more room is needed between items in various parts of the screen. The sides are a little worse than the center, but the top and bottom require much more room, and corners are the worst.
Figure 6—Touch accuracy varies by part of the screen, in such a consistent and predictable way you can use this to design your interface. Space items farther apart at edges, and especially along the top and bottom of the screen.
These neatly correspond to sort of structural zones that already exist in much of our design with content in the middle, and secondary labels and controls along the top and bottom edges of the screen.
Just space things out more along the top and bottom edges, and place unrecoverable or annoying-to-exit items far from others to avoid frustrating accidents.
I still get clients asking for easter-egg level hidden gestures, with the theory being that exploration and discovery result in surprising delight. Maybe, but I always start with what we know works. Simple controls, that work in expected ways. And the most expected controls are those that are visible, and communicate what they will do.
Make sure selectable items are clearly selectable. If it doesn’t look clickable, people don’t know it is. Underlines aren’t bad for text, inline, but especially for apps you mostly need to bound items. That doesn’t mean everything has to be a bold box or default button, but it is pretty easy to design in rows and containers for your actions, or use bounded icons by placing circles or boxes around them.
Visual targets, whether words, icons or some other shape or UI widget must: • Attract the user's eye. • Be drawn so that the user understands that they are actionable elements. • Be readable, so the user understands what action they will perform. • Be large and clear enough people are confident they can be tapped.
Clickable items need to not just afford their action (making it clear what it does) but do so consistently. If most items in your design are whole selectable rows or buttons, don’t have one row suddenly be an underlined link.
Revise this to talk about the study on how accuracy changes when carrying things. INTERESTING! In general, how devices are used in the real world, maybe even touch on resilience, on glanceability. So, wait for users, don’t pop up messages for short periods, don’t beep if they are likely to be in loud environments. Maybe even Christopherson’s Temporary Disability, and touch on how you must design also for low-vision but designing for real environments gets you a long way there…
As well as the bezel thing, cut down a bit as it’s one aspect only.
Will also be a nice segue to the next section on designing at scale. Design /for/ people then design /like/ the way people work.
...Despite the increasing prevalence of edge gestures, dragging items on or off the screen, we have to remember that touchscreen devices aren’t really flat on top.
Plenty have a raised bezel to protect the screen, and many, many users put cases on. What this means is that many users cannot actually get to the edge of the screen. If they really press their finger they can get skin onto the edge, but remember the screen senses the center of your contact area so even if you can push your finger hard enough to get to the edge of the screen, the sensed point may be well inside the edge.
If you want to place items right against the edges, or have edge gestures, go ahead. But don’t only allow them to work at 1 pixel from the edge, or originating off screen. Provide some padding.
The safe zone here is somewhere between half and the full width of the accuracy by zone. Along the sides, I use 6-8 mm, but for the top and bottom I would extend this to about 10-12 mm.
Take your design out of Graffle, Visio, Axure, Photoshop, InDesign or whatever, and get it off the computer. Whether you use specific prototype tools, printouts or just put screens into the device gallery, get it onto the device or somehow check at device scale.
Start your UI design at scale. There are many templates you can print that allow you to sketch at the scale of your device, or many devices.
Check your work in real environments. Even before actually testing with users, simply trying the design on the actual device outdoors, walking around, in loud places and however you think your users work will help a lot. Things look different on the projector, so pass around phones and tablets for other designers and the client to weigh in on and approve instead.
Don’t trust your math, but check type, icon and touch sizes by measuring directly on the phone screen. You can also check for how badly the simplification and lies of the phones and browsers impact you. Classes of display sizes and device pixel ratios mean your design may be 20% smaller or larger on any one device. Make no assumptions about what it will look and act like in the real world. Check yourself.
Most of all, within what you can control, just always remember to design for hands, fingers, thumbs and people.
Remember to have empathy for users, and to respect their choices, their ways of working. Account for the limits of their life, their environment and their abilities.
You might ask—and people have—why not use this data to the obvious extreme and put all taps in the central area where we know people are already accurate and can reach with one hand? Partly, because trying to pick that central zone is hard, and varies too much by grasp and handedness. But mostly because we already are. If you design the primary viewing, tapping and scrolling in the middle on the viewport, and make sure edges and corners are secondary or rarely used options, you are on right path to designing for the way people use their phones.
And most of all remember you don’t design for iPhone or Android, for cars or kiosks, for Web or apps but for people. Even when your implementation is constrained by technology, remember to avoid designing for pixels or code but to always consider what effect your work will have in the real world, when people look at, hold and touch the screen.