Adapting UIs for Mobile Touch
-
Upload
ambrose-little -
Category
Software
-
view
98 -
download
2
description
Transcript of Adapting UIs for Mobile Touch
![Page 1: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/1.jpg)
Adapting UIs for Mobile TouchAmbrose LittlePrinciple Design TechnologistInfragistics, Inc.
![Page 2: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/2.jpg)
The Dream
http://fc06.deviantart.net/fs46/f/2009/220/9/6/The_One_Ring_by_todd587.jpg
![Page 3: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/3.jpg)
The Reality
http://i2.cdn.turner.com/money/galleries/2009/fortune/0912/gallery.dumbest_moments_2009.fortune/images/farley_directv.jpg
![Page 4: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/4.jpg)
Desktop apps just don’t fit mobile devices or contexts.
![Page 5: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/5.jpg)
“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
![Page 6: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/6.jpg)
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.
![Page 7: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/7.jpg)
Reduce.
![Page 8: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/8.jpg)
In and Out. Think about “glanceability”;
avoid “greedy interfaces.” Keep navigation flat.
![Page 9: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/9.jpg)
Check InFront and Center
![Page 10: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/10.jpg)
Glanceability
![Page 11: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/11.jpg)
Glanceability
![Page 12: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/12.jpg)
Flat Nav
![Page 13: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/13.jpg)
Eye on the Ball. Mobile contexts are everywhere. Mobile = Mobility. You know, moving. Switching from device to device.
![Page 14: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/14.jpg)
Design for Interruptions!
![Page 15: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/15.jpg)
Location is Waay Important!
Duh.
![Page 16: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/16.jpg)
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
![Page 17: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/17.jpg)
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.
![Page 18: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/18.jpg)
Common Gestures
Tap Double Tap Press Drag & Flick Pinch & Spread
http://www.lukew.com/touch/
![Page 19: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/19.jpg)
Moore’s Law CPU Memory/Storage Bandwidth Battery
![Page 20: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/20.jpg)
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)
![Page 21: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/21.jpg)
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
![Page 22: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/22.jpg)
The Problem with Pixels
http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
Know thy target devices’ screen sizes and densities.
![Page 23: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/23.jpg)
Orientation
![Page 24: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/24.jpg)
Orientation
![Page 25: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/25.jpg)
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
![Page 26: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/26.jpg)
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!
![Page 27: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/27.jpg)
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.
![Page 28: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/28.jpg)
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!
![Page 29: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/29.jpg)
Interesting Case Studyon Adaptation
![Page 30: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/30.jpg)
If you want to think about reuse, think in terms of context rather
than technology.
![Page 31: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/31.jpg)
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. ;)
![Page 32: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/32.jpg)
Mobile First
http://www.lukew.com/ff/entry.asp?933
![Page 33: Adapting UIs for Mobile Touch](https://reader035.fdocuments.in/reader035/viewer/2022081412/54103cc18d7f72aa0e8b4641/html5/thumbnails/33.jpg)
Good Luck!
Ambrose LittlePrinciple Design Technologist
@ambroselittle linkedin.com/in/ambroselittle