The most successful mobile apps out there have certain things in common. To start with, they somehow manage to be unique and predictable at the same time. They deliver something of value that users either want or need in their lives, pulling them in and refusing to let go for minutes at a time. But that’s not all.
Sometimes the similarities are much more specific. For instance, many of the most successful apps use the same types of screens to deliver their features and content. Today we have a closer look at 11 of those screens and dissect them one by one.
1. “Getting Started”
In most cases, “Getting Started” isn’t a single screen, but rather a sequence of screens that the user can swipe through. Here’s an example from an app called Tally:
What’s important about helping the user get started is to first introduce them to the app itself, its purpose, and then show them only the most basic features that the app offers. Trying to introduce the user to every feature all at once could discourage rather than excite.
Furthermore, a quality “Getting Started” sequence is even more important if the app happens to be using various gestures and other forms of interaction that might not be obvious to a new user.
2. “Newsfeed”
“Newsfeed” is the home screen of many apps like Instagram, Facebook, CNN, and others. The main goal is to show the most recent activity in the app and encourage users to contribute to that activity themselves. It suggests “what to do.”
Instagram does this particularly well. New features in the app, such as Instagram Stories, are truly laser-focused on encouraging user interaction. With Instagram Stories, the app shows your own profile picture next to the most recently published stories (see above), thus subtly nudging you to add a story of your own.
3. “Here’s What to Do”
One of the main trends in app design these days is keeping things content-centered. This means that whatever main feature your app offers, it needs to be easily accessible for the user.
Some apps take this rule to the extreme, and go straight to their “Here’s What to Do” screens right upon launch and without a home screen.
Two examples of that are the apps Scannable and Wally. Both apps launch directly onto their “Here’s What to Do” screens. With Scannable, the app lets you scan for a document immediately upon opening, and begins looking through the phone’s camera for a document to scan. With Wally, it lets you add an expense immediately.
Think what it is that the user is going to be doing 99 percent of the time when interacting with the app. If there is such a thing, make that your “Here’s What to Do” screen.
4. “What’s New”
The “What’s New” screen is much like that initial “Getting Started” guide, but it focuses only on what has been added to the app since the last update — the evolution. This is very useful in onboarding the user after an update and making sure that they benefit from all the new features.
The form and the presentation of the screen can — and probably should — remain exactly the same as the “Getting Started” sequence.
Here’s an example from Adobe Spark Post:
5. “User Progress”
The “User Progress” screen (aka “User Path”) is all about the path of an individual user and their progress towards a given goal — a goal that’s an important part of the user’s overall experience with the app.
Let’s take the language learning app Duolingo as an example. The following is the main screen of the app. It takes the user through the individual steps of their learning process and towards finishing a language learning program.
Another example is the popular meditation app Headspace. This app uses the “User Progress” screen in much the same way. Each meditation session is an individual step that the user needs to complete before they can move on to the next one.
6. “Templates”
Any app that allows the user to create something has a learning curve to it. Depending on the complexity of the outcome, that learning curve might be anywhere on the scale of walk-in-the-park to extra-steep.
Therefore, by using a “Templates” screen, you can make it easier for users to get started with the app and get quality results in a hassle-free way. No matter what the nature of the app is, it’s always going to be easier to get started based on a template than from a blank canvas.
Here’s our own example from Adobe Spark Post. It divides the available templates into a handful of categories, and then lets the user work on any of the templates with just one tap.
7. “Shortcuts”
The “Shortcuts” screen can be helpful if your app offers a lot of content and/or features. Being able to add your own shortcuts can be more convenient than having to navigate through numerous menus.
A good example of this in practice is Evernote. The shortcuts are quickly accessible via the app’s main menu.
If there’s still room, or if the user hasn’t added any shortcuts yet, you can also use this space to present some of the recent or most frequently interacted-with elements.
8. “Go Premium”
The “Go Premium” screen (aka “Upgrade” or “Shop”) is usually found in apps built around the freemium model and/or apps that collect micro payments to enable some extra perks.
The 1Blocker app is a good example here. Their “Go Premium” screen achieves a couple of things, it:
- Lists the app’s premium features in a very clear and understandable way
- Displays a visible call to action
- Features a handful of testimonials to prove that the upgrade is worth it
- Doesn’t feel very “salesy,” so the user isn’t forced into upgrading.
9. “Search”
The “Search” feature is pretty much a no-brainer in most utility apps, but a separate dedicated “Search” screen can also be very useful.
The main Google Drive app is a good example of this in practice. Apart from the main search field that you’d expect, there’s a list of the available file types and the possibility to filter the recently modified files.
When building your own “Search” screen, also consider featuring the user’s recent searches, as well as the most frequently used elements within the app.
10. “User Profile”
The “User Profile” screen is understandably one of the most essential screens for any app that deals with user accounts — though a good “User Profile” screen isn’t only about letting people change their passwords. There are several more elements that should be considered:
- Profiles are often portals to the app’s settings. Instead of featuring a separate settings button in the main menu, add it to the “User Profile” screen.
- Showcase the user’s recent activity. A lot of apps do this — Instagram, Twitter, Facebook, and many others.
- Display the user’s saved-for-later items or bookmarks.
- Show the user’s stats if applicable. Quora is a good example.
- Include a section for direct messages.
And, of course, something that should go without saying — you must enable the user to edit all of their account details, as well as let them add profile pictures.
11. “Single Item”
This is the screen that users see whenever they interact with the individual items of what the app is about. For instance, in the case of a podcast app, that screen is the single episode view. For a reader app, it’s the single article view. For a to-do app, it’s a single task, and so on.
Depending on what the app is meant to do, the specific elements that should find their place on the “Single Item” screen are going to be different. However, figuring out what to include is only half the challenge.
The “Single Item” screen is where you get to steer the user towards the most important features. With that, you can teach them how to best interact with the app — thus impacting the overall UX — purely through the placement and the emphasis put on specific features. In Audible, for example, the main focus is on the play/pause and forward/rewind options — likely the most frequent interactions users have with their audiobooks.
What’s next?
Designing a good user experience for a mobile app is about finding the right balance between two things: managing the expectations users have upon seeing the app for the first time, and keeping them sufficiently excited as they discover what’s possible in the app (the “wow factor”).
The individual screens that the app offers will play a key role in making that happen. Depending on the type of app that you’re working on, some of these screens might make more sense than others.
Ultimately, this is a game of predicting what specific groups of features you want to offer your users. For example, if you want to encourage them to continue executing specific tasks one after the other, the “Progress” screen can help with that. If the app is more community-driven, then a “Newsfeed” screen might be a better idea.
We hope that this resource will help you when working on your next Android or iPhone app design!