Message alignment in a chat

Question

I am writing a chat software and we had a discussion about the message alignment.

On the one side there is the “traditional” layout where the username starts at the beginning of the line (left in the mockup). On the other side there is a layout where each message starts at the same position, with the usernames right aligned to it.

^{download bmml source – Wireframes created with Balsamiq Mockups}

(Please note that the username is bolded in the chat itself)

I prefer the right one, as the eye can jump to the beginning of each new message more easily as it always is at the same position.

Which layout should be the preferred (standard) layout? Are there any other suggestions?

Answer 1

Of the two options you have given, the second one is the best, as it's more visually obvious where the message starts. Hence it is easier to use as people have to think less about the structure of the message and can focus more on the content. It can however prove problematic if you have some long names in the chat, so you will likely have to come up with some rule for truncating it.

However, I would suggest that you top align the name and group successive messages by the same user together. This not only deals with the long name problem, but also gives you an easy way to show status messages as well.

Flint does a great job of this, and following are two examples from there:

Answer 2

2 approaches I like:

1st (eg: adium messenger):

Name in first line

Message starts from new line

2nd one (eg: facebook chat):

Just use icon to show user thumbnail (show username in window title)

Just show messages.

---

For a chat room scenario: I would go with what we have here on SEs. Right align usernames and left align text inside respective containers.

Answer 3

Mimic the default behavior of the most popular chat software on your target platform(s). This is the sort of UX that has no "right" answer, only what people are used to.

Answer 4

I am always happy when I see a chatbox where it's sorted out like this:

(08:41) UserName: Message here Message here Message here Message here

(08:41) UserName: Message here Message here Message here Message here

(08:40) UserName: Message here Message here Message here Message here

(08:39) UserName: Message here Message here Message here Message here

(08:39) UserName: Message here Message here Message here Message here

(08:39) UserName: Message here Message here Message here Message here

(08:39) UserName: Message here Message here Message here Message here

(08:38) UserName: Message here Message here Message here Message here

(08:38) UserName: Message here Message here Message here Message here

I don't think an Avatar is nessesary for a chatbox. What's the need of it? You just make the Username a link so it redirects to his/her Profilepage. Note that the messages start from bottom to top. You could either put the inputbox + submit button on the bottom as seen in my example, or you can put it on the top of the box.

An example of what I mean. HERE