UX DesignNEW InVision Studio

Mobile App Design Tips, Warnings, and Statistics

Learn how to approach mobile app design — or read this article and more in our ebook: A Beginner’s Guide to Designing UX. Read offline, any time, on any device 🎉

Buy $10

Quick summary

Even though mobile app revenue is forecast to be a whopping $189 billion in 2020, 60% of apps have never been downloaded. 57% of apps are deleted within 30 days.

What you'll learn

  • Mobile app statistics
  • Interaction design
  • Leveraging device hardware
  • Designing app icons
  • Gamification and app engagement

Mobile App Statistics

According to mobile app revenue statistics collected by Statista, mobile apps accumulated a total revenue of $88 billion in 2017, however, this value is forecast to be a whopping $189 billion in 2020. This is a huge increase, but what’s missing from this statistic is the fact that 60% of apps have never even been downloaded, and 24% of apps that are downloaded are used only once. 57% of apps are deleted within 30 days.

With the mobile app industry booming in terms of app revenue, it’s quite shocking to hear that so many apps are uninstalled, abandoned, or simply ignored altogether.

Why is this happening? 🤔

Well, the fact is, most apps don’t do well—the surge in mobile app revenue is due to the fact that apps that do do well, do very well, indicating that there’s a secret sauce to mobile app design that only a few of us are tapping into. Let’s take a closer look how better app design helps to reduce uninstalls and increase mobile app engagement.

Increasing mobile app engagement with better design

Follow Platform Design Guidelines

Mobile operating systems often create their own design languages. Google has one, Apple has one, and they adhere to these design languages when creating the look, feel, and functionality of their OS (and tie-in apps). Google’s Android uses the Material Design System (as do all Google apps, mobile or otherwise), and Apple’s iOS uses the Human Interface Guidelines. These design languages inform how best to approach mobile app design in a way that’s consistent with how the mobile OS looks and feels.

This means that:

  • We can utilize the OSs GUI components in our design, and…
  • Mobile users will feel somewhat familiar with our apps right away

It doesn’t mean that:

  • Mobile apps will lack visual appeal, or…
  • Won’t fit with the brand’s visual aesthetic

Mobile app designers that understand the relevant design language before embarking on a mobile app design, will find themselves designing much better user experiences. Besides this, these design documentations are a treasure trove of useful information!

Here they are again: Material Design System ~ Human Interface Guidelines.

Google’s Material Design System

Follow General Usability Guidelines

62% of users will uninstall an app that doesn’t work well.

Platform-specific design languages aside, every mobile app will benefit from run-in-the-mill usability and accessibility improvements. We covered these tips in our usability and accessibility articles, but we also talked a little bit about mobile design in our responsive design article. Both the Material Design System and Human Interface Guidelines also include standard mobile usability tips, so they’re well worth a read.

Master the Art of Interaction Design

Mobile apps (compared to the mobile web) benefit from much better performance when it comes to animation, allowing for the design of meaningful interactions that not only create more dynamic experiences, but also add more clarity to the action’s result.

A violent shake could indicate an error, for example.

Most screen design tools (for instance, InVision Studio, Framer Studio, Adobe XD, Figmanot Sketch, unfortunately) have readymade screen transitions built-in. Of these tools, InVision Studio and Framer Studio also have timeline-based animation features.

Where transitions accompany the user as they move to a new screen, timeline-based animations are used to design micro-interactions that happen on the same screen.

Choosing Transitions

Examples of transitions include:

  • Dissolve
  • Pop
  • Flow
  • Flip left/right
  • Slide up/down/left/right
  • Push up/down/left/right

Which screen transition we need to use depends on the type of action that the user is taking—for example, slide up could indicate a modal being dismissed (think: quitting an app by swiping up), whereas slide left could indicate the user moving forward. A flip could indicate more information (think: cards/more information on the reverse side).

Prototyping tools often have these transitions built-in (see below).

Prototyping transitions with Adobe XD

Designing Micro-Interactions

Micro-interactions happen on the same screen, and these are custom-made using timeline-based animation tools. Suitable use-cases for micro-interactions include:

  • Progress/loading bars (e.g. to indicate how much time is left)
  • Scroll-based effects (e.g. to reveal something after x amount of scrolling)
  • Revealing more information that doesn’t require transitioning to a new screen

Interaction design tips:

  • Consider the user intent, what is the user trying to achieve?
  • Did they achieve it? Describe the result with animation
  • Left movement = forward, right movement = backward
  • Bouncy effects are positive, violent effects are negative
  • Long animations frustrate impatient users, and…
  • Short animations are unnoticeable (find the sweet spot)
  • Put clarity first and visual appeal second
  • Most interactions work best when subtle, don’t overdo it

App walkthrough interaction by Divan Raj (below).

Mobile app onboarding micro-interactions

Leverage Device Hardware

Mobile apps have a range of device hardware at their disposal. In fact, Pokémon Go (iOS/Android), which utilizes the device camera and GPS to deliver immersive AR experiences, was the top grossing app in 2017, earning over $2 billion dollars.

Mobile apps can leverage the platform’s payment ecosystem for initial offering via the app store, or even in-app purchases (mobile app revenue statistics indicate that this alone accumulated to $37 billion in 2017). Also, FaceID and TouchID can be used for added security, or simply because users like to avoid typing things when they can.

Device cameras are useful for scanning credit card information.

Don’t reinvent the wheel, make use of device hardware where it makes sense.

Pokémon Go mobile app design

Design Eye-Catching App Icons

Visual design is important, although according to mobile app statistics, this is almost exclusive to millennials with 21% deleting apps because they don’t like how it looks on their home screen 😂. Millennials are masters of home screen curation, and they’re much more likely to move apps into folders or onto secondary screens (where they’re much less discoverable). When designing mobile apps, don’t neglect app icon design!

Don’t forget about loading screens either. As we’ve mentioned, users hate to wait around, but unfortunately loading screens are unavoidable. Design eye-catching loading screens that build interest and anticipation, to make the wait worthwhile.

Raven App Icon & Splash Screen by Ramotion (below).

Splash screen and mobile app icon design

Increase Mobile App Engagement

Push notifications are a tricky subject, especially with millennials. According to mobile app engagement statistics, where 63% of millennials agree to accept notifications, 71% also claim to be annoyed by them. As well as fine-tuning the frequency (too many = annoying), we can also make notifications more tailored, compelling, and motivating.

A notification is more compelling if it’s relevant to the user, and motivates them to take action. Think: if the user has previously looked at, or bought, Crash Bandicoot for PS4, they might also be interested in Spyro the Dragon. In the same line of thinking, if they looked at Crash Bandicoot but found that it was only available for PS4, sending a notification when the Xbox version is released could also engage and motivate the user.

Push notifications can boost conversions significantly, but on the other hand, they can also frustrate users if used thoughtlessly, or so often that they become annoying.

Increasing Engagement via Gamification

Gamification is the art of turning something into a game. This is a trick as old as time—we first fell for it when we were tricked into eating our vegetables. Gamification design can increase our motivation because it taps into the way that we think and feel as human beings—that is—we love to complete sets and obtain rewards. Positive reinforcement can quickly become addictive, and motivates users not only to re-engage when a notification appears, but to feel anxious when the effects of the reward wears off, causing the user to open the app all by themselves, for another round of rewards.

wiMAN Gamification by Vincenzo Menni (below).

Gamification is used to boost mobile app engagement

Conclusion

Mobile app design is a very lucrative industry (especially for designer-developer hybrids), so mobile app designers who know how to reduce uninstalls, boost engagement, leverage mobile app analytics, and overall craft exceptional mobile experiences, stand to earn a significant amount of credibility as an app designer.

If you’re interested to learn more about the fundamentals of UX, download our ebook, A Beginner’s Guide to Designing UX, and get a free .design domain too!

Daniel Schwarz, author

Daniel Schwarz

Daniel Schwarz is a digital designer, web developer, and maker by background, but a writer, editor, 3x author, and teacher at heart. Currently a design blog editor at Toptal and SitePoint, writer at .net Magazine and Web Designer Magazine, but occasionally a collaborator with top design companies such as Adobe and InVision.