Designing Learning formobile devices

Nick@sealworks.comTwitter.com/NickFloro

DesignPrototypingWireframing

Brainstorming

HTML5Tools

Web vs Apps

Q&A

Understanding the

Technology

desktop

desktop

phone

desktop

tabletphone

desktop

tablet

phone

7 Questions to Define the 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?

AppApplication

Game / SimulationTool

Hybrid

InfoWebTool

Resources

Web App | Course

• network latency• input mechanism• memory

• form factor

• computational power

• context• battery

The mobile environmentsingle early failure = non-returning user

The mobile environmentcrucial first 30-60 seconds usage

The mobile environmentFewer options

The Web Platform is Accelerating

Graphics Location Storage Speed

Solving Developer Challenges

Sample Simulation with HTML 5

Selecting a SizePixels & Aspect Ratio

iPhone 4960 x 640

iPhone480 x 320

iPhone 51136 x 640

Android Xoom1280 x 720

Selecting a SizePixels & Aspect Ratio

iPad 3rd gen +2048 x 1536

iPad1024 x 768

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

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

Web App

AppWeb

HTML 5CSS3

AJAXJAVASCRIPT

JQuery

APIs

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?

Examples

Project Management

Project Management

Clients

ClientsTimeframes

ClientsTimeframes

Development

ClientsTimeframes

DevelopmentCommunication

Define

Design

Develop

Deliver

Process

Determining a PlanWhat’s Next

Strategy Team Skills Work FlowTools Challenges

Determining a PlanWhat’s Next

Strategy

Problem / Solution

Audience

Technology

What do you want to deliver

Timeframe

Budget

Determining a PlanWhat’s Next

Team Skills

Project Management

Define

Design / UI / UX

Reviews

Develop

Test

Determining a PlanWhat’s Next

Tools

Web App - HTML5, Javascript, Server, Database

HTML5 / PhoneGap (Azura)

Game Salad, Corona

Apple xCode / Google

Determining a PlanWhat’s Next

Define Design Develop Test Refine Launch

How do we handle?Projects

Current Content New Projects

How should we

Design?

Understand Design

It’s about communication and problem solving.

Design is how it works.

It’s about communication and problem solving.

Focus on the

Audience1

is the keyContent

2

Transparent

Interface3

Content Flowchart

Inspiration.com

Prototyping

Prototyping

Tools:

• Sketches

Quick Prototyping Techniques

Quick Prototyping Techniques

Tools:

• Fujitsu SCANSNAP – Scan direct to pdf– includes full Acrobat Pro

Capture & Analyze

Using CoverFlow view and Preview of Graphics

Tools:

• Wireframes– Powerpoint / Keynote

Quick Prototyping Techniques

Custom Template in Keynote

keynotekungfu.com

goo.gl/lKnU9

balsamiq.com

Sketchy & iMockUps

http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/

Exercise

Wireframes

Using Acrobat Pro for Prototypes

Design for Flexibility

Testing

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

Testing Code

Test for Usability

• Have someone with fresh

eyes test drive your site to

make sure it accomplishes

both user goals and site

goals

• Survey

BrowserStack.com

BrowserStack.com

Resources

Play | Watch | Experiment

kuler.adobe.com

Resources

• Designing Interactions

• Bill Moggridge

Resources• Designing the Obvious:

A Common Sense Approach to Web Application Design

• Robert Hoekman Jr.

howconference.com

CSS3 for Web DesignersDan Cederholm | A Book Apart

www.manager-tools.com

Podcasts

www.businessweek.com

www.istockphoto.com

www.smashingmagazine.com

Nancy Durate Garr Reynolds

www.presentationzen.com

www.balsamiq.com

www.silverback.com

Screencasts 101 Mini-Session

www.jingproject.com

solidify.com

ideapaint.com

evernote.com

www.twitter.com

www.lrnchat.com

Don’t Settle

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

Thank You

Nick Floronick@sealworks.comtwitter.com/NickFloro

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