1.
josh clark
@globalmoxie
http://bit.ly/touch-wkshop
designing for
TOUCH

2.
SCIENCE!
Friends, that’s what we’re here for.
To study the storied science of web design.
Part of the process is realizing, every so often,
that we’ve been doing SOMETHING wrong all along.
That’s the nature of science and discovery:
Periodic realizations that our assumptions need a tweak.
A flash of insight that we’ve been understanding things naively.
10 years ago: web standards.
We have to separate content from presentation.
3 years ago: responsive design.
The web isn’t about one screen size.
THERE IS NO ONE TRUE OUTPUT FOR THE WEB.
There’s a new shift brewing. And it’s this realization.

3.
There is no
one true input
for the web.
There is no one true INPUT for the web.
In other words: the web is not just for the mouse.
Responsive: we have to anticipate a variety of displays.
New wrinkle: we have to anticipate a variety of inputs, too.
Like most truths, this one’s been staring us in the face all along.
The web has always been device agnostic.
It embraces:
text-only devices.
Screen readers.
Speech is coming on strong,
Natural gesture, too.
LOTS of different inputs coming our way.
But the big input-related design transition that we’re confronting now...
and really we started confronting five years ago with mobile...
is touch.
Because right now, hands and fingers are coming to life on our interfaces...

4.
no, it’s okay.
TOUCH
THAT
As advertised, this talk is about designing for touch.
We’ve been dealing with touch on smartphones, and tablets are coming on strong.
So sure, I’ll talk about guidelines for designing on phones
and tablets. But perhaps more important, I’ll also talk about
designing for touch on the desktop.
[next]
Because friends, touch has erupted on the desktop,
in just the last few months
And that has some thorny implications for responsive design.
ULTIMATELY, IT MEANS THIS:
All desktop web designs have to be touch-friendly.
[repeat]
But first...let’s begin at the beginning:
With the basics, with first principles.
[twitter]31% of US adults own a tablet. Up from 12% a year ago, and basically zero 3 yrs ago. http://
j.mp/Xgyspe[/twitter]
Jan 2013:
http://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx

5.
PIXELS ARE THE
BUILDING BLOCK
I have an ugly truth for you, friends.
To date, we’ve thought about web design as a visual pursuit.
A feat of visual design, of information design.

6.
So we naturally approach our work in visual terms,
we think in pixels.
But when you add touch to the mix...
[next]
we go beyond the visual... and to the physical.
Easy big guy. Easy.

7.
So we naturally approach our work in visual terms,
we think in pixels.
But when you add touch to the mix...
[next]
we go beyond the visual... and to the physical.
Easy big guy. Easy.

8.
It’s not only how your pixels
LOOK
but how they
FEEL
It’s not just how your pixels look.
But how they feel.
How do your pixels feel in the hand?
The very nature of our job is changing.
[twitter]Designing for touch means: it’s not just how your pixels LOOK… but how they FEEL in the hand.[/twitter]

9.
where is
TOUCH?
We’ve been dealing with phones

10.
In fact, 31% of US adults own a tablet now.
THIRTY ONE! A THIRD!
Was only 12% a year ago.
Basically zero three years ago.
The iPad is the fastest growing consumer product
in the history of consumer products. Amazing.
Touch is already a huge mainstream input.
So before diving into details of touch design,
want to talk about how these tablets are used.
And who uses them.
We call this mobile. But really it’s portable.
Use the phone on the way to the coffee shop,
but we use this AT the coffee shop.
Almost always used in settled environments.
iPad has very different mindsets because it’s in much more settled environments.

11.
10%
of US adults own a tablet
DECEMBER 2011
iPad came out in March 2010.
At the beginning of december in 2011.
but look what happened the next month.
And here’s where we stand as of January 2014.
That’s up 8% from 34% in September 2013.
For households making over $75k USD, it’s 65%.
http://www.pewinternet.org/Reports/2012/E-readers-and-tablets.aspx?src=prc-headline
http://www.emarketer.com/Article.aspx?R=1009106
http://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx
http://pewinternet.org/Reports/2014/E-Reading-Update/Tablet-and-Ereader-Ownership/Half-of-American-adults-now-own-
a-tablet-or-ereader.aspx

12.
JANUARY 2012
19%
of US adults own a tablet
iPad came out in March 2010.
At the beginning of december in 2011.
but look what happened the next month.
And here’s where we stand as of January 2014.
That’s up 8% from 34% in September 2013.
For households making over $75k USD, it’s 65%.
http://www.pewinternet.org/Reports/2012/E-readers-and-tablets.aspx?src=prc-headline
http://www.emarketer.com/Article.aspx?R=1009106
http://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx
http://pewinternet.org/Reports/2014/E-Reading-Update/Tablet-and-Ereader-Ownership/Half-of-American-adults-now-own-
a-tablet-or-ereader.aspx

13.
42%
of US adults own a tablet
JANUARY 2014
iPad came out in March 2010.
At the beginning of december in 2011.
but look what happened the next month.
And here’s where we stand as of January 2014.
That’s up 8% from 34% in September 2013.
For households making over $75k USD, it’s 65%.
http://www.pewinternet.org/Reports/2012/E-readers-and-tablets.aspx?src=prc-headline
http://www.emarketer.com/Article.aspx?R=1009106
http://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx
http://pewinternet.org/Reports/2014/E-Reading-Update/Tablet-and-Ereader-Ownership/Half-of-American-adults-now-own-
a-tablet-or-ereader.aspx

14.
September 2012
http://www.asymco.com/wp-content/uploads/2012/08/Screen-Shot-2012-08-20-at-8-20-12.45.17-PM.png
More iPads in two years than Macs in 25 years.
Already talked about how many phones we’re selling.
In Q3 2011, one out of every three Apple iOS devices sold during the last quarter was an iPad.
14 million iPads versus 26.9 million iPhones.
As you can see from the curve, it’s actually getting steeper.
Accelerating growth.

15.
Who Owns What?
Smartphone eReader Tablet
18%
20%
19%
26%
16%
2%
30%
21%
14%
18%
10%
7%
19%
18%
17%
22%
13%
11%
13-17
18-24
35-44
24-34
45-44
55+
Flattened out since a year ago, seeing big adoption at the older end. Was the more traditional 24-34 male.
http://blog.nielsen.com/nielsenwire/online_mobile/changing-demographics-of-tablet-and-ereader-owners-in-the-us/
August 2011

16.
Age distribution
13-17 18-24 25-34 35-54 55+
17%
24%
26%
14%
19%
7%
21%
33%
21%
18%
Smartphone Tablet
The last chart showed what percent of each age group owned these devices.
This one looks at actual users and sho