+ All Categories
Home > Design > Wrangling Apps in the Smartphone Wild West

Wrangling Apps in the Smartphone Wild West

Date post: 28-Jan-2015
Category:
Upload: ginsburg-design
View: 111 times
Download: 4 times
Share this document with a friend
Description:
The goal of this talk was to present alternative ways to address the growing fragmentation in the smartphone app world. The talk starts out discussing “web” apps then dives into “native” apps.
Popular Tags:
70
© 2010 Ginsburg Design Wrangling apps in the Smartphone Wild West @suzanneginsburg
Transcript
Page 1: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Wrangling apps in the Smartphone Wild West

@suzanneginsburg

Page 2: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

About the speaker:

Suzanne Ginsburg is a user experience consultant and author of Designing the iPhone User Experience. Visit her company web site to learn more: www.ginsburg-design.com

Page 3: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Why this talk:

The goal of this talk is to present alternative ways to address the growing fragmentation in the smartphone app world.

Page 4: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Structure of talk:

We’ll start out discussing “web” apps then dive into “native” apps.

Page 5: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Differences between “native” & “web” apps :

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

-  Native apps are downloaded & updates must also be downloaded.

-  Native apps have greater access to the device hardware & content (as is stands today.)

Page 6: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Now let’s get started…

Page 7: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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

Page 8: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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

Page 9: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Innovation was off the charts.

Hundreds of apps were approved each day.

Page 10: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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…

Page 11: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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

Page 12: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

What’s a smartphone app designer to do?

Page 13: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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

Page 14: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

#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.)

Page 15: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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.

Page 16: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Offline access (Gmail) GPS (prop.erti.es) Game (BeatTouch)

Web App Examples:

Page 17: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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.

Page 18: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Cornell University Disney Web Radio

Improving Web App Access (post discovery phase):

Page 19: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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

Page 20: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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

Multi-Tasking Examples:

Page 21: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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).

Page 22: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

#3. What is your monetization strategy?

Page 23: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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

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

Page 24: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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

Page 25: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

So what now?

Page 26: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

You have at least 3 options to consider:

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

Page 27: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

# 1. The One Trick Pony

Page 28: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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.

Page 29: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Convertbot Voices Smule

One Trick Pony Examples:

Page 30: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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!

Page 31: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

UI Guidelines:

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

http://create.msdn.com/en-US/http://create.msdn.com/en-US/

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

Page 32: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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

Page 33: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Sketching:

Dane Petersen

Marcin Ignac

Daniel Chang

Page 34: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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

Page 35: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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

Page 36: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Prototyping—Platform Agnostic:

HTML (Marcin Ignac)

Keynotopia + GoodReader

Paper (Braman, Lau, Nomikos)

Page 37: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Prototyping—Windows 7 Paper Prototype:

Courtesy Sara Summers

Page 38: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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

Prototyping—Video:

Page 39: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

And now some platform specific solutions…

Page 40: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Prototyping—Microsoft Expression Blend:

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

Page 41: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Prototyping—iOS:

http://www.getreviewapp.com/

http://liveview.sourceforge.net/

http://giveabrief.com/

Page 42: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Prototyping—Android App Creator:

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

Page 43: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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.

Page 44: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

# 2. The O.K. Corral

Page 45: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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).

Page 46: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

What you need to do:

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

Page 47: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Potential differences to keep in mind:

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

Page 48: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Device Differences: Droid X vs. iPhone 4:

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

4.3-inch display 480 x 854 resolution 4 buttons on front

Page 49: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Navigation Differences

Page 50: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Navigation Differences

Pivots Tab Bar

Quick Actions

Page 51: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Information Hierarchy

Page 52: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Widgets

Page 53: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Widgets

Page 54: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Gesture Differences are also critical:

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

Page 55: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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

Page 56: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

# 3. The Trojan Horse

Page 57: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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

They are essentially web apps wrapped in native code. Also known as “hybrid” apps.

Page 58: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

What you need to do:

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

Page 59: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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

Page 60: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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

Page 61: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Trojan Tools:

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

http://www.rhomobile.com/

Page 62: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Trojan Examples:

Koombea with RhoMobile Jimmy Fallon with Titanium KeyPoint with PhoneGap

Page 63: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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

Page 64: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Web App Tools:

Page 65: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Web App Example:

Page 66: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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!)

Page 67: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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

John Wayne

Page 68: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

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.

Page 69: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

How to stay in touch:

@suzanneginsburg www.ginsburg-design.com

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

Page 70: Wrangling Apps in the Smartphone Wild West

© 2010 Ginsburg Design

Thanks for coming! Questions?


Recommended