Touch UIs are Quite Different
Post on 28-Jan-2015
110 Views
Preview:
DESCRIPTION
Transcript
TOUCH UIS AREQUITE DIFFERENTPANU KORHONEN26.10.2010
Panu Korhonen
1986 - 1993 SW engineering1993 - 2007 Nokia: HCI Research & Design2008 - 2009 Nokia: Maemo/MeeGo UI lead2009 - Nordkapp
ABOUT ME
Hired 50+ UX specialistsNokia S30 & S40 evolutionOriginal Nokia S60 UI conceptFirst MeeGo UI ConceptKey touch UI patents
ABOUT ME
WE ARE NORDKAPP
We design new business,products and services.
NORDKAPP
INTRODUCTION
Urban screenTabletMobile
Principles of the converging touch UIs.NOT: specific SW platforms or OSs.
FOCUS TODAY
10
Windows 7 MeeGo?Apple Android Symbian RIM
MOBILE DEVICES
11
Android MeeGo?Apple Windows 7
TABLETS
12
URBAN SCREENS
BASICS
Tap Swipe
Spread Pinch Rotate
Long press
TOUCH GESTURES- de facto standards
BASICS
See also: http://www.lukew.com/ff/entry.asp?1071
Tap
Swipe
Longpress
Spread
Pinch
Rotate
Other
Open, select
Scroll, pan, move object
Invoke object menu, change mode
Zoom in, enlarge object
Zoom out, shrink object
Rotate object
Other gestures have not become standard yet
TYPICAL ACTIONS
No hover states in UIs. No tooltips.Design for touch first, then add hovers for the web.
NO POINTER
Tap always opens the item. You can’t put focus on an object.
NO FOCUS
Tap will open the item No selections or multi-select
Solutions: use check-boxes or a selection mode; object menu for several functions.
NO FOCUS
Tap on check-box to select Long press for object menu
✓
✓
Add to favorites
Send a link
Drag to pan, pinch to zoom etc.
Avoid indirect controls
DIRECT MANIPULATION
Scrub to delete photo?
+ Direct access to features- Recognition errors - Recalling - Recognition delay - Conflict with swipe ...
GESTURES
PHYSICAL
Urban screenTabletMobile
http://www.lukew.com/ff/entry.asp?1085 Colle H, Hiszem K. “Standing at a kiosk: effects of key size and spacing on touch screen numeric keypad performance and user preference.”
No recommendations available yet
7 mm
7 mm
20 mm
20 mm
7 mm ?
7 mm ?
MINIMUM TOUCH TARGET SIZES
PARALLAX
Angry Birds: aiming by adjusting finger
TAPPING TARGET
Tapping is not accurate.Adjusting is.
Mobile (right hand) Mobile (two hands)Mobile (left hand)
FINGER REACH
Tablet (two hands)Tablet (one hand)
FINGER REACH
Urban screen
See also: http://www.tiresias.org/research/guidelines/touch.htm
FINGER REACH
Avoid visual feedback below the controls
Sending failed!
Send Send
OBSTRUCTING HAND
FINGERS AND HAND
On large screens, allow scrolling with palm or several fingers
MOVEMENT
Use short drags, or use flick.Long dragging will cause accidental drops.
Urban screenTabletMobile
Vibra motorPietzo(Electrotactile)
(none yet)(none yet)
FEEDBACK
Lack of haptic feedback: compensate with visual and audio.
Urban screenTabletMobile
ENVIRONMENTAL CHALLENGES
MoistureGlovesVibrationSun, glare
(typically used inside) MoistureGlovesSun, glare
Urban screenTabletMobile
ENTERING TEXT
Too small Decent Too large
http://www.wul!morgenthaler.com/strip.aspx?id=86c5551c-48dc-4e20-a71e-a8f5d9e8badb
COGNITIVE
COGNITIVE
Indicate every touch—Compensate for environment and non-optimal touch technology.
Label
A tappable button A draggable slider
AFFORDANCES
Tell people where to touch, and how. No hover.
Move, resize, zoom, inertia, bounce, ...
LAWS OF PHYSICS
+ works as expected- hidden functionality
Options next to the finger
Public Library
BE DIRECT
Functions where the finger is.
!
Info that may get missed
LEAD THE EYE
Especially on large screens.
How do you close a pop-up in Android?
See also: http://en.wikipedia.org/wiki/Inattentional_blindness
COGNITIVE
Inattentional Blindness
Explicit button for closing a pop-up.How to close Nokia N900 menus and dialogs?
MAKE IT EXPLICIT
Avoid any key -problem
DIRECTIONS
Design for spatial awareness- scrolling is cheap- use less windows and Z-order
Long vertical pages for similar content
See also: http://www.informationarchitects.jp/en/ipad-scroll-or-card/
Horizontal for paged content
How do you find X?
X
DESIGN SPATIAL
Problems with continuous 2D navigation
SOCIAL
PRIVATE SOCIAL
Urban screen
PC
TVTablet
Laptop
Mobile
HOW SOCIAL?
PRIVATE SOCIAL
Urban screenPC TVTabletLaptopMobile
HOW SOCIAL?
My (subjective) order
HOW SOCIAL?
Most private of devices
PRIVATE SOCIAL
Mobile
PRIVATE SOCIAL
Tablet
HOW SOCIAL?
Shared use
MULTITOUCH
PRIVATE SOCIAL
Urban screen
HOW SOCIAL?
Multi-user, multi-touch; spectators
SUMMARY
When designing for touch
—Forget the old—Aim for direct manipulation—Use de-facto conventions—Be careful with non-standard touch solutions—Consider physical, cognitive, and social aspects
SUMMARY
CC licence moleitau, magicalnihilism.com
Touch target sizes:http://www.lukew.com/ff/entry.asp?1085
iPad design tips:http://www.lukew.com/ff/entry.asp?1196
iPad design resources:http://www.ipadatelier.com/design-for-ipad.html
The Best 10 articles on Multi-Touch:http://www.pointanddo.com/2009/09/10-best-articles-on-multitouch.html
How not to do gestures in your iPhone app:http://www.touchusability.com/blog/2010/9/12/how-not-to-do-gestures-in-your-iphone-app.html
Free Wireframing Kits, UI Design Kits, PDFs and Resources:http://www.smashingmagazine.com/2010/08/27/free-wireframing-kits-ui-design-kits-pdfs-and-resources/
Non Hover:http://trentwalton.com/2010/07/05/non-hover/
Finger Positions for Touch Screens:http://www.kickerstudio.com/blog/2010/08/finger-positions-for-touchscreens/
Japanese vending machine with 47” touch screen:http://www.engadget.com/2010/08/11/japan-takes-vending-machines-to-their-logical-47-inch-extreme/
Touch screens in ATMs:http://futureselfservicebanking.com/
Gestures:http://ignorethecode.net/blog/2010/05/25/gestures/
Scroll of Flick?http://www.informationarchitects.jp/en/ipad-scroll-or-card/
UI guidelines:http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design
Touch User Interface - Touch Screen and Multi-touch:http://www.touchuserinterface.com/2009/06/links-for-overview-of-touch-user.html
Urban screens in Helsinki:http://blog.nordkapp.fi/2010/03/urban-screens-presentation/
Tap the TV: Online TV concept for multi-touch tabletshttp://blog.nordkapp.fi/2010/06/tap-the-tv/
FUTHER READING
top related