Adapting UIs for Mobile Touch
Post on 10-Sep-2014
96 Views
Preview:
DESCRIPTION
Transcript
Adapting UIs for Mobile TouchAmbrose LittlePrinciple Design TechnologistInfragistics, Inc.
The Dream
http://fc06.deviantart.net/fs46/f/2009/220/9/6/The_One_Ring_by_todd587.jpg
The Reality
http://i2.cdn.turner.com/money/galleries/2009/fortune/0912/gallery.dumbest_moments_2009.fortune/images/farley_directv.jpg
Desktop apps just don’t fit mobile devices or contexts.
“Applying PC context assumptions to mobile experiences all too often results in a marginalized experience for users.” - Rachel Hinman, Sr. Research Scientist Nokia Research Center
http://uxmag.com/design/peanut-butter-in-denver
Important Mobile Design Considerations Reduce. Focus on core, essential needs. In and Out. Keep it brief and to the
point. Eye on the Ball. Remember things are
moving. Touchy Feely. It makes a difference! Here’s to Moore’s Law. Again.
Reduce.
In and Out. Think about “glanceability”;
avoid “greedy interfaces.” Keep navigation flat.
Check InFront and Center
Glanceability
Glanceability
Flat Nav
Eye on the Ball. Mobile contexts are everywhere. Mobile = Mobility. You know, moving. Switching from device to device.
Design for Interruptions!
Location is Waay Important!
Duh.
Touchy Feely. A crucial difference between desktop &
mobile. Most Common Event Mismatches
Mouse Down/Up (Touch Start/End or Tap) Hover (avoid it, but sometimes Press &
Hold) Key Down/Press/Up (good luck with that)
Keyboard is Inversely Productive
Fat Finger
9mm Square is Optimal Touch Target 7mm High is Okay for Infrequent Use (Go
15mm Wide if you can with this) 4.2mm = Minimum *Visual* Size Use invisible buffers for smaller visual
sizes; 60-100% visual to actual target size is okay.
Use spacing, especially if smaller touch targets—minimum of 2mm is good.
Target size should be proportional to consequences of missing.
Common Gestures
Tap Double Tap Press Drag & Flick Pinch & Spread
http://www.lukew.com/touch/
Moore’s Law CPU Memory/Storage Bandwidth Battery
Some Performance Suggestions Reduce Requests & Payload Size Minimize Objects (e.g. UI Objects) You
Create Load Objects & Content on Demand Dereference (in Managed) for GC Cache Locally When Possible Use Dark Themes (see WP7)
Sample Screen Sizes & DensitiesPhone Resolution PPI
iPhone 320x480 163ppi
Sample Android 480x854 265ppi
iPhone 4+ 640x960 329ppi
iPad 1024x768 132ppi
Sample Win Phone 480x800 233ppi
The Problem with Pixels
http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
Know thy target devices’ screen sizes and densities.
Orientation
Orientation
Device Capabilities Location Sensing (GPS, WiFi, Cellular) Positioning & Motion (Accelerometer, Gyro
- tilt scrolling, shaking) Orientation (Compass) Proximity Ambient Light Audio & Video (including voice, images,
scanning as input) Push Notifications
What Can I Adapt, Then?!? Core Activities and Related Assets
Business Logic/Domain Models Services
Basic Content Layout (Fluid/Responsive Layout) Controls – Some of Them, Even
Custom/Composite Controls (Modular UI Pieces)
But with all the caveats & considerations we’ve gone over!
To Begin WithIf you are going to adapt… First, form factor adaptation
Fluidity/Responsiveness. Reduce.
Second, think about touch Events – especially hover. Touch target.
Third, optimize—Bandwidth.
Responsive Web Design Using CSS Media Queries to Adapt
Layout (and Styling) Main Queries are CSS “Breakpoints”
Based on Widths, Also Pixel Density New Image Elements Enable True
Responsive Image Loading Do NOT Focus on Specific Devices—Find
Natural Breakpoints in Content Beware: RWD Introduces Complexities!
Interesting Case Studyon Adaptation
If you want to think about reuse, think in terms of context rather
than technology.
A Better WayThink less about mobile apps as adaptations of desktop UIs. Instead, think about designing a mobile experience that fits with your users’ needs, goals, and desires, seamlessly integrating into their lives.
Oh, and, forget about write once run everywhere. ;)
Mobile First
http://www.lukew.com/ff/entry.asp?933
Good Luck!
Ambrose LittlePrinciple Design Technologist
@ambroselittle linkedin.com/in/ambroselittle
top related