8

I noticed that in many websites/apps like Messenger, WhatsApp, sending SMS on iPhones, Google Hangouts, etc. The user's sent messages appear on the right side.

I'm wondering why not place it one below the other just like Slack?

Is there any specific reason why do they follow this pattern?

For reference:

enter image description here

  • I don't believe it really matters. The biggest thing that needs to be done is to distinguish who sent what (either profile pictures, color association, or what ever it may be). You can tell you sent what because the other side has a profile picture in the image you provided. As long as the user knows, it really shouldn't matter how you approach the design. – Majo0od Aug 21 at 15:36
  • I guess if you look at languages that read from right to left and see what their messaging app layout looks like it might help provide some clues. – Michael Lai Aug 22 at 4:49
2

A few months ago I developed and designed a chat service. This was something I put a decent amount of thought in, and the result just ended up being that I felt having the defined left and right meant that it was a lot easier to navigate.

The clear definitions between who is sending what makes the users life a lot easier.

Another aspect is that it depends on what platform you're targeting. Slack and discord for instance were designed for monitor screens, so having left and right makes it really confusing to follow. Messenger or iMessage were designed for mobile screens and it just makes most sense having the clear definitions.

I hope that's useful. Think about the platform you're designing for and what your demographic is most used to. Another thing to think about is do you expect multiple people to be in the same chat?

0

Having the bubbles coming from opposite sides of the screen creates a sense of separation between the two actors in the interaction: the User and their Interlocutor. This helps the user feel a sense of dialog despite interacting with their chat partner in a virtual environment devoid of the usual physical cues that an interaction with another actor is taking place. Otherwise, the physical colocation of both sides of the dialog (the phone screen) could create confusion on the part of the user as to which actor is performing what action and, potentially, reduce the 'feeling' of interpersonal interaction.

It helps you feel like you're being 'sent' a message from 'somewhere else'.

Using the sides makes more sense than using the top and bottom because the bottom-up (or top-down; see Twitter) new message stream pattern is the most common (some would say natural) pattern for updating a chat log with a new message. Why the right side for the user and left for the other actor(s)? Probably someone chose that arrangement for an early example of this pattern (e.g., the SMS app on first iPhone had this feature at least as early as 2008) and everyone else just followed suit.

0

Think about the fact that you have to type out your message and hit "Send" before you actually see it show up in the conversation list. You don't really read your own replies in the conversation view.

But Slack offers the one below one thread view since it offers little more features than other providers, Which really make it easy for the user to follow up on topic at a time by providing a high visual priority.

  • How does it help 'visual priority' – could you please elaborate this a bit more? – Ren Sep 4 at 9:54
0

The reason for visually differentiating the messages coming from different participants in the chat by background-color or alignment is obvious, it's easier to follow the conversation.

Why alignment is or is not a good fit for some apps depends on UX testing, in my opinion. SMS used to have a limit of allowed characters and Messenger, WhatsApp, Google Hangouts were promoted as alternative to SMS when the apps were launched. Slack is known as an app focused on work collaboration and the messages are usually longer, so right alignment would be harder.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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