Design concepts for Mobile Learnng

1,863 views

Published on

A basic overview of design tenets for use in creating mobile learning web sites and apps.

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

  • Be the first to like this

No Downloads
Views
Total views
1,863
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Design concepts for Mobile Learnng

  1. 1. Designwith virtually no budget and no tech skills!
  2. 2. Design for Mobile • There’s no rules • How do I know where to start • Lots of recommendations
  3. 3. No rules for mobile design? • There are only considerations and constraints - Josh Campbell, Magic + Might http://floatlearning.com/2011/06/josh-campbell-multiscreen-design-strategies/ • The landscape is fragmented. • Analyze your market - design for the biggest chunk • Is the next biggest chunk worth a customized design?
  4. 4. Build your library • Online Interface guides • Updated often • Word is straight from the source • Lots of examples
  5. 5. How to get the Online Guides... • Apple iOS HIG - http://developer.apple.com/library/ios/#documentation/ UserExperience/Conceptual/MobileHIG/Introduction/ Introduction.html • Android Guidelines - http://developer.android.com/design/index.html • Blackberry - http://docs.blackberry.com/en/developers/subcategories/? userType=21&category=BlackBerry+UI+Guidelines
  6. 6. Build your library • Great Books on the Topic • Constantly coming out! • Look for generalities, not OS or version specific titles
  7. 7. Some Key Thoughts • Real world objects are the metaphor du jour • Don’t stray too far unless you’re a star • More than 5 tabs? You’re doing it wrong • Let people know where they are! • Design for the finger. 1CM or thereabouts • Custom UI controls should be used sparingly • Learn, Internalize and Synthesize Design Patterns • Simplify, Simplify, Simplify
  8. 8. Real World Objects• A little Skeuomorphism goes a long way http://madebymany.com/blog/apples-aesthetic-dichotomy• Both Google and Apple recommend it in their own styles http://developer.apple.com/library/ios/#documentation/ UserExperience/Conceptual/MobileHIG/Principles/Principles.html#// apple_ref/doc/uid/TP40006556-CH5-SW2 http://developer.android.com/design/get-started/principles.html
  9. 9. Don’t stray too far• Usability trumps all else (except beautiful usability) http://www.useit.com/alertbox/20030825.html http://www.markboulton.co.uk/journal/comments/aesthetic- usability-effect&#13• The HIG pretty much lays it out for usability, Hoober’s book also give great tips on this.
  10. 10. 5 Tabs!• Any more leads to hidden options... Not good.
  11. 11. Let ‘em know where they are!• Always give the title & back button good labels!
  12. 12. How big is your finger?• Old rule - 44px... Best rule? About 1CM
  13. 13. Custom UI Controls?• Your existing toolkit is big... Use it.• Only after you have exhausted it, should look outside.
  14. 14. Learn, Grasshopper!• When do you use a list? A grouped list?• Only after you have exhausted your options, should you look outside.
  15. 15. Simplify!• Less is best.• When you have the bare minimum to achieve your goals... You are there.X
  16. 16. Test• Get it on the device immediately• Save as a PNG, open it like a photo
  17. 17. 15 Minutes

×