Improving the iOS first-time user experience (FTUE)

Nobody has claimed this yet.

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.
>
> *-- https://github.com/matrix-org/matrix.to/issues/262#issuecomment-1092377481*

## What's our ideal solution?

As [discussed](https://github.com/matrix-org/matrix.to/issues/255#issuecomment-1095346550) with @ara4n, the ideal/expected UI is:

1. We should never shuffle people over to mobile web
1. "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](https://github.com/matrix-org/matrix.to/issues/255#issuecomment-1095750508). 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 https://github.com/matrix-org/matrix.to/issues/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 https://github.com/vector-im/element-web/issues/15035 and https://github.com/vector-im/element-web/issues/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.
>
> *-- https://github.com/matrix-org/matrix.to/issues/255#issuecomment-1095750508*

### 3. Improve the `/mobile_guide`

1. Remove the "Configure your app" section -> https://github.com/vector-im/element-web/issues/21761
1. Add a [Smart App Banner](https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners) to suggest the iOS app to people who don't have it downloaded yet -> https://github.com/vector-im/element-web/issues/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"](https://user-images.githubusercontent.com/558581/162851685-c99ec62a-f31e-4b37-a417-27fb104982a4.png)
1. Someone even suggested linking to Hydrogen as an alternative which does work pretty well on mobile web -> https://github.com/vector-im/element-web/issues/19870
1. Design suggestions for mobile guide toast, https://github.com/vector-im/element-web/issues/16311


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

Tracked by https://github.com/vector-im/element-web/issues/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

Start by reviewing the existing matrix.to iOS flow, the linked issue 255, and the referenced Element Web issues and Figma designs. Compare the current Continue, app-install, deeplink, and mobile-guide behavior with the proposed alternatives. Done is not defined by a single implementation in this issue, so the desired scope needs to be narrowed first.

Written by the indexing model from the issue text.