Wrangling Apps in the Smartphone Wild West (January 2011)

Wrangling apps in the Smartphone Wild West

@suzanneginsburg

About me:

Motivations & definitions…

“Native” vs. “web” vs. “hybrid” apps?

-  Web apps are accessed via the browser & updated automatically (from user’s perspective)

-  Native apps are downloaded & updates must also be downloaded (unless they are “hybrids.”)

-  Native apps have greater access to the device hardware & content (though that’s changing.)

Now let’s get started…

In July 2008, Apple released an API that enabled iPhone developers to create “native” apps. Along with this API came the App Store.

For a short time, Apple was the only major smartphone app store in town.

Innovation was off the charts.

Hundreds of apps were approved each day.

Soon enough, others joined the app game.

Android Market (October 2008) Blackberry App World (April 2009) Windows 7 (October 2010) More exist & more are coming…

Designers started to fret. Would they have to design their apps twice, three times, four times, or more?

What’s a smartphone app designer to do?

First of all, figure out if you really need to create a “native” app. Here are some questions to help you out…

#1. What problem are you trying to solve? (Let’s assume you’ve conducted upfront user research—shadowing, diary studies, field interviews, etc.—to help answer this question.)

Unless your solution requires OpenGL (Graphics Library), hardware access (e.g., sensors), or device content (e.g., photos) you may not need a native app.

Web apps can store data offline, access GPS info & more enhancements are coming.

Offline access (Gmail) Gyroscope (Occipital) Game (BeatTouch)

Web App Examples:

You may be thinking, “But my app won’t be discoverable if it’s on the web!”

There are more than 300K apps in Apple’s App Store. It ain’t easy to stand out anymore.

Cornell University

Improving Web App Access (post-discovery phase):

#2. Does your app require multi-tasking support?

Listen to music (Pandora) Upload photos (Flickr) Take calls (Skype)

Multi-Tasking Examples:

If you’d like to take advantage of multi-tasking, as it stands today, you’ll need to create a native app (iOS or Android).

#3. What is your monetization strategy?

If you’re planning to offer subscriptions or a one-time payment, it may be more profitable to sell a native app.

Drop-off rates tend to be higher for web app purchases.

To summarize, if you need device access, multi-tasking, or micropayments, in most cases you’ll want to create a native app.

So what now?

You have at least 3 options to consider:

1. The One Trick Pony 2. The O.K. Corral 3. The Trojan Horse

# 1. The One Trick Pony

With the One Trick Pony, you may decide to design your app

for just one native platform. This may make sense if your user base is primarily on one platform, or must-have features are only on

that platform.

Convertbot by tapbots Voices by tap tap tap Ocarina by Smule

One Trick Pony Examples:

What you need to do:

- Learn the UI guidelines for the OS. - Read the device’s technical specs. - Explore related apps in depth. - Sketch, prototype & test, lots!

UI Guidelines:

http://docs.blackberry.com/en/developers/deliverables/17965/Designing_applications_for_BlackBerry_devices_1017063_11.jsp

http://create.msdn.com/en-us/home/getting_started

http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html

http://developer.android.com/guide/practices/ui_guidelines/index.html http://www.slideshare.net/AndroidDev/android-ui-design-tips

Sketching for different smartphone platforms is essentially the same except some may incorporate the device more than others (e.g., Android & Windows).

Sketching:

Dane Petersen

Marcin Ignac

Daniel Chang

Prototyping, on the other hand, can be quite different between platforms since there are many platform-specific solutions.

First, let’s look at some platform agnostic solutions…

Prototyping: Platform Agnostic

HTML (Marcin Ignac)

Keynotopia with GoodReader

Paper (Braman, Lau, Nomikos)

Flash (Alfresco)

Prototyping: Windows 7 on paper

Courtesy Sara Summers

http://johnnyholland.tv/post/1257269180/prototyping-for-elmos-monster-maker-iphone-app-ideo

Prototyping: Video

And now some platform specific solutions…

Prototyping: Microsoft Expression Blend

http://www.microsoft.com/showcase/en/us/details/61ed7e86-0b1c-432e-a1fb-a882f95ec250

Prototyping: iOS

http://www.zambetti.com/projects/liveview/

http://giveabrief.com/

Apple’s iOS Interface Builder

Prototyping: Android App Creator

http://appinventor.googlelabs.com/about/index.html

Go with the One Trick Pony approach if your user base is primarily on one platform, or must-have features are only on that platform.

# 2. The O.K. Corral

With the O.K. Corral approach, you may design your app for 2-3 flagship platforms.

This makes sense if your users are concentrated on a small set of platforms (tip: look at your traffic data).

- Try to make initial sketches device agnostic. - Then compare device & OS differences to assess impact on the user experience.

Potential differences to keep in mind:

- Display size & resolution - Device interaction with display -  Supported gestures -  UI Controls -  Animations -  Landscape vs. Portrait

Device Differences: Droid S vs. iPhone 4

3.5-inch retina display 640 x 960 resolution 1 button on front

4-inch display 480 x 800 resolution 4 buttons on front

Navigation Differences

Pivots Tab Bar

Quick Actions

Information Hierarchy

Widgets

Gesture Differences may also be critical:

http://www.lukew.com/ff/entry.asp?1071

Go with the O.K. Corral if your users are on a small set of platforms & you want to provide “pure” native experiences.

# 3. The Trojan Horse

With the Trojan Horse approach, you can create web apps with native app capabilities.

They are essentially web apps wrapped in native code (aka “hybrid” apps.) Trade-off is less customization.

- Determine level of device/OS customization. - Choose tool to support your cross-platform solution (could be in-house solution).

Device/OS customization depends on: - App genre - Device capabilities - Design strategy (philosophy?)

There are a variety of “Trojan Horse” tools. They all use HTML for layout, JavaScript for device access, and CSS for look & feel.

Trojan Tools:

http://www.phonegap.com http://www.appcelerator.com/

http://www.rhomobile.com/

Trojan Examples:

Koombea (RhoMobile) Jimmy Fallon (Titanium) KeyPoint (PhoneGap)

And, finally, another option to keep in mind is to create a web app that can be accessed via the browser.

Web App Tools:

Web App Example:

You have at least 3 (4!) options to consider:

1.  The One Trick Pony 2.  The O.K. Corral 3.  The Trojan Horse

(4. Create a web app!)

“Courage is being scared to death but saddling up anyway.”

John Wayne

A special thanks to Linda Olafsdottir for her beautiful illustrations.

And thanks to Jason Grigsby, Sara Summers, David Kaneda, Jesse MacFayden, Jonathan Stark, Marty Picco, & Michael Mayo for technical advice.

How to stay in touch: @suzanneginsburg

My book on Amazon: http://amzn.to/9NH4RC

Thanks for coming! Questions?

Wrangling Apps in the Smartphone Wild West (January 2011)

Design

Data Wrangling

Data Wrangling with R's tidyverse

Data wrangling - Modern Data Science with Rmdsr-book.github.io/excerpts/mdsr-dataI.pdfData wrangling This chapter introduces basics of how to wrangle data in R. Wrangling skills will

Wrangling The User Profile Service

Lab #1: Data Wrangling and Exploration

Advanced OAuth Wrangling

Wrangling Logs with Logstash and ElasticSearchassets.en.oreilly.com/1/event/80/Wrangling Logs with Logstash and... · Wrangling Logs with Logstash and ElasticSearch Nate Jones & David

Feedback handling, community wrangling, panhandlin’

Data Wrangling with R - Leanpubsamples.leanpub.com/datawranglingwithr-sample.pdf · data wrangling tasks more effectively, efficiently, and with more clarity. Last, data wrangling

Wrangling 3rd Party Installers from Puppet

Chapter 14: Data Wrangling: Munging, Processing, and Cleaning wranglingdrgates.georgetown.domains/GatesPythonIntroBook/Chapter14Gates.pdf · Chapter 14: Data Wrangling: Munging, Processing,

Walking in the Wild – Using an Always-On Smartphone ... · Walking in the Wild – Using an Always-on Smartphone Application to Increase Physical Activity Tim Harries1, Parisa Eslambolchilar2,

Wrangling Short Read Data with SHRiMP

Social media wrangling curation

Moodle wrangling

Data Wrangling: The Elephant in the Room of Big Data · Data Wrangling Research • So data wrangling is a research challenge, currently without a community or established priorities

Stylesheet Wrangling with SCSS

Wrangling WP_Cron - WordCamp Grand Rapids 2014

Wrangling Your Stuff

Data Wrangling Handbook