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: