Design for Multitouch
-
Upload
robert-winters -
Category
Design
-
view
9.641 -
download
1
description
Transcript of Design for Multitouch
![Page 1: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/1.jpg)
DESIGN FOR!MULTITOUCH BY ROBERT WINTERS
![Page 2: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/2.jpg)
HI, I’M ROBERT PDENG. EINDHOVEN,
USER EXPERIENCE NASCOM BELGIUM
MY BACKGROUND
MY JOB
J
@ROBBEDOES ON TWITTER
USER SYSTEM INTERACTION
UNIVERSITY OF TECHNOLOGY
![Page 3: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/3.jpg)
![Page 4: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/4.jpg)
TODAY’S !TOUCH POINTS • WHAT’S OUT THERE • INTERFACE DESIGN • INTERACTION DESIGN • WORKSHOP: LET’S GO HANDS ON!
![Page 5: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/5.jpg)
TYPE OF TOUCH
• THE USER EXPERIENCE • THE INTERFACE DESIGN • THE INTERACTION DESIGN
TECHNOLOGY AFFECTS
![Page 6: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/6.jpg)
EXAMPLE
![Page 7: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/7.jpg)
TRACK-!PADS OR HANDS NEVER YOUR FINGERS
COVER INFORMATION
INTERFACE ALWAYS VISIBLE
![Page 8: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/8.jpg)
“IF YOU SEE A ! STYLUS ” THEY BLEW IT
DIXIT STEVE JOBS
![Page 9: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/9.jpg)
NOT ALWAYS, STEVE
![Page 10: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/10.jpg)
USE CASE DRAWING
• PRESSURE • ACCURACY • POINT AND CLICK INTERFACE
CURRENT SOFTWARE
![Page 11: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/11.jpg)
LET’S STICK!TO SCREENS!… AND FINGERS! AND FINGERS ON THAT SAME SCREEN
(YOU KNOW WHAT I MEAN)
BUT!
![Page 12: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/12.jpg)
OUT IN THE WILD WHAT TECHNOLOGY DO I CHOOSE
FOR MY PROJECT OR CLIENT?
![Page 13: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/13.jpg)
CAPACITIVE BASED ON CONDUCTION
SKIN CONTACT MANDATORY. FAST. RESPONSIVE. EXPENSIVE. GREAT CHOICE FOR SMARTPHONES, TABLETS AND MP3 PLAYERS. MOST COMMON.
![Page 14: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/14.jpg)
RESISTIVE BASED ON PRESSURE
NO SKIN CONTACT MANDATORY. CHEAP. GREAT CHOICE FOR DIGITAL SIGNAGE, INDUSTRIAL & STYLUS OPERATED USE CASES
![Page 15: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/15.jpg)
THE REST
ALSO SEE WIKIPEDIA
BASED ON REFLECTION INFRARED IMAGING
…
DIY. LARGE. COST EFFICIENT. RETAIL. INDUSTRIAL. PUBLIC.
WORKSHOP
![Page 16: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/16.jpg)
THINK ABOUT HOW IT’S USED IF YOU KNOW THE HARDWARE,
![Page 17: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/17.jpg)
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!
![Page 18: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/18.jpg)
TABLET • SINGLE & MULTI TASK • AVERAGE SCREEN • ENTERTAIN / CONSUME
MULTI FUNCTIONAL EXTRA REAL ESTATE DESIGN FOR 1 (MAX 2) USERS
![Page 19: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/19.jpg)
BIG • LOADS OF REAL ESTATE • SPECIFIC CONTEXT OF USE • ADVERTISE. ENTERTAIN. MONITOR …
DESIGN FOR USE CASES KIOSKS. SIGNAGE. WORK. OFTEN MULTIPLE USERS
![Page 20: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/20.jpg)
THINK ABOUT YOUR INTERFACE ONCE YOU KNOW HOW IT’S USED,
![Page 21: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/21.jpg)
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
![Page 22: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/22.jpg)
MOBILE VS. TABLET
LIST + DETAILS LIST
![Page 23: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/23.jpg)
MIND THE GAP THE FOLD EXISTS TWICE
FDIFFEREN
T INTERFACE
SAME FUNCTIONS?
![Page 24: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/24.jpg)
![Page 25: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/25.jpg)
LESS PRODUCTS
MORE HEIGHT
SMALLER NAVIGATION
![Page 26: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/26.jpg)
THINK ABOUT HOW YOU DESIGN IT WHEN DEFINING YOUR INTERFACE,
![Page 27: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/27.jpg)
TOUCH !BASED DESIGN DON’T COMBINE METAPHORS
PAPER + SCROLL?
APPLE DESIGN GUIDELINE
![Page 28: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/28.jpg)
TOUCH !BASED DESIGN DON’T COPY TACKY INTERFACES
BEEN THERE, DONE THAT!
![Page 29: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/29.jpg)
USE METAPHORS ONLY IF THEY BECOME
I MUST BE HALFWAY
INSERT STACK IBOOKS APP IMAGE
FUNCTIONAL
AVOID KITSCH
![Page 30: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/30.jpg)
LESS IS MORE ON MOBILE WHILE
MAGAZINE STYLE WORKS ON A TABLET • BIG IMAGES
• BEAUTIFUL TEXT • SCANNABLE HEADLINES
REDESIGNED CONTENT
![Page 31: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/31.jpg)
MODES !AVOID CLUTTER ONLY SHOW FUNCTIONS WHEN THEY ARE RELEVANT
ONLY IN EDIT MODE
INSERT WEIRD INSCROLLING PAPER IMAGE
• EDIT IN PLACE • CONTEXTUAL FEATURES
![Page 32: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/32.jpg)
HOVER !IS DEAD THINK STATES THINK PHYSICAL THINK BUTTONS
I
A
BLINK AFTER TAP LIVES
TEXT LINKS ARE UNUSABLE
RIP
![Page 33: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/33.jpg)
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
![Page 34: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/34.jpg)
HTTP://IPHONE.CNET.COM
QALINKED AREA
TOUCH !OPTIMIZED WEB
![Page 35: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/35.jpg)
HTTP://HM.COM/US/MOBILE
AMOST RELEVANT FUNCTION IN A MOBILE CONTEXT
TOUCH !OPTIMIZED WEB
![Page 36: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/36.jpg)
TOUCH !OPTIMIZED WEB HTTP://NIKE.COM ON AN IPAD
SWIPE ME!
f LARGE "TAPABLE" AREA
ACLEANER, SLEEKER, FASTER!
![Page 37: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/37.jpg)
THINK ABOUT INTERACTIONS WHEN DESIGNING YOUR INTERFACE,
NATIVE APPLICATIONS
![Page 38: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/38.jpg)
DESIGN FOR HOW USERS HOLD THEIR DEVICE THUMBS VS FINGERS. ONE HAND VS TWO HANDS
![Page 39: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/39.jpg)
THUMBS HAVE EASY ACCESS TO LOWER PARTS OF THE SCREEN
MAIN MENU
SUB MENU COVERED AFTER SELECTIONS
AND NEAREST CORNERS
![Page 40: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/40.jpg)
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
![Page 41: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/41.jpg)
TWO HANDS COULD BE A SHORTCUT
PRESS TO MATCH SIZE
PINCH 1.
2.
DISCOVERABLE, NOT CRITICAL
![Page 42: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/42.jpg)
FUNCTIONS
AZOOM OUT
ZOOM IN
ASSIGN A
ZOOM IN , ONE HANDED
![Page 43: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/43.jpg)
INSPIRATIONAL VIDEO BUMPTOP AWESOME INTERACTIONS!
![Page 44: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/44.jpg)
WORKSHOP MULTITOUCH LET’S GET OUR HANDS DIRTY
GROUP WORK
![Page 45: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/45.jpg)
WORKSHOP! TOUCH APPLICATION EUROSCOOP
• CHOOSE PLATFORM • FOCUS ON USE CASE • CREATE WIREFRAME
MOBILE, TABLET, KIOSK?
FIREWORKS PROTOTY
PE
![Page 46: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/46.jpg)
CONTACT!US WWW.NASCOM.BE
FIN.
THANK YOU
NEED HELP?
![Page 47: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/47.jpg)
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
![Page 48: Design for Multitouch](https://reader033.fdocuments.in/reader033/viewer/2022052823/554fba5cb4c90542018b475f/html5/thumbnails/48.jpg)
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