kicker   KICKER. [KIK-er] noun. 1. One who kicks. 2. An unexpected twist. 3. In poker, a high-value card used as a
       ...
kicker
                                                                            Design for the iPad
                   ...
3
We recently finished a project close to home for this event, about storytelling on tablets. We collaborated with publishi...
gestural interfaces are changing
                      the way we use computers.




                                     ...
traditional computing image




             Old-School Computing


                                                      ...
Gestures can be read without traditional input devices like a mouse, stylus or physical button.




                      ...
mediated experiences




                                                                  7
The old-school mouse and keyb...
8
As our technologies have advanced, weʼve learned to use tools to express ourselves.
9
These tools are controlled. Exact. And can require some serious skills.
10
Sometimes to scary results.
unmediated experiences




                                                                                               ...
12
These experiences may be crude, but theyʼre visceral.
Photo courtesy Scott Beale/Laughing




                                                                                  ...
14
And technology-enabled gestures--- can feel like magic.

Gestural interactions are removing the artificially-mediated in...
Jorge Colombo, iPhone sketch


                                                           15
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 ...
17

Enter the iPad
iPad != mini laptop

                                      • A mobile device that’s a bit computer like

                 ...
Photo courtesy Moka Pantages




                                                                                         ...
Photo courtesy Moka Pantages




                                            20
or an arm.
Photo courtesy Moka Pantages




                                                                                         ...
Photo courtesy Matt Biddulph

                                                                                            ...
iPad = leisure object




                                                                                                ...
24
Apple sees it that way too, from their ads...
25
And the apps that theyʼve designed for it. The iPadʼs size and affordances make it ideal for experiencing rich, immersi...
26
And the apps that are getting the most attention from consumers & media are also more immersive, leisurely experiences ...
designing for the iPad




                         27
Touch screen basics
                                 • One-handed, left-handed use

                                 • Fin...
25 mm                  18 mm         13 mm   5 mm




Touch targets should be at least 10 mm
                             ...
Screen orientation
                                       • It’s a portable, physical object. Take advantage of that.

   ...
Screen orientation can afford different views into content


                                                           31
Unmediated content
                                    • Rich canvas for story telling

                                  ...
Content as navigation, minimal controls

                                          33
Contextual info and control overlays
                                       34
Workflow

                                        • No multitasking - be prepared for interruption at any time

          ...
Complex workflow, incremental feedback

                                        36
Connected

• Large screen brings us closer to our stuff

• Sharing over one’s shoulder, across the internet, based
 on here...
Co-located and location based sharing


                                        38
Interaction patterns

• It’s the wild west out there

• Don’t reinvent the wheel - it causes confusion

• Top 3 usability ...
Scrub to flip
               40
Tap to flip
             41
Swipe to flip
               42
Swipe to scroll
                  43
Survey Says:
                                     Tap a photo to:

                                     • Enlarge the phot...
it’s just the beginning
                                                       of the story.




                         ...
Thanks!
Kicker Studio
300 Brannan Street
Suite 207
San Francisco, CA 94107

ph. 415-796-3434

jennifer@kickerstudio.com
ww...
Upcoming SlideShare
Loading in …5
×

Design for the iPad

2,665 views

Published on

Introduction to iPad experience & design for Hacks/Hackers Unite, May 22-23, KQED.

Published in: Design, Business, Technology
1 Comment
14 Likes
Statistics
Notes
No Downloads
Views
Total views
2,665
On SlideShare
0
From Embeds
0
Number of Embeds
157
Actions
Shares
0
Downloads
137
Comments
1
Likes
14
Embeds 0
No embeds

No notes for slide

Design for the iPad

  1. 1. 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 off of. 6. In design, a brief phrase or sentence lead-in to a story or chapter. 7. In product design, a consulting firm that smashes through convention. 1
  2. 2. kicker Design for the iPad Hacks/Hackers Unite, May 22, 2010 2 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.
  3. 3. 3 We recently finished 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.
  4. 4. gestural interfaces are changing the way we use computers. 4 because really...
  5. 5. traditional computing image Old-School Computing 5 Weʼre used to sitting at desks, using keyboard, mouse (and the occasional command lines.)
  6. 6. Gestures can be read without traditional input devices like a mouse, stylus or physical button. 6 Now we can use our fingers to directly manipulate objects on screen - who needs a mouse?
  7. 7. mediated experiences 7 The old-school mouse and keyboard provide mediated experiences.
  8. 8. 8 As our technologies have advanced, weʼve learned to use tools to express ourselves.
  9. 9. 9 These tools are controlled. Exact. And can require some serious skills.
  10. 10. 10 Sometimes to scary results.
  11. 11. unmediated experiences 11 Gesture controls allow for unmediated experiences – no tools to get between us and our stuff.
  12. 12. 12 These experiences may be crude, but theyʼre visceral.
  13. 13. Photo courtesy Scott Beale/Laughing 13 They provide a tactile, satisfying feeling.
  14. 14. 14 And technology-enabled gestures--- can feel like magic. Gestural interactions are removing the artificially-mediated interactions we created to work with technology in the first place. Our advances in technology have blown away the problems that the mouse & keyboard were created to solve.
  15. 15. Jorge Colombo, iPhone sketch 15 And weʼre left with this.
  16. 16. unmediated, direct manipulation of “our stuff ” is as close as we can get to tangible experiences in the digital world. 16
  17. 17. 17 Enter the iPad
  18. 18. 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 18 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 & wifi, 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.
  19. 19. Photo courtesy Moka Pantages 19 It’s portable, although most say it’s easiest to use with 2 hands, or propped up on a lap.
  20. 20. Photo courtesy Moka Pantages 20 or an arm.
  21. 21. Photo courtesy Moka Pantages 21 It’s more social than either the laptop or the mobile phone. Sharing is as easy as handing it over.
  22. 22. Photo courtesy Matt Biddulph 22 Of course then thereʼs also this -- the iPad glow makes it a tricky thing to use outdoors.
  23. 23. iPad = leisure object 23 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.
  24. 24. 24 Apple sees it that way too, from their ads...
  25. 25. 25 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, videos, etc.
  26. 26. 26 And the apps that are getting the most attention from consumers & media are also more immersive, leisurely experiences that reflect our offline behaviors a digital way. Thereʼs convergence of the digital and physical that requires new thinking, incorporating metaphors and best practices from each.
  27. 27. designing for the iPad 27
  28. 28. 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 28 Optimize for single hand use if possible. Beware of covering the screen with the hand. Targets need to look touchable.
  29. 29. 25 mm 18 mm 13 mm 5 mm Touch targets should be at least 10 mm 29
  30. 30. Screen orientation • 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 different? 30 Think about what makes sense in which view -- scrolling, width of the screen, depth of content.
  31. 31. Screen orientation can afford different views into content 31
  32. 32. Unmediated 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 32 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.
  33. 33. Content as navigation, minimal controls 33
  34. 34. Contextual info and control overlays 34
  35. 35. Workflow • 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 35 The iPad can only run one app at a time (with a few exceptions). Work flow needs to take this into account and allow for incremental feedback and results.
  36. 36. Complex workflow, incremental feedback 36
  37. 37. Connected • Large screen brings us closer to our stuff • Sharing over one’s shoulder, across the internet, based on here and now • GPS, Wifi, GSM, compass – think of the possibilities • A new platform in an ecosystem of devices – not to be designed in a vacuum 37
  38. 38. Co-located and location based sharing 38
  39. 39. Interaction patterns • It’s the wild west out there • Don’t reinvent the wheel - it causes confusion • Top 3 usability problems - discoverability, memorability, accidental activation 39
  40. 40. Scrub to flip 40
  41. 41. Tap to flip 41
  42. 42. Swipe to flip 42
  43. 43. Swipe to scroll 43
  44. 44. Survey Says: Tap a photo to: • Enlarge the photo • Link to a more details page • Flip the image to reveal additional photos • Do nothing 44 Can anyone guess the right answer? Answer is, all of the above - depends on which app you use.
  45. 45. it’s just the beginning of the story. 45 Design for touch devices, and the iPad in particular, is just getting started, and the possibilities are endless.
  46. 46. Thanks! Kicker Studio 300 Brannan Street Suite 207 San Francisco, CA 94107 ph. 415-796-3434 jennifer@kickerstudio.com www.kickerstudio.com @jenniferbove / @kickerstudio 46

×