Open jesmrec opened 1 year ago
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 |
---|---|---|---|---|
actionbar_start_color
, which is brandable.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 👍.
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.
@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.
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:
https://github.com/owncloud/android/assets/57049315/9df7bc9f-c786-4c07-8d37-2ef65904e2b0
After:
https://github.com/owncloud/android/assets/57049315/265967e7-4e4f-4bd0-b207-c6386057b036
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.
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:
https://github.com/owncloud/android/assets/214010/6435119d-b3b7-477c-a82e-b7101f25562d
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 👍
Ok so, following @michaelstingl suggestion, I could make this:
https://github.com/owncloud/android/assets/57049315/c24488cd-23ac-4d27-a921-824b1960da00
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: https://github.com/GoogleChrome/android-browser-helper/issues/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).
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)
Examples for login screen in other similar apps:
https://github.com/owncloud/android/assets/57049315/13e66d5e-74b3-4884-8e6c-4de220d935f4
https://github.com/owncloud/android/assets/57049315/ab65afaa-96eb-447c-ac53-5c49b4614120
https://github.com/owncloud/android/assets/57049315/32ded931-1ca8-4c66-a39a-cd8bce0b9597
https://github.com/owncloud/android/assets/57049315/955fa7ce-4e66-4404-bb3e-543640186e37
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.
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