Post on 28-Jan-2015
description
Designing Learning formobile devices
Nick FloroNick@sealworks.comTwitter.com/NickFloro
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 1 of 111
Understanding the Technology
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 2 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 3 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 4 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 5 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 6 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 7 of 111
desktop
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 8 of 111
desktop
phone
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 9 of 111
desktop
tabletphone
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 10 of 111
desktop
tablet
phone
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 11 of 111
7 Questions to Define a Project
What is the goal?
What are the learning objectives?
Who is the audience and how will they use it?
What is the timetable?
Current technology or solution in place?
What is the budget?
Does the content exist?
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 12 of 111
AppApplication
Game / SimulationTool
Hybrid
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 13 of 111
AppApplication
Game / SimulationTool
Hybrid
WebInfoTool
Resources
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 14 of 111
AppApplication
Game / SimulationTool
Hybrid
WebInfoTool
Resources
Web App | Course
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 15 of 111
• form factor
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 16 of 111
• network latency
• form factor
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 17 of 111
• network latency
• input mechanism
• form factor
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 18 of 111
• network latency
• input mechanism
• memory
• form factor
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 19 of 111
• network latency
• input mechanism
• memory
• form factor
• computational power
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 20 of 111
• network latency
• input mechanism
• memory
• form factor
• computational power
• battery
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 21 of 111
• network latency
• input mechanism
• memory
• form factor
• computational power
• context
• battery
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 22 of 111
Amazon
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 23 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 24 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 25 of 111
The mobile environment
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 26 of 111
The mobile environmentsingle early failure = non-returning user
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 27 of 111
The mobile environmentcrucial first 30-60 seconds usage
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 28 of 111
The mobile environmentFewer options
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 29 of 111
Graphics Location Storage Speed
Solving Developer Challenges
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 30 of 111
Sample Simulation with HTML 5
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 31 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 32 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 33 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 34 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 35 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 36 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 37 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 38 of 111
Selecting a SizePixels & Aspect Ratio
iPhone 4960 x 640
iPhone480 x 320
iPhone 51136 x 640
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 39 of 111
Android Xoom1280 x 720
Selecting a SizePixels & Aspect Ratio
iPad 3rd gen +2048 x 1536
iPad1024 x 768
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 40 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 41 of 111
Android Xoom1280 x 720Galaxy SIII
1280 x 720
Selecting a SizePixels & Aspect Ratio
Droid960 x 540
Kindle Fire 71024 x 600
Galaxy Note 21280 x 720
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 42 of 111
Android Xoom1280 x 720
HTC Incredible800 x 480
Selecting a SizePixels & Aspect Ratio
iPad1024 x 768
iPhone 4960 x 640
iPhone480 x 320
Galaxy1280 x 720
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 43 of 111
Web App
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 44 of 111
AppWeb
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 45 of 111
HTML 5CSS3
AJAXJAVASCRIPT
JQuery
APIs
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 46 of 111
Web (app) App
• Use web standards
• Easy to deploy & update
• Support all devices
• Faster development cycle
• Works everywhere
• Requires web connection
• Faster performance
• Unique platform features
• Requires programming
• Deploy via Store models
• iOS / Android / Amazon
Which is right for your project?
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 47 of 111
Examples
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 48 of 111
reflectorapp.com
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 49 of 111
Clients
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 50 of 111
ClientsTimeframes
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 51 of 111
ClientsTimeframes
Development
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 52 of 111
ClientsTimeframes
DevelopmentCommunication
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 53 of 111
How should we
Design?
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 54 of 111
Understand Design
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 55 of 111
It’s about communication and problem solving.
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 56 of 111
Design is how it works.
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 57 of 111
desktop
tablet
phone
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 58 of 111
mobile first
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 59 of 111
Focus on the
Audience1
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 60 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 61 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 62 of 111
is the keyContent
2
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 63 of 111
Transparent
Interface3
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 64 of 111
Today’s Apps
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 65 of 111
Flat Pages
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 66 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 67 of 111
Tab Bar
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 68 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 69 of 111
Tree Structure
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 70 of 111
Tree Structure
< Back
Screen One >
Screen Two >
Screen Three >
Screen Four >
Screen Five >
Screen Six >
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 71 of 111
Innovation
>
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 72 of 111
weathercube
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 73 of 111
Prototyping
Prototyping
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 74 of 111
Tools:
• Sketches
Quick Prototyping Techniques
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 75 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 76 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 77 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 78 of 111
Tools:
• Wireframes– Powerpoint / Keynote
Quick Prototyping Techniques
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 79 of 111
Custom Template in Keynote
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 80 of 111
keynotekungfu.com
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 81 of 111
balsamiq.com
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 82 of 111
Sketchy & iMockUps
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 83 of 111
teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 84 of 111
When was the last time you sketched a interface, a idea to help illustrate your idea?If in the last week, get yourself a cookie. If not, you have until Friday to sketch something.
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 85 of 111
ExerciseDesigning for Mobile LSCON13
nick@sealworks.com 03/15/13 86 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 87 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 88 of 111
Design for Flexibility
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 89 of 111
Testing
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 90 of 111
Test on Windows 8, 7, Vista, XP• Internet Explorer 6, 7, 8, 9
• Firefox 4.0, 10-13 +
• Chrome 15 - 19 +
Test on OS X− Safari 4, 5+
− Firefox 4.0, 10-13 +
− Chrome 15 - 19 +
Test on Mobile− iOS 4.x - 6.x
− Android 2.x - 4.x
− Windows 8
− Tablet vs Phone
− Portrait vs Landscape
Testing Code
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 91 of 111
Test for Usability
• Have someone with fresh
eyes test drive your site to
make sure it accomplishes
both user goals and site
goals
• Survey
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 92 of 111
ResourcesTo help you grow.
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 93 of 111
www.launchcycle.com
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 94 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 95 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 96 of 111
Capture & Analyze
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 97 of 111
Using CoverFlow view and Preview of Graphics
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 98 of 111
kuler.adobe.com
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 99 of 111
abookapart.com
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 100 of 111
www.smashingmagazine.com
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 101 of 111
www.balsamiq.com
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 102 of 111
www.silverback.com
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 103 of 111
Screencasts 101 Mini-Session
www.jingproject.com
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 104 of 111
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 105 of 111
solidify.com
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 106 of 111
ideapaint.com
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 107 of 111
www.twitter.com
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 108 of 111
www.lrnchat.com
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 109 of 111
Download the Presentation at:http://www.slideshare.net/nickfloro
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 110 of 111
Thank You
Nick Floronick@sealworks.comtwitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
Designing for Mobile LSCON13
nick@sealworks.com 03/15/13 111 of 111