RESOURCES

Inspiration from industrial design

Much of this book has focused on the physical aspects of touch design, drawing connections to the centuries of industrial design that preceded the touchscreen. The following books offer a useful grounding in that tradition:

• Designing for People, Henry Dreyfuss. Considered the founder of modern industrial design, Dreyfuss designed the Bell telephone, the Honeywell thermostat, the Hoover vacuum cleaner, and other classics of twentieth-century design. His touchstone book from 1955 remains as fresh as ever.
• The Design of Everyday Things, Don Norman. A fun and enlightening romp through our designed environment, this essential book points out why the designs of physical objects work well (and why they don’t).
• Designing Devices, Dan Saffer. This brief ebook explores the elements that have defined great device interfaces since the ancient world.

Human factors and the touchscreen

The field of human factors focuses on fitting technology neatly within the capabilities and limitations of the human body. It boils down to comfort—designing interfaces that are physically and cognitively easy to master. These resources address the human factors of touch:

• “Multi-touch Systems That I Have Known and Loved,” Bill Buxton. A wonderful off-the-cuff treatise on the good and bad of touch design, from a UX trailblazer who also co-invented the capacitive touchscreen (http://bkaprt.com/dft/06-01/).
• “How Do Users Really Hold Mobile Devices?,” Steven Hoober. Focuses on the ergonomics and accuracy of various smartphone grips (http://bkaprt.com/dft/01-03/).
• “Making Learning Usable: How We Use Mobile Devices,” Steven Hoober and Patti Shank. Extends Hoober’s previous study to tablets and phablets (http://bkaprt.com/dft/01-07/).
• “Designing for a Thumb: An Ideal Mobile Touchscreen Interface for Chinese Users,” Qian Fei. A careful analysis of thumb accuracy on mobile touchscreens, positing the fan-shaped thumb zone for smartphones (http://bkaprt.com/dft/01-04/).
• “User Learning and Performance with Marking Menus,” Gordon Kurtenbach and Bill Buxton. The dramatic speed increases of gesture-based radial menus versus traditional linear menus (http://bkaprt.com/dft/04-05/).

Platform design guidelines

Each platform has its own specific rules. Dig into the design guidelines for each of the popular touch operating systems:

• iOS Human Interface Guidelines. Apple’s worldview of good experiences on iPhone and iPad, from high-level design principles to detailed use of individual controls (http://bkaprt.com/dft/06-02/).
• Material Design. The visual language that Google uses across all platforms, including Android; this site explains its philosophy and implementation details (http://bkaprt.com/dft/06-03/).
• Windows Design. Guidelines for creating Windows 10 apps on devices from phones to jumbo-screen computers (http://bkaprt.com/dft/06-04/).

Smartwatch guidelines

This book’s general touch guidelines apply to the new crop of smartwatches, too, but with a few constraints. Apple and Google provide their respective specifics.

• Apple Watch Human Interface Guidelines (http://bkaprt.com/dft/06-05/)
• Android Wear (http://bkaprt.com/dft/06-06/)

Coding gestures for the web

• “Multi-touch Web Development,” Boris Smus. Introduces the techniques (and pitfalls) of coding gestures with touch events (http://bkaprt.com/dft/04-11/).
• “Touch and Mouse,” Chris Wilson and Paul Kinlan. How to code interactions that work well with both touch and cursor interfaces (http://bkaprt.com/dft/06-07/).
• “Unifying Touch and Mouse: How Pointer Events Will Make Cross-Browsers Touch Support Easy,” David Rousset. Coding pointer events for cross-browser compatibility (http://bkaprt.com/dft/06-08/).

A handful of JavaScript libraries helps reduce the significant agony of coding gestures for the web by abstracting the differences among mouse, touch, and pointer events:

• Hammer.js. Detects several gestures in modern browsers (including IE 9+): tap, double-tap, long press, swipe, pinch, and rotate (http://bkaprt.com/dft/06-09/).
• Hand.js. A polyfill library from Microsoft that lets you use pointer events in all browsers (http://bkaprt.com/dft/04-16/).
• Tappy, Filament Group’s Scott Jehl. Papers over the differences among touch, mouse, and keyboard click events by creating a single tap event that works for all three (http://bkaprt.com/dft/04-14/).

Touch notation tools

Pen and paper are my best planning tools. I always start there, writing out ideas in longhand and then shifting to loose sketches of screens and widgets. This toolkit has one big drawback, though: it doesn’t move. That makes representing the motion of gestures challenging. Several smarties have come to my rescue, however, with detailed notations for representing touch gestures:

• “Touch Notation,” Matt Gemmell. A simple system for representing complex gestures (http://bkaprt.com/dft/06-10/).
• Cue, P.J. Onori. A set of compact gesture icons available in SVG, PNG, OmniGraffle, and InDesign formats, for use in wireframes and other documentation (http://bkaprt.com/dft/06-11/).
• Touchscreen stencils. Dan Saffer and Rachel Glaves. A set of drawings of hands performing common gestures, available in loads of digital formats. These stencils provide clear, literal representations of each gesture (http://bkaprt.com/dft/06-12/).