Reactions

[donokuda]

Here’s an exploration of how reactions could work in Visual Studio. 👍 👎 😄 🎉 😕 ❤️

I've covered three scenarios (but feel free to fill me in on any that I might've missed): When there are no reactions, when adding an additional reaction, and incrementing a reaction.

If no reactions exist

1. “Add reaction” reaction appears on hover
2. Clicking reveals a row of emojis to choose from. We’ll utilize tooltips to explain the meaning of each emoji. We can also consider scaling the emoji up on hover as an interaction affordance.
3. Clicking puts the emoji under the comment text

Adding an additional reaction

1. “Add reaction” reaction appears on hover next to existing reactions
2. Clicking reveals the same row of emojis to choose from. The main difference is that you can still see the existing counts of reactions.
3. Clicking an additional reaction adds it to the row.

Incrementing an existing reaction

Clicking on an existing reaction is enough to increment it.

Also threw together a mock-up of how this could look like in the context of a pull request conversation:

Couple of questions:

• Does it make sense to bundle the native emoji's so that we'll have a consistent UI across all versions? If I recall correctly, emojis vary by versions of Windows.
• If we're making a request to GitHub, should we have some sort of UI that indicates that reactions are being saved? What about error notifications in case it fails for any reason? (That said, error notifications go beyond reactions and is probably a separate discussion)

As always, feedback welcome! 🙇

cc: @simurai for the additional 👀 and 💭

[paladique]

So hype for this :raised_hands:

:+1: to bundling emojis, emojis + Windows has always been a thing I've been :thought_balloon: about, definitely didn't realize they are different between versions

Interesting history of Windows emojis here

[shana]

Definite 👍 to bundling emojis!

If we're making a request to GitHub, should we have some sort of UI that indicates that reactions are being saved? What about error notifications in case it fails for any reason? (That said, error notifications go beyond reactions and is probably a separate discussion)

We can delay showing the colored version of the emoji until it's saved. Then people will click repeatedly on it (which we can ignore) and when it goes colored, they feel like something happened (at least that's my experience every time I want to star something on twitter and the network is being stupid. Maybe it's just me... 😝 ).

Dunno if we want to do notifications in case of errors... we'll need some sort of notification UI on the GitHub pane, and one that doesn't cause UI elements to move down (that would be annoying if you're clicking on emojis and the whole thing moves under the mouse and you click... somewhere else). Speaking of notification UI on the GitHub pane, have we mocked that up yet? Can't remember. We probably should 😄

When hovering an existing reaction, we probably want to show the list of users, just like the website does (and I'm hoping that's on the API, I made the case for it recently).

All in all, love this! ❤️

[donokuda]

👍 to bundling emojis, emojis + Windows has always been a thing I've been 💭 about, definitely didn't realize they are different between versions

Same here! Emojipedia has been the best resource in the emoji-space (filling me in with the nuances of emojis on Windows!) 😄

When hovering an existing reaction, we probably want to show the list of users, just like the website does (and I'm hoping that's on the API, I made the case for it recently).

👍 Additionally, I think we can do the same thing as dotcom and limit the amount of users shown to around 11:

In our case, we could consider using the built-in tooltip text to show display the information:

[donokuda]

We can delay showing the colored version of the emoji until it's saved. Then people will click repeatedly on it (which we can ignore) and when it goes colored, they feel like something happened (at least that's my experience every time I want to star something on twitter and the network is being stupid. Maybe it's just me... 😝 ).

Since the neutral color for emojis on Windows is gray, it might be a little difficult to switch between a grayscale and color emoji. However, I like the idea of visually indicating that a request is in progress. Maybe we could use dim the emoji to 50-60% opacity while it's saving, then bring it back to 100% and increment the number when the request has succeeded. This would be similar to how submit buttons are disabled on submit and reenabled when the form has succeeded (or failed in some cases.)

Dunno if we want to do notifications in case of errors... we'll need some sort of notification UI on the GitHub pane, and one that doesn't cause UI elements to move down (that would be annoying if you're clicking on emojis and the whole thing moves under the mouse and you click... somewhere else). Speaking of notification UI on the GitHub pane, have we mocked that up yet? Can't remember. We probably should 😄

This is something that needs to be worked out too beyond reactions. I was thinking we could use an infobar UI to notify about any error, but agree that it might be jarring to have the entire content move down at once.

I wonder if there are any examples of UI's that handle errors nicely in Visual Studio (or any IDE extension.) Maybe we could dock the infobar to the top of the pane?

[shana]

Maybe we could use dim the emoji to 50-60% opacity while it's saving, then bring it back to 100% and increment the number when the request has succeeded. This would be similar to how submit buttons are disabled on submit and reenabled when the form has succeeded (or failed in some cases.)

Stupid idea alert: how about filling them up (with an animated mask) to show progress of save? /me hides 😝

[shana]

This is something that needs to be worked out too beyond reactions. I was thinking we could use an infobar UI to notify about any error, but agree that it might be jarring to have the entire content move down at once.

I wonder if there are any examples of UI's that handle errors nicely in Visual Studio (or any IDE extension.) Maybe we could dock the infobar to the top of the pane?

I don't know of any (but I don't use a lot of extensions myself). I'm sure most people will tend to follow the guidelines and use the infobar, which forces all the content to move every time it shows... sigh.

We can use it, I guess... the alternative is allocating some space in our UI to messages, and we have to put something in it, otherwise it'll just be a waste of space. We can use the infobar for things where there's an obvious wait time, so people aren't clicking around and getting caught by the content shift. Team Explorer uses a little progress bar on top to show UI busy state, maybe we ought to follow that example.

[donokuda]

how about filling them up (with an animated mask) to show progress of save?

The idea of doing an animation directly on the emoji sounds delightful! Almost reminds me what happens when you like a tweet on Twitter's website! ✨

I don't know of any (but I don't use a lot of extensions myself). I'm sure most people will tend to follow the guidelines and use the infobar, which forces all the content to move every time it shows... sigh.

Yeah, I'm also not convinced that the infobar is the best component to use for errors around reactions. It seems pretty intrusive for a small UI like reactions.

Team Explorer uses a little progress bar on top to show UI busy state, maybe we ought to follow that example.

I like this idea. We could use the indeterminate progress bar at the top to indicate that something is happening in the background.

In addition to the progress bar, we could increment the number and lower the opacity of the emojis as another affordance that the UI is busy. Incrementing the number could visually communicate the expected final state of the reactions. If there's an issue saving, we could decrement the number back to its original state and bring up the opacity to 100%. This might be enough for the user to know that something went wrong and they could try their action again.

[donokuda]

I forgot to explore how to show which reactions were set by the user. On dotcom, we highlight the button with a light blue background. Since we don't use a button to show reactions, I tried out highlighting the number instead with blue.

💭 ?

[shana]

I forgot to explore how to show which reactions were set by the user.

We can use the slack trick and render the emoji differently in this case, with a slight background tint or something.

[donokuda]

We can use the slack trick and render the emoji differently in this case, with a slight background tint or something.

ooo, I like that idea