Usability in Mobile Applications BRUNO FIGUEIREDO the_ml

Europe: 90.9% have a mobile 41% worldwide (2,67 billion) ██ 120% > ██ 100-120% ██ 80-100% ██ < 80% wikipedia

Adapted from Bill Moggridge & Jan Borchers Market Evolution Sweet Spot

PDAs Keyboard, Touchscreen Mobile Phone Types dotMobi Feature Phones Phone, SMS, Internet Smart Phones Applications

Mobile Web Sites moritz™

Screen Resolution and Formats dotMobi

Mobile Development Languages Wikipedia

Regular Web, Mobile version

Auntie P

Mobile Web

Main Mobile Browsers Pocket Internet Explorer Opera Mobile Safari Mobile

Hub and Spoke Home

Simple Hierarchy

Clickstream Brian Fling

Home Heading Navigation Footer Section 2 Highlights Section 1 Highlights Section 1 Heading Navigation Footer Content Section 2 Heading Navigation Footer Content Aux. Section Heading Navigation Footer Content Recomended Structure

Optimized Degradation Normal Without CSS

Horizontal Lines and Breadcrumbs Optimized for vertical navigation Breadcrumbs: only useful for more than 3 levels deep

Forms

Shortcut Keys

The Magic Number (+ or – 2) George Miller

Good Practices Easy to type addresses m.site.com or site.mobi instead of www.site.com/mobile Specialized mobile versions Simple, shallow navigation structures Useful and simplified content on every page not just navigation Optimize for degradation 1 2 3 4 5

Easy to type addresses m.site.com or site.mobi instead of www.site.com/mobile

Specialized mobile versions

Simple, shallow navigation structures

Useful and simplified content on every page not just navigation

Optimize for degradation

Good Practices Layout links vertically Avoid repetitive data entry passwords are hard to type Simplify forms (with clear buttons) Provide shortcuts Minimize the (yet short) bandwidth use 6 7 8 9 10

Layout links vertically

Avoid repetitive data entry passwords are hard to type

Simplify forms (with clear buttons)

Provide shortcuts

Minimize the (yet short) bandwidth use

Mobile Applications Tim Caynes

Main Mobile Platforms Symbian 65% Windows Mobile 12% BlackBerry 11% iPhone 7%

liewcf Numeric Keyboard and Joystick

StarrGazr Half Keyboard and Ball

KhE 龙 Cursor Keys

Crouching Donkey Touchscreen (Multi-touch)

Full Keyboard and Touchscreen

Card Stack Screens with subtle animations

Two Panels List + Detail

Fisheye Lens

Distortion Lens

Predictive Text

Availability Restrictions

Progressive Filtering

Rapid Serial Visual Presentation 50 miliseconds Robert Spencer

Good Practices Optimize interaction for the target device stylus based, small targets; finger based, big targets 3D look and feel for touchscreen interfaces Minimize data entry Optimize content presentation emphasize what’s being seen/manipulated Provide shortcuts for experienced users 1 3 4 5 2

Optimize interaction for the target device stylus based, small targets; finger based, big targets 3D look and feel for touchscreen interfaces

Minimize data entry

Optimize content presentation emphasize what’s being seen/manipulated

Provide shortcuts for experienced users

[email_address] Thank you gailjadehamilton