Learning from the Master: Josh Clark

We’ve been with the keyboard and mouse for nearly 30 years now, and in the early days of that computing paradigm, things were fairly simple. Screen sizes were all pretty common, resolution was low, everything you could do on the screen was, well, on the screen and things were even black and white. The tools and techniques available to Designers and Developers back then were fairly limited, but then again, so was the machine.

It took a long time for the mouse to become mainstream, and for Designers to assume a basic level of GUI knowledge. But when it comes to touchscreen devices, things are moving more quickly. It took Apple 22 years to sell 55 million Macs, but just two years to sell that many iPads. Combine that with the iPhone and iPod Touch, and in 2011 alone, Apple sold more touch screen devices than it did all Macs throughout history. So in the 80s and 90s, Designers were (comparatively) limited by hardware, and they weren’t in a huge rush (comparatively) to make advanced user interfaces; they had time and could always blame hardware for not keeping up.

Fast forward to today, touchscreen devices are everywhere; almost everyone has one in their pocket. The hardware is plenty advanced and capable, which is worst off for us Designers, who sometimes wish that everyone would just slow down a minute. In the end, everyone knows how to use their fingers… mostly.

By the time you utter the phrase, “I’m going to learn how to make kick-ass iPad apps right now!”, you’re already behind the curve. The sooner you embrace this fact and seek out tutelage the better, so who better to learn from than Josh Clark?

For those of you that don’t know, Josh Clark is the author of Tapworthy iPhone Design, one of the few, and most respected tomes in mobile user interface design. Oh, and he’s also the self-described “11th strongest man in Maine,” so there.

I had a chance to attend a full-day workshop with him titled, Tapworthy iPad Design… guess what it was about? We started the day just going over the “mobile” industry, and first things first, why is mobile in quotes? The term “mobile” includes phones and tablets, but I mostly use my iPad not “on-the-go”, and I certainly use my iPhone when I’m sitting very still. (As an aside, I propose we just use the term “Handled,” but that’s a discussion for another day.)

We started the day learning some surprising stats such as:

• iPad use during the day is a little high in the morning, dips during the day, and then spikes around 8pm.
• Midnight news consumption is a spike in the usage chart.
• Phones sessions are shorter and spikier. iPad sessions are longer, but not as long as Desktop/Laptop.
• When measured, iPad users have lower heart rate; they want a calm experience.
• There is 3x more video watching on iPad than Desktop/Laptop.

I’m sure if you’re a phone/tablet user (maybe you’re even reading this blog post on one right now), these stats are interesting but not Earth shattering. Sometimes you just need to see something on a big projected screen for it to click though!

After we had a lay of the land, we talked about Designing for Touch, Organization and Interaction, and most enlightening, Teaching Touch.

Designing for Touch

The coolest thing about designing for touchscreen is that, wait for it, you get to touch things! Or as Josh Clark put it, you “Remove the prosthetic of the pointer.” When making websites of apps for “traditional” computers, it still always felt like exactly that… a computer program running on a screen, on a desk, possibly attached to a giant loud hot computer, sitting a couple feet away from you.

When we design for touch, we’re no longer just web or app designers, suddenly we’re industrial (aka hardware) designers; we’re designing something that’s used and manipulated by fingers. Keeping that in consideration, the realm of touch design suddenly gets more intimate since there’s a physical connection now, and that brings up new possibilities and challenges.

When designing for a traditional computer, ergonomics and physical considerations rarely come into play anymore. For touch screens though, there are things to consider like:

What is the thumb’s comfort zone and range of movement?

Generally speaking, it’s an arc shape. On a phone, it’d be in the bottom left quadrant. On an iPad, it’d be roughly in the top-left and top-right quadrants, as people hold iPads differently than they do phones.

These are the most important zones, and important controls for your fingers should go there.

What might your hand cover up on the screen when you reach for a button?

Your controls for an object should be underneath it, so that when you go to touch a button, your giant monster hand isn’t covering up said object.

How big should your controls be so that a finger can accurately hit them, and where should they be? After all, a mouse pointer’s tip is considerably smaller than a fingertip.

Big, a lot bigger than you’d think! Apple recommends 44px for touch targets in iOS, which is often twice as big, if not bigger, than what we usually design for the Desktop web. Google recommends 48px for Android; historically, Android touchscreens have been less accurate, and the cheapest way to fix this is to make the buttons bigger.

My favorite line from Josh Clark about designing for touch was a gem about touch screens being a “blank slate, waiting for you to impose an interface onto it.”

However, a blank slate can be intimidating. In “Learning From the Master: Part 2”, I’ll highlight some great examples of good design organization and interaction, as well as a few tips for “Teaching Touch”.