search

matrix-org / matrix.to

A simple stateless privacy-protecting URL redirecting service for Matrix
http://matrix.to
Apache License 2.0
889 stars 189 forks source link

Improving the iOS first-time user experience (FTUE) #263

Open MadLittleMods opened 2 years ago

MadLittleMods commented 2 years ago

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 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 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
  2. Add a Smart App Banner 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"

  3. 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.

Figma designs

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

ara4n commented 2 years ago

See also https://github.com/vector-im/element-meta/issues/248

daniellekirkwood commented 1 year ago

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 commented 1 year ago
  1. 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 commented 1 year ago

@t3chguy You're right, the idea is not to holistically fix the mobile experience. We're going to solely focus on https://github.com/vector-im/element-web/issues/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.