|
Size: 6028
Comment:
|
Size: 664
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 4: | Line 4: |
| * [[The Social History of the Smartphone]] | |
| Line 14: | Line 15: |
| 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. |
|
| Line 28: | 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 43: | 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]] |
Intro about the project will follow. For a useful overview, if you got here by accident, visit http://www.4ourth.com/Touch instead.