Designing Mobile Learning #LSCON13

111
Designing Learning for mobile devices Nick Floro [email protected] Twitter.com/NickFloro Designing for Mobile LSCON13 [email protected] 03/15/13 1 of 111

description

This session will provide you with the foundation you need to get started in mobile development. You'll learn best practices for designing for mobile and what challenges you may face in platforms, smartphones vs tablets vs next generation touch devices . We'll discuss and provide techniques for designing mobile apps that work, from sketching to wire framing to developing the final designs. What tools can I use to help visualize concepts and how to prototype quickly without breaking the bank. Learn about development tools and how using HTML5 and CSS3 can provide a solution for creating web based applications for mobile to desktops and optimizing for each platform. 

Transcript of Designing Mobile Learning #LSCON13

Page 1: Designing Mobile Learning #LSCON13

Designing Learning formobile devices

Nick [email protected]/NickFloro

Designing for Mobile LSCON13

[email protected] 03/15/13 1 of 111

Page 2: Designing Mobile Learning #LSCON13

Understanding the Technology

Designing for Mobile LSCON13

[email protected] 03/15/13 2 of 111

Page 3: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 3 of 111

Page 4: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 4 of 111

Page 5: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 5 of 111

Page 6: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 6 of 111

Page 7: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 7 of 111

Page 8: Designing Mobile Learning #LSCON13

desktop

Designing for Mobile LSCON13

[email protected] 03/15/13 8 of 111

Page 9: Designing Mobile Learning #LSCON13

desktop

phone

Designing for Mobile LSCON13

[email protected] 03/15/13 9 of 111

Page 10: Designing Mobile Learning #LSCON13

desktop

tabletphone

Designing for Mobile LSCON13

[email protected] 03/15/13 10 of 111

Page 11: Designing Mobile Learning #LSCON13

desktop

tablet

phone

Designing for Mobile LSCON13

[email protected] 03/15/13 11 of 111

Page 12: Designing Mobile Learning #LSCON13

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

[email protected] 03/15/13 12 of 111

Page 13: Designing Mobile Learning #LSCON13

AppApplication

Game / SimulationTool

Hybrid

Designing for Mobile LSCON13

[email protected] 03/15/13 13 of 111

Page 14: Designing Mobile Learning #LSCON13

AppApplication

Game / SimulationTool

Hybrid

WebInfoTool

Resources

Designing for Mobile LSCON13

[email protected] 03/15/13 14 of 111

Page 15: Designing Mobile Learning #LSCON13

AppApplication

Game / SimulationTool

Hybrid

WebInfoTool

Resources

Web App | Course

Designing for Mobile LSCON13

[email protected] 03/15/13 15 of 111

Page 16: Designing Mobile Learning #LSCON13

• form factor

Designing for Mobile LSCON13

[email protected] 03/15/13 16 of 111

Page 17: Designing Mobile Learning #LSCON13

• network latency

• form factor

Designing for Mobile LSCON13

[email protected] 03/15/13 17 of 111

Page 18: Designing Mobile Learning #LSCON13

• network latency

• input mechanism

• form factor

Designing for Mobile LSCON13

[email protected] 03/15/13 18 of 111

Page 19: Designing Mobile Learning #LSCON13

• network latency

• input mechanism

• memory

• form factor

Designing for Mobile LSCON13

[email protected] 03/15/13 19 of 111

Page 20: Designing Mobile Learning #LSCON13

• network latency

• input mechanism

• memory

• form factor

• computational power

Designing for Mobile LSCON13

[email protected] 03/15/13 20 of 111

Page 21: Designing Mobile Learning #LSCON13

• network latency

• input mechanism

• memory

• form factor

• computational power

• battery

Designing for Mobile LSCON13

[email protected] 03/15/13 21 of 111

Page 22: Designing Mobile Learning #LSCON13

• network latency

• input mechanism

• memory

• form factor

• computational power

• context

• battery

Designing for Mobile LSCON13

[email protected] 03/15/13 22 of 111

Page 23: Designing Mobile Learning #LSCON13

Amazon

Designing for Mobile LSCON13

[email protected] 03/15/13 23 of 111

Page 24: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 24 of 111

Page 25: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 25 of 111

Page 26: Designing Mobile Learning #LSCON13

The mobile environment

Designing for Mobile LSCON13

[email protected] 03/15/13 26 of 111

Page 27: Designing Mobile Learning #LSCON13

The mobile environmentsingle early failure = non-returning user

Designing for Mobile LSCON13

[email protected] 03/15/13 27 of 111

Page 28: Designing Mobile Learning #LSCON13

The mobile environmentcrucial first 30-60 seconds usage

Designing for Mobile LSCON13

[email protected] 03/15/13 28 of 111

Page 29: Designing Mobile Learning #LSCON13

The mobile environmentFewer options

Designing for Mobile LSCON13

[email protected] 03/15/13 29 of 111

Page 30: Designing Mobile Learning #LSCON13

Graphics Location Storage Speed

Solving Developer Challenges

Designing for Mobile LSCON13

[email protected] 03/15/13 30 of 111

Page 31: Designing Mobile Learning #LSCON13

Sample Simulation with HTML 5

Designing for Mobile LSCON13

[email protected] 03/15/13 31 of 111

Page 32: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 32 of 111

Page 33: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 33 of 111

Page 34: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 34 of 111

Page 35: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 35 of 111

Page 36: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 36 of 111

Page 37: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 37 of 111

Page 38: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 38 of 111

Page 39: Designing Mobile Learning #LSCON13

Selecting a SizePixels & Aspect Ratio

iPhone 4960 x 640

iPhone480 x 320

iPhone 51136 x 640

Designing for Mobile LSCON13

[email protected] 03/15/13 39 of 111

Page 40: Designing Mobile Learning #LSCON13

Android Xoom1280 x 720

Selecting a SizePixels & Aspect Ratio

iPad 3rd gen +2048 x 1536

iPad1024 x 768

Designing for Mobile LSCON13

[email protected] 03/15/13 40 of 111

Page 41: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 41 of 111

Page 42: Designing Mobile Learning #LSCON13

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

[email protected] 03/15/13 42 of 111

Page 43: Designing Mobile Learning #LSCON13

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

[email protected] 03/15/13 43 of 111

Page 44: Designing Mobile Learning #LSCON13

Web App

Designing for Mobile LSCON13

[email protected] 03/15/13 44 of 111

Page 45: Designing Mobile Learning #LSCON13

AppWeb

Designing for Mobile LSCON13

[email protected] 03/15/13 45 of 111

Page 46: Designing Mobile Learning #LSCON13

HTML 5CSS3

AJAXJAVASCRIPT

JQuery

APIs

Designing for Mobile LSCON13

[email protected] 03/15/13 46 of 111

Page 47: Designing Mobile Learning #LSCON13

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

[email protected] 03/15/13 47 of 111

Page 48: Designing Mobile Learning #LSCON13

Examples

Designing for Mobile LSCON13

[email protected] 03/15/13 48 of 111

Page 49: Designing Mobile Learning #LSCON13

reflectorapp.com

Designing for Mobile LSCON13

[email protected] 03/15/13 49 of 111

Page 50: Designing Mobile Learning #LSCON13

Clients

Designing for Mobile LSCON13

[email protected] 03/15/13 50 of 111

Page 51: Designing Mobile Learning #LSCON13

ClientsTimeframes

Designing for Mobile LSCON13

[email protected] 03/15/13 51 of 111

Page 52: Designing Mobile Learning #LSCON13

ClientsTimeframes

Development

Designing for Mobile LSCON13

[email protected] 03/15/13 52 of 111

Page 53: Designing Mobile Learning #LSCON13

ClientsTimeframes

DevelopmentCommunication

Designing for Mobile LSCON13

[email protected] 03/15/13 53 of 111

Page 54: Designing Mobile Learning #LSCON13

How should we

Design?

Designing for Mobile LSCON13

[email protected] 03/15/13 54 of 111

Page 55: Designing Mobile Learning #LSCON13

Understand Design

Designing for Mobile LSCON13

[email protected] 03/15/13 55 of 111

Page 56: Designing Mobile Learning #LSCON13

It’s about communication and problem solving.

Designing for Mobile LSCON13

[email protected] 03/15/13 56 of 111

Page 57: Designing Mobile Learning #LSCON13

Design is how it works.

Designing for Mobile LSCON13

[email protected] 03/15/13 57 of 111

Page 58: Designing Mobile Learning #LSCON13

desktop

tablet

phone

Designing for Mobile LSCON13

[email protected] 03/15/13 58 of 111

Page 59: Designing Mobile Learning #LSCON13

mobile first

Designing for Mobile LSCON13

[email protected] 03/15/13 59 of 111

Page 60: Designing Mobile Learning #LSCON13

Focus on the

Audience1

Designing for Mobile LSCON13

[email protected] 03/15/13 60 of 111

Page 61: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 61 of 111

Page 62: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 62 of 111

Page 63: Designing Mobile Learning #LSCON13

is the keyContent

2

Designing for Mobile LSCON13

[email protected] 03/15/13 63 of 111

Page 64: Designing Mobile Learning #LSCON13

Transparent

Interface3

Designing for Mobile LSCON13

[email protected] 03/15/13 64 of 111

Page 65: Designing Mobile Learning #LSCON13

Today’s Apps

Designing for Mobile LSCON13

[email protected] 03/15/13 65 of 111

Page 66: Designing Mobile Learning #LSCON13

Flat Pages

Designing for Mobile LSCON13

[email protected] 03/15/13 66 of 111

Page 67: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 67 of 111

Page 68: Designing Mobile Learning #LSCON13

Tab Bar

Designing for Mobile LSCON13

[email protected] 03/15/13 68 of 111

Page 69: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 69 of 111

Page 70: Designing Mobile Learning #LSCON13

Tree Structure

Designing for Mobile LSCON13

[email protected] 03/15/13 70 of 111

Page 71: Designing Mobile Learning #LSCON13

Tree Structure

< Back

Screen One >

Screen Two >

Screen Three >

Screen Four >

Screen Five >

Screen Six >

Designing for Mobile LSCON13

[email protected] 03/15/13 71 of 111

Page 72: Designing Mobile Learning #LSCON13

Innovation

>

Designing for Mobile LSCON13

[email protected] 03/15/13 72 of 111

Page 73: Designing Mobile Learning #LSCON13

weathercube

Designing for Mobile LSCON13

[email protected] 03/15/13 73 of 111

Page 74: Designing Mobile Learning #LSCON13

Prototyping

Prototyping

Designing for Mobile LSCON13

[email protected] 03/15/13 74 of 111

Page 75: Designing Mobile Learning #LSCON13

Tools:

• Sketches

Quick Prototyping Techniques

Designing for Mobile LSCON13

[email protected] 03/15/13 75 of 111

Page 76: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 76 of 111

Page 77: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 77 of 111

Page 78: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 78 of 111

Page 79: Designing Mobile Learning #LSCON13

Tools:

• Wireframes– Powerpoint / Keynote

Quick Prototyping Techniques

Designing for Mobile LSCON13

[email protected] 03/15/13 79 of 111

Page 80: Designing Mobile Learning #LSCON13

Custom Template in Keynote

Designing for Mobile LSCON13

[email protected] 03/15/13 80 of 111

Page 81: Designing Mobile Learning #LSCON13

keynotekungfu.com

Designing for Mobile LSCON13

[email protected] 03/15/13 81 of 111

Page 82: Designing Mobile Learning #LSCON13

balsamiq.com

Designing for Mobile LSCON13

[email protected] 03/15/13 82 of 111

Page 83: Designing Mobile Learning #LSCON13

Sketchy & iMockUps

Designing for Mobile LSCON13

[email protected] 03/15/13 83 of 111

Page 85: Designing Mobile Learning #LSCON13

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

[email protected] 03/15/13 85 of 111

Page 86: Designing Mobile Learning #LSCON13

ExerciseDesigning for Mobile LSCON13

[email protected] 03/15/13 86 of 111

Page 87: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 87 of 111

Page 88: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 88 of 111

Page 89: Designing Mobile Learning #LSCON13

Design for Flexibility

Designing for Mobile LSCON13

[email protected] 03/15/13 89 of 111

Page 90: Designing Mobile Learning #LSCON13

Testing

Designing for Mobile LSCON13

[email protected] 03/15/13 90 of 111

Page 91: Designing Mobile Learning #LSCON13

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

[email protected] 03/15/13 91 of 111

Page 92: Designing Mobile Learning #LSCON13

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

[email protected] 03/15/13 92 of 111

Page 93: Designing Mobile Learning #LSCON13

ResourcesTo help you grow.

Designing for Mobile LSCON13

[email protected] 03/15/13 93 of 111

Page 94: Designing Mobile Learning #LSCON13

www.launchcycle.com

Designing for Mobile LSCON13

[email protected] 03/15/13 94 of 111

Page 95: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 95 of 111

Page 96: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 96 of 111

Page 97: Designing Mobile Learning #LSCON13

Capture & Analyze

Designing for Mobile LSCON13

[email protected] 03/15/13 97 of 111

Page 98: Designing Mobile Learning #LSCON13

Using CoverFlow view and Preview of Graphics

Designing for Mobile LSCON13

[email protected] 03/15/13 98 of 111

Page 99: Designing Mobile Learning #LSCON13

kuler.adobe.com

Designing for Mobile LSCON13

[email protected] 03/15/13 99 of 111

Page 100: Designing Mobile Learning #LSCON13

abookapart.com

Designing for Mobile LSCON13

[email protected] 03/15/13 100 of 111

Page 101: Designing Mobile Learning #LSCON13

www.smashingmagazine.com

Designing for Mobile LSCON13

[email protected] 03/15/13 101 of 111

Page 102: Designing Mobile Learning #LSCON13

www.balsamiq.com

Designing for Mobile LSCON13

[email protected] 03/15/13 102 of 111

Page 103: Designing Mobile Learning #LSCON13

www.silverback.com

Designing for Mobile LSCON13

[email protected] 03/15/13 103 of 111

Page 104: Designing Mobile Learning #LSCON13

Screencasts 101 Mini-Session

www.jingproject.com

Designing for Mobile LSCON13

[email protected] 03/15/13 104 of 111

Page 105: Designing Mobile Learning #LSCON13

Designing for Mobile LSCON13

[email protected] 03/15/13 105 of 111

Page 106: Designing Mobile Learning #LSCON13

solidify.com

Designing for Mobile LSCON13

[email protected] 03/15/13 106 of 111

Page 107: Designing Mobile Learning #LSCON13

ideapaint.com

Designing for Mobile LSCON13

[email protected] 03/15/13 107 of 111

Page 108: Designing Mobile Learning #LSCON13

www.twitter.com

Designing for Mobile LSCON13

[email protected] 03/15/13 108 of 111

Page 110: Designing Mobile Learning #LSCON13

Download the Presentation at:http://www.slideshare.net/nickfloro

Designing for Mobile LSCON13

[email protected] 03/15/13 110 of 111

Page 111: Designing Mobile Learning #LSCON13

Thank You

Nick [email protected]/NickFloro

Download the Presentation at:http://www.slideshare.net/nickfloro

Designing for Mobile LSCON13

[email protected] 03/15/13 111 of 111