Implementing an mLearning Prototype Strategy

Mobile Design Strategies StagemLearnCon 2012

Scott McCormickscottm@floatlearning.com

cell: 309.838.2168

twitter: scottfloat Free!

• Get “mobile smart”

• Business case

• Process

• Metrics of success

• Bonus: a champion

Before You Start

• Targeted and limited tool

• Simulates user experience

• Not fully functioning

• Developed for acurated experience

What is a prototype?

• Full app dev can get pricey

• Full app dev can take time and can get bogged down

• Prototyping helps manage cost and risk

• Prototyping helps get buy-in and user acceptance/usability achieved earlier in the process

Why Prototype?

• Content resonates withthe target audience

• “Low hanging fruit”

• Not proprietary

• Good place to makemistakes

What’s in a Prototype?

Considerations

• Building Prototypes should be EASY

• Prototypes do not need to be pixel perfect

• Prototype goals need to be clearly spelled out prior to creation

• Build Prototypes that have an output that everyone can see

• Functions, features in assets that are projected for the build - attempt to build them in the prototype

The Basics

• Functional Fidelity and Visual Fidelity

• You need to envision the goals for the prototype

• Choose method and graphic sophistication based on the goals

• More “Production Ready” = more time

• More graphically rich = more time

• More revisions at this point are less expensive than later

Fidelity vs. Functionality

Fidelity vs. Effort

Prototyping Options

Daniel Pfeifferdpfeiffer@floatlearning.com

@mediabounds

Paper Prototype

Pros

• Inexpensive

• Easy

Cons

• Doesn't really emulate the UX

• Time-consuming to pull off a complicated design or one with a lot of screens/data

• The design elements/deliverables won’t live on past the planning stage

Paper Prototype

Paper Prototype

uistencils.com

Powerpoint/Keynote

Pros

• Most people have access to at least one of these

• Many people are very familiar with these programs and already know how to create basic layouts

• Allows for interactivity and animation

Cons

• The design elements/deliverables won’t live on past the planning stage

• Output isn’t really “mobile”

• Good UI Stencils are tough to find or need reprep (try keynotekungfu.com or keynotopia.com)

Powerpoint/Keynote

OmniGraffle

Pros

• Great toolset – highly extensible, large community

• Produces fantastic diagrams and high quality output

• Reasonably easy to use for any one familiar with desktop publishing tools

• Provides an quick prototyping solution by adding interactivity to wireframes

Cons

• It's a tad expensive

• Mac only

• The design elements/deliverables won’t live on past the planning stage

Omnigraffle

FieldTest

Pros

• Easily add interactivity and animation to mockups

• Easy to distribute to devices

• Web/Cloud based (so it's collaborative)

• Inexpensive (so I’ve been assured)

Cons

• It's still in private beta

• Pricing is as of yet ???

• FieldTest only adds interactivity to existing mockups (or sketches)--you’ll need to use a different tool to create the mockups

FieldTest (fieldtestapp.com)

HTML/CSS

Pros

• Inexpensive

• Easy

• Using Webkit-based browsers,you can emulate mobile devices pretty well

• There are tools popping up now that ease this considerably (jQuery Mobile, Sencha Touch, etc.)

Cons

• More tech knowledge might be required than simple paper prototypes

• Unless you’re ultimately targeting mobile web (or using a framework like PhoneGap), the design/deliverables won’t live past the planning phase.

HTML/CSS

iOS Storyboard

Pros

• Quickly build an interactive, working (static)

application writing little to no code

• Storyboard will be used through the whole project--

during the development process, code is added to

each view to make it fully functional

Cons

• iOS 5+ only

• Requires a decent understanding of how iOS

applications are structured

iOS Storyboard

• Prototyping is fast

• Prototyping is easy

• Prototyping gets stakeholders involved sooner

• Prototyping saves money

• Prototyping gives the audience “look and feel” of mobile learning

• Prototyping is a great evangelistic tool

Why Prototype?

• Q&A

• Discussion

Finishing Up