11 powerful examples of responsive web design
Mobile phones and tablets are responsible for 56.74% of global internet usage. Having a responsive website is a necessity—not an option....
Read MoreBy 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:
As you can see, mobile app design contributes heavily to app retention rates.
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 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.
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.
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.
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.
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.
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.
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.
Apple apps require assets to be exported at 1x, 2x, and 3x.
Android apps require 1x, 1.5x, 2x, 3x, and 4x.
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.
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.
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.
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.
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.
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.
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.