DESIGN FOR!
MULTITOUCH
BY ROBERT WINTERS
HI, I’M
ROBERT
@ROBBEDOES ON TWITTER

USER SYSTEM INTERACTION
PDENG. EINDHOVEN,
UNIVERSITY OF TECHNOLOGY
             MY B...
TODAY’S !
TOUCH POINTS
• WHAT’S OUT THERE
• INTERFACE DESIGN
• INTERACTION DESIGN
• WORKSHOP: LET’S GO HANDS ON!
TYPE OF TOUCH
TECHNOLOGY AFFECTS
• THE USER EXPERIENCE
• THE INTERFACE DESIGN
• THE INTERACTION DESIGN
EXAMPLE
TRACK-!
PADS
YOUR FINGERS
OR HANDS       NEVER 
COVER INFORMATION

INTERFACE ALWAYS VISIBLE
“IF YOU SEE A !
 STYLUS         ”
         THEY BLEW IT
         DIXIT STEVE JOBS
NOT ALWAYS,   STEVE
USE
CASE
DRAWING

• PRESSURE
• ACCURACY 
• POINT AND CLICK INTERFACE


   CURRENT SOFTWARE
BUT!

LET’S STICK!
TO SCREENS!
… AND FINGERS!
AND FINGERS ON THAT SAME   SCREEN
      (YOU KNOW WHAT I MEAN)
OUT IN
THE WILD
WHAT TECHNOLOGY DO I CHOOSE 
FOR MY PROJECT OR CLIENT?
CAPACITIVE
BASED ON CONDUCTION


SKIN CONTACT MANDATORY. FAST. RESPONSIVE.
EXPENSIVE. GREAT CHOICE FOR SMARTPHONES,
TABLET...
RESISTIVE
BASED ON PRESSURE

NO SKIN CONTACT MANDATORY.
CHEAP. GREAT CHOICE FOR DIGITAL
SIGNAGE, INDUSTRIAL & STYLUS
OPERA...
THE REST
BASED ON REFLECTION
         INFRARED
         IMAGING
             …

                             WORKSHOP

  D...
IF YOU KNOW THE HARDWARE,
THINK ABOUT HOW IT’S USED
MOBILE
       • MAINLY SINGLE TASK
       • SMALL SCREEN
       • PERSONAL USE




BUT!
DON'T DESIGN ONE PIECE OF THE PUZZ...
TABLET
  • SINGLE & MULTI TASK 
  • AVERAGE SCREEN
  • ENTERTAIN / CONSUME




MULTI FUNCTIONAL
EXTRA REAL ESTATE
DESIGN F...
BIG
• LOADS OF REAL ESTATE
• SPECIFIC CONTEXT OF USE
• ADVERTISE. ENTERTAIN. MONITOR …




DESIGN FOR USE CASES
KIOSKS. SI...
ONCE YOU KNOW HOW IT’S USED,
THINK ABOUT YOUR INTERFACE
MANY TOUCH DEVICES NOWADAYS!
                    S
       DESIGN FOR MOBILE OFTEN
EQUALS DESIGN FOR TOUCH


DESIGN FOR TOU...
MOBILE VS. TABLET




 LIST
    LIST + DETAILS
MIND THE GAP
                               THE FOLD EXISTS TWICE

                           F
                   RF A   ...
S MA L L E
         R
NAVIGAT
        ION



                   MORE HEIGHT




          U CT S
LESS PROD
WHEN DEFINING YOUR INTERFACE,
THINK ABOUT HOW YOU DESIGN IT
TOUCH!
BASED DESIGN
DON’T COMBINE 
METAPHORS


     APPLE DESIGN GUIDELINE




      PAPER +
              SCROLL?
TOUCH!
BASED DESIGN
DON’T COPY TACKY
INTERFACES


 BEEN TH
        ERE,   DONE TH
                      AT !
USE METAPHORS 
                                ONLY IF THEY BECOME
                                FUNCTIONAL

INSERT STAC...
ENT
                            REDESIGNED CONT




                         LESS IS MORE
                         ON MOBI...
MODES!
                                       AVOID CLUTTER
INSERT WEIRD INSCROLLING PAPER IMAGE   ONLY SHOW FUNCTIONS
   ...
BLINK AFTER TAP LIVES

I
HOVER!                      RIP



IS DEAD
THINK STATES
THINK PHYSICAL
 THINK BUTTONS
       A


...
PS!
BREAK!
THE CONTRAST
OPTIMIZED WEB
  ON AN IPAD
                               Lorem ipsum dolor sit amet, consectetur
...
TOUCH!
OPTIMIZED WEB
HTTP://IPHONE.CNET.COM




             LINKED AREA

                           Q
                   ...
TOUCH!
OPTIMIZED WEB
HTTP://HM.COM/US/MOBILE




                           A
 MOST RELEVANT FUNCTION
  IN A MOBILE CONTEXT
TOUCH!
OPTIMIZED WEB
HTTP://NIKE.COM
 ON AN IPAD


                 A
CLEANER, SLEEKER, FASTER!




                      ...
WHEN DESIGNING YOUR INTERFACE,
THINK ABOUT INTERACTIONS
                  NATIVE APP
                             LICATIONS
DESIGN FOR
HOW USERS HOLD THEIR DEVICE
THUMBS VS FINGERS. ONE HAND VS TWO HANDS
THUMBS
HAVE EASY ACCESS TO
LOWER PARTS OF THE SCREEN
     AND NEAREST CORNERS
                               SUB MENU
  CO...
FINGERS
ARE USED MORE WHEN

• THE DEVICE IS NOT HELD
• THE DEVICE HAS A BIG SCREEN
• PRECISE SELECTION IS NEEDED
• USERS U...
TWO HANDS
COULD BE A SHORTCUT
         DISCOVERA
                     BLE, NOT
                              CRITICAL
    ...
A
    ZOOM IN , ONE HANDED




    ZOOM OUT




A
    ZOOM IN




ASSIGN
FUNCTIONS
BUMPTOP
INSPIRATIONAL VIDEO
AWESOME INTERACTIONS!
LET’S GET OUR HANDS DIRTY
WORKSHOP MULTITOUCH
                    GROUP WORK
WORKSHOP!
TOUCH APPLICATION EUROSCOOP




      MOBILE, TA
                 BLET, KIOS
                            K?


  ...
FIN.
 NEED   HELP?
CONTACT!
US
THANK YOU
     WWW.NASCOM.BE
REFERENCES
   • WIKIPEDIA: TYPE OF TOUCH SCREENS
              HTTP://EN.WIKIPEDIA.ORG/WIKI/TOUCHSCREEN!


              •...
HANDSCANNER 
                 HTTP://WWW.FLICKR.COM/PHOTOS/DNORMAN/2230280579/
                 RUGGED TOUCHSCREEN!
      ...
Design for Multitouch
Design for Multitouch
Upcoming SlideShare
Loading in …5
×

Design for Multitouch

10,386 views

Published on

Insights on interface and interaction design for multitouch interfaces. A free workshop I did on the C-mine event in Genk, Belgium on 21-09-2010 especially for interface designers.

Published in: Design
3 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total views
10,386
On SlideShare
0
From Embeds
0
Number of Embeds
3,443
Actions
Shares
0
Downloads
406
Comments
3
Likes
10
Embeds 0
No embeds

No notes for slide
  • Welkom – iedereenaanwezig?Okay, ditvolgenduurtjebestaatuit twee delen. Eerstgaanmaarten en ikkortietsvertellen over touch en meerbepaald over design for multi-touch. En daarnawordt het interactief, kan je wat met de grotetafelspelen, en gaan we samenietsproberentemaken.
  • Ikben Robert, werkzaamhiernaasttenascomals user experience architect. Hiervoorhebik 2 jaar op de universiteit in Eindhoven gewerkt, alsonderzoeker in het veld van User System Interaction. (achtergrond) Datbrilhebiknietechtnodigtrouwens, zorgtergewoonvoordatikeriets slimmer uitzie in foto’s.
  • Bon, hiernaasttewerkgestelddus.Bijnascom. Wijzittenvlakbovenaan de cinema. Waarvroegerdat TV restaurant was. We zijnongeveer met 80 mensen en houdenonsbezig met alleswatinteractief is. Web, mobiel, touch, …
  • Nu,duswaargaan we het vandaag over hebben.
  • Waarom is het belangrijkomtewetenwatvoortechnologieerallemaal is? Wel, het heeftmeestalinvloed op eenaantaldingen in het design process.. User experience in het geheel.Interface design, hoe groot of kleinkanik de knopjesmakenInteraction design, multitouchondersteund?
  • Voorbeeldje van watikhiermeebedoel
  • Als je kijktnaardeze laptop.. Die heefteen heel gevoeligetrackpad. Multitouchwordtondersteund, maar op zich is het ontworpen in eersteinstantieom de muisteverangen. Met anderewoorden, het aanraakgevoeligegedeelteheeftgeen effect op hoe we in het verledenonze interfaces moestenontwerpenomdat we nogaltijd in point click denken. Ook is het zodat de interface nooitbedektzalworden door onzevingers en handen.
  • Steve jobs heeftooitgezegd in een interview kortnadathij de iPadlanceerde, if you see a stylus they blew it. Nu ikkan hoop apparatenopnoemen die ikhebgestest met een stylus werkte, en datsuckteinderdaadredelijk hard.
  • Het is waswelnietaltijdwaar. Soms is het gewoonmakkelijkeromteschrijven.
  • fingerspitsengefül
  • Maarlaten we het bijschermenhouden. En vingers, enja, vingers op die schermen.
  • Als het aankomt op het kiezen van technologiezijn de keuzeseigelijkredelijkbeperkt.
  • In the capacitive system, a layer that stores electrical charge is placed on the glass panel of the monitor. When a user touches the monitor with his or her finger, some of the charge is transferred to the user, so the charge on the capacitive layer decreases. This decrease is measured in circuits located at each corner of the monitor. The computer calculates, from the relative differences in charge at each corner, exactly where the touch event took place and then relays that information to the touch-screen driver software. One advantage that the capacitive system has over the resistive system is that it transmits almost 90 percent of the light from the monitor, whereas the resistive system only transmits about 75 percent. This gives the capacitive system a much clearer picture than the resistive system.
  • The resistive system consists of a normal glass panel that is covered with a conductive and a resistive metallic layer. These two layers are held apart by spacers, and a scratch-resistant layer is placed on top of the whole setup. An electrical current runs through the two layers while the monitor is operational. When a user touches the screen, the two layers make contact in that exact spot. The change in the electrical field is noted and the coordinates of the point of contact are calculated by the computer. Once the coordinates are known, a special driver translates the touch into something that the operating system can understand, much as a computer mouse driver translates a mouse's movements into a click or a drag.
  • Op mobieltjesgaanmensenvooralveelbezigzijn met 1 ding, en maar 1 ding tegelijk. Ikvind het wreedvervelendalsikeensmsjekrijg en bezigben in een app. Alllévervelend is niet het juistewoord, maar het vaaknietmakkelijkomte direct daarnateswitchenafhankelijk van waarikben. Alsikaan het wandelenbenvergt het extra inspanning van mijnhersenenomteswitchennaar de sms viewer. Het scherm is redelijkklein, datzorgtervoordat je zoveelmogelijk clutter moetvermijden. Nu dat is altijdzo, maar op eenmobielapparaat is dit extra belangrijk. Clutter is overbodigezooitrouwens. ;)Shazam: unieke use case in eenmobilee context die toont hoe krachtig single function design eigelijk is.
  • Net zoals in edit states moetgeookdenkenaaninteracties en menu items.
  • Or you can just call us to do all this for you.Thanks for your attention. :)
  • Design for Multitouch

    1. 1. DESIGN FOR! MULTITOUCH BY ROBERT WINTERS
    2. 2. HI, I’M ROBERT @ROBBEDOES ON TWITTER USER SYSTEM INTERACTION PDENG. EINDHOVEN, UNIVERSITY OF TECHNOLOGY MY BACKGROUND USER EXPERIENCE NASCOM BELGIUM J MY JOB
    3. 3. TODAY’S ! TOUCH POINTS • WHAT’S OUT THERE • INTERFACE DESIGN • INTERACTION DESIGN • WORKSHOP: LET’S GO HANDS ON!
    4. 4. TYPE OF TOUCH TECHNOLOGY AFFECTS • THE USER EXPERIENCE • THE INTERFACE DESIGN • THE INTERACTION DESIGN
    5. 5. EXAMPLE
    6. 6. TRACK-! PADS YOUR FINGERS OR HANDS NEVER COVER INFORMATION INTERFACE ALWAYS VISIBLE
    7. 7. “IF YOU SEE A ! STYLUS ” THEY BLEW IT DIXIT STEVE JOBS
    8. 8. NOT ALWAYS, STEVE
    9. 9. USE CASE DRAWING • PRESSURE • ACCURACY • POINT AND CLICK INTERFACE CURRENT SOFTWARE
    10. 10. BUT! LET’S STICK! TO SCREENS! … AND FINGERS! AND FINGERS ON THAT SAME SCREEN (YOU KNOW WHAT I MEAN)
    11. 11. OUT IN THE WILD WHAT TECHNOLOGY DO I CHOOSE FOR MY PROJECT OR CLIENT?
    12. 12. CAPACITIVE BASED ON CONDUCTION SKIN CONTACT MANDATORY. FAST. RESPONSIVE. EXPENSIVE. GREAT CHOICE FOR SMARTPHONES, TABLETS AND MP3 PLAYERS. MOST COMMON.
    13. 13. RESISTIVE BASED ON PRESSURE NO SKIN CONTACT MANDATORY. CHEAP. GREAT CHOICE FOR DIGITAL SIGNAGE, INDUSTRIAL & STYLUS OPERATED USE CASES
    14. 14. THE REST BASED ON REFLECTION INFRARED IMAGING … WORKSHOP DIY. LARGE. COST EFFICIENT. RETAIL. INDUSTRIAL. PUBLIC. ALSO SEE WIKIPEDIA
    15. 15. IF YOU KNOW THE HARDWARE, THINK ABOUT HOW IT’S USED
    16. 16. MOBILE • MAINLY SINGLE TASK • SMALL SCREEN • PERSONAL USE BUT! DON'T DESIGN ONE PIECE OF THE PUZZLE DECLUTTER SINGLE FUNCTION DESIGN DESIGN FOR SINGLE USER
    17. 17. TABLET • SINGLE & MULTI TASK • AVERAGE SCREEN • ENTERTAIN / CONSUME MULTI FUNCTIONAL EXTRA REAL ESTATE DESIGN FOR 1 (MAX 2) USERS
    18. 18. BIG • LOADS OF REAL ESTATE • SPECIFIC CONTEXT OF USE • ADVERTISE. ENTERTAIN. MONITOR … DESIGN FOR USE CASES KIOSKS. SIGNAGE. WORK. OFTEN MULTIPLE USERS
    19. 19. ONCE YOU KNOW HOW IT’S USED, THINK ABOUT YOUR INTERFACE
    20. 20. MANY TOUCH DEVICES NOWADAYS! S DESIGN FOR MOBILE OFTEN EQUALS DESIGN FOR TOUCH DESIGN FOR TOUCH DOES NOT ALWAYS EQUAL DESIGN FOR MOBILE S OTHER MINDSET
    21. 21. MOBILE VS. TABLET LIST LIST + DETAILS
    22. 22. MIND THE GAP THE FOLD EXISTS TWICE F RF A CE IFFERE NT INTE D SAME FUNCTIONS?
    23. 23. S MA L L E R NAVIGAT ION MORE HEIGHT U CT S LESS PROD
    24. 24. WHEN DEFINING YOUR INTERFACE, THINK ABOUT HOW YOU DESIGN IT
    25. 25. TOUCH! BASED DESIGN DON’T COMBINE METAPHORS APPLE DESIGN GUIDELINE PAPER + SCROLL?
    26. 26. TOUCH! BASED DESIGN DON’T COPY TACKY INTERFACES BEEN TH ERE, DONE TH AT !
    27. 27. USE METAPHORS ONLY IF THEY BECOME FUNCTIONAL INSERT STACK IBOOKS APP IMAGE AVOID KI T SCH I MU S T B E HALFW AY
    28. 28. ENT REDESIGNED CONT LESS IS MORE ON MOBILE WHILE MAGAZINE STYLE • BIG IMAGES WORKS ON A TABLET • BEAUTIFUL TEXT • SCANNABLE HEADLINES
    29. 29. MODES! AVOID CLUTTER INSERT WEIRD INSCROLLING PAPER IMAGE ONLY SHOW FUNCTIONS WHEN THEY ARE RELEVANT • EDIT IN PLACE • CONTEXTUAL FEATURES ONLY IN EDIT M ODE
    30. 30. BLINK AFTER TAP LIVES I HOVER! RIP IS DEAD THINK STATES THINK PHYSICAL THINK BUTTONS A TEXT LINKS ARE UNUSABLE
    31. 31. PS! BREAK! THE CONTRAST OPTIMIZED WEB ON AN IPAD Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. TIRING ON THE EYES A NOISE Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    32. 32. TOUCH! OPTIMIZED WEB HTTP://IPHONE.CNET.COM LINKED AREA Q A
    33. 33. TOUCH! OPTIMIZED WEB HTTP://HM.COM/US/MOBILE A MOST RELEVANT FUNCTION IN A MOBILE CONTEXT
    34. 34. TOUCH! OPTIMIZED WEB HTTP://NIKE.COM ON AN IPAD A CLEANER, SLEEKER, FASTER! LARGE "TAPABLE" AREA SWIPE ME!
    35. 35. WHEN DESIGNING YOUR INTERFACE, THINK ABOUT INTERACTIONS NATIVE APP LICATIONS
    36. 36. DESIGN FOR HOW USERS HOLD THEIR DEVICE THUMBS VS FINGERS. ONE HAND VS TWO HANDS
    37. 37. THUMBS HAVE EASY ACCESS TO LOWER PARTS OF THE SCREEN AND NEAREST CORNERS SUB MENU COVERED AFTER SELECTIONS MAIN MENU
    38. 38. FINGERS ARE USED MORE WHEN • THE DEVICE IS NOT HELD • THE DEVICE HAS A BIG SCREEN • PRECISE SELECTION IS NEEDED • USERS USE BOTH HANDS T WARNING: ASSUMPTIONS
    39. 39. TWO HANDS COULD BE A SHORTCUT DISCOVERA BLE, NOT CRITICAL 1. PINCH 2. PRESS TO MATCH SIZE
    40. 40. A ZOOM IN , ONE HANDED ZOOM OUT A ZOOM IN ASSIGN FUNCTIONS
    41. 41. BUMPTOP INSPIRATIONAL VIDEO AWESOME INTERACTIONS!
    42. 42. LET’S GET OUR HANDS DIRTY WORKSHOP MULTITOUCH GROUP WORK
    43. 43. WORKSHOP! TOUCH APPLICATION EUROSCOOP MOBILE, TA BLET, KIOS K? • CHOOSE PLATFORM • FOCUS ON USE CASE • CREATE WIREFRAME TY P E FIREWORKS PROTO
    44. 44. FIN. NEED HELP? CONTACT! US THANK YOU WWW.NASCOM.BE
    45. 45. REFERENCES • WIKIPEDIA: TYPE OF TOUCH SCREENS HTTP://EN.WIKIPEDIA.ORG/WIKI/TOUCHSCREEN! • THE TOUCH GESTURE REFERENCE GUIDE! HTTP://WWW.LUKEW.COM/FF/ENTRY.ASP?1071! • ORIENTATION CSS HTTP://WWW.CLOUDFOUR.COM/IPAD-ORIENTATION-CSS/ • DESIGNING FOR IPAD REALITY CHECK HTTP://WWW.INFORMATIONARCHITECTS.JP/EN/DESIGNING-FOR-IPAD-REALITY-CHECK/ • MATT GEMMELL HTTP://MATTGEMMELL.COM/2010/03/05/IPAD-APPLICATION-DESIGN • DESIGN FOR THE IPAD .NET, ISSUE 204, AUGUST 2010
    46. 46. HANDSCANNER HTTP://WWW.FLICKR.COM/PHOTOS/DNORMAN/2230280579/ RUGGED TOUCHSCREEN! HTTP://GETAC.COM TOUCH TABLE AND PEOPLE ! HTTP://WWW.FRESHDV.COM/2007/05 + HTTP://WWW.MICROSOFT.COM WACOM TABLET HTTP://WWW.CARBODYDESIGN.COM/GALLERY/2007/11/16-WACOM-CINTIQ-12WX/1/ FLIPBOARD AND COFFEE MUG HTTP://WWW.FLIPBOARD.COM/ GUY USING TWO HANDS HTTP://WWW.FLICKR.COM/PHOTOS/LIQUENE/3177500623/SIZES/L/IN/PHOTOSTREAM/ MACBOOK + IPADS + IPHONES! HTTP://WWW.APPLE.COM JOBS HOLDING IPAD HTTP://WWW.SOFTSAILOR.COM/NEWS/19690-IPAD-WILL-NOT-SUPPORT-TETHERING-VIA-IPHONE- STEVE-JOBS-SAID.HTML JUNGLE TOY SOLDIERS HTTP://WWW.FLICKR.COM/PHOTOS/JCLOR/4694454104/ SURFACE GAME HTTP://WWW.FLICKR.COM/PHOTOS/IMAGESFORTHEFUTURE/4041849181/ HTC EVOLVE CONCEPT IMAGE CREDITS HTTP://WWW.HTC.COM

    ×