Design for Multitouch

DESIGN FOR! MULTITOUCH BY ROBERT WINTERS

HI, I’M ROBERT @ROBBEDOES ON TWITTER USER SYSTEM INTERACTION PDENG. EINDHOVEN, UNIVERSITY OF TECHNOLOGY MY BACKGROUND USER EXPERIENCE NASCOM BELGIUM J MY JOB

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, TABLETS AND MP3 PLAYERS. MOST COMMON.

RESISTIVE BASED ON PRESSURE NO SKIN CONTACT MANDATORY. CHEAP. GREAT CHOICE FOR DIGITAL SIGNAGE, INDUSTRIAL & STYLUS OPERATED USE CASES

THE REST BASED ON REFLECTION INFRARED IMAGING … WORKSHOP DIY. LARGE. COST EFFICIENT. RETAIL. INDUSTRIAL. PUBLIC. ALSO SEE WIKIPEDIA

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 PUZZLE DECLUTTER SINGLE FUNCTION DESIGN DESIGN FOR SINGLE USER

TABLET • SINGLE & MULTI TASK • AVERAGE SCREEN • ENTERTAIN / CONSUME MULTI FUNCTIONAL EXTRA REAL ESTATE DESIGN FOR 1 (MAX 2) USERS

BIG • LOADS OF REAL ESTATE • SPECIFIC CONTEXT OF USE • ADVERTISE. ENTERTAIN. MONITOR … DESIGN FOR USE CASES KIOSKS. SIGNAGE. WORK. OFTEN MULTIPLE USERS

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 TOUCH DOES NOT ALWAYS EQUAL DESIGN FOR MOBILE S OTHER MINDSET

MOBILE VS. TABLET LIST LIST + DETAILS

MIND THE GAP THE FOLD EXISTS TWICE F RF A CE IFFERE NT INTE D SAME FUNCTIONS?

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 STACK IBOOKS APP IMAGE AVOID KI T SCH I MU S T B E HALFW AY

ENT REDESIGNED CONT LESS IS MORE ON MOBILE WHILE MAGAZINE STYLE • BIG IMAGES WORKS ON A TABLET • BEAUTIFUL TEXT • SCANNABLE HEADLINES

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

BLINK AFTER TAP LIVES I HOVER! RIP IS DEAD THINK STATES THINK PHYSICAL THINK BUTTONS A TEXT LINKS ARE UNUSABLE

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.

TOUCH! OPTIMIZED WEB HTTP://IPHONE.CNET.COM LINKED AREA Q A

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! LARGE "TAPABLE" AREA SWIPE ME!

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 COVERED AFTER SELECTIONS MAIN MENU

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

TWO HANDS COULD BE A SHORTCUT DISCOVERA BLE, NOT CRITICAL 1. PINCH 2. PRESS TO MATCH SIZE

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? • CHOOSE PLATFORM • FOCUS ON USE CASE • CREATE WIREFRAME TY P E FIREWORKS PROTO

FIN. NEED HELP? CONTACT! US THANK YOU WWW.NASCOM.BE

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

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

http://robertwinters.be	915
http://www.robertwinters.be	452
http://www.nascom.be	93
http://www.iwipa.com	60
http://www.infuse.be	28
http://simpleandopen.blogspot.com	16
http://lanyrd.com	16
http://www.onlinegefluester.de	11
http://paper.li	5
http://martinlie.net	5
http://nascom.be	5
http://simpleandopen.blogspot.de	3
http://twitter.com	1

Design for Multitouch

by Robert Winters on Sep 28, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

13 Embeds 1,610

Statistics

Design for Multitouch — Presentation Transcript