UI should go nuts when a user completes a task

[elimisteve]

1. Confetti

Use https://daniel-lundin.github.io/react-dom-confetti/ with approximately these settings:

const config = {
  angle: 80,
  spread: 148,
  startVelocity: 77,
  elementCount: 167,
  decay: 0.84
};

2. Sound effects: play this "Ta da" MP3 (which we probably need to lower the volume of by ~35%) -- http://soundbible.com/grab.php?id=1003&type=mp3

[4xdk]

Asana does something similar when completing a task - a cute/happy animal leans out from the left after completing every ~3rd-4th task. It uses the idea that variable rewards encourage much better than predictable rewards.

We could, for example, have this animation vary sometimes, be even more over the top - just sometimes, or show additional elements - like the animals.

I'm not sure about this sound idea though, I've not seen anyone do it except for important notifications at most - like Gmail for new mail, never for interacting with UI.

[elimisteve]

Ha, apparently I haven't finished enough tasks on Asana because I haven't seen that. But that's an interesting idea...

How about doing the trumpet and confetti, but randomly varying the amount of confetti within a certain range, with the minimum amount still being significant?

[elimisteve]

Oh oh oh, I know: do what I just described (including your variability idea), but every 3rd task completed, play the sound effect from Street Fighter where the guy says, "PER-FECT!" 🎉

EDIT: This could play right after the trumpet stops trumpeting.

[4xdk]

That's all good, but I'd still avoid sounds. Maybe have a character pop out and say in a bubble 'PERFECT!', 'CRITICAL' etc. ?

[elimisteve]

lol I LOVE the sounds, provided that they're not too loud, hmm... I'll ask a designer about this.

Adding variability by having a character pop out with a speech bubble, or give a thumbs up or something, sounds like a great option.

Let's think more about this and tie it into the branding, so it doesn't seem out or character or just weird.

[4xdk]

Yeah, 100% on consulting the designer. We could add the functionality behind the animations, maybe add the confetti and keep it at that for now.

[elimisteve]

@4xdk If you want to start adding the confetti part, go for it 👍

[4xdk]

#231

[hurtstotouchfire]

Would this configurable? Anyone using a screen reader or who happens to be a grumpy old hacker who hates GUIs will be driven nuts by this.

[4xdk]

@hurtstotouchfire I suppose this could be a feature request similar to how light/dark theme switching works. Though it's too early to start implementing at this point.