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.
2. HI, I’M
ROBERT
@ROBBEDOES ON TWITTER
USER SYSTEM INTERACTION
PDENG. EINDHOVEN,
UNIVERSITY OF TECHNOLOGY
MY BACKGROUND
USER EXPERIENCE
NASCOM BELGIUM
J
MY JOB
13. CAPACITIVE
BASED ON CONDUCTION
SKIN CONTACT MANDATORY. FAST. RESPONSIVE.
EXPENSIVE. GREAT CHOICE FOR SMARTPHONES,
TABLETS AND MP3 PLAYERS. MOST COMMON.
14. RESISTIVE
BASED ON PRESSURE
NO SKIN CONTACT MANDATORY.
CHEAP. GREAT CHOICE FOR DIGITAL
SIGNAGE, INDUSTRIAL & STYLUS
OPERATED USE CASES
15. THE REST
BASED ON REFLECTION
INFRARED
IMAGING
…
WORKSHOP
DIY. LARGE. COST EFFICIENT.
RETAIL. INDUSTRIAL. PUBLIC.
ALSO SEE WIKIPEDIA
16. IF YOU KNOW THE 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 REAL ESTATE
• SPECIFIC CONTEXT OF USE
• ADVERTISE. ENTERTAIN. MONITOR …
DESIGN FOR USE CASES
KIOSKS. SIGNAGE. WORK.
OFTEN MULTIPLE USERS
20. ONCE YOU KNOW HOW IT’S USED,
THINK ABOUT YOUR INTERFACE
21. 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
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 TAP LIVES
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.
39. THUMBS
HAVE EASY ACCESS TO
LOWER PARTS OF THE SCREEN
AND NEAREST CORNERS
SUB MENU
COVERED AFTER SELECTIONS
MAIN MENU
40. 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
41. TWO HANDS
COULD BE A 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
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
Notas del editor
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.
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.
Bon, hiernaasttewerkgestelddus.Bijnascom. Wijzittenvlakbovenaan de cinema. Waarvroegerdat TV restaurant was. We zijnongeveer met 80 mensen en houdenonsbezig met alleswatinteractief is. Web, mobiel, touch, …
Nu,duswaargaan we het vandaag over hebben.
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?
Voorbeeldje van watikhiermeebedoel
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.
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.
Het is waswelnietaltijdwaar. Soms is het gewoonmakkelijkeromteschrijven.
fingerspitsengefül
Maarlaten we het bijschermenhouden. En vingers, enja, vingers op die schermen.
Als het aankomt op het kiezen van technologiezijn de keuzeseigelijkredelijkbeperkt.
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.
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.
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.
Net zoals in edit states moetgeookdenkenaaninteracties en menu items.
Or you can just call us to do all this for you.Thanks for your attention. :)