kicker KICKER. [KIK-er] noun. 1. One who kicks. 2. An unexpected twist. 3. In poker, a high-value card used as a
tie-breaker. 4. In football, the player who drills it though the uprights when the game is on the line. 5. In
extreme sports, a ramp used to launch oﬀ of. 6. In design, a brief phrase or sentence lead-in to a story or
chapter. 7. In product design, a consulting ﬁrm that smashes through convention.
Design for the iPad
Hacks/Hackers Unite, May 22, 2010
Hi, Iʼm Jennifer Bove. Iʼm a Founder and Principal at Kicker Studio.
Weʼre a product design studio specializing in design for emerging technologies, most notably touch screens and gestural interfaces.
We recently ﬁnished a project close to home for this event, about storytelling on tablets. We collaborated with publishing group Bonnier to investigate the future of digital magazines, and how
to design for the deeper engagement levels possible on a touch-screen tablet.
gestural interfaces are changing
the way we use computers.
traditional computing image
Weʼre used to sitting at desks, using keyboard, mouse (and the occasional command lines.)
Gestures can be read without traditional input devices like a mouse, stylus or physical button.
Now we can use our ﬁngers to directly manipulate objects on screen - who needs a mouse?
The old-school mouse and keyboard provide mediated experiences.
As our technologies have advanced, weʼve learned to use tools to express ourselves.
These tools are controlled. Exact. And can require some serious skills.
Gesture controls allow for unmediated experiences – no tools to get between us and our stuff.
These experiences may be crude, but theyʼre visceral.
Photo courtesy Scott Beale/Laughing
They provide a tactile, satisfying feeling.
And technology-enabled gestures--- can feel like magic.
Gestural interactions are removing the artiﬁcially-mediated interactions we created to work with technology in the ﬁrst place. Our advances in technology have blown away the problems that
the mouse & keyboard were created to solve.
Jorge Colombo, iPhone sketch
And weʼre left with this.
unmediated, direct manipulation
of “our stuff ” is as close as we
can get to tangible experiences
in the digital world.
iPad != mini laptop
• A mobile device that’s a bit computer like
• A smart object that’s a blank slate, literally
• Meant to be used out in the world
The iPad is less like a computer you’ve liberated from the desktop and more like a device that can do some computer-like things. It has high-res, rich graphics, applications &
wiﬁ, but it’s singularly focused and GSM enabled like a mobile phone. It’s a smart object - it knows where it is, how it’s it’s tilted and which end is up. Its form factor - literally a
blank slate - removes social barriers and barriers of use.
Photo courtesy Moka Pantages
It’s portable, although most say it’s easiest to use with 2 hands, or propped up on a
Photo courtesy Moka Pantages
It’s more social than either the laptop or the mobile phone. Sharing is as easy as handing it over.
Photo courtesy Matt Biddulph
Of course then thereʼs also this -- the iPad glow makes it a tricky thing to use outdoors.
iPad = leisure object
I see the iPad as a leisure object. Itʼs not as task driven as a cell phone, or designed for multitasking like a laptop. The larger screen and rich multi-media capabilities make it more akin to
print than web.
Apple sees it that way too, from their ads...
And the apps that theyʼve designed for it. The iPadʼs size and affordances make it ideal for experiencing rich, immersive experiences, diving into books, magazines, newspapers, photos,
And the apps that are getting the most attention from consumers & media are also more immersive, leisurely experiences that reﬂect our ofﬂine behaviors a digital way.
Thereʼs convergence of the digital and physical that requires new thinking, incorporating metaphors and best practices from each.
Touch screen basics
• One-handed, left-handed use
• Fingers are less exact than cursors
• Targets should be as close to user as possible
• Touch targets don’t have behavioral cues like mouse
over & hover states
• Targets need to be of a reasonable size
Optimize for single hand use if possible. Beware of covering the screen with the hand. Targets need to look
25 mm 18 mm 13 mm 5 mm
Touch targets should be at least 10 mm
• It’s a portable, physical object. Take advantage of that.
• Very few interface cues on the form itself - feels natural both
horizontally and vertically.
• How does the story shift in each orientation? Should the layout
be the same or diﬀerent?
Think about what makes sense in which view -- scrolling, width of the screen, depth of content.
Screen orientation can aﬀord diﬀerent views into content
• Rich canvas for story telling
• Visuals as anchors, entry points into content
• Use content as navigation wherever possible - don’t crowd
interface with buttons and controls
• Menus and contextual info in popups & overlays
It’s the content that is the primary thing that’s what makes it a video player vs a photo frame vs a newspaper vs a music player. The role of the device is to bring the content
closer to us.
• No multitasking - be prepared for interruption at any time
• Users shouldn’t lose work, get stuck mid-way through task, lose
place, start over
• Consider the context & environment of use
The iPad can only run one app at a time (with a few exceptions). Work ﬂow needs to take this into account and allow for incremental feedback and results.
• Large screen brings us closer to our stuﬀ
• Sharing over one’s shoulder, across the internet, based
on here and now
• GPS, Wiﬁ, GSM, compass – think of the possibilities
• A new platform in an ecosystem of devices – not to be
designed in a vacuum
Tap a photo to:
• Enlarge the photo
• Link to a more details page
• Flip the image to reveal additional photos
• Do nothing
Can anyone guess the right answer? Answer is, all of the above - depends on which app you use.
it’s just the beginning
of the story.
Design for touch devices, and the iPad in particular, is just getting started, and the possibilities are endless.
300 Brannan Street
San Francisco, CA 94107
@jenniferbove / @kickerstudio