When it comes to mobile app design and development, the best way to learn is often by observing what works in successful apps.
This doesn’t mean copying every interface or design element from a popular app — on the contrary — it means looking at what features in a successful app make it both beautiful andfunctional and applying those lessons to your own projects.
Perusing through our favorite apps for iOS and Android — and a few excellent mobile UI pattern blogs — we’ve come up with some lessons that developers and designers can learn from some of the best mobile apps.
A consistent user experience — across all platforms — is something that most design and usability experts encourage. Still, it isn’t always necessary.
One of the most important — and often ignored — elements in interface design, regardless of the platform, is context. Where and how you are using an app or service can (and should) influence its presentation.
The native mobile and tablet experience is wholly unique from the desktop experience. There are commonalities — sure — but the mobile and tablet experience is designed to be easy to touch, navigate and share.
The focus on images, icons to represent actions and clean, crisp typography makes for a great user experience. If anything, we wish the desktop version of Google+ looked more like the mobile apps.
One of the more difficult aspects of mobile app design is showcasing complicated data sets in a concise and digestible way.
StockTouch for iOS is the best example of how to do that the right way.
StockTouch offers a birds-eye view of lots of data points for stocks in various sectors. By tapping on each group, more data is revealed. Tapping on a specific stock brings up detailed — but digestible — charts and information.
More than just textual display, StockTouch also uses colors to clearly show stock movements. That makes it easy to see how a certain sector — or stock — is doing, at a glance.
One of the most common modern mobile and tablet UI conventions is the slide-out navigation panel. Rather than having floating menus or relying solely on upper or lower tabs, users can slide to the left or right of the screen to bring up an extended vertical menu of options or notifications.
The method was first introduced by Facebook in its iPad app, but since then, dozens (if not hundreds) of apps for iOS and Android have started to employ the feature. Ken Yarmosh details some common use cases of this design pattern on his blog.
What we love about Path’s approach is that the slide-outs work on both the left and right side of the app. Sliding in from the left brings up typical menus and user-level notifications. Sliding out from the right brings up friends details and search.
Path — like most apps that employ the slide-out feature — also aligns the slide animation to top buttons — which is great for users that don’t know how to use the feature, or for accessibility purposes.
Spotify for iPad is particularly impressive because it manages to provide a better user experience than even the desktop app.
The app not only supports the iPad’s retina display — it features big cover art, an easy to navigate experience (slide panels at work!) and easy access to search and sharing features.
News.me’s iPhone app [iTunes link] is a great example of how an app that parses feeds (e.g., Twitter, Facebook, RSS) can still make text look beautiful.
Tapping on an article from the News.me feed brings up a beautifully formatted presentation.
This feature isn’t unique to News.me — Instapaper, Pocket, Readability and Flipboard all employ similar motifs — but we really love the way News.me uses typography and appreciate its flow within the great news sharing and discovery experience.
Dealing with text feeds can be difficult — but News.me shows that it can be done with style.
Sparrow for iPhone offers what is arguably the definitive Gmail experience on iOS.
What makes that app really special is its attention to detail. From the slide-out navigation panels to persistent reply and compose buttons, to the ease of adding attachments, the app gets every detail just right.
That’s probably one of the reasons Google saw fit to acquire Sparrow and its team. With any luck, the best elements of Sparrow will make its way into the official Gmail mobile clients.
Just Landed is an app that helps users track inbound flights and plan routes to aid in airport pickup.
The app is beautifully designed — with a simple interface and a unique method of showing when someone needs to leave for the airport. For us, it’s also an example of the importance of clean, clear typography.
With apps like Just Landed — where the majority of the interface elements are text and not graphical buttons — having clear, crisp and readable typography is essential.
It’s easy to fall into the trap of using specialty or decorative fonts in apps but when text is what the user is focusing on, it’s even more important to make that text readable.
A commonly held adage is that iOS apps are better looking — and often, better designed — than Android apps. Perhaps this is because of Apple’s Human Interface Guidelines (HIG), maybe it’s because most mobile apps are still designed for the iPhone first and then ported to Android; whatever the reason, it’s rare to find an Android app that looks better than its iOS counterpart.
With Ice Cream Sandwich — and even more with JellyBean — Google has greatly refined and improved Android’s stock interface. Developers are also stepping up their game and showing that iOS doesn’t have a lock on interface design.
From the sliding navigation panels to the cleaner notes view, Evernote for Android is clean, crisp and easier to use.
While we still tend to find that the best looking mobile apps are often on iOS, Evernote shows that this doesn’t always have to be the case. iOS, Android and Windows Phone devs should take notes.