Delight: Inc. visibility of composer

[daniellekirkwood]

Hypothesis: Improving the visual appeal of the Composer will have a measurable impact on a user's first session in Element.

See comments for related issues.

PostHog 1: Retention by day Composer > Pageview
PostHog 2: Time taken from Pageview > Composer (WIP)
PostHog 3: Funnel Signup > Composer > Pageview (WIP)
PostHog 4: Composer stickiness

[robintown]

Related: element-hq/element-web#17362

[SimonBrandner]

Related: element-hq/element-web#16304

[daniellekirkwood]

Related: element-hq/roadmap#21

[niquewoodhouse]

A few of the related issues go into areas like where the typing indicator appear but I'd like to just try being very small in scope, to increase chances of shipping and seeing if it's had a good impact.

I think adding a border to the actual input will help increase visibility that this is an input.

ele-composer-2.mov

• Move e2e iconography to right side of input
• Change Send message to Message

Additional states:

If voice message is active:

• Copy existing behaviour, just add border to input

If message is big

• Copy existing behaviour, just add border to input

Scrolling

We might not need to keep the existing background on the composer, so could use a gradient at the bottom:

Untitled.mov

[daniellekirkwood]

Great! Thanks @niquewoodhouse

I think there are issues with the current padding on the composer - especially when typing over multiple lines - so it would be great to get those fixed with this issue too.

[daniellekirkwood]

Assigning to @gsouquet for when he gets back from vacation as we now have a design we can work with :)

[kittykat]

One piece of feedback we had recently is that we should be showing voice message bubble on by default rather than hiding it - I personally agree with this as even though I'm not a voice message user, I've come to expect this to be visible based on seeing it in other apps. Would it be useful to review which features we hide behind ⋯?

[germain-gg]

Really like the composer, it is much more defined and easier to spot

I'm not sure of the feasibility of the timeline bleeding behind the composer in its current state.
We should spike this, but I wouldn't be surprised if this ends up being a larger effort than anticipated

[daniellekirkwood]

Can we start by implementing without the 'bleeding' or does that break the design too much @niquewoodhouse

[niquewoodhouse]

Can we start by implementing without the 'bleeding' or does that break the design too much @niquewoodhouse

I think thats a good idea, I don't think we need the 'bleeding', its not really relevant to making it more visible, just a small detail that could follow up later or not, no biggie.

[daniellekirkwood]

Great, thanks!

@gsouquet Can we do the spike and then discuss if we want to include the work to make the 'bleeding' happen?

[daniellekirkwood]

As for Voice Messages, I think we should pull info from PostHog and move the icons around esp. if VMs are correlated to stickiness

Unless @niquewoodhouse has thoughts on moving VMs out of the overflow menu

[t3chguy]

This got reverted matrix-org/matrix-react-sdk#8840

[K4LCIFER]

Is there a plan to re-implement it?