Handling Device
     Diversity
class-based design for mobile applications

              Barbara Ballard
        Little Sp...
Who Cares?
     Mobile app & web pros:
 •   Design: user experience, features
 •   Development: effort, testing
 •   Marke...
Device Diversity
Sources                Solutions
 • Feature              • Profiles
     differences            (SonyErics...
Device Diversity
Sources                Solutions
 • Feature              • Profiles
     differences            (SonyErics...
Current Mobile Design
Methods
        Generic design
    •   standards-based to write once, run anywhere

        Targeted...
The Mobile
  Application
Design Trade-off
Class
             Generic    Target     Adaptive
                                            Design with
             Des...
How?
a change in development process
3-pronged approach
     Device Hierarchy
 •   Classified by features, UI mechanism, UI design, and
     idiosyncrasies

   ...
Sprint phones, April ‘07
Sprint phones, April ‘07
Sanyo Sprint UI


                             Blackberry
    LG Sprint UI                               Palm


Samsung Sp...
Hierarchy
          Sprint UI

                       Softkeys
          Motorola                 Scroll &
               ...
Hierarchy
          Sprint UI

                       Softkeys
          Motorola                   Scroll &
             ...
Strategy
 Sprint UI

              Softkeys
 Motorola                 Scroll &
                           Select
Smartphon...
Class Design +
Hierarchy
  UX targeted at actual device
  characteristics
  Like “targeted” design, with greater
  coverag...
UI Design Patterns
     Known good solutions to recurring
     design problems
     Make a corporate library (Yahoo!)
 •  ...
Mobile UI Patterns +
Hierarchy
     Logically design app flow
     Fill in patterns
 •   Design with generic version of pat...
Browser Documentation
Home > Resources >
                                                    Pattern:
Documentation > Brow...
Pattern:
                            Sprint UI
                                                    Breadcrumbs
           ...
Browser Documentation
  Home > Resources >
                                                        Pattern:
  Documentatio...
Mobile Patterns Wiki
http://patterns.littlespringsdesign.com
Improving Mobile UX
     Device Hierarchy
 •   Adapt code based on abstracted families, not individual
     devices

     ...
• Design Services
•   Training
•   Pattern library design
•   Hierarchy development
•   http://patterns.littlespringsdesig...
Upcoming SlideShare
Loading in...5
×

Class-based design for mobile development

3,638

Published on

How to handle device diversity in mobile UI design

Published in: Business, Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,638
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Transcript of "Class-based design for mobile development"

  1. 1. Handling Device Diversity class-based design for mobile applications Barbara Ballard Little Springs Design, Inc.
  2. 2. 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, ...
  3. 3. Device Diversity Sources Solutions • Feature • Profiles differences (SonyEricsson Java 9) • • Differing Manufacturer standards standards (Nokia) interpretations • Device description • User interface repositories differences (WURFL)
  4. 4. Device Diversity Sources Solutions • Feature • Profiles differences (SonyEricsson Java 9) • • Differing Manufacturer standards standards (Nokia) interpretations • Device description • User interface repositories differences (WURFL)
  5. 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
  6. 6. The Mobile Application Design Trade-off
  7. 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
  8. 8. How? a change in development process
  9. 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
  10. 10. Sprint phones, April ‘07
  11. 11. Sprint phones, April ‘07
  12. 12. Sanyo Sprint UI Blackberry LG Sprint UI Palm Samsung Sprint mods WM PPC Smartphone Moto Sprint mods Sprint phones, April ‘07
  13. 13. Hierarchy Sprint UI Softkeys Motorola Scroll & Select Smartphone Blackberry Mobile Moto Q Windows Mobile Stylus Palm
  14. 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. 15. Strategy Sprint UI Softkeys Motorola Scroll & Select Smartphone Blackberry Mobile Windows Mobile Stylus Palm
  16. 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. 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. 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. 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. 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. 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
  22. 22. Mobile Patterns Wiki http://patterns.littlespringsdesign.com
  23. 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. 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

×