design concepts for mobile learnng

17
Design with virtually no budget and no tech skills!

Upload: chad-udell

Post on 18-Nov-2014

1.809 views

Category:

Technology


2 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Design concepts for Mobile Learnng

Designwith virtually no budget and no tech skills!

Page 2: Design concepts for Mobile Learnng

Design for Mobile

• There’s no rules

• How do I know where to start

• Lots of recommendations

Page 3: Design concepts for Mobile Learnng

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?

Page 4: Design concepts for Mobile Learnng

Build your library

• Online Interface guides

• Updated often

• Word is straight from the source

• Lots of examples

Page 5: Design concepts for Mobile Learnng

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

Page 6: Design concepts for Mobile Learnng

Build your library

• Great Books on the Topic

• Constantly coming out!

• Look for generalities, not OS or version specific titles

Page 7: Design concepts for Mobile Learnng

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

Page 8: Design concepts for Mobile Learnng

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

Page 9: Design concepts for Mobile Learnng

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.

Page 10: Design concepts for Mobile Learnng

5 Tabs!

• Any more leads to hidden options... Not good.

Page 11: Design concepts for Mobile Learnng

Let ‘em know where they are!

• Always give the title & back button good labels!

Page 12: Design concepts for Mobile Learnng

How big is your finger?

• Old rule - 44px... Best rule? About 1CM

Page 13: Design concepts for Mobile Learnng

Custom UI Controls?

• Your existing toolkit is big... Use it.

• Only after you have exhausted it, should look outside.

Page 14: Design concepts for Mobile Learnng

Learn, Grasshopper!

• When do you use a list? A grouped list?

• Only after you have exhausted your options, should you look outside.

Page 15: Design concepts for Mobile Learnng

Simplify!

• Less is best.

• When you have the bare minimum to achieve your goals... You are there.

X

Page 16: Design concepts for Mobile Learnng

Test

• Get it on the device immediately

• Save as a PNG, open it like a photo

Page 17: Design concepts for Mobile Learnng

15 Minutes