Contenu connexe Similaire à Wrangling Apps in the Smartphone Wild West (January 2011) (20) Wrangling Apps in the Smartphone Wild West (January 2011)1. Wrangling apps in the Smartphone
Wild West
@suzanneginsburg
© 2011 Ginsburg Design
4. “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
6. 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
7. For a short time, Apple was the only
major smartphone app store in town.
© 2011 Ginsburg Design
9. 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
10. Designers started to fret. Would they
have to design their apps twice, three
times, four times, or more?
© 2011 Ginsburg Design
12. 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
13. #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
14. 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
15. Web App Examples:
Offline access (Gmail) Gyroscope (Occipital) Game (BeatTouch)
© 2011 Ginsburg Design
16. 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
17. Improving Web App Access (post-discovery phase):
Cornell University
© 2011 Ginsburg Design
18. #2. Does your app require multi-tasking
support?
© 2011 Ginsburg Design
20. 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
21. #3. What is your monetization strategy?
© 2011 Ginsburg Design
22. 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
23. 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
25. 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
26. # 1. The One Trick Pony
© 2011 Ginsburg Design
27. 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
28. One Trick Pony Examples:
Convertbot by tapbots Voices by tap tap tap Ocarina by Smule
© 2011 Ginsburg Design
29. 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
30. UI Guidelines:
http://developer.apple.com/library/ios/#documentation/userexperience/ http://developer.android.com/guide/practices/ui_guidelines/index.html
conceptual/mobilehig/Introduction/Introduction.html http://www.slideshare.net/AndroidDev/android-ui-design-tips
http://docs.blackberry.com/en/developers/deliverables/17965/ http://create.msdn.com/en-us/home/getting_started
Designing_applications_for_BlackBerry_devices_1017063_11.jsp © 2011 Ginsburg Design
31. 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
33. Prototyping, on the other hand, can be
quite different between platforms since
there are many platform-specific
solutions.
© 2011 Ginsburg Design
35. Prototyping: Platform Agnostic
Paper (Braman, Lau, Nomikos) HTML (Marcin Ignac)
Keynotopia with GoodReader Flash (Alfresco)
© 2011 Ginsburg Design
37. Prototyping: Video
http://johnnyholland.tv/post/1257269180/prototyping-for-elmos-monster-maker-iphone-app-
ideo
© 2011 Ginsburg Design
38. And now some platform specific
solutions…
© 2011 Ginsburg Design
40. Prototyping: iOS
http://www.zambetti.com/projects/liveview/
Apple’s iOS Interface Builder
http://giveabrief.com/
© 2011 Ginsburg Design
42. 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
43. # 2. The O.K. Corral
© 2011 Ginsburg Design
44. 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
45. 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
46. Potential differences to keep in mind:
- Display size & resolution
- Device interaction with display
- Supported gestures
- UI Controls
- Animations
- Landscape vs. Portrait
© 2011 Ginsburg Design
47. Device Differences: Droid S vs. iPhone 4
4-inch display 3.5-inch retina display
480 x 800 resolution 640 x 960 resolution
4 buttons on front 1 button on front
© 2011 Ginsburg Design
54. 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
55. # 3. The Trojan Horse
© 2011 Ginsburg Design
56. 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
57. 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
59. 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
62. And, finally, another option to keep in
mind is to create a web app that can be
accessed via the browser.
© 2011 Ginsburg Design
65. 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
67. 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
68. How to stay in touch:
@suzanneginsburg
My book on Amazon:
http://amzn.to/9NH4RC
© 2011 Ginsburg Design