Designing Mobile LearningApps for Education

SEPTEMBER 24 |

RJ Thompson Assistant Professor, Department of Art, College of Creative Arts & Communication, Youngstown State Universityhttp://iamrjthompson.com

twitter: @studentofdesignfacebook: /studentsofdesigninstagram: @robertjthompson

The Point of Origin

Why I got into app design:

I needed to create an access point for student engagement.

By being able to produce mobile apps, for any platform, I can tap into larger audiences specifically where they are living – on their devices.

More to this point – the apps can be ongoing and evolving, the connection I’ve established with my students can live well beyond the classroom/semester.

The Point of Origin

Technical literacy

is the ability of an individual, working independently and with others, to e�ectively use technology to access, manage, integrate, evaluate, create and communicate information.

Technical literacy has many methods of measurement, even if those methods are always needing to be revised when a new update or software application hits the scene.

The Point of Origin

Little expertise

We’re all being reset to zero quite frequently.

Despite being a web designer and developer, when it came to app design...I was on the baseline with everyone else.

I knew the experience, but not the principles and practices that defined the positive experiences I was having with apps and mobile technology.

Why Mobile Learning?

Direct application w/ expected usage

It makes sense to build learning apps on mobile devices. Facutly and students alike are teaching and learning on their devices – and have been for a while.

The market is dominated by ed-tech startups & companies that have web app and mobile app counterparts, but nothing *specific* to an individual class or curriculum at a *specific* institution.

Why Mobile Learning?

Convenience

• I don’t need to repeat myself.

• I can assume that my students, if on their devices in class, are on the app and not Facebook.

• Learning extends beyond the classroom

• Strengthens student e�ciency, develops opportunities to learn responsibly, intuitively, and with attention.

Why Mobile Learning?

Novelty value

I hope I’m not the only educator out there building mobile apps for their specific courses.

However, being the only educator – out of 350+

faculty at YSU – to be doing this...is pretty cool.

Also, the students love it mostly because they know that they are not too many steps removed from being able to use app tech to make their own apps.

Why Mobile Learning?

Possibilities

The possibilities for non-developers to design mobile apps for their classrooms is directly proportional to the advances of WYSIWYG technology. If a drag/drop app builder is particulary advanced, then you can do some amazing things.

Depending on the price... the amazing is available to you.

Why Mobile Learning?

Hiccups: Wi-Fi, Cell Service, ADA

Depending on the construction of your app, your achilles heel may include poor wi-fi coverage, lacking cell services and/or data plans, and the American Disabilities Act, which is a civil rights law that prohibits discrimination against individuals with disabilities in all areas of public life.

Many institutions are undergoing ADA compliancy, but app design seems to be on the edge of understanding w/ ADA.

History

App Builders (natural starting point)

WYSIWYG app builders come and go, typically the good ones are bought by the bigger players, which means if you find a great tool – it’s only a matter of time before it’s swallowed up.

This is a great place to start.

Especially if you have money.

History

Why did the App Builders work?

• Minimum instruction on design/construction• Accessible + Intuitive UI• Ability to download binaries• Quality instruction documents/videos

Many app builders are startup companies that o�er beta or free accounts just for using their service. This typically has a time-limit. Build your apps before time runs out.

History

What else worked?

• Finding free app builds that I could hack up in Xcode.

• Purchasing pre-built app builds that could work for my concept – this process is very square peg/round hole, but did inspire creativity.

• Owning the fact that if I was going to learn it, I needed to fully invest the time into doing it. No quick answers, app builders were in short supply.

History

What did NOT work?

• Trying to learn Xcode from scratch from a book.

• Trying to learn Objective-C.

• Trying to build an app from scratch.

• Trying to figure out Apple Developer provisioning profiles, app ids, etc. without reading anything about it.

Starting Out

Where should you begin?What begins the process?

Like I tell my students, it all begins with your concept.

1. Define concept, audience, features, future goals.2. Determine if features can be built using WYSIWYG app building tools. 3. Draw wireframes and sequence of experience.4. Design wireframes using Photoshop, similar tools.5. If you need to, hire a developer and/or designer.

Starting Out

6. Start learning and experimenting. Get yourself an Android or Apple developer account, start following tutorials, and build, break, rebuild, break again. 7. Give yourself a lot of time to learn and experiment. 8. If you’ve reached a point where you have a functional app, test it in the app simulators, submit for review, and deploy to the store. 9. If you’re approved, celebrate. After your celebration, keep calm and know that you’ve achieved a huge milestone – and that your design that was just submitted...likely does not live up to your standards anymore. Bittersweet.

Building

Native vs. Web

A native app is developed for use on a particular platform or device.

A web-based app is developed as a client-server software application in which the client (or user interface) runs in a web browser.

Which is better? Doesn’t matter. Moving on.

Building

Mobile Sites

Why have an app when you can have a site optimized for the mobile web? Depends on your end goals.

Why not have both? You can have both.

Where a mobile RWD site can provide ALL the content you’d like to o�er, your mobile app can be a bit more concentrated on certain information – and designed specifically for the mobile experience.

Building

Hybrids

I have both a mobile RWD website and several apps. The apps in the Apple App Store are a hybrid of native and web-based app components.

Native content is static – fixed. Web content changes based on when I update my website. So when you download any of the apps, certain sections may appear native but are actually web-based.

Building

Hybrid Benefits?

• Easy updating• Bypass app store review and approval• Coding that creates web browsers in apps doesn’t change all that frequently, so app updates are fairly infrequent. • More design control (depending on build of site)• Not totally reliant on internet to use, depending on the function.

Building

Templates

You can also buy pre-built app templates that o�er enough customization that you can essentially deliver a constructed, strategic educational app experience without having to do the hard coding.

I recommend this. The app templates are surprisingly a�ordable and the creators are very accessible and open to expanding on their builds.

Building

CLI (Command Line Interface)

Many new frameworks, like Ionic, construct base app files through the Command Line Interface. If you’ve never used this, you’ll likely be very reliant on instructions on how to use it. This isn’t a very intuitive way for the non-initiated to produce these base files, but it requires minimal e�ort.

Some app builders, like Ionic, recognize this and built WYSIWYG app counterparts to make building easier.

Building

Programming

If you use a new framework, like Ionic, Angular UI, Sencha, Appcelerator, PhoneGap...you’re going to need to know a bit of the following:

• HTML• CSS• CLI• PHP• Javascript

Testing

Testing Devices + iOS Simulator

One of the most fun parts of app design is running your app in the app simulators and on your actual devices. The routes to getting to both of these points can take a while, but it’s thrilling to see your app in real-time on your device.

If you don’t want to submit your app to the app store, just take all of your students iPhones and make them development devices or use the Apple Testflight App.

Testing

Audience

Before submission, make sure that you are testing your apps with your intended audience – specifically on the devices you built your app for. Most framework-based apps can be constructed for all popular platforms and devices. Simply meaning, your iPhone app can definitely port over to an iPad app with relative ease.

Testing

trymyUI

Students surveyed by providing images of the UI.

With feedback attained, design revisions occur.

After design revisions, functionality tests can initiate.

Submission

Anticipation

Apple is much more rigorous in their reviews of submitted apps than Google is.

In fact, Google apps are submitted, reviewed, and approved in an exceedingly fast turnaround compared to Apple.

Where Google could take days, Apple could take over a week. If your app is rejected by Apple, prepare to wait.

Submission

App Builders

App Builders will either want you to submit your app under the name of their company or permit you to submit your app under your name, provided you have developer accounts with either or both Apple and Google.

With the latter option, you may have to pay for that right, but it’s a worthwhile expense.

Submission

Frameworks

I used the Ionic framework to develop my 3 most recent mobile apps. They have been met with no resistance from Apple.

I have worked a bit with PhoneGap, primarily as an Adobe product, and have had success with it, though I have not formally submitted any apps built with PhonGap. It is, however, a trusted source.

Further Education

What is best method to learn all of this?

I would recommend self-initiated and self-paced learning. I believe that everyone is capable of producing apps, especially using WYSIWYG tools but also custom frameworks. It takes time, e�ort, patience – however rigorious it is, is up to you.

Formal classes may give you a basic deliverable and knowledge. Enter the fray, and fail forward.

Resources

Teaching + Learning

http://www.sitepoint.com/top-7-hybrid-mobile-app-frameworks/

http://ionic.io/

http://phonegap.com/ (Adobe)