Show confetti in a chat room on command or emoji

[GuidoAdam]

Show confetti in a chat room on command or emoji

This project aims to increase the fun factor in a chat by introducing the option to throw virtual confetti.

Overview

Problem

1. Discussions in a chat can be pretty boring or serious. It is difficult to ease them up with text messages.
2. It is difficult to express enthusiasm verbally in text messages.

Goals

1. Give chat users the oportunity to make their feelings visible without words.
2. Keep the functionality simple.

Out of Scope

1. Major UX changes: no UX changes except the display of virtual confetti.

People and Roles

1. Team @ Nordeck IT + Consulting GmbH: proposal and implementation
2. Team @ Element (ex New Vector): decision and integration

Context

Use Cases

Users want to:

1. Cheer up a serious discussion by doing something unusual.
2. Express their enthusiasm for something mentioned in a chat.

Assumptions

Not relevant.

Proposal

Virtual confetti

We propose to implement a chat command "/confetti" that initiates a virtual confetti throw. In addition a virtual confetti throw is initiated, if a user sends a confetti emoji in a text message.

User Experience

See attached demo to get an idea of how virtual confetti can look like.

1. Thrown confetti is visible for all users in a room
2. Thrown confetti ends after 3 seconds
3. The chat command “/confetti” issues one throw of confetti
4. Confetti is also thrown, when a user sends a message containing one of these emojies:
   • “Party Popper” (U+1F389) 🎉
   • “Confetti Ball” (U+1F38A) 🎊
5. Confetti is thrown only once per message.
6. If a message contains multiple emojies only the first is used to trigger a confetti throw. Remaining emojies are ignored.
7. The display of a confetti throw is optional.
   • It can be enabled/disabled in the user settings ("chat effects")
   • In addition the emoji trigger of a confetti throw can be enabled/disabled in a separate setting
8. Thrown confetti is shown only in the central timeline panel.
9. Thrown confetti overlays all widgets.

Future Work

Not needed

Tasks and Timeline

1. Spec review
2. Implementation and test on dev env
3. Integration
4. Launch

Attachments

Demo-Video:

confetti_feature_animation.zip

[anoadragon453]

This is quite fun, though for the same reason we don't encourage animated avatars by default, it would be nice for users to have the option for disabling "chat effects".

I'm happy for it to be turned on by default though, seems fun :tada:

[GuidoAdam]

This is quite fun, though for the same reason we don't encourage animated avatars by default, it would be nice for users toa have the option for disabling "chat effects".

I added that in the specs.

[nadonomy]

Hey @GuidoAdam this is looking great! I have a couple of points of feedback which would be good to address:

• Could we occlude the confetti effect to be encapsulated within the timeline area only? I have concerns over it being too distracting otherwise.
• Likewise, it'd be great to let users opt out of this if they want to, so a Setting labelled "Don't show chat effects" (User Settings -> Preferences -> Timeline) which users can opt into would be great.

Relatedly— how are you implementing this currently? it'd be interesting for us to think about how to replicate the effects cross platform.

[GuidoAdam]

Hey, @nadonomy

• Could we occlude the confetti effect to be encapsulated within the timeline area only? I have concerns over it being too distracting otherwise.
• Likewise, it'd be great to let users opt out of this if they want to, so a Setting labelled "Don't show chat effects" (User Settings -> Preferences -> Timeline) which users can opt into would be great.

That's what I tried to say with numbers 7 and 8 under "User Experience".

Relatedly— how are you implementing this currently? it'd be interesting for us to think about how to replicate the effects cross platform.

Our developer found a react component for the effect. That can be used to implement it in Element Web and Desktop.

I don't know what technologies are used to implement the iOS and Android apps. I guess they might need an extra implementation.

[nadonomy]

That's what I tried to say with numbers 7 and 8 under "User Experience".

Ah got it! Sorry missed that there 🙂. To be specific, we have a Settings redesign on the horizon, and when we do we're biasing towards straying away from defaults being opt in, so we would want to ensure opting out is an 'active' action as described in this comment.

I'd advocate to just have one setting for now (a) we're assuming people might want both settings— it'd be better to avoid potentially prematurely optimising, and to let users tell us they need multiple settings after living with it after shipping & (b) it adds more debt to Settings in general.

Our developer found a react component for the effect. That can be used to implement it in Element Web and Desktop.

I don't know what technologies are used to implement the iOS and Android apps. I guess they might need an extra implementation.

Yup, but motion design is an art & science within itself and the specific animation properties all contribute to the feel of the physics of the effect, and therefore the personality of the app, which is cross-platform. We don't need to block this on a cross-platform implementation but it's a good thing to start thinking about early. Which component/module did you pick up for this implementation?

[GuidoAdam]

That's what I tried to say with numbers 7 and 8 under "User Experience".

Ah got it! Sorry missed that there 🙂. To be specific, we have a Settings redesign on the horizon, and when we do we're biasing towards straying away from defaults being opt in, so we would want to ensure opting out is an 'active' action as described in this comment.

I'd advocate to just have one setting for now (a) we're assuming that's people want, if it turned out to not be the case we'll hear about it, so we can avoid potentially prematurely optimising & (b) it adds more debt to Settings in general.

Okay. "Optin out is an 'active' action" means, that the effect is enabled by default?

I agree, that one setting is enough.

[nurjinjafar]

Hello @nadonomy, thank you for your feedback. actually i followed @t3chguy tipp that it's better to avoid installing packages for trivial things. therefor, i didn't use a ready react-component/package, i just found a pure javascript function that does the job and copied part of the code. here is the link to the source code: https://www.cssscript.com/confetti-falling-animation/

[nadonomy]

Okay. "Optin out is an 'active' action" means, that the effect is enabled by default?

Sorry I could've phrased clearer. Active as in, the default behaviour should be standard, and users should actively opt out of it. So that means a checkmark stylised as:

• [ ] Don't show chat effects

Which is off by default.

actually i followed @t3chguy tipp that it's better to avoid installing packages for trivial things. therefor, i didn't use a ready react-component/package, i just found a pure javascript function that does the job and copied part of the code. here is the link to the source code: https://www.cssscript.com/confetti-falling-animation/

Great thanks! Good to think ahead on this stuff now, there's probably similar particle effect plugins/modules on mobile we'd use (as opposed to authoring animations by hand) so good to know the source for posterity when we look at mobile later.

[GuidoAdam]

Okay. "Optin out is an 'active' action" means, that the effect is enabled by default?

Sorry I could've phrased clearer. Active as in, the default behaviour should be standard, and users should actively opt out of it. So that means a checkmark stylised as:

• [ ] Don't show chat effects

Which is off by default.

And the effect is "on" by default. I think, I got it...

[nurjinjafar]

@nadonomy & @GuidoAdam something like this!

[nadonomy]

@nurjinjafar yep precisely (assuming I'm interpreting the german translations correctly 😀).

We'd normally be more opinionated & specific about how to expose these, but we have a cleanup of all of these Settings on the horizon on the core team so will look at finding a more appropriate place, along with potentially expanding the options with micro copy etc. then.