Download as PDF, PPTX
Uploaded byRobert Winters
Design for Multitouch
This document discusses design considerations for multi-touch interfaces. It covers different touchscreen technologies, how the type of device impacts design choices, and principles for optimizing interfaces for touchscreens. Examples of touch-optimized websites are provided. The document concludes with references and credits for included images.
More Related Content
Design for Multitouch
- 1.
- 2. HI, I’M ROBERT @ROBBEDOES ONTWITTER USER SYSTEM INTERACTION PDENG. EINDHOVEN, UNIVERSITY OF TECHNOLOGY MY BACKGROUND USER EXPERIENCE NASCOM BELGIUM J MY JOB
- 4. TODAY’S ! TOUCH POINTS • WHAT’SOUT THERE • INTERFACE DESIGN • INTERACTION DESIGN • WORKSHOP: LET’S GO HANDS ON!
- 5. TYPE OF TOUCH TECHNOLOGYAFFECTS • THE USER EXPERIENCE • THE INTERFACE DESIGN • THE INTERACTION DESIGN
- 6.
- 7. TRACK-! PADS YOUR FINGERS OR HANDS NEVER COVER INFORMATION INTERFACE ALWAYS VISIBLE
- 8. “IF YOU SEEA ! STYLUS ” THEY BLEW IT DIXIT STEVE JOBS
- 9. NOT ALWAYS, STEVE
- 10. USE CASE DRAWING • PRESSURE • ACCURACY • POINT ANDCLICK INTERFACE CURRENT SOFTWARE
- 11. BUT! LET’S STICK! TO SCREENS! …AND FINGERS! AND FINGERS ON THAT SAME SCREEN (YOU KNOW WHAT I MEAN)
- 12. OUT IN THE WILD WHATTECHNOLOGY DO I CHOOSE FOR MY PROJECT OR CLIENT?
- 13. CAPACITIVE BASED ON CONDUCTION SKINCONTACT MANDATORY. FAST. RESPONSIVE. EXPENSIVE. GREAT CHOICE FOR SMARTPHONES, TABLETS AND MP3 PLAYERS. MOST COMMON.
- 14. RESISTIVE BASED ON PRESSURE NOSKIN CONTACT MANDATORY. CHEAP. GREAT CHOICE FOR DIGITAL SIGNAGE, INDUSTRIAL & STYLUS OPERATED USE CASES
- 15. THE REST BASED ONREFLECTION INFRARED IMAGING … WORKSHOP DIY. LARGE. COST EFFICIENT. RETAIL. INDUSTRIAL. PUBLIC. ALSO SEE WIKIPEDIA
- 16. IF YOU KNOWTHE HARDWARE, THINK ABOUT HOW IT’S USED
- 17. 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
- 18. TABLET • SINGLE& MULTI TASK • AVERAGE SCREEN • ENTERTAIN / CONSUME MULTI FUNCTIONAL EXTRA REAL ESTATE DESIGN FOR 1 (MAX 2) USERS
- 19. BIG • LOADS OF REALESTATE • SPECIFIC CONTEXT OF USE • ADVERTISE. ENTERTAIN. MONITOR … DESIGN FOR USE CASES KIOSKS. SIGNAGE. WORK. OFTEN MULTIPLE USERS
- 20. ONCE YOU KNOWHOW IT’S USED, THINK ABOUT YOUR INTERFACE
- 21. MANY TOUCH DEVICESNOWADAYS! S DESIGN FOR MOBILE OFTEN EQUALS DESIGN FOR TOUCH DESIGN FOR TOUCH DOES NOT ALWAYS EQUAL DESIGN FOR MOBILE S OTHER MINDSET
- 22. MOBILE VS. TABLET LIST LIST + DETAILS
- 23. MIND THE GAP THE FOLD EXISTS TWICE F RF A CE IFFERE NT INTE D SAME FUNCTIONS?
- 25. S MA LL E R NAVIGAT ION MORE HEIGHT U CT S LESS PROD
- 26. WHEN DEFINING YOURINTERFACE, THINK ABOUT HOW YOU DESIGN IT
- 27. TOUCH! BASED DESIGN DON’T COMBINE METAPHORS APPLE DESIGN GUIDELINE PAPER + SCROLL?
- 28. TOUCH! BASED DESIGN DON’T COPYTACKY INTERFACES BEEN TH ERE, DONE TH AT !
- 29. USE METAPHORS ONLY IF THEY BECOME FUNCTIONAL INSERT STACK IBOOKS APP IMAGE AVOID KI T SCH I MU S T B E HALFW AY
- 30. ENT REDESIGNED CONT LESS IS MORE ON MOBILE WHILE MAGAZINE STYLE • BIG IMAGES WORKS ON A TABLET • BEAUTIFUL TEXT • SCANNABLE HEADLINES
- 31. 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
- 32. BLINK AFTER TAPLIVES I HOVER! RIP IS DEAD THINK STATES THINK PHYSICAL THINK BUTTONS A TEXT LINKS ARE UNUSABLE
- 33. 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.
- 34. TOUCH! OPTIMIZED WEB HTTP://IPHONE.CNET.COM LINKED AREA Q A
- 35. TOUCH! OPTIMIZED WEB HTTP://HM.COM/US/MOBILE A MOST RELEVANT FUNCTION IN A MOBILE CONTEXT
- 36. TOUCH! OPTIMIZED WEB HTTP://NIKE.COM ONAN IPAD A CLEANER, SLEEKER, FASTER! LARGE "TAPABLE" AREA SWIPE ME!
- 37. WHEN DESIGNING YOURINTERFACE, THINK ABOUT INTERACTIONS NATIVE APP LICATIONS
- 38. DESIGN FOR HOW USERSHOLD THEIR DEVICE THUMBS VS FINGERS. ONE HAND VS TWO HANDS
- 39. THUMBS HAVE EASY ACCESSTO LOWER PARTS OF THE SCREEN AND NEAREST CORNERS SUB MENU COVERED AFTER SELECTIONS MAIN MENU
- 40. FINGERS ARE USED MOREWHEN • THE DEVICE IS NOT HELD • THE DEVICE HAS A BIG SCREEN • PRECISE SELECTION IS NEEDED • USERS USE BOTH HANDS T WARNING: ASSUMPTIONS
- 41. TWO HANDS COULD BEA SHORTCUT DISCOVERA BLE, NOT CRITICAL 1. PINCH 2. PRESS TO MATCH SIZE
- 42. A ZOOM IN , ONE HANDED ZOOM OUT A ZOOM IN ASSIGN FUNCTIONS
- 43.
- 44. LET’S GET OURHANDS DIRTY WORKSHOP MULTITOUCH GROUP WORK
- 45. WORKSHOP! TOUCH APPLICATION EUROSCOOP MOBILE, TA BLET, KIOS K? • CHOOSE PLATFORM • FOCUS ON USE CASE • CREATE WIREFRAME TY P E FIREWORKS PROTO
- 46. FIN. NEED HELP? CONTACT! US THANK YOU WWW.NASCOM.BE
- 47. 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
- 48. 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
Editor's Notes
- #2 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.
- #3 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.
- #4 Bon, hiernaasttewerkgestelddus.Bijnascom. Wijzittenvlakbovenaan de cinema. Waarvroegerdat TV restaurant was. We zijnongeveer met 80 mensen en houdenonsbezig met alleswatinteractief is. Web, mobiel, touch, …
- #5 Nu,duswaargaan we het vandaag over hebben.
- #6 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?
- #7 Voorbeeldje van watikhiermeebedoel
- #8 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.
- #9 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.
- #10 Het is waswelnietaltijdwaar. Soms is het gewoonmakkelijkeromteschrijven.
- #11 fingerspitsengefül
- #12 Maarlaten we het bijschermenhouden. En vingers, enja, vingers op die schermen.
- #13 Als het aankomt op het kiezen van technologiezijn de keuzeseigelijkredelijkbeperkt.
- #14 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.
- #15 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.
- #18 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.
- #32 Net zoals in edit states moetgeookdenkenaaninteracties en menu items.
- #47 Or you can just call us to do all this for you.Thanks for your attention. :)