design for multitouch

DESIGN FOR!MULTITOUCH BY ROBERT WINTERS

HI, I’M ROBERT PDENG. EINDHOVEN,

USER EXPERIENCE NASCOM BELGIUM

MY BACKGROUND

MY JOB

J

@ROBBEDOES ON TWITTER

USER SYSTEM INTERACTION

UNIVERSITY OF TECHNOLOGY

TODAY’S !TOUCH POINTS •  WHAT’S OUT THERE •  INTERFACE DESIGN •  INTERACTION DESIGN •  WORKSHOP: LET’S GO HANDS ON!

TYPE OF TOUCH

•  THE USER EXPERIENCE •  THE INTERFACE DESIGN •  THE INTERACTION DESIGN

TECHNOLOGY AFFECTS

EXAMPLE

TRACK-!PADS OR HANDS NEVER YOUR FINGERS

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

LET’S STICK!TO SCREENS!… AND FINGERS! AND FINGERS ON THAT SAME SCREEN

(YOU KNOW WHAT I MEAN)

BUT!

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

ALSO SEE WIKIPEDIA

BASED ON REFLECTION INFRARED IMAGING

…

DIY. LARGE. COST EFFICIENT. RETAIL. INDUSTRIAL. PUBLIC.

WORKSHOP

THINK ABOUT HOW IT’S USED IF YOU KNOW THE HARDWARE,

MOBILE

DECLUTTER SINGLE FUNCTION DESIGN DESIGN FOR SINGLE USER

•  MAINLY SINGLE TASK •  SMALL SCREEN •  PERSONAL USE

DON'T DESIGN ONE PIECE OF THE PUZZLE

BUT!

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

THINK ABOUT YOUR INTERFACE ONCE YOU KNOW HOW IT’S USED,

EQUALS DESIGN FOR TOUCH DESIGN FOR MOBILE OFTEN

DESIGN FOR TOUCH DOES NOT ALWAYS EQUAL DESIGN FOR MOBILE

S MANY TOUCH DEVICES NOWADAYS! S

OTHER MINDSET

MOBILE VS. TABLET

LIST + DETAILS LIST

MIND THE GAP THE FOLD EXISTS TWICE

FDIFFEREN

T INTERFACE

SAME FUNCTIONS?

LESS PRODUCTS

MORE HEIGHT

SMALLER NAVIGATION

THINK ABOUT HOW YOU DESIGN IT WHEN DEFINING YOUR INTERFACE,

TOUCH !BASED DESIGN DON’T COMBINE METAPHORS

PAPER + SCROLL?

APPLE DESIGN GUIDELINE

TOUCH !BASED DESIGN DON’T COPY TACKY INTERFACES

BEEN THERE, DONE THAT!

USE METAPHORS ONLY IF THEY BECOME

I MUST BE HALFWAY

INSERT STACK IBOOKS APP IMAGE

FUNCTIONAL

AVOID KITSCH

LESS IS MORE ON MOBILE WHILE

MAGAZINE STYLE WORKS ON A TABLET •  BIG IMAGES

•  BEAUTIFUL TEXT •  SCANNABLE HEADLINES

REDESIGNED CONTENT

MODES !AVOID CLUTTER ONLY SHOW FUNCTIONS WHEN THEY ARE RELEVANT

ONLY IN EDIT MODE

INSERT WEIRD INSCROLLING PAPER IMAGE

•  EDIT IN PLACE •  CONTEXTUAL FEATURES

HOVER !IS DEAD THINK STATES THINK PHYSICAL THINK BUTTONS

I

A

BLINK AFTER TAP LIVES

TEXT LINKS ARE UNUSABLE

RIP

BREAK !OPTIMIZED WEB

NOISE

PS!

THE CONTRAST ON AN IPAD

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

ATIRING ON THE EYES

HTTP://IPHONE.CNET.COM

QALINKED AREA

TOUCH !OPTIMIZED WEB

HTTP://HM.COM/US/MOBILE

AMOST RELEVANT FUNCTION IN A MOBILE CONTEXT

TOUCH !OPTIMIZED WEB

TOUCH !OPTIMIZED WEB HTTP://NIKE.COM ON AN IPAD

SWIPE ME!

f LARGE "TAPABLE" AREA

ACLEANER, SLEEKER, FASTER!

THINK ABOUT INTERACTIONS WHEN DESIGNING YOUR INTERFACE,

NATIVE APPLICATIONS

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

MAIN MENU

SUB MENU COVERED AFTER SELECTIONS

AND NEAREST CORNERS

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

PRESS TO MATCH SIZE

PINCH 1.

2.

DISCOVERABLE, NOT CRITICAL

FUNCTIONS

AZOOM OUT

ZOOM IN

ASSIGN A

ZOOM IN , ONE HANDED

INSPIRATIONAL VIDEO BUMPTOP AWESOME INTERACTIONS!

WORKSHOP MULTITOUCH LET’S GET OUR HANDS DIRTY

GROUP WORK

WORKSHOP! TOUCH APPLICATION EUROSCOOP

•  CHOOSE PLATFORM •  FOCUS ON USE CASE •  CREATE WIREFRAME

MOBILE, TABLET, KIOSK?

FIREWORKS PROTOTY

PE

CONTACT!US WWW.NASCOM.BE

FIN.

THANK YOU

NEED HELP?

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

IMAGE CREDITS

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

HTTP://WWW.HTC.COM