Your SlideShare is downloading. ×
Class-based design for mobile development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Class-based design for mobile development

3,612
views

Published on

How to handle device diversity in mobile UI design

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,612
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Handling Device Diversity class-based design for mobile applications Barbara Ballard Little Springs Design, Inc.
  • 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. Device Diversity Sources Solutions • Feature • Profiles differences (SonyEricsson Java 9) • • Differing Manufacturer standards standards (Nokia) interpretations • Device description • User interface repositories differences (WURFL)
  • 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. 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. The Mobile Application Design Trade-off
  • 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. How? a change in development process
  • 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. Sprint phones, April ‘07
  • 11. Sprint phones, April ‘07
  • 12. Sanyo Sprint UI Blackberry LG Sprint UI Palm Samsung Sprint mods WM PPC Smartphone Moto Sprint mods Sprint phones, April ‘07
  • 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
  • 22. Mobile Patterns Wiki http://patterns.littlespringsdesign.com
  • 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