Mobile UI Patterns – A Flowchart for User Registration, Login and Logout

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:

screen-flow-app-launch

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:

screen-flow-login-locked

Continue Reading →

Mobile App Tutorial: The Meeting Room Booking App, Part 3

This is the third part of a mobile web app tutorial where we are building a Meeting Room Booking app that is used to browse an inventory of meeting rooms and reserve rooms for conference calls and other events.

users-list-and-user-details

An expanded version of this end-to-end tutorial will be included in my upcoming Mobile Web Apps Recipes Book, where I will show you how to develop 8 different mobile applications using Ionic, Sencha Touch, Kendo UI Mobile and jQuery Mobile.

In the previous installments of this series we designed the screens that will allow users to browse a list of available meeting rooms and book rooms for different events. Here are the links those articles:

In this article we will design the administration screens. Through these screens administrators will be able to set up rooms and locations in the app. (Remember that rooms belong to a location. For example, you could say that Room 123 is in a location called Building A.)

Continue Reading →

Mobile App Tutorial: The Meeting Room Booking App, Part 2

This is the second part of a mobile development tutorial where we are building a Meeting Room Booking app that allows its users to browse an inventory of meeting rooms and reserve rooms for conference call and other events.

An expanded version of this tutorial will be included in my upcoming Mobile Web Apps Recipes Book, where I will show you how to develop 8 different mobile applications using Ionic, Sencha Touch, Kendo UI Mobile and jQuery Mobile.

In the first part of this series we created the wireframes for the screens that will allow users to book rooms. Here’s the link to the article:

In this article we will continue with the design of the app’s GUI.

Refactoring the “Booking a Room” Wireframes

We will start with a small refactoring of the wireframes of the screens that will allow the user to book a room.

Continue Reading →

Mobile App Tutorial: The Meeting Room Booking App, Part 1

The Meeting Room Booking AppMeeting room management is a common facilities management need for different kinds of businesses. The mobile app tutorial that we are starting with this article is a Meeting Room Booking app that allows its users to reserve rooms for meetings and other types of events. The app will also have an administration feature through which designated users can enter, edit or delete meeting rooms.

My initial plan for this tutorial is to develop two versions of the app. One using a Sencha Touch frontend, and the other using a Kendo UI Mobile frontend.

Continue Reading →