In this mobile UI patterns article we will build a flowchart depicting the screens needed to handle user registration, login and logout in a mobile application. As a UX designer, it’s very important that you are familiar with these screens and how the interact with each other.
Let’s start by taking a look at the typical application launch sequence.
An Application’s Launch Sequence
A large number of applications have a launch sequence that takes users to a Landing Page or Landing Screen, however you like to call it, from where they have access to deeper areas of the app. We could draw this UI pattern like this:
The Login Flowchart
Most apps provide personalization features that require a user to have an account in the app. In those applications the launch sequence changes quite a bit. For starters, when users arrive at the Landing Page and you don’t know who they are, you need to redirect them to a Login Page where they will enter their credentials:
Upon successful login you will take users back to the Landing Page.
To protect users and your app, you should consider locking user accounts for a period of time, or permanently, after a number of unsuccessful login attempts. If you do so, you will need to add an Account Locked page where you will let users know what happened.
The Signup Flowchart
As users must have an account in the app in order to log in, you need to create a page that will allow them to sign up for such account. On the Login Page you will offer a path to this Signup Page:
After users enter their profiles through the Signup Page, you will send them a message asking them to confirm their email address. The message will contain a link to a page that can be in or outside your app, which they will need to access in order for you to confirm that they received the message. You will take users back to the Login Page once they confirm their email address.
The Password Reset Flowchart
You need to offer an easy way for the users of your app to reset their passwords. A common approach to password reset consists of emailing users a temporary password, while giving them access to a page where they can use the temporary password to create a new permanent password.
After sending the temporary password, you will display a confirmation page that will offer access to the page where the user can create a new password. Alternatively, you can skip the confirmation page a navigate directly to the “new password” page.
The Logout and User Profile Pages
We are missing two more pages to complete this screen flow. First would be the Logout Page, which will allow users to manually end their session in the app; and last would be the User Profile Page, which is where users can change their personal information in the app.
Summary and Next Steps
In this mobile UI patterns article we built a flow chart depicting the screens that you would need to create in order to implement User Registration, Login and Logout features in a mobile app. These screens are essential in modern applications, as they are the foundation of any personalization features that we build into the apps. While there are variations to the approach I showed you in this article, the concepts behind them are similar.
Do you follow a different approach? Please let us know by leaving a comment.
All the Chapters of this Series
You can find all the published parts of this series here: The Meeting Room Booking App Tutorial.
Don’t miss out on the updates! Make sure to sign up for my newsletter so you can get MiamiCoder’s new articles and updates sent free to your inbox.