Introduction

This is the first part of our Essential Mobile Components series and we will be focusing on all the design patterns and user experience concepts around the Engagement category.

When developing a mobile application, there are some standard elements that are expected to be in place, functioning in a way that's intuitive to the user. It becomes counterproductive to divert from some best practices because it could cause confusion, making the user experience a hard one.

Knowing that sometimes it's impossible to keep up to date with the latest trends in mobile design, we created a list of essential mobile components that you should use in when building your app.

After a long time processing two books that changed the way we design mobile apps (Mobile Design Pattern Gallery, 2nd Edition & Designing Social Interfaces, 2nd Edition), we created a series of articles and resources for you to learn the fastest way possible!

We're going to be releasing them every week so stay tuned to and don't miss them!

Engagement

When people come to the site, you need to greet them and welcome them in a friendly manner and make them feel as if they are important and have value to add to the community.

Think about the processes you have in place to allow your users to participate and become engaged in your community. This list of patterns addresses these questions with best practices for how to handle many of the options that affect the user's entry to a community, their overall participation lifecycle, and privacy options.

The Lifecycle of Use

There are different stages in the relationship between an app and a user. It's important to understand the phases to establish a strong bond with the user.

Sign Up - Registration

It happens to almost all of us while accessing a part of a site and ending up doing the sign-up registration. What registration does is storing your personal information to allow you further access to the site or application. You receive the prompt of Sign-Up when you are in the middle of something interesting or useful.

Remember the registration makes it convenient for the user to access the site for the another time without facing the same interruption of the sign-up registration form.

Sign In

We all know what a ‘Sign In' is don't we? A user wants to access an account, application, or content that is stored on the host site; and to do this they need to input their credentials they have previously setup.

Requiring it has a number of benefits for both the user and the developer / business owner.
There are many occasions when requiring it would be a best practice, usually when any sort of personal data is stored or personalization of the site can be performed by the user it is a good case for using a sign in.

Authorize

To facilitate the sign-in process, sometimes a user is given the option to access the site without starting from scratch. A user would be allowed to bring its data and files from another site to access the features. Through authorization of an application on site A, a user can easily access its personal data originally stored at site B. Authorization can retrieve some of the important features of the website.

If you want to enhance or expand the features on your app, you have many authorization alternatives to choose from. We have a series of tutorials covering much of them.

Receive Invitation

When we talk about receiving an invitation usually we're referring to a user receiving an invitation from a friend or connection to join a site or application.

Other forms of invitation may come from marketing lists, lists generated from social app data, etc. But, the personal invite remains the most powerful as it is someone the user knows that is inviting them.

Having a formal invitation in place for your users to send to their friends makes it possible for you to combine a controlled marketing message with a personal message from the user.

This process also guarantees a consistent call to action for viral growth.

Send Invitation

Providing users with the ability to invite their friends to your site is part of the viral nature of a social site and can significantly boost your user base.

Consider using an Invitation when you want to enhance the user experience by having a network of connections or growth a service that is dependent on friends of friends. Invitations are also useful when you require user based referrals to grow a site.

Onboarding

It's known that signing up people for an app can't be hard and can't require a long time, energy or money. And yet many companies lose their users just after the first experience. Apply these best practices and don't let your company be one of them.

Walkthrough

Directions given to the user in their first interaction with the app are usually referred as the "first time through" or walkthrough. Normally users ignore tutorials and tend to skip the part of Tours, Video Demos, and other Dialog boxes.

They find these tutorials a little inconvenient or sometimes as an obstacle between them and the app.

Walkthroughs can be less irritating if less text is used to give instructions. To make a tutorial or "first time through" more effective avoid frontloading, make it rewarding for the users by designing and instructing according to the user's point of view, and reinforce learning to engage the users.

Getting Started

This is a relatively new pattern designed to either offer more personalized content to the user, enhancing the experience through social connections or capture data required for setup.

This pattern is a great add-on to the registration flow as it enables users to communicate their preferences beforehand by selecting topics of interest or learn more about the main features of your app.

Welcome Area

When a user registers for a new service, they need to have a sense of what can be done at the site and how to get started.

Providing a welcome area or start space is similar to orientation for a new job or college, or giving your friends a tour of your home the first time they visit.

The more welcoming you are (in a light-handed fashion, of course), the more your users will feel comfortable and want to spend time on your app.

Use the Welcome Area when a new user requests access to your site or you want to acquaint the user with important or useful features.

Reengagement

Sometimes a user participates in your community and then stops or forgets about your offerings for no apparent reason.

It goes without saying that you want to create a compelling service that your users will return to day after day. But, there are times when you want to let users know about new features or new ways of using the service in order to re-energize them or remind them of why they signed up in the first place.

The reengagement of your users should be an ongoing effort in most cases, re-engagement efforts are done through sending email campaigns, push notifications, local notifications and other techniques on a regular basis.

Final thoughts

We have learned a lot in our journey to develop great mobile apps and we aim to share all that knowledge (both design and technical) with the community.

If you are planning to build a mobile app, we suggest you to consider Ionic Framework.

Ionic is an open source front-end SDK for developing awesome hybrid mobile apps with HTML5, CSS and JavaScript, that's focused mainly on the look and feel and UI interactions of your app.

Check out all of our handy tutorials to learn the how to's of every major mobile capability (maps, geolocation, facebook authentication, form handling and validation, etc). You can also get inspired with our design inspiration section.

We also want to help you create awesome apps! You can find many high quality ready-made mobile templates covering most of the patterns mentioned above that will ease your pains and save you weeks of developing time so can you just focus on customization and the core value of your app.