Mobile Design Pattern Gallery, 2nd Edition

Chapter 5. Tools

Patterns

Toolbar, Toolbox, Call to Action Button, Inline Actions, Multi-State Buttons, Contextual Tools, Bulk Actions, Lock Screen Controls

In Chapter 1, we looked at how screen size constraints are forcing designers to think off-canvas and explore new solutions. Before diving into this chapter, I encourage you to embrace another challenge—shed three decades of abstract desktop metaphors and start designing, really designing, for touch interfaces. For inspiration, start with Josh Clark’s “Buttons Are a Hack” campaign (http://globalmoxie.com/blog/buttons-are-a-hack.shtml):

Buttons are a hack. As in the real world, they’re often necessary, but they work at a distance—secondary tools to work on primary objects. A light switch here turns on a lightbulb there. These indirect interactions must be learned; they’re not contextually obvious. The revolution that touchscreen devices are working is that they allow us, more and more, to use primary content as a control, to create the illusion of direct interaction.

I don’t mean to suggest that we throw out all of our familiar buttons entirely. Light switches shall remain necessary, after all, and so shall buttons, especially where it’s necessary to trigger abstract actions (“share via Twitter,” for example). But it’s important to recognize those devices for what they are: necessary hacks for moments when direct interaction isn’t possible. ...