mobile design concepts
DESCRIPTION
A breakfast seminar presentation about thing to think about when designing for mobile. Heavily influenced by Josh Clarks - Tapworthy.TRANSCRIPT
![Page 1: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/1.jpg)
Mobile Design Concepts
Chariot Solutions Mobile Application Development Series
November 9th, 2010
![Page 2: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/2.jpg)
Agenda
• Web vs Native
• ‘Mobile First’
• Guiding principles
![Page 3: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/3.jpg)
Web vs. Native
![Page 4: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/4.jpg)
Both
• Mobile optimized sites provide accessibility
• Flagship ‘native’ apps provide ‘warm fuzzies’*
![Page 5: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/5.jpg)
But...
![Page 6: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/6.jpg)
Native
• Device Hardware (GPS, user position, device orientation, multi-touch input)
• Games
![Page 7: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/7.jpg)
Web
• Re-use of existing skills
• Re-use of existing infrastructure
![Page 8: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/8.jpg)
‘Mobile First’
• @LukeW
• Focus
• Context aware
![Page 9: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/9.jpg)
User context
![Page 10: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/10.jpg)
vs
http://www.flickr.com/photos/yourdon/3563994877/
![Page 11: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/11.jpg)
3 Mobile Contexts*
• I am local
• I am bored
• I am micro-tasking
*Tapworthy - Josh Clark
![Page 12: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/12.jpg)
Guiding Principles
![Page 13: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/13.jpg)
User Experience
![Page 14: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/14.jpg)
![Page 15: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/15.jpg)
Cut
![Page 16: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/16.jpg)
Cut again
![Page 17: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/17.jpg)
![Page 18: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/18.jpg)
![Page 19: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/19.jpg)
SIMPLE
http://www.marco.org/1111087530
![Page 20: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/20.jpg)
Cognitive Effort
![Page 21: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/21.jpg)
An app to fly a plane!
![Page 22: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/22.jpg)
![Page 23: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/23.jpg)
![Page 24: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/24.jpg)
Thumb zones
![Page 25: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/25.jpg)
![Page 26: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/26.jpg)
![Page 27: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/27.jpg)
![Page 28: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/28.jpg)
Progressive Disclosure
![Page 29: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/29.jpg)
![Page 30: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/30.jpg)
![Page 31: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/31.jpg)
![Page 32: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/32.jpg)
![Page 33: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/33.jpg)
![Page 34: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/34.jpg)
Disappear
![Page 35: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/35.jpg)
![Page 36: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/36.jpg)
![Page 37: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/37.jpg)
Don’t make them wait“If you have synchronous code in your app you suck”
Mike Lee (@bmf)
![Page 38: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/38.jpg)
![Page 39: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/39.jpg)
Input
![Page 40: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/40.jpg)
![Page 41: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/41.jpg)
![Page 42: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/42.jpg)
![Page 43: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/43.jpg)
![Page 44: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/44.jpg)
![Page 45: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/45.jpg)
![Page 46: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/46.jpg)
![Page 47: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/47.jpg)
Things to Do
• Experience
• Be ruthless with features
• Effort
• Disappear
• Input
![Page 48: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/48.jpg)
Questions?
![Page 49: Mobile Design Concepts](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b3460a4a79595b638b4575/html5/thumbnails/49.jpg)
Resources
• Tapworthy - Josh Clark
• Mobile Design and Development - Brian Fling
• @LukeW @globalmoxie @kgriffin @fling