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