1

In Slack/Discord/Element/Gitter each part of the message is arranged on the left: Avatar, username, reactions, the text of the message itself (most texts are short). But each message has a menu: "Edit/Delete/Forward/..." and this menu is placed in the upper right corner of the message in Slack/Discord/Element/Grid (or is hidden on mouse-over).

The problem with placing the menu on the right side is that you have to mouse-over all the way through the message to the right part of the screen, with the risk of hitting another message, so you have to pay attention to which message is highlighted (by mouse-over event) - the right one or the wrong one?

So you have to remember and follow the horizontal bar. When you mouse over the menu button, you have no idea what message is associated with that menu button until you slide your eyes to the left and read the text while the mouse pointer stays on the menu button. They also do not place likes/reactions in the right part of the message, why is the menu icon like this?

Why do not they somehow place the message menu on the left side where ALL the elements of the message are? That way you can see the message related to the menu icon and the menu icon at the same time? Examples (3 dots in each example are a message menu):

Example 1:

(the menu placed at the left of avatar) Example 1 - nanochat

Example 2: (the menu icon is located just right after the username)

Example 2 - Intranetus

Improve this question

2 Answers 2

Reset to default
3

Two main reasons:

  1. The overflow menu is not a primary action, so putting it first on the row isn't appropriate. It's full of secondary actions, so tucking it away on the right side is standard practice.

  2. As @Devin mentioned, things near each other should be related to each other. Putting the overflow menu next to the avatar would imply that the menu addresses the avatar. Putting it on the row makes it apply to the message itself.

Improve this answer
2
  • (1) Not a primary action, but this menu is hidden until you put mouse over message. (2) The entire width of message is highlighted when the menu icon is visible and menu is hidden for every other messages, so user see that menu related to entire message.
    – pavelkolodin
    Jul 11, 2022 at 15:55
  • I take your point, but the same rule applies. When you hover on the row, having something appear on the far left implies that it's primary/very important. It's not. Remember, you came here to ask about a best practice in the industry, and you're getting the correct answer from industry professionals. There's not a lot of debate about this, after being tested billions of times. You've got your answer! Even if you disagree :)
    – Icaval
    Jul 11, 2022 at 21:39
2

There are several reasons for this.

UX reasons

As you mention, everyone does this. It's not an accident, it's a proven design pattern that works time and time again. Remember, these companies have large UX departments and test their UI extensively. A 1% in adoption can mean millions of dollars. In short, if it works, don't break it.

UI design

If you arrange all the elements together, it would lead to a lot of visual noise and confusion. You'd end up with a loaded page on the left and a blank page on the right.

Cognitive reasons

The menu should offer actions related to your message, not your profile. If you place this menu together with the avatar, users will believe that the actions are related to their profile. This is explained by the Gestalt Law of Proximity.

  • Proximity helps to establish a relationship with nearby objects.
  • Elements that are in close proximity are perceived to share similar functionality or traits.
  • Proximity helps users understand and organize information faster and more efficiently.

Disruption of user flow

What you perceive as a disadvantage (and rightly so, because every user is different) is actually intentional: You've to "travel" to perform an action instead of clicking randomly somewhere. If you put the menu (and everything else) on the left, you'll have a lot of frustrated users clicking randomly somewhere, especially on mobile devices. Not to mention some types of accessibility (motor and neurological accessibility first, but also some visual accessibility features).

In a nutshell.

While it's true that UI can always be improved, and that the cases you mention may need improvement (of the ones you mention, I only know Slack and Discord: the former isn't a problem for me, the latter is a nightmare), you've to keep in mind that they're actually doing the right thing based on millions of hours of user testing over decades.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.