PWA new upcoming feature - Credential management API

By: Piyush Lathiya, Jul 23rd, 2019 # PWA

Blog Banner Credential management API

I have always loved Quora for the "upvote" feature as it generates as good curiosity as the content and by the same standards, I hate it for it still insists me to sign in at gunpoint with the message "sign in to see the upvotes."

It has reflected this message for two good years now, and steadily, they have lost a potential reader, and I have lost a knowledgeable jukebox. As massive friction disrupts me to check my favorite part in the site (upvotes), I vow to never sign in into it no matter how great the content is!

And it's pretty much the same case with other users as well. Here are some anecdotal stats which sum up how check-ins and registration forms repel users.

  • 81% of the people abandon the form midst the filling process.
  • 27% of forms get discarded because they are too lengthy and scare off the customers.
  • 67% or more users abandon the forms due to the highly complicated schema, and more than 80% never return to complete it.

Adding worst to the existing lengthy and complicated forms, users generally slip out of their IDs and passwords for the sign in too. And some great brainers even try to sign up twice before they are notified with an irritating text "the email is already registered."

A few intelligent heads above the shoulder also forget the federated account from which they logged in. For instance, your user signs up with Facebook today; and ends up signing in the same domain using Gmail tomorrow.

While you should be sport enough to take the responsibility of easing out the sign-in process, unfortunately, you'll also need to have a high-spirited agenda even if the users forget their credentials.

"Your mistakes shrink the customer size, and customer's error also does the same. In the end, you are the ultimate loser. "

Here is how you are losing business because your users fail to remember their credentials.

  • About every third purchase gets abandoned by the users as they can't remember enough of their credentials to complete the procedure.
  • As forgetting password is the favorite national pastime, 21% of the users forget the password in less than 14 days trial, and if not more, it costs multimillion-dollar losses to many e-commerce portals.
  • 92% of the users never return to the website once their brains freeze and blank out, thereby affecting the conversion rate significantly.

As users are to log in into more than 50 websites, and as each site has their own password requirement, it again forces the customers to spend more time on the credential pages than the product pages.

If you own a website, your motive should be to minimize user's time on check-in forms because you don't want to make 2-minutes stretch-feel like 10 minutes. Considering signed-in users have a phenomenal impact on your business, you can't afford to lose them, especially to as stupid a reason such as missed credentials.

Trust me, they'd only "reset the passwords" when they have something to gain from your website, and if you have nothing to offer, your connection is likely to go into oblivion.

But hold on.

Since 20% of the users manage to log in despite roadblocks, hurdles, and plenty of friction; you'd think that your job is done. But unfortunately, your job is never completed, especially when your user enters through the mobile web space.

Although they do come out safe of the monstrous hassle-full shark-tank, the mobile applications are not as smart as native apps. Native applications have better user-engagement than mobile websites because they don't ask for credentials every time the user logs.

Adding pain to the problems, session management is way tougher on mobile apps than native apps because they are susceptible to cross-request attacks and clickjacking, henceforth necessitating the need for session expiry.

As we look forward to designing and building mobile applications as close to native apps, our area of interest should stick to managing these credentials for the users like the store applications.

Progressive Web Applications— making apps out of mobile websites.

With the trend of (Progressive web applications) PWA chipping into the market, we have almost dressed our mobile pages like native applications, and the latest advancements in the PWA credential management allow us to get rid of the variety of abrasive check-ins.

So far now, Google has eased the roadmap for websites to manage credentials using the PWA credential management API.

Let's take an example to find out how it works as a game-changing PWA component.

"You use Google Chrome as your preferred browser. As an average person activates 90 accounts with password and username field and since not all the websites have abrasive entrance; you end up registering yourself in the easier sign-up pages. It's an opportunity for Google Chrome to save your form information which it can later reflect during other sign-up processes." 

So, what's happening here? Let's find out.

"The website couldn't compel you to enter the details explicitly; however, as browser saves your credentials, it leaps your laziness and passes on the information to the website sign-ups. All you have to do is— select the autofill credentials reflected by the browser just by tapping the options and boom— you are in without having to feel too dragged for sign-ups."

Yeah, it sounds executable and straightforward, but it's a challenging ball game for your browser to distinguish username, password, email fields for it can misjudge name as email and vice-versa.

So, how do browsers distinguish what's email handle and what's the name (basically it's identifying the identifiers), and how do they correctly show your email address against any email field?

With the help of autocomplete attributes, you can mark up the forms explicitly and make it easier for your browser to make notable differences between the ambiguous data. 

PWA credential management API and Smart Lock— use cases

Google Chrome in its 51st edition shipped credential management API which helps websites to connect with the browser and transfer interminable data (not literally) to the domain for easy sign-ups.

It's one of the new PWA features which bring mobile experience as close as native applications by switching users from signed out stage to sign in stage without having to input explicit credentials.

As it pushes the users into the personalized page in a second or two, the user-experience shoots up to the great height.

Ever since Google has announced credential management API for the mobile website applications, a lot of companies have successfully adopted this advanced approach to bring maximum footfall into their mobile landscape.

Let's quickly skate through some of the giants who have smartly used credential management API with Google smart lock to boost the numbers which matter.

AliExpress

AliExpress— the daughter company of the Chinese e-commerce giant Alibaba places user-experience above everything else.

Hence, it vows to implement all the plausible methods within its reach to enhance the experience across the world.

As more than 200 country uses AliExpress to suffice their shopping needs, the onus falls on it to embrace new ideas to generate A-grade mobile website service for the users.

Challenges

Just when users muddle through the website after dozens of roadblocks, they either forget the credentials or are either pushed to put the information time and again.

It could bring a lot of negativity among the users, and the right customer who values time would leap through the website to never return.

In addition to that, cross-platform purchase at real-time can significantly demand users to eat walnuts because they can't move forward without entering the credentials across all the devices.

Thus, Aliexpress wanted a unified credential management approach which could permit users to enjoy seamless shopping experience without being too pokey during the process.

The implementation

With the help of mere one engineer and three-day API testing, Aliexpress drastically optimized the user-experience when it comes to sign-in processes.

Having unified Smart Lock with Credential Management API, it became a piece of cake for the users to log in without manually putting any data.

Furthermore, the choice they made helped them to re-engage audience because they never had to sign-in repetitively.

The API stands tall as a stellar performer as it also reduced the number of errors while inputting the credentials.

The aftermath of implementation.

  • The implementation narrowed the web sign-in errors by a whopping 85%.
  • It banked 60% of user's time, which wasted a lot of attention span due to abrasive sign-ups on the website.
  • The cross-channel shopping experience between Android and Chrome got possible.
  • The overall conversion amplified by 11% those who signed-in through API.

The Guardian

The Guardian— the British daily newspaper giant, had its share of problems as the majority of the traffic came through mobile-website, and they were stuck with the same-old cliched website.

Again, with the brand they brought to the media industry, it was essential that they carried the traditional legacy to the online domain.

As it was one of the most read and subscribed newspaper channels in the world, it was high time that they projected user-interactive portals.

Challenges

As massive subscribers and readers traffic was generated through the mobile web pages, the real challenge for it was to distinguish the real-users to whom they can potentially display monetized ads and influence them to make engaging decisions.

Hence, by 2016, they resorted to PWA with credential management API and smart lock for easy monetization and influencing engagement.

The implementation

Akin to Aliexpress, the sign-up process was rocketed, which led to an early personalized experience.

The credential management API not only made sign-ups as flat as a pancake but also ruled out the potential errors which users usually do while manufacturing an account.

In every sense, the API bridge between the browser and the website helped user sign-in repeatedly without having to make their brains jog some serious memory-lane.

The aftermath of implementation.

The impact of credential management API implementation can be drawn from the numbers which speak volumes about the massive surge in engagement and overall sign-ins.

  • It almost observed a huge rise of cross-platform sign-ins by 44% in less than 35 weeks of the implementation.
  • Spike in sign-ups in desktop and applications as well.

Note: As Google senses that it is losing search batons and average time spent to native applications, it is investing a hell lot of time in promoting progressive web applications with synchronizing sessions across several platforms and devices. And with Google Smartlock, it caters excellent strength to the users to sign in different devices while maintaining the session, thereby making the cross-platform experience remarkably smooth. Google Smartlock and Credential Management API come together to sync sessions through the cross-platform, which ultimately empower the users to have seamless browser-based login flows.

The cherry on the cake: PWA Payment Request API

Pretty much like Credential Management API, PWA Payment Request API travels extra length to improve check-outs at payment doors by removing the need of check-outs form at all.

As the browser lets the website collect vital sign-in information, it also swings its magic wand as an intermediary during payment.

Again, like sign-ups, users feel the heat of entering the wrong credentials during the purchase process, which ultimately thrusts them back from it.

Moreover, as the website demands the same information to enter again and again into different web pages; the users try to save their backs from the frictional-bite.

You may misjudge it as another payment method or processor, but it isn't either of them.

Here are some of the highlights of the payment API

  • It enables the browser to behave as an intermediary platform for users, merchants, and payment methods.
  • To standardize and smoothen the payment communication flow
  • To support the myriad of secure payment environments and methods.
  • To work on cross-browsers, devices, and platforms.

This PWA payment API gets hold of cached data and serves the payment interaction between the user and the website holder.

It draws data as quickly to process the transaction at the snap of the fingers.

Conclusion

As users continue to expect a hassle-free experience on any domain, powering your web-space with Credential Management and Payment Request API aren't an option anymore.

They make sure that all the efforts that you put in to bring the footfall on your online store don't go in vain.

There are hundreds and thousands of ways to attract customers to your website, but giving them an engaging experience takes a lot of efforts which in the fullness of time converts the users and give your sales a real face-value.

And both the APIs work as linchpins for turning probable customers into converted customers.

If you, as a merchant, are trailing to convince your users to get on-board into your website, you need experts to take care of user requirements, and our team of competent officials does it without the sweat.