This is the first part of our Essential Mobile UI Components series. We will be focusing on all the design patterns and user experience concepts around the Engagement category in mobile apps.
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 to help you learn how to design better apps with Ionic Framework!
Part 2 is about User Identity and Part 3 about Navigation UI Components.
Identity is the key thing that will engage users in your app, and keep them returning to experience it. There are several areas that form 'Identity', like profile, personal dashboard and identity cards. Learn more about Identity Design tips for mobile apps.
To identify a user, first we need to authenticate him or her. There are different paths we can follow when talking about authentication in Ionic apps such as Firebase authentication, Facebook Authentication, Twitter Sign In, Google Sign In among many others.
Navigation is important to ensure that people will be able to use and find the most valuable features in your app. Good navigation, like good design, is invisible. Learn best practices for designing the navigation of your app.
Also, when it comes to Navigation in Ionic apps, it's important to mention that a great router implementation will ease the development process and at the same time make our apps discoverable and linkable. Read our Ionic Navigation and Angular Routing complete guide for more information and examples.
When people visit our app or website, we 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 on how to handle many of the options that affect the user's entry to a community, its overall engagement lifecycle, and privacy settings.
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 or mobile app 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.
For example in IonicThemes website, we invite you to sign up when you want to download the Ionic Freebies related to the tutorials.
Remember the registration makes it convenient for the user to access the site or app for the another time without facing the same interruption of the sign-up registration process.
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 the credentials they have previously configured.
Requiring it has a number of benefits for both the user and the developer / business owner.
There are many occasions when requiring the user to authenticate would be a best practice. For example, 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 inviting the user to 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 important features of the website.
If you want to enhance or expand the Authentication features on your Ionic app, you have many authorization alternatives to choose from. We have a series of Ionic authentication 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's someone the user knows that is inviting them to join.
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. This is also known as sending a referral link.
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.
To add any of the features we just mentioned to our Ionic app, we will need to use forms. Forms are the pillar of any business application. You can use forms to perform countless data-entry tasks. If you want to learn more I suggest you to read Ionic tutorial: Forms and Validations in Ionic Framework.
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 front loading, 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. Enjoy this inspiration of walkthroughs in mobile apps.
In Ionic 6 Full Starter App you will find many Onboarding pages for your Ionic app such as Walkthrough, Getting Started and Welcome Area. Using a template like this will save you tons of development and design hours and will give your app a professional look and feel.
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. If you are not sure what we mean by getting started check this Getting Started mobile patterns.
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.
Re-engagement
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 re-engagement 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. Learn how to add Push Notifications to your Ionic App.
We have learned a lot (and we are still learning), in our journey to develop great mobile apps, and we aim to share all that knowledge both design and technical with the Ionic 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 Ionic starter templates covering most of the patterns mentioned above that will ease your pains and save you weeks of developing time, so you can just focus on customization and the core value of your app.
Let us know if you liked this post with design tips to improve the user experience of your Ionic apps!
Liked this Ionic Tutorial?
Leave your comments below.