Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

mockup

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?

share|improve this question
1  
Might also be of interest: ux.stackexchange.com/q/24184/4630 –  Nathan Greenstein Jun 25 '13 at 18:51

4 Answers 4

up vote 14 down vote accepted

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:

enter image description here

enter image description here

share|improve this answer
    
I cannot follow “as it's more visually obvious where the message starts”. In my opinion “where the message starts” is more clear in the “centered” layout. Could you clarify this a bit please? –  TimWolla Jun 19 '13 at 21:20
    
@TimWolla I should have stated it more clearly. I mean the situation where all the names are aligned to a left margin and all the messages start in the same position. I'll edit my answer to make this clearer. –  JohnGB Jun 19 '13 at 22:48
    
That's better. Thanks. –  TimWolla Jun 19 '13 at 22:57
    
Thanks a lot, I implemented a layout similar to the one of Flint :) –  TimWolla Jun 23 '13 at 18:16

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.

enter image description here

share|improve this answer
    
The second one is not applicable in my case, as it is a multi user chat and not a messenger ;) –  TimWolla Jun 19 '13 at 21:18
    
@TimWolla fair point, added my view on chat room usecase –  rk. Jun 19 '13 at 21:21

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.

share|improve this answer

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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