Different Approaches to Mobile App Design

by Luke Wroblewski November 17, 2010

In her presentation on iPhone, Android, and Windows, Oh My! What's a Mobile App Designer To Do? on Google's campus last night, Suzanne Ginsburg (author of Designing the iPhone User Experience) outlined several approaches to designing native mobile applications.

  • In July 2008 Apple released API t build native apps. Mobile Web was all that was available before. Following that, more app stores were released including: Oct 2008 Android, April 2009 Blackberry App World, Oct 2010 Windows Phone.
  • Do you need to design apps more than once to account for all these app stores?

Do You Need a Native App?

  • Figure out if you need a native app first. Web apps can be a viable solutions in many cases.
  • Unless your solution requires access to OpenGL, hardware access, or device content –you might not need a native app. Web apps can store data offline, access GPS info and more enhancements are coming.
  • People assume Web app won’t be found but there are over 300,000 apps on Apple’s store. It's not that easy to stand out there.
  • Does your application require multi-tasking support? If you want things to run in the background while the user does other tasks –you'll need a native app.
  • What is your monetization strategy? If you are planning on using subscriptions or one-time payments, you may find it more profitable to use a native app.
  • Device access, multi-tasking, and micropayments are the primary reasons to go with a native app.

Three Options for Native Apps

  • If you do need a native app, there's three approaches to consider: One Trick Pony, OK Corral, or Trojan Horse
  • One trick pony: build for one native platform if your user base is mostly on that platform or your must-have features are only on that platform.
  • • OK Corral: design your app for 2-3 flagship platforms. Use this approach if your users are on a few platforms and you want the best experience possible on each. If you follow this approach make your first sketches device agnostic then compare differences across devices and OSs to see how they impact user experience.
  • Potential differences include: display size & resolution, device integration with display, supported gestures, UI controls, animations, and landscape vs. portrait. On iPhone, you need to add a horizontal mode. On Android it’s turned on by default.
  • The navigation differences between single hardware and multiple hardware control devices can lead to usability issues.
  • Look at what is similar between devices vs. what’s different –it’s a lot more consistent than not. iPhone uses switches for on/off checkboxes, Android & Windows Phone has checkboxes and switches. Core gestures are pretty similar across core platforms.
  • Trojan Horse: you create Web apps with native app capabilities by wrapping Web apps within native application code.
  • Device/OS customization depends on App genre and capabilities. If you are designing a game it could be consistent across platforms. Some features might need to be turned off on some platforms.
  • Trojan tools: Phone Gap, Titanium, Rhomobile provide the promise of cross-platform support. They provide a bridge for Web developers moving to mobile apps.

In All Cases

  • Learn the UI guidelines & device’s technical specs. Windows Phone has great documentation on design guidelines.
  • Explore related apps in depth
  • Sketch, prototype, and test a lot! Don’t download templates right away –they may limit your ideas.
  • Sketching is pretty consistent across platforms but prototyping between platforms requires different tools. You can use paper, HTML, or presentation software like Keynote & PowerPoint to do rapid prototypes across platforms.
  • Microsoft Expression Blend is a prototyping tool for Windows Phone that can evolve to running code. Apple prototyping tools include: Review and Briefs. Android: Android App Creator is in Google Apps

The Fourth Approach

  • Make a Web app!
  • Web app tools: Sencha Touch and jQuery Mobile