Let’s quickly chat about mobile app user experience. I can’t be the only person who has downloaded an app and been let down in a big way about the experience. Whether it was poor onboarding (so I couldn’t find how to do things), weird placement of navigation (so I kept instinctively tapping the wrong thing), or worse yet — tapping something took two hands because the most important button was placed in an unreachable place for one thumb to get to while also holding the phone.
Only me? 🙄 Well this just got awkward.
All of the aforementioned are definitely things to pay attention to when creating your mobile app, but that’s not what we’re talking about today. Here’s something that may be a little lesser known: three screen types to a great mobile app experience… every single time. That’s right, just rinse & repeat these three different screen types & you’re well on your way to creating a mobile app that flows nicely & has the experience your users are looking for.
It’s probably prudent to mention — these aren’t the only screen types for a great mobile app experience but if you only had these three, you can definitely create some fire apps. 🔥
The List Screen
Anyone want to take a guess at what the list screen is made of? If you said, “a list,” ding, ding, ding. 🛎️ Like the name suggests, a list screen is made up of a list of…. anything that is central to your app.
Let’s take a look at some popular apps on my phone to check out some of the lists these companies use:
Twitter
When logging into the Twitter app, you quickly notice that your feed of tweets is actually just a list screen.
AirBnB
After you’ve decided on the perfect destination & landed on the perfect dates — the results of your AirBnb search is displayed in a beautiful list.
Starbucks
Starbucks displays their delectable treats & beverages in a list for you to order from!
See — lists are everywhere! Let’s think a little bit about different types of apps that you might want to make & how list screens could be used:
- Creating an app for your restaurant? Perfect! Your list likely includes menu items.
- How about an app for a salon? Your list could have services you offer.
- Making the next social media phenomenon? A list of posts is what you’ll be looking for.
- What about an app for fitness? A list of workouts would be ideal.
I think you get the idea — there are lists in so many apps, so it’s likely that you’ll be using lists in your app too. Just like the apps mentioned, when planning out your mobile app think about the information your users are going to care about.
What lists will you use to display this information?
A Details Screen
The next type of screen you’ll need for each list is a details screen so your users can go another level deeper & learn more about an item in the list. Let’s use the examples from above to explain what a details screen could include:
- Remember that restaurant's app? The detail screen could include a description of the selected item, a way to order that item, & an appetizing picture. Yum!
- For the salon app: a description of the massage & what’s included in the spa package that everyone loves.
- The fitness app — a breakdown of the activities with reps & sets would be perfect for this details screen.
At this point, you may be thinking — for every item I display, I’ll need to create a details screen? That’s a lot of work! I agree. That would be a lot of work.
But, that’s where the magic of relational databases comes in. With the proper database, you’ll set up one list screen & one details screen and the information will dynamically be pulled in based on what the user does.
The Create/Edit Screen
In the process of making a mobile app, sometimes it’s easy to forget what a user needs in order to feel like they are able to fully use the app. This screen is the easiest to forget.
While creating the app, since you have full control over edits & which information appears where — you forget that when your app is released, your users will not have the same editing freedom as you. Unless you build it in. That’s where the create/edit screen comes into play.
To give you a little more context — the create/edit screen will allow users to add things to the list or add things to their list & edit those. I’ll show you what I mean while using the examples from above.
- In the restaurant app, while you wouldn’t want a user adding a new menu item — it does make sense that the user would be able to customize how they would like their fries (extra crispy with a side of ranch, please).
- For the salon app, perhaps a user might have special instructions for their service — a latex allergy or a nail color selection.
- In the fitness app, the user could want to write down times, weight, distance, or more to keep track of their workouts.
For any of the above apps, the create/edit screen would be necessary in order to customize the user experience.
One caveat, not all users should get create & edit access. If you’re making an app for teachers & students, for example, a student should not be able to edit assignment instructions — only a teacher should be able to do that.
While making your app, it’s a good exercise to go through who will be using your app & what control should they have over the information that is displayed. Here are some questions to ask yourself while creating:
- What can the user create or edit?
- What can’t the user create or edit?
- Do different types of users have different creating & editing permission?
- Is the information that is displayed created by the app owner or the app user? | For example, in a social media app the user is creating the information which usually means they should have control over editing that. While in a salon app, the user does not create services — so only the app owner would have permission to change that information.
Other Screen Types to Consider
A list screen, details screen, & add/edit screen are the three main types of screens you’ll continually create throughout your apps. In fact, let’s make a new rule: each time you create a list, you will also create a details & add/edit screen. Sign that into law. Now that you understand how these three screen types work together, you’ll notice this pattern repeats itself over & over in all your favorite apps — it’s similar to how all pop songs are played with the same chords!
While these three screen types are foundational to a great app experience, there are a few other screens that you’ll likely want to add to your app.
A Dashboard Screen
Most apps you use have a home screen & oftentimes that screen is made up of a list — but other times, you’ll notice charts & graphics that display information: a dashboard!
These screens are the best place to provide your users with the most important information — from information that is about their use or maybe gives them insight to a larger data set, or a little bit of both, the Dashboard Screen is where it’s at.
A Success Screen
A Success Screen is to let the user know that the action they have taken was successful.
Did the user finalize their order? Success Screen.
Did the user share their post? Success Screen.
Did the user log an activity? Success Screen.
Was the information they input saved? Success Screen.
When a user completes an action, they’re looking for confirmation that everything is going according to plan and that the expected behavior for the action went off without a hitch! This is exactly what success screens are for. Without these types of screens, you can likely expect an email from your user asking whether or not they really placed their order… and ain’t nobody got time for that.
A Confirmation Screen
So this screen sounds a lot like the Success Screen. Here’s how I’m choosing to differentiate between the two. A Success Screen is a screen to let the user know that something happened. That’s it. A Confirmation Screen is a screen for the user to let the app know that they really mean to take an action.
This screen is good for asking one more time if the user really wants to delete the data or to review their order before sending it to be fulfilled.
You likely won’t find yourself creating lots of confirmation screens, but a few here & there are considerate for your user and can save you from a lot of headaches from users who didn’t mean to do something & are now trying to figure out how to undo.
A Navigation Screen
Are you familiar with the little hamburger icon that you find (most times) in the top right corner of your app screen? It’s three little lines & pulls out a navigation screen! Didn’t know that’s what that icon was called — well now you know!
You might be thinking — well those just appear as a list… so isn’t that a list screen like mentioned above? The reason we consider this a different screen is because the navigation unites different actions you can take in an app. When clicking on a list item, it takes you to a details screen about that list item. The navigation is different. For each item you click within the menu, you can be taken to different parts of the app that have completely different purposes.
Most apps you’ll make will have a navigation screen, in fact, I’m coming up short on thinking of an app that doesn’t have a navigation screen (and provides a good user experience)... Either way, the reason I’m not including this in the main list of screens from above is because with the other three main screens, you’ll continually make those over & over again throughout your app! Navigation appears once.
An Onboarding Screen
When a user first enters your app — an onboarding screen is the screen or screens that welcome the user & show them how to gain value from your app quickly. Whether these screens showcase features or how to take a certain action in your app is a case-by-case basis but one thing is for sure, a smooth onboarding experience can influence whether a user activates in your app, whether a user is retained in an app, & whether a user tells their friends!
What does this mean for you & your app?
User experience will quickly determine whether or not your app will be successful in the long run — both for retaining users & gaining new ones!
With the rise of no-code tools to create mobile apps, there are many new creators entering the space that will not have a background in creating a mobile app user experience. In larger organizations, there may be many employees in charge of getting the user experience (UX) right, but for those of us that are solopreneurs or on a much smaller team — creating good UX is up to us.
Using a no-code mobile app platform, like Adalo, means you’re now the developer, the UX Designer, & the Product Manager. Learning and iterating on the screen types mentioned above will quickly simplify the work you need to do to get your app one step closer to launch.
