The document discusses strategies for designing mobile applications that work across diverse devices, including using device profiles, manufacturer standards, and repositories of device descriptions. It recommends a three-pronged approach: classifying devices in a hierarchy, using class-based design to target devices strategically, and employing user interface design patterns that are known to work well on certain devices. This approach aims to balance development costs and time with market coverage and user experience quality.
5. 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
7. 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
9. 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
13. Hierarchy
Sprint UI
Softkeys
Motorola Scroll &
Select
Smartphone
Blackberry Mobile
Moto Q Windows
Mobile
Stylus
Palm
14. Hierarchy
Sprint UI
Softkeys
Motorola Scroll &
Select
Smartphone Device Description
Blackberry (DDR)
Repository
Mobile
as starting point
Moto Q Windows
Mobile
Stylus
Palm
15. Strategy
Sprint UI
Softkeys
Motorola Scroll &
Select
Smartphone
Blackberry Mobile
Windows
Mobile
Stylus
Palm
16. Class Design +
Hierarchy
UX targeted at actual device
characteristics
Like “targeted” design, with greater
coverage
Can store class-based code issues with
node descriptions
17. 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
18. 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
19. 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
20. 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
21. 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
23. 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
24. • 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