Your SlideShare is downloading. ×
0
Wrangling apps in the Smartphone
   Wild West
              @suzanneginsburg




                                 © 2011 G...
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 perspe...
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 A...
For a short time, Apple was the only
major smartphone app store in town.




                                  © 2011 Gins...
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 (...
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?




                                   © 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…




       ...
#1. What problem are you trying to
solve?
(Let’s assume you’ve conducted upfront user research—
shadowing, diary studies, ...
Unless your solution requires OpenGL
(Graphics Library), hardware access (e.g.,
sensors), or device content (e.g., photos)...
Web App Examples:




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




                             ...
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 ...
Improving Web App Access (post-discovery phase):




     Cornell University



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




                                  © 2011 Ginsburg Design
Multi-Tasking Examples:




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




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




                                 © 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...
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?




               © 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	
  




           ...
# 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 y...
One Trick Pony Examples:




Convertbot by tapbots   Voices by tap tap tap   Ocarina by Smule



                         ...
What you need to do:

- Learn the UI guidelines for the OS.
- Read the device’s technical specs.
- Explore related apps in...
UI Guidelines:




 http://developer.apple.com/library/ios/#documentation/userexperience/    http://developer.android.com/...
Sketching for different smartphone
platforms is essentially the same except
some may incorporate the device more
than othe...
Sketching:




 Dane Petersen                  Daniel Chang




                 Marcin Ignac     © 2011 Ginsburg Design
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…




                                     © 2011 Ginsburg Design
Prototyping: Platform Agnostic




    Paper (Braman, Lau, Nomikos)    HTML (Marcin Ignac)




    Keynotopia with GoodRea...
Prototyping: Windows 7 on paper




  Courtesy Sara Summers
                                  © 2011 Ginsburg Design
Prototyping: Video




      http://johnnyholland.tv/post/1257269180/prototyping-for-elmos-monster-maker-iphone-app-
     ...
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-a882f...
Prototyping: iOS




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




 Apple’s iOS Interfac...
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 tha...
# 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
con...
What you need to do:

- Try to make initial sketches device agnostic.
- Then compare device & OS differences to
assess imp...
Potential differences to keep in mind:

- Display size & resolution
- Device interaction with display
-  Supported gesture...
Device Differences: Droid S vs. iPhone 4




        4-inch display         3.5-inch retina display
        480 x 800 reso...
Navigation Differences




                         © 2011 Ginsburg Design
Navigation Differences




                 Tab Bar
                           Pivots
Quick Actions


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

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




                        © 2011 Ginsburg Design
With the Trojan Horse approach, you
can create web apps with native app
capabilities.
They are essentially web apps
wrappe...
What you need to do:

- Determine level of device/OS customization.
- Choose tool to support your cross-platform
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 ...
Trojan Tools:




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




                     h...
Trojan Examples:




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




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




            ...
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...
“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 K...
How to stay in touch:
@suzanneginsburg


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




                        © 2011 Ginsb...
Thanks for coming!
Questions?




                     © 2011 Ginsburg Design
Upcoming SlideShare
Loading in...5
×

Wrangling Apps in the Smartphone Wild West (January 2011)

1,659

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
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,659
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of " Wrangling Apps in the Smartphone Wild West (January 2011)"

  1. 1. Wrangling apps in the Smartphone Wild West @suzanneginsburg © 2011 Ginsburg Design
  2. 2. About me: © 2011 Ginsburg Design
  3. 3. Motivations & definitions… © 2011 Ginsburg Design
  4. 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
  5. 5. Now let’s get started… © 2011 Ginsburg Design
  6. 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. 7. For a short time, Apple was the only major smartphone app store in town. © 2011 Ginsburg Design
  8. 8. Innovation was off the charts. Hundreds of apps were approved each day. © 2011 Ginsburg Design
  9. 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. 10. Designers started to fret. Would they have to design their apps twice, three times, four times, or more? © 2011 Ginsburg Design
  11. 11. What’s a smartphone app designer to do? © 2011 Ginsburg Design
  12. 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. 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. 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. 15. Web App Examples: Offline access (Gmail) Gyroscope (Occipital) Game (BeatTouch) © 2011 Ginsburg Design
  16. 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. 17. Improving Web App Access (post-discovery phase): Cornell University © 2011 Ginsburg Design
  18. 18. #2. Does your app require multi-tasking support? © 2011 Ginsburg Design
  19. 19. Multi-Tasking Examples: Listen to music (Pandora) Upload photos (Flickr) Take calls (Skype) © 2011 Ginsburg Design
  20. 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. 21. #3. What is your monetization strategy? © 2011 Ginsburg Design
  22. 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. 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
  24. 24. So what now? © 2011 Ginsburg Design
  25. 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. 26. # 1. The One Trick Pony © 2011 Ginsburg Design
  27. 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. 28. One Trick Pony Examples: Convertbot by tapbots Voices by tap tap tap Ocarina by Smule © 2011 Ginsburg Design
  29. 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. 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. 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
  32. 32. Sketching: Dane Petersen Daniel Chang Marcin Ignac © 2011 Ginsburg Design
  33. 33. Prototyping, on the other hand, can be quite different between platforms since there are many platform-specific solutions. © 2011 Ginsburg Design
  34. 34. First, let’s look at some platform agnostic solutions… © 2011 Ginsburg Design
  35. 35. Prototyping: Platform Agnostic Paper (Braman, Lau, Nomikos) HTML (Marcin Ignac) Keynotopia with GoodReader Flash (Alfresco) © 2011 Ginsburg Design
  36. 36. Prototyping: Windows 7 on paper Courtesy Sara Summers © 2011 Ginsburg Design
  37. 37. Prototyping: Video http://johnnyholland.tv/post/1257269180/prototyping-for-elmos-monster-maker-iphone-app- ideo © 2011 Ginsburg Design
  38. 38. And now some platform specific solutions… © 2011 Ginsburg Design
  39. 39. Prototyping: Microsoft Expression Blend http://www.microsoft.com/showcase/en/us/details/61ed7e86-0b1c-432e-a1fb-a882f95ec250 © 2011 Ginsburg Design
  40. 40. Prototyping: iOS http://www.zambetti.com/projects/liveview/ Apple’s iOS Interface Builder http://giveabrief.com/ © 2011 Ginsburg Design
  41. 41. Prototyping: Android App Creator http://appinventor.googlelabs.com/about/index.html © 2011 Ginsburg Design
  42. 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. 43. # 2. The O.K. Corral © 2011 Ginsburg Design
  44. 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. 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. 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. 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
  48. 48. Navigation Differences © 2011 Ginsburg Design
  49. 49. Navigation Differences Tab Bar Pivots Quick Actions © 2011 Ginsburg Design
  50. 50. Information Hierarchy © 2011 Ginsburg Design
  51. 51. Widgets © 2011 Ginsburg Design
  52. 52. Widgets © 2011 Ginsburg Design
  53. 53. Gesture Differences may also be critical: http://www.lukew.com/ff/entry.asp?1071 © 2011 Ginsburg Design
  54. 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. 55. # 3. The Trojan Horse © 2011 Ginsburg Design
  56. 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. 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
  58. 58. Device/OS customization depends on: - App genre - Device capabilities - Design strategy (philosophy?) © 2011 Ginsburg Design
  59. 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
  60. 60. Trojan Tools: http://www.phonegap.com http://www.appcelerator.com/ http://www.rhomobile.com/ © 2011 Ginsburg Design
  61. 61. Trojan Examples: KeyPoint (PhoneGap) Jimmy Fallon (Titanium) Koombea (RhoMobile) © 2011 Ginsburg Design
  62. 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
  63. 63. Web App Tools: © 2011 Ginsburg Design
  64. 64. Web App Example: © 2011 Ginsburg Design
  65. 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
  66. 66. “Courage is being scared to death but saddling up anyway.” John Wayne © 2011 Ginsburg Design
  67. 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. 68. How to stay in touch: @suzanneginsburg My book on Amazon: http://amzn.to/9NH4RC © 2011 Ginsburg Design
  69. 69. Thanks for coming! Questions? © 2011 Ginsburg Design
  1. A particular slide catching your eye?

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

×