design for multitouch
DESCRIPTION
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.TRANSCRIPT
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