© 2010 Ginsburg Design
Wrangling apps in the Smartphone
Wild West
@suzanneginsburg
© 2010 Ginsburg Design
About the speaker:
Suzanne Ginsburg is a user experience
consultant and author of Designing the
iPh...
© 2010 Ginsburg Design
Why this talk:
The goal of this talk is to present
alternative ways to address the growing
fragment...
© 2010 Ginsburg Design
Structure of talk:
We’ll start out discussing “web” apps
then dive into “native” apps.
© 2010 Ginsburg Design
Differences between “native” & “web”
apps :
- Web apps are accessed via the browser &
updated autom...
© 2010 Ginsburg Design
Now let’s get started…
© 2010 Ginsburg Design
In July 2008, Apple released an API that
enabled iPhone developers to create
“native” apps. Along w...
© 2010 Ginsburg Design
For a short time, Apple was the only
major smartphone app store in town.
© 2010 Ginsburg Design
Innovation was
off the charts.
Hundreds of apps
were approved
each day.
© 2010 Ginsburg Design
Soon enough, others joined the app game.
Android Market (October 2008)
Blackberry App World (April ...
© 2010 Ginsburg Design
Designers started to fret. Would they
have to design their apps twice, three
times, four times, or ...
© 2010 Ginsburg Design
What’s a smartphone app designer
to do?
© 2010 Ginsburg Design
First of all, figure out if you really need
to create a “native” app. Here are some
questions to he...
© 2010 Ginsburg Design
#1. What problem are you trying to
solve?
(Let’s assume you’ve conducted upfront user research—
sha...
© 2010 Ginsburg Design
Unless your solution requires OpenGL
(Graphics Library), hardware access (e.g.,
sensors), or device...
© 2010 Ginsburg Design
Offline access (Gmail) GPS (prop.erti.es) Game (BeatTouch)
Web App Examples:
© 2010 Ginsburg Design
You may be thinking, “But my app won’t
be discoverable if it’s on the web!”
There are more than 300...
© 2010 Ginsburg Design
Cornell University Disney Web Radio
Improving Web App Access (post discovery phase):
© 2010 Ginsburg Design
#2. Does your app require multi-tasking
support?
© 2010 Ginsburg Design
Listen to music (Pandora) Upload photos (Flickr) Take calls (Skype)
Multi-Tasking Examples:
© 2010 Ginsburg Design
If you’d like to take advantage of multi-
tasking, as it stands today, you’ll need to
create a nati...
© 2010 Ginsburg Design
#3. What is your monetization strategy?
© 2010 Ginsburg Design
If you’re planning to
offer subscriptions
or one-time
payments, it may be
more profitable to
sell a...
© 2010 Ginsburg Design
To summarize, if you need device access,
multi-tasking, or micropayments, in most
cases you’ll want...
© 2010 Ginsburg Design
So what now?
© 2010 Ginsburg Design
You have at least 3 options to consider:
1. The One Trick Pony
2. The O.K. Corral
3. The Trojan Hor...
© 2010 Ginsburg Design
# 1. The One Trick Pony
© 2010 Ginsburg Design
With the One Trick Pony, you
may decide to design your app
for just one native platform.
This may m...
© 2010 Ginsburg Design
Convertbot Voices Smule
One Trick Pony Examples:
© 2010 Ginsburg Design
What you need to do:
- Learn the UI guidelines for the OS.
- Read the device’s technical specs.
- E...
© 2010 Ginsburg Design
UI Guidelines:
http://docs.blackberry.com/en/developers/deliverables/17965/
Designing_applications_...
© 2010 Ginsburg Design
Sketching for different smartphone
platforms is essentially the same except
some may incorporate th...
© 2010 Ginsburg Design
Sketching:
Dane Petersen
Marcin Ignac
Daniel Chang
© 2010 Ginsburg Design
Prototyping, on the other hand, can be
quite different between platforms since
there are many platf...
© 2010 Ginsburg Design
First, let’s look at some platform
agnostic solutions…
© 2010 Ginsburg Design
Prototyping—Platform Agnostic:
HTML (Marcin Ignac)
Keynotopia + GoodReader
Paper (Braman, Lau, Nomi...
© 2010 Ginsburg Design
Prototyping—Windows 7 Paper Prototype:
Courtesy Sara Summers
© 2010 Ginsburg Design
http://johnnyholland.tv/post/1257269180/prototyping-for-elmos-monster-maker-iphone-app-
ideo
Protot...
© 2010 Ginsburg Design
And now some platform specific
solutions…
© 2010 Ginsburg Design
Prototyping—Microsoft Expression Blend:
http://www.microsoft.com/showcase/en/us/details/61ed7e86-0b...
© 2010 Ginsburg Design
Prototyping—iOS:
http://www.getreviewapp.com/
http://liveview.sourceforge.net/
http://giveabrief.co...
© 2010 Ginsburg Design
Prototyping—Android App Creator:
http://appinventor.googlelabs.com/about/index.html
© 2010 Ginsburg Design
Go with the One Trick Pony approach if your
user base is primarily on one platform, or must-
have f...
© 2010 Ginsburg Design
# 2. The O.K. Corral
© 2010 Ginsburg Design
With the O.K. Corral
approach, you may design
your app for 2-3 flagship
platforms.
This makes sense...
© 2010 Ginsburg Design
What you need to do:
- Try to make initial sketches device agnostic.
- Then compare device & OS dif...
© 2010 Ginsburg Design
Potential differences to keep in mind:
- Display size & resolution
- Device interaction with displa...
© 2010 Ginsburg Design
Device Differences: Droid X vs. iPhone 4:
3.5-inch retina display
640 x 960 resolution
1 button on ...
© 2010 Ginsburg Design
Navigation Differences
© 2010 Ginsburg Design
Navigation Differences
Pivots
Tab Bar
Quick Actions
© 2010 Ginsburg Design
Information Hierarchy
© 2010 Ginsburg Design
Widgets
© 2010 Ginsburg Design
Widgets
© 2010 Ginsburg Design
Gesture Differences are also critical:
http://www.lukew.com/ff/entry.asp?1071
© 2010 Ginsburg Design
Go with the O.K. Corral if your users are
on a small set of platforms & you want
to provide “pure” ...
© 2010 Ginsburg Design
# 3. The Trojan Horse
© 2010 Ginsburg Design
With the Trojan Horse approach, you
can create web apps with native app
capabilities.
They are esse...
© 2010 Ginsburg Design
What you need to do:
- Determine device/OS customization.
- Choose tool to support your cross-platf...
© 2010 Ginsburg Design
Device/OS customization depends on:
- App genre
- Device capabilities
- Design strategy (philosophy...
© 2010 Ginsburg Design
There are a variety of “Trojan Horse”
tools. They all use HTML for layout,
JavaScript for device ac...
© 2010 Ginsburg Design
Trojan Tools:
http://www.phonegap.com http://www.appcelerator.com/
http://www.rhomobile.com/
© 2010 Ginsburg Design
Trojan Examples:
Koombea with RhoMobileJimmy Fallon with TitaniumKeyPoint with PhoneGap
© 2010 Ginsburg Design
And, finally, another option to keep in
mind is to create a web app that can be
accessed via the br...
© 2010 Ginsburg Design
Web App Tools:
© 2010 Ginsburg Design
Web App Example:
© 2010 Ginsburg Design
You have at least 3 (4!) options to consider:
1.  The One Trick Pony
2.  The O.K. Corral
3.  The Tr...
© 2010 Ginsburg Design
“Courage is being
scared to death but
saddling up anyway.”
John Wayne
© 2010 Ginsburg Design
A special thanks to Linda Olafsdottir for her
beautiful illustrations.
And thanks to Jason Grigsby,...
© 2010 Ginsburg Design
How to stay in touch:
@suzanneginsburg
www.ginsburg-design.com
My book on Amazon:
http://amzn.to/9N...
© 2010 Ginsburg Design
Thanks for coming!
Questions?
Upcoming SlideShare
Loading in...5
×

Wrangling Apps in the Smartphone Wild West

3,244

Published on

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.

Published in: Design
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,244
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
78
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Wrangling Apps in the Smartphone Wild West

  1. 1. © 2010 Ginsburg Design Wrangling apps in the Smartphone Wild West @suzanneginsburg
  2. 2. © 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
  3. 3. © 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.
  4. 4. © 2010 Ginsburg Design Structure of talk: We’ll start out discussing “web” apps then dive into “native” apps.
  5. 5. © 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.)
  6. 6. © 2010 Ginsburg Design Now let’s get started…
  7. 7. © 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.
  8. 8. © 2010 Ginsburg Design For a short time, Apple was the only major smartphone app store in town.
  9. 9. © 2010 Ginsburg Design Innovation was off the charts. Hundreds of apps were approved each day.
  10. 10. © 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…
  11. 11. © 2010 Ginsburg Design Designers started to fret. Would they have to design their apps twice, three times, four times, or more?
  12. 12. © 2010 Ginsburg Design What’s a smartphone app designer to do?
  13. 13. © 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…
  14. 14. © 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.)
  15. 15. © 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.
  16. 16. © 2010 Ginsburg Design Offline access (Gmail) GPS (prop.erti.es) Game (BeatTouch) Web App Examples:
  17. 17. © 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.
  18. 18. © 2010 Ginsburg Design Cornell University Disney Web Radio Improving Web App Access (post discovery phase):
  19. 19. © 2010 Ginsburg Design #2. Does your app require multi-tasking support?
  20. 20. © 2010 Ginsburg Design Listen to music (Pandora) Upload photos (Flickr) Take calls (Skype) Multi-Tasking Examples:
  21. 21. © 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).
  22. 22. © 2010 Ginsburg Design #3. What is your monetization strategy?
  23. 23. © 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.
  24. 24. © 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.
  25. 25. © 2010 Ginsburg Design So what now?
  26. 26. © 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 

  27. 27. © 2010 Ginsburg Design # 1. The One Trick Pony
  28. 28. © 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.
  29. 29. © 2010 Ginsburg Design Convertbot Voices Smule One Trick Pony Examples:
  30. 30. © 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!
  31. 31. © 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
  32. 32. © 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).
  33. 33. © 2010 Ginsburg Design Sketching: Dane Petersen Marcin Ignac Daniel Chang
  34. 34. © 2010 Ginsburg Design Prototyping, on the other hand, can be quite different between platforms since there are many platform-specific solutions.
  35. 35. © 2010 Ginsburg Design First, let’s look at some platform agnostic solutions…
  36. 36. © 2010 Ginsburg Design Prototyping—Platform Agnostic: HTML (Marcin Ignac) Keynotopia + GoodReader Paper (Braman, Lau, Nomikos)
  37. 37. © 2010 Ginsburg Design Prototyping—Windows 7 Paper Prototype: Courtesy Sara Summers
  38. 38. © 2010 Ginsburg Design http://johnnyholland.tv/post/1257269180/prototyping-for-elmos-monster-maker-iphone-app- ideo Prototyping—Video:
  39. 39. © 2010 Ginsburg Design And now some platform specific solutions…
  40. 40. © 2010 Ginsburg Design Prototyping—Microsoft Expression Blend: http://www.microsoft.com/showcase/en/us/details/61ed7e86-0b1c-432e-a1fb-a882f95ec250
  41. 41. © 2010 Ginsburg Design Prototyping—iOS: http://www.getreviewapp.com/ http://liveview.sourceforge.net/ http://giveabrief.com/
  42. 42. © 2010 Ginsburg Design Prototyping—Android App Creator: http://appinventor.googlelabs.com/about/index.html
  43. 43. © 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.

  44. 44. © 2010 Ginsburg Design # 2. The O.K. Corral
  45. 45. © 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).
  46. 46. © 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.
  47. 47. © 2010 Ginsburg Design Potential differences to keep in mind: - Display size & resolution - Device interaction with display - Supported gestures - UI Controls - Animations - Landscape vs. Portrait
  48. 48. © 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
  49. 49. © 2010 Ginsburg Design Navigation Differences
  50. 50. © 2010 Ginsburg Design Navigation Differences Pivots Tab Bar Quick Actions
  51. 51. © 2010 Ginsburg Design Information Hierarchy
  52. 52. © 2010 Ginsburg Design Widgets
  53. 53. © 2010 Ginsburg Design Widgets
  54. 54. © 2010 Ginsburg Design Gesture Differences are also critical: http://www.lukew.com/ff/entry.asp?1071
  55. 55. © 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.
  56. 56. © 2010 Ginsburg Design # 3. The Trojan Horse
  57. 57. © 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.

  58. 58. © 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).
  59. 59. © 2010 Ginsburg Design Device/OS customization depends on: - App genre - Device capabilities - Design strategy (philosophy?)
  60. 60. © 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.
  61. 61. © 2010 Ginsburg Design Trojan Tools: http://www.phonegap.com http://www.appcelerator.com/ http://www.rhomobile.com/
  62. 62. © 2010 Ginsburg Design Trojan Examples: Koombea with RhoMobileJimmy Fallon with TitaniumKeyPoint with PhoneGap
  63. 63. © 2010 Ginsburg Design And, finally, another option to keep in mind is to create a web app that can be accessed via the browser.
  64. 64. © 2010 Ginsburg Design Web App Tools:
  65. 65. © 2010 Ginsburg Design Web App Example:
  66. 66. © 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!) 

  67. 67. © 2010 Ginsburg Design “Courage is being scared to death but saddling up anyway.” John Wayne
  68. 68. © 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.
  69. 69. © 2010 Ginsburg Design How to stay in touch: @suzanneginsburg www.ginsburg-design.com My book on Amazon: http://amzn.to/9NH4RC
  70. 70. © 2010 Ginsburg Design Thanks for coming! Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×