Chrome custom tabs improvements

[jesmrec]

Currently, ccts opens authentication in a chrome browser window. For users, this is an outer experience.

Checking the documentation, seems that ccts could be improved to give an in-app look, so users feels that they stay in the app across the authentication process:

https://developer.chrome.com/docs/android/custom-tabs/

The point is researching and implementing about some improvements (could include branding variables) to integrate browser authentication in app.

TASKS

• Research (if needed)
• Create branch feature/improve_custom_tabs
• Development tasks
  • Create different proposals for a better experience with Chrome custom tabs
  • Implement the chosen proposal
• Code review and apply changes requested
• Design test plan
• QA
• Merge branch feature/improve_custom_tabs into master

[JuancaG05]

Proposals to improve experience with Custom tabs:

Before	Proposal 1: change toolbar color	Proposal 2: show title	Proposal 3: new animations	Proposal 4: back button

• Proposal 1: change toolbar color: this will make the toolbar color change to make it look like in the rest of the app, showing we continue in the same app. The color taken is actionbar_start_color, which is brandable.
• Proposal 2: show title: instead of just showing the URL in the custom tab toolbar, it will show the title the web document has. On the one hand, this makes it look more similar to the app toolbar by showing a title, and on the other hand, if the title is suitable (controlled by the web) it can offer useful information about what to do in that screen.
• Proposal 3: new animations: instead of using the default slide animation, which seems to show that the user is going to another app, we can use some other animations. In this case I used a grow-from-top animation to make the custom tab appear, but there are several more.
• Proposal 4: back button: this allows substituting the cross icon to close the custom tab with a back arrow icon, letting the user know that they can go back to the previous screen as if it was part of the same app.

All these improvement proposals can be applied individually, combining some of them or even all of them.

You can tell your insights here @michaelstingl @tbsbdr @jesmrec @manuelplazaspalacio @Aitorbp, also @santanair could have useful input 👍.

[jesmrec]

• Change toolbar color: 💯
• Show title: i think it's not useful. Title will need branding, and it's probably meaningless in that point. I checked iOS app and they show the url as is.
• Animations: 💯 . You told there are other animations. which kind of? just mention, not needed screenshot for every of them :D
• Back button: it's a good idea, makes the view to be more integrated in navigation flow.

[Aitorbp]

I would make a mix between proposal one, three and four. I think that changing the color of the toolbar and incorporating an animation is great to avoid giving the user the feeling that they are leaving the application. Likewise, I think adding the back button improves the user experience.

[jesmrec]

@JuancaG05 could you post a short video with all the proposals, together with another video with the current status? it may help to clarify the difference with all the stuff.

[JuancaG05]

Sure, there it goes so that we can compare better. I added proposals 1, 3 and 4 since they seem to be the most accepted.

Before:

customtabs-before.mp4

After:

customtabs-after.mp4

About the animations, I was taking a look at most of them and I chose this one, I think it fits with the proposal of making the user feel they are in-app.

[michaelstingl]

iOS has the sliding-up animation, and the web view is a layer on top of the app. But users see the app still present in the background:

iOS-ASWebAuthenticationSession.mp4

[JuancaG05]

I was taking a look on how to add this custom tab inside a bottom sheet. It implies several technical difficulties but I'll try it 👍

[JuancaG05]

Ok so, following @michaelstingl suggestion, I could make this:

custom-tabs-bottomsheet.mp4

Following this approach, I can only add proposal 1 (change toolbar color). Proposal 3 (new animations) wouldn't make sense here since we're not opening a new screen, and I think proposal 4 (back button) doesn't fit here because we're not navigating to another screen, and it's more intuitive to show the user they can close this bottom sheet with the default cross.

IMPORTANT: I tried to change the default initial height for the bottom sheet but seems there is a bug in the CustomTabs library for this. I'm waiting for a response in the official repo, you can follow the thread here: GoogleChrome/android-browser-helper#442. Once I get the solution, my idea is to give the bottom sheet an initial height which occupies most of the screen (at least 80%), and maybe fix it so that the user cannot resize it (just slide it down to close it).

[michaelstingl]

Looks great! 👍

Following this approach, I can only add proposal 1 (change toolbar color).

Toolbar color not needed from my pov. I think it's easier for users to understand if the element opens with default color title. (compare iOS)

[JuancaG05]

Examples for login screen in other similar apps:

Dropbox.mp4

OneDrive.mp4

MEGA.mp4

Nextcloud.mp4

It seems they don't use custom tabs, or if they do, they omit the animations part and make it look like another screen in the app. Also, these apps seem not to rely on the IdP of the server but on their own, so that they can do login process inside the own app.