Handling Device
Diversity
class-based design for mobile applications
Barbara Ballard
Little Springs Design, Inc.

Who Cares?
Mobile app & web pros:
• Design: user experience, features
• Development: effort, testing
• Marketing: market coverage, brand, features
• Accounting: cost
Company, Carrier: revenue, usage
Web, BREW, Java ME, Flash Lite,
widgets, ...

Device Diversity
Sources Solutions
• Feature • Profiles
differences (SonyEricsson Java 9)
• •
Differing Manufacturer
standards standards (Nokia)
interpretations
• Device description
• User interface repositories
differences (WURFL)

Device Diversity
Sources Solutions
• Feature • Profiles
differences (SonyEricsson Java 9)
• •
Differing Manufacturer
standards standards (Nokia)
interpretations
• Device description
• User interface repositories
differences (WURFL)

Current Mobile Design
Methods
Generic design
• standards-based to write once, run anywhere
Targeted design
• design for RAZR and Nokia Series 60
Adaptive design
• detect device characteristics and alter program
behavior

The Mobile
Application
Design Trade-off

Class
Generic Target Adaptive
Design with
Design Devices Design
Patterns
Develop
Low High Medium Medium
Cost/Time
Testing
High High
Medium Medium
Costs
Market
Excellent Excellent
Limited Medium
Coverage
Potential
Excellent Excellent
Low Medium
UX Quality

How?
a change in development process

3-pronged approach
Device Hierarchy
• Classified by features, UI mechanism, UI design, and
idiosyncrasies
Class-Based Design
• Select target devices based on app and user needs
User Interface Design Patterns
• Designs & code known to work well

Sprint phones, April ‘07

Sprint phones, April ‘07

Sanyo Sprint UI
Blackberry
LG Sprint UI Palm
Samsung Sprint mods
WM
PPC
Smartphone
Moto Sprint mods Sprint phones, April ‘07

Hierarchy
Sprint UI
Softkeys
Motorola Scroll &
Select
Smartphone
Blackberry Mobile
Moto Q Windows
Mobile
Stylus
Palm

Hierarchy
Sprint UI
Softkeys
Motorola Scroll &
Select
Smartphone Device Description
Blackberry (DDR)
Repository
Mobile
as starting point
Moto Q Windows
Mobile
Stylus
Palm

Strategy
Sprint UI
Softkeys
Motorola Scroll &
Select
Smartphone
Blackberry Mobile
Windows
Mobile
Stylus
Palm

Class Design +
Hierarchy
UX targeted at actual device
characteristics
Like “targeted” design, with greater
coverage
Can store class-based code issues with
node descriptions

UI Design Patterns
Known good solutions to recurring
design problems
Make a corporate library (Yahoo!)
• Includes style and optionally code
Mobilize
• always have a generic pattern for specific design problem
• create patterns for “interesting” nodes

Mobile UI Patterns +
Hierarchy
Logically design app flow
Fill in patterns
• Design with generic version of pattern
• Override generic version when class version available
Design balance of app
• Generic or high-level as fallback
• Targeted where needed

Browser Documentation
Home > Resources >
Pattern:
Documentation > Browser
Sprint UI
Breadcrumbs
S60 Platform - Overview of
features and components of ...
Softkeys
XHTML Mobile Profile Example -
Motorola
Test your first XHTML MP page.
Scroll &
Select
Getting Started with XHTML MP -
Overview of browser markup.
Smartphone
Browser Characteristics in GSM -
Blackberry
Details about device rendering.
Mobile
Moto Q Windows
Mobile
Stylus
Palm

Pattern:
Sprint UI
Breadcrumbs
Softkeys
Motorola Scroll &
Select
Smartphone
Browser Docs
Browser Go
Blackberry
S60 Platform - Overview
Mobile
of features and
components of ...
XHTML Mobile Profile
Example - Test your first
XHTMLMoto Q Windows
MP page.
Mobile
Getting Started with
Stylus
XHTML MP - Overview
of browser markup.
Palm
Browser Characteristics
in GSM - Details about

Browser Documentation
Home > Resources >
Pattern:
Documentation > Browser
Sprint UI
Breadcrumbs
S60 Platform - Overview of
features and components of ...
Softkeys
XHTML Mobile Profile Example -
Motorola
Test your first XHTML MP page.
Scroll &
Select
Getting Started with XHTML MP -
Browser Docs browser markup.
Overview of Smartphone
Browser Go
Browser Characteristics in GSM -
Blackberry
S60 Platform - Overview rendering.
Details about device
Mobile
of features and
components of ...
XHTML Mobile Profile
Example - Test your first
XHTMLMoto Q Windows
MP page.
Mobile
Getting Started with
Stylus
XHTML MP - Overview
of browser markup.
Palm
Browser Characteristics
in GSM - Details about

Mobile Patterns Wiki
http://patterns.littlespringsdesign.com

Improving Mobile UX
Device Hierarchy
• Adapt code based on abstracted families, not individual
devices
Class-Based Design
• Target devices strategically, based on user needs
User Interface Design Patterns
• Reuse code & designs to reduce development & test time

• Design Services
• Training
• Pattern library design
• Hierarchy development
• http://patterns.littlespringsdesign.com
• http://www.littlespringsdesign.com
• barbara@littlespringsdesign.com
• 1-785-838-3003
Barbara Ballard