Differences between revisions 12 and 17 (spanning 5 versions)
Revision 12 as of 2014-10-30 14:23:00
Size: 4699
Editor: shoobe01
Comment:
Revision 17 as of 2014-11-17 21:00:28
Size: 664
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 6: Line 6:
 * [[The Social History of the Smartphone]]
Line 15: Line 16:
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.
Line 30: Line 17:
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.

 * [[Design for people]]
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.
 * [[Design for People]]

Fingers, Touch & People (last edited 2015-04-23 20:15:56 by shoobe01)