Improving the iOS first-time user experience (FTUE)

[MadLittleMods]

Improving the iOS first-time user experience (FTUE).

Why is it currently bad?

It goes straight from "Continue" to https://app.element.io on mobile web. Mobile web browser support is unusable and listed as experimental in Element Web.

Bad first-time user experience (FTUE) when Element is not already installed:

Step 1	Step 2	Step 3 (Safari browser)

When Element is installed, the first time opening of a matrix.to link is not much better:

Step 1	Step 2	Step 3 (click "Open" in the Safari app banner)	Step 4 (finally the app is open)

Now that you have allowed the "Open in Element app" by pressing "Open" the first time in the Safari banner, for subsequent matrix.to links you visit, the "Continue" button starts opening directly in the app now.

-- #262 (comment)

What's our ideal solution?

As discussed with @ara4n, the ideal/expected UI is:

1. We should never shuffle people over to mobile web
2. "Continue" takes you to install Element iOS, or deeplinks the app if you already have it installed
   • If app not installed, "Continue" brings you to app store to install (doesn't go to deeplinked content after install)
   • If app installed, "Continue" opens to deeplinked content in app

But this isn't possible with the current iOS ecosystem. We can make some separate improvements to improve the iOS flows though.

Alternative potential improvements

1. The matrix.to Continue button should be visible even after clicking it

Tracked by #255

This is important to allow users to retry the permalink after they go away and install the native iOS app from the badge or out of band. Or just pressing back in their browser after being redirected to Element Web.

2. Block mobile Element web access with the /mobile_guide

Tracked by element-hq/element-web#15035 and element-hq/element-web#14962

People can stumble upon app.element.io in a variety of ways and it's a bad experience when they do it on mobile web.

As suggested by @stefanceriu, we could block mobile web users with interstitial screen on the web side.

In Element web, we already have https://app.element.io/mobile_guide/ which we redirect to on mobile iOS and Safari when you visit https://app.element.io/ without any fragment parts so this is viable. We still want universal links to work so we would probably need to render the mobile guide for all links instead of redirecting. Although maybe the universal link could get picked up before we redirect.

Then we probably need to iterate the /mobile_guide so it's more obvious to press "Open" in the Safari app banner to start auto-accepting universal links in the native iOS app.

This flow still feels a little crunchy though for first time users but it might be the easiest.

-- #255 (comment)

3. Improve the /mobile_guide

1. Remove the "Configure your app" section -> Remove the Configure your app (server configuration provisioning link) section from the mobile guide for app.element.io element-hq/element-web#21761
2. Add a Smart App Banner to suggest the iOS app to people who don't have it downloaded yet -> Add Smart App Banner to prompt users to download the native iOS app element-hq/element-web#21763
   1. For people who already have the native iOS app, there is already an app banner in mobile Safari to "Open in the Element app"
3. Someone even suggested linking to Hydrogen as an alternative which does work pretty well on mobile web -> Allow mobile redirect to hydrogen element-hq/element-web#19870
4. Design suggestions for mobile guide toast, Design suggestions for mobile guide toast element-hq/element-web#16311

4. Improve the main mobile web views you would see flowing from matrix.to links

Tracked by element-hq/element-web#14962

Separately, it would be good to improve the main mobile web views you would see flowing from matrix.to links. Doesn't have to be perfect but less squishy would be good. Forcing people to install native mobile apps in order to see content is a bit evil. The good thing is that our mobile guide is dismissible.

• Rooms
• Spaces
• Viewing a message permalink

Figma designs

https://www.figma.com/file/ZDVvKC8odsa5Jeml9gCuLd/Web%3A-New-User's-Journey?node-id=244%3A4721

[ara4n]

See also element-hq/element-meta#248

[daniellekirkwood]

As part of the Account Resurrection cycle in the Delight team, we are picking up this issue with the following decisions/ discussion points:

1. Yes
2. Not right now, we will address the page design in general and lower the importance of the "continue to desktop site" with visual changes.
3. ...
   3.1 Yes
   3.2 Done
   3.3 Not right now - interesting idea though
   3.4 Done
4. Yes, but a quick fix only

👀 @gsouquet

[t3chguy]

4. unfortunately wouldn't be a quick fix beyond for rooms/spaces which we already have (though the differentiation for a space is very minor, different rounding of the avatar).
   matrix.to doesn't ever have a Matrix token, so can only use unauthenticated APIs such as the (MSC) Room Preview API and Public Rooms (unfiltered) APIs. Neither give it access to message (permalink) previews. A new MSC would be needed or matrix.to would need to be registered/logged in per-user

[germain-gg]

@t3chguy You're right, the idea is not to holistically fix the mobile experience. We're going to solely focus on element-hq/element-web#14962 and do a bit of CSS wrangling for a set period of time to try to tackle all the low hanging fruits to improve the readibility that we seem to have lost over time.