wrangling apps in the smartphone wild west (january 2011)
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.TRANSCRIPT
© 2011 Ginsburg Design
Wrangling apps in the Smartphone Wild West
@suzanneginsburg
© 2011 Ginsburg Design
About me:
© 2011 Ginsburg Design
Motivations & definitions…
© 2011 Ginsburg Design
“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.)
© 2011 Ginsburg Design
Now let’s get started…
© 2011 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.
© 2011 Ginsburg Design
For a short time, Apple was the only major smartphone app store in town.
© 2011 Ginsburg Design
Innovation was off the charts.
Hundreds of apps were approved each day.
© 2011 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…
© 2011 Ginsburg Design
Designers started to fret. Would they have to design their apps twice, three times, four times, or more?
© 2011 Ginsburg Design
What’s a smartphone app designer to do?
© 2011 Ginsburg Design
First of all, figure out if you really need to create a “native” app. Here are some questions to help you out…
© 2011 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.)
© 2011 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.
© 2011 Ginsburg Design
Offline access (Gmail) Gyroscope (Occipital) Game (BeatTouch)
Web App Examples:
© 2011 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.
© 2011 Ginsburg Design
Cornell University
Improving Web App Access (post-discovery phase):
© 2011 Ginsburg Design
#2. Does your app require multi-tasking support?
© 2011 Ginsburg Design
Listen to music (Pandora) Upload photos (Flickr) Take calls (Skype)
Multi-Tasking Examples:
© 2011 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).
© 2011 Ginsburg Design
#3. What is your monetization strategy?
© 2011 Ginsburg Design
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.
© 2011 Ginsburg Design
To summarize, if you need device access, multi-tasking, or micropayments, in most cases you’ll want to create a native app.
© 2011 Ginsburg Design
So what now?
© 2011 Ginsburg Design
You have at least 3 options to consider:
1. The One Trick Pony 2. The O.K. Corral 3. The Trojan Horse
© 2011 Ginsburg Design
# 1. The One Trick Pony
© 2011 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.
© 2011 Ginsburg Design
Convertbot by tapbots Voices by tap tap tap Ocarina by Smule
One Trick Pony Examples:
© 2011 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!
© 2011 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/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
© 2011 Ginsburg Design
Sketching for different smartphone platforms is essentially the same except some may incorporate the device more than others (e.g., Android & Windows).
© 2011 Ginsburg Design
Sketching:
Dane Petersen
Marcin Ignac
Daniel Chang
© 2011 Ginsburg Design
Prototyping, on the other hand, can be quite different between platforms since there are many platform-specific solutions.
© 2011 Ginsburg Design
First, let’s look at some platform agnostic solutions…
© 2011 Ginsburg Design
Prototyping: Platform Agnostic
HTML (Marcin Ignac)
Keynotopia with GoodReader
Paper (Braman, Lau, Nomikos)
Flash (Alfresco)
© 2011 Ginsburg Design
Prototyping: Windows 7 on paper
Courtesy Sara Summers
© 2011 Ginsburg Design
http://johnnyholland.tv/post/1257269180/prototyping-for-elmos-monster-maker-iphone-app-ideo
Prototyping: Video
© 2011 Ginsburg Design
And now some platform specific solutions…
© 2011 Ginsburg Design
Prototyping: Microsoft Expression Blend
http://www.microsoft.com/showcase/en/us/details/61ed7e86-0b1c-432e-a1fb-a882f95ec250
© 2011 Ginsburg Design
Prototyping: iOS
http://www.zambetti.com/projects/liveview/
http://giveabrief.com/
Apple’s iOS Interface Builder
© 2011 Ginsburg Design
Prototyping: Android App Creator
http://appinventor.googlelabs.com/about/index.html
© 2011 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.
© 2011 Ginsburg Design
# 2. The O.K. Corral
© 2011 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).
© 2011 Ginsburg Design
What you need to do:
- Try to make initial sketches device agnostic. - Then compare device & OS differences to assess impact on the user experience.
© 2011 Ginsburg Design
Potential differences to keep in mind:
- Display size & resolution - Device interaction with display - Supported gestures - UI Controls - Animations - Landscape vs. Portrait
© 2011 Ginsburg Design
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
© 2011 Ginsburg Design
Navigation Differences
© 2011 Ginsburg Design
Navigation Differences
Pivots Tab Bar
Quick Actions
© 2011 Ginsburg Design
Information Hierarchy
© 2011 Ginsburg Design
Widgets
© 2011 Ginsburg Design
Widgets
© 2011 Ginsburg Design
Gesture Differences may also be critical:
http://www.lukew.com/ff/entry.asp?1071
© 2011 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.
© 2011 Ginsburg Design
# 3. The Trojan Horse
© 2011 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 (aka “hybrid” apps.) Trade-off is less customization.
© 2011 Ginsburg Design
What you need to do:
- Determine level of device/OS customization. - Choose tool to support your cross-platform solution (could be in-house solution).
© 2011 Ginsburg Design
Device/OS customization depends on: - App genre - Device capabilities - Design strategy (philosophy?)
© 2011 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.
© 2011 Ginsburg Design
Trojan Tools:
http://www.phonegap.com http://www.appcelerator.com/
http://www.rhomobile.com/
© 2011 Ginsburg Design
Trojan Examples:
Koombea (RhoMobile) Jimmy Fallon (Titanium) KeyPoint (PhoneGap)
© 2011 Ginsburg Design
And, finally, another option to keep in mind is to create a web app that can be accessed via the browser.
© 2011 Ginsburg Design
Web App Tools:
© 2011 Ginsburg Design
Web App Example:
© 2011 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!)
© 2011 Ginsburg Design
“Courage is being scared to death but saddling up anyway.”
John Wayne
© 2011 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.
© 2011 Ginsburg Design
How to stay in touch: @suzanneginsburg
My book on Amazon: http://amzn.to/9NH4RC
© 2011 Ginsburg Design
Thanks for coming! Questions?