Transcript
Page 1: Mobile Design Concepts

Mobile Design Concepts

Chariot Solutions Mobile Application Development Series

November 9th, 2010

Page 2: Mobile Design Concepts

Agenda

• Web vs Native

• ‘Mobile First’

• Guiding principles

Page 3: Mobile Design Concepts

Web vs. Native

Page 4: Mobile Design Concepts

Both

• Mobile optimized sites provide accessibility

• Flagship ‘native’ apps provide ‘warm fuzzies’*

Page 5: Mobile Design Concepts

But...

Page 6: Mobile Design Concepts

Native

• Device Hardware (GPS, user position, device orientation, multi-touch input)

• Games

Page 7: Mobile Design Concepts

Web

• Re-use of existing skills

• Re-use of existing infrastructure

Page 8: Mobile Design Concepts

‘Mobile First’

• @LukeW

• Focus

• Context aware

Page 9: Mobile Design Concepts

User context

Page 11: Mobile Design Concepts

3 Mobile Contexts*

• I am local

• I am bored

• I am micro-tasking

*Tapworthy - Josh Clark

Page 12: Mobile Design Concepts

Guiding Principles

Page 13: Mobile Design Concepts

User Experience

Page 14: Mobile Design Concepts
Page 15: Mobile Design Concepts

Cut

Page 16: Mobile Design Concepts

Cut again

Page 17: Mobile Design Concepts
Page 18: Mobile Design Concepts
Page 19: Mobile Design Concepts

SIMPLE

http://www.marco.org/1111087530

Page 20: Mobile Design Concepts

Cognitive Effort

Page 21: Mobile Design Concepts

An app to fly a plane!

Page 22: Mobile Design Concepts
Page 23: Mobile Design Concepts
Page 24: Mobile Design Concepts

Thumb zones

Page 25: Mobile Design Concepts
Page 26: Mobile Design Concepts
Page 27: Mobile Design Concepts
Page 28: Mobile Design Concepts

Progressive Disclosure

Page 29: Mobile Design Concepts
Page 30: Mobile Design Concepts
Page 31: Mobile Design Concepts
Page 32: Mobile Design Concepts
Page 33: Mobile Design Concepts
Page 34: Mobile Design Concepts

Disappear

Page 35: Mobile Design Concepts
Page 36: Mobile Design Concepts
Page 37: Mobile Design Concepts

Don’t make them wait“If you have synchronous code in your app you suck”

Mike Lee (@bmf)

Page 38: Mobile Design Concepts
Page 39: Mobile Design Concepts

Input

Page 40: Mobile Design Concepts
Page 41: Mobile Design Concepts
Page 42: Mobile Design Concepts
Page 43: Mobile Design Concepts
Page 44: Mobile Design Concepts
Page 45: Mobile Design Concepts
Page 46: Mobile Design Concepts
Page 47: Mobile Design Concepts

Things to Do

• Experience

• Be ruthless with features

• Effort

• Disappear

• Input

Page 48: Mobile Design Concepts

Questions?

Page 49: Mobile Design Concepts

Resources

• Tapworthy - Josh Clark

• Mobile Design and Development - Brian Fling

• @LukeW @globalmoxie @kgriffin @fling


Top Related