Mobile app design

By 2020, mobile app revenue is estimated to rise to $189 billion, and the industry continues to expand due to the evolution of smart devices and technology. However, 24% of apps are only used once, and 57% of apps are deleted within a month.

In an infographic by Marketing Profs, statistics show that:

• 71% of users uninstall apps due to annoying notifications.
• 41.3% note intrusive advertising (that jumps to 65.6% with gaming apps!).
• 29.6% cite privacy concerns, which can include forced opt-ins and social logins.
• 15.6% are more specific with their concerns, citing overly-complex registration.
• 26.8% blame suboptimal overall user experience, especially with business apps.

As you can see, mobile app design contributes heavily to app retention rates.

What is mobile app design?

Mobile app design is the task of designing mobile applications. Even though mobile apps have a wide variety of uses, what unifies them is the need for optimal usability, accessibility, engagement, and overall user experience. In short, addressing all the above concerns.

Mobile app vs. web design

Mobile app design is a little different than mobile web design, and we need to bare this in mind when designing to ensure we approach it in the right way.

Mobile hardware

First, let’s consider mobile hardware. Even though modern websites are now able to access certain device features such as the camera, native mobile apps have access to a wider variety of hardware features like fingerprint security sensors, which aren’t widely supported on the web.

Operating systems

Mobile apps can also leverage deeply ingrained features of the operating system. A key example of this could be the platform’s respective app stores (Apple App Store, Google Play Store), which offer various methods of monetization right out of the box, including in-app purchases and subscriptions.

Transitions

Mobile applications support animations much better than websites do; in fact, some screen transitions are readily available for developers to implement. This is why we’re able to utilize transitions when prototyping with screen design tools.

SVG support

One feature that we can’t utilize in mobile app design is SVG.

Performance is a huge concern when it comes to mobile apps. While vector file formats need to be calculated, PNG files are embedded into the app and loaded on the loading screen. Because PNG files are not resolution-independent vector formats like SVG files, we need to export image assets in a variety of resolutions to cater to the various HDPI and retina devices on the market. Luckily, screen design tools allow designers to hand off assets in all resolutions.

Responsive design

While mobile apps still need to cater to a variety of devices and screen sizes (especially Android apps), it doesn’t come close to the burden of websites. Most mobile apps can be designed using basic responsive resizing features.

iOS vs. Android mobile app design

Both Apple and Android have their own set of rules and recommendations that outline how best to approach user interface design. Apple refers to this as their Human Interface Design Guidelines, and Android uses their Material Design. Both have their own quirks, so it’s well worth it to read these documents.

Device resolutions

Apple apps require assets to be exported at 1x, 2x, and 3x.

Android apps require 1x, 1.5x, 2x, 3x, and 4x.

Tablet vs. phone mobile app design

Much has been said about the way we hold mobile devices versus how we interact on desktop, but differences between mobile devices and tablets exist too. Common usability concerns such as reachable tap targets are magnified with tablet design: More screen real estate means that tap targets are generally even farther away. Tablet apps are also more likely to be used in landscape orientation.

Mobile app design best practices

Leveraging device software and hardware

As mentioned earlier, mobile apps can leverage almost any aspect of their operating system, from cameras, device storage, and app stores to fingerprint sensors, credit card scanners, and more. It’s unnecessary to reinvent the wheel when iOS and Android offer native UI elements and functions that users already enjoy and know how to use.

Create meaningful screen transitions

What’s the difference between a slide and a push?

A slide reinforces the impression that the previous screen is still underneath, as if the user might want to revert back to it (like reading the full Tweet in a new screen, then returning to the feed). A push shoves the previous screen out of view, suggesting that it’s safely out of the way for users that don’t want to return to it.

Transitions are not equal, so make sure you’re thoughtful about which ones you choose.

Create beautiful app icons

Twenty-one percent of users delete apps because the icon makes their home screen look terrible. Although this applies specifically to millennials, it’s an important consideration.

Design anticipatory loading screens

Loading screens are essential. By having everything already loaded—minus database calls—the rest of the app experience is more efficient. That being said, long load times can be a major turn-off, so build anticipation with exciting imagery.

Don’t overuse notifications

As discussed earlier, 71% of users uninstall apps because of notifications. This is extremely common with the 55+ demographic, although millennial users often complain of excessive notifications (despite claiming to want them originally). Mobile users are very fickle, so don’t forget to use A/B testing and analytics in your workflow.

Create a better overall user experience

Mobile apps are a rapidly-expanding industry, and while there are a number of non-design-related concerns that cause users to uninstall apps, a substandard overall user experience contributes heavily to app retention rates. InVision Studio helps to alleviate concerns with features like responsive resizing (for responsive design), exporting (for catering assets to all device resolutions), and screen transitions.