This is the second part of our Essential Mobile Components series, and we will be focusing on all the design patterns and user experience concepts around the Identity category.
Part 1 is about User Engagement and Part 3 will be about Navigation UI Components.
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.
After a long time processing these books that changed the way we design mobile apps (Mobile Design Pattern Gallery and Designing Social Interfaces), we created a series of articles and resources to help you learn how to design better apps with Ionic Framework!
We know that it can be hard to keep up to date with the latest trends in mobile design, so we created a list of essential design tips that you should consider when building your Ionic app.
If you are new to the Ionic Framework world, you should read this post that will help you start creating Ionic apps. Also, there are benefits of using Ionic Framework to build your next mobile app that you should consider.
If you are building a social network app, then all the information in this post will be key to get the building blocks of your social network right.
Identity is the key thing that will engage users in your app, and keep them returning to experience it.
There are several key areas that form "Identity", like Profile, Personal Dashboard and Identity Cards.
The profile is one of the key pieces of a social offering. It becomes the virtual face of the user in your system.
Another key piece of the identity setup is the personal dashboard. The user wants to check in to see status updates from their friends and current activity from network e.g. comments or likes from friends on recent posts.
The final piece of the identity puzzle we will consider is the Identity Card or Contact Card, used when a user wants to get additional information about another participant in an online community without interrupting their current task.
We all know that social apps revolve around people, what they're contributing and who they are.
All people and their representation of themselves online, and the contributions they make, is what creates a rich and intertwined community. If they don't understand who you are, they won't know you, they won't trust you or want to connect with you.
The assemblage of patterns acknowledges the different interfaces that present personal information or activities about a person to other people. These are the components that are considered as a user's brand: the profile that a person reflects to others, creating a perception of them.
This encompasses the profile and the personalization of that profile, the avatar, which information needs to be private, and a personal dashboard where the person can see what's happening across their personal network.
The profile ought to be combined with attribution presentation, contact cards, and other open data to create an individual and rich people-centric driven experience.
The profile and the presentation of a user, whether robotized through activity or modified by the individual, is the way you become acquainted with somebody; it gives your users the chance to express whichever side of themselves they are open to share with the world.
Some points to consider when building Identity components:
Give your users the ability to be expressive where it matters to them.
Contingent on the nature of your app you could include profiles that are more expressive and mirror a more personal approach, or maybe you want to constrain and make profiles not so customizable and reflect the professional nature of the interactions within your app.
Let users take control over how to present themselves.
They should own their actions and have a reputation attached to their identities, but it's good to give the option to stay anonymous in some instances.
Let your users decide who can see what parts of their profiles.
Allow enough control and permissions access. Do my friends see my birthday, or does everyone? If it's everyone, be prepared for a lot of fake data.
Be clear on reflecting back to users what they see as editors/owners versus how others see them.
The dating sites have this idea down to a science, but on many other websites, who sees what isn't clearly articulated.
Be serious about Privacy.
Clearly communicate the privacy policies around the information users add as part of their profile; for example, which items will be seen or not, and which will be used anonymously in aggregation as part of the business data.
How to handle Identity?
The three components of User Identity are: the Account identifier, the Login identifier, and the Public identifier. Let's see some important considerations about each of them when it comes to building a mobile app in Ionic.
Account identifier (DB Key)
From an engineering perspective, there is always one database to access a user's record and one way to refer to them in cookies and potentially in URLs. In a genuine sense, the account identifier is the closest thing the company has to a user. It should be one of a kind and permanent.
Typically this is represented by an extensive random number and is not under the user's control in any way. Actually, from the user's point of view, this identifier ought to be invisible or at the very least inert; there should be no inherent public capabilities associated with this identifier. For instance, it shouldn't be an email address, accepted as a login name, or displayed as a public name or as a status in an instant messenger address.
Login identifier(s) (Session Authentication)
Login identifiers are necessary to create valid sessions connected with an account identifier.
Logins are the user's technique of providing access to his privileged data on the app. Normally, these are represented by unique and validated username/password pairs. Take note that the service could adopt identifiers from other providers (commonly known as "social login", typically with Facebook, Google, Twitter, etc.).
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.
For instance, lots of services accept email addresses as login identifiers, normally after making sure that the user is in control of that address (verifying the account). Progressively, more sophisticated capability-based identities are accepted to avoid constantly asking for a username and password.
By separating the login identifier from the account identifier, it's simpler to allow the user to personalize his login as the situation changes. Since the account identifier needs never change, data migration issues are mitigated.
Likewise, isolating the login identifier from public identifiers shields the user from those who would crack their accounts. Lastly, a service could provide the chance to attach multiple different login identifiers to a single account, thus allowing the service to aggregate information gathered from multiple identity suppliers.
The following screenshot is a Sign-Up or Authentication page that offers different types of authentication. These Ionic Angular components can be found in Ionic 6 Full Starter App.
Public identifier(s) (Social Identity)
Unlike the technically required account and login identifiers, the public identifier represents how the user wants to be seen by other users on the app or website. Imagine it like clothing or the name by which people know you.
By definition, it does not have the technical prerequisite to be 100 percent unique. There are many John Doe in the world, thousands of them on Amazon, hundreds of them write reviews, and everything seems to work alright.
Online, a user's public identifier is normally a compound object: an avatar, a nickname, and maybe age, gender, and location. It gives sufficient data for any viewer to rapidly interpret personal context.
Public identifiers are usually linked to a detailed user profile, where more identity differentiation is available: "Is this the same John Doe from Miami who also wrote the review of Titanic that I really like?" or "Is this the Alice Jones I went to college with?"
A sufficiently diverse service might want to offer lots of public identifiers when a specific context requires it. For example, when playing wild-west poker, a user would prefer to present the public identity of a rough outlaw or a saloon girl without having that imagery associated with his or her movie reviews.
Now, let's focus on the design patterns that compound the identity of the users within your Ionic project.
The Profile is one of the key pieces of a social offering. It becomes the virtual face of the user in your system.
Profiles are a place for users to express themselves and to create a "voice" or "image" of how they want to be seen in the context of your app.
Depending on how your app operates, profiles can be a hub around which relationships and activities revolve. In many services, profiles function as an aggregate representation of all the activity of a user and their friends.
Users seek a central, public location to display all the relevant content and information about themselves to others. This desire to share the "curated version of oneself" is directed on both those they know and those they don't, although the information they choose to share with each group may be very different.
In Ionic 6 Full Starter App you will find many Identity pages for your Ionic app such as Profiles, Contact Cards and Notifications. You can get this starter template and reuse these pages to save weeks of development and design.
The user wants to check in to see status updates from their friends and current activity from network such as comments from friends on recent posts. Nowadays, we can also find this kind of information as notifications.
A central profile for your app is the hub that relationships and other activities can revolve around.
The Personal Dashboard is the companion to the Profile. The dashboard should contain access to activities that the user wants to participate in on an ongoing basis and show information they wish to check regularly.
Dashboards can be thought of as the user's version of the homepage for the site, and it revolves around recent activity.
When a user wants to get additional information about another participant in an online community without interrupting their current task, this is where Identity Cards come in handy. The desired information may include identity information to aid in recognition and to help the user relate to the participant; or reputation information (to help the user make decisions about trust).
Identity cards make it possible for the user to interact with another participant in an online community, predictably and in a known context. They also provide the means to reduce identity related screen clutter.
In this Ionic starter template you can find the following notifications and identity cards Ionic components:
In this post we talked about important things related to the user identity that you should consider when building your app. It's important that you understand that nowadays, handling identity is an issue you should take very serious.
In order to help Ionic developers, the Ionic team released Auth Connect to secure authentication for any hybrid mobile app, using a single API and the latest in native security best practices.
Check out other Ionic tutorials to learn the how to's of every major mobile capability such as form handling and validation, Ionic Routing and Navigation in depth, Web Components in Ionic. You can also get inspired with our mobile design inspiration patterns.
We also want to help you create amazing 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.
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.