742235 - Instant Messaging UI does not fit in small screens

Status: RESOLVED FIXED

(Thunderbird :: Instant Messaging, defect)

Description

[Fabien Cazenave [:kaze]]

Attachment: IM screenshot

Testing the daily Thunderbird on Linux.

The Instant Messaging UI shows nice-looking conversation bubbles with a lot of padding and margin. I can only see 6 lines of IRC conversation with the default settings, which makes the whole IM feature completely unusable.

Choosing a smaller font-size doesn’t help at all, the bubbles height remain the same — see attached screenshot.

Comment 1

[Florian Quèze [:florian]]

I agree that there's a lot of wasted space, and the screen used for that screenshot isn't even that small.

Another issue I see on your screenshot is the color of the text at the top of the right pane; it's unreadable.

CC'ing Andreas who worked on the Thunderbird message theme.

Comment 2

[Florian Quèze [:florian]]

The Thunderbird message theme has had large paddings from the beginning, but I think it got worse with the patch from bug 735995 (I also filed bug 741856 yesterday for another case of wasted vertical space).

Comment 3

[Fabien Cazenave [:kaze]]

I think the default theme should be *way* more compact. I already found it unusable with the previous theme but didn’t file any bug because I knew it was about to change.

Comment 4

[Fabien Cazenave [:kaze]]

Just to be clear: 6 lines aren’t enough to follow a discussion, but 12 won’t be enough either. Especially in an IRC channel or MUC room. That might require an option to hide the avatar icons.

Comment 5

[Andreas Nilsson (:andreasn)]

Attachment: chat mockup

One way of solving this bug would be to style different message sources differently, as Fabien proposed in comment #4. I've attached a mockup for this.

Another easy win would be to get rid of the timestamps between messages. This will require some work, so I think we should treat this bug as a meta bug for size issues, and then carry out specific fixes in bugs like bug #741856.

Comment 6

[Florian Quèze [:florian]]

(In reply to Andreas Nilsson (:andreasn) from comment #5)

> Another easy win would be to get rid of the timestamps between messages.

The time indications between messages are displayed only when there was more than 5 minutes between 2 messages, so they will never appear in active channels with lots of messages.

If you want to reduce the spacing between the bubbles, an easy win is to reduce the minimum space between 2 bubbles then the messages arrived almost at the same time. This minimum is currently 3px to keep enough space for the shadow that bubbles have in the Instantbird default theme.
That constant is defined at: http://mxr.mozilla.org/comm-central/source/mail/components/im/messages/Footer.html?force=1#81

Comment 7

[Fabien Cazenave [:kaze]]

(In reply to Andreas Nilsson (:andreasn) from comment #5)
> One way of solving this bug would be to style different message sources
> differently, as Fabien proposed in comment #4. I've attached a mockup for
> this.

Your mockup makes sense to me. However, I don’t understand why there should be a difference between the “Chat” and “Twitter” views in your example: when several messages are posted in a row by the same person, it’s better to display the name/avatar only once, imho. This is the current situation as of today, and I would like it for Twitter if less space were lost with bubble margins/paddings.

Besides, I think this is more a matter of screen estate than of message sources (though it’s worse with multi-user chats like IRC). That’s why I think it should rather be a “show avatar” checkbox; maybe this box should be checked by default on multi-user chats, but on small screens I think everybody will want to check it.


(In reply to Florian Quèze from comment #6)
> (In reply to Andreas Nilsson (:andreasn) from comment #5)
> > Another easy win would be to get rid of the timestamps between messages.
> The time indications between messages are displayed only when there was more
> than 5 minutes between 2 messages, so they will never appear in active
> channels with lots of messages.

I don’t agree with this statement. In some Mozilla channels that I follow there are quite a lot of >5 min pauses that interleave a conversation, and these timestamps make it difficult to read. I personally don’t see the point in those inter-message timestamps since we already have a timestamp for every message.

I wouldn’t mind having this inter-message time information if 1/ we had more screen estate (that’s a real blocker) and 2/ we had a line that shows at which point the focus was lost (like in many IRC clients): such a “focus line” is much more useful, imho — and it takes less screen estate.

Comment 8

[Fabien Cazenave [:kaze]]

(In reply to Florian Quèze from comment #6)
> If you want to reduce the spacing between the bubbles, an easy win is to
> reduce the minimum space between 2 bubbles then the messages arrived almost
> at the same time. This minimum is currently 3px to keep enough space for the
> shadow that bubbles have in the Instantbird default theme.

Dropping bubbles would be an even easier win. ;-)

You could just use horizontal line as a separator + a background color gradient to give a little 3D effect to make a clear separation without loosing any vertical space.

FWIW, that’s what hotot does. It’s very readable, it saves vertical screen estate and it looks nicer, imho.

Comment 9

[Florian Quèze [:florian]]

(In reply to Fabien Cazenave (:kaze) from comment #7)
> I personally don’t see the point
> in those inter-message timestamps since we already have a timestamp for
> every message.

Uh. We removed per message timestamps at the time we added these inter-message time indications in Instantbird (see http://blog.instantbird.org/2011/06/introducing-time-bubbles/ for an explanation of why they are here). I forgot they had been reintroduced in the Thunderbird theme when I wrote the above comment.

Comment 10

[Andreas Nilsson (:andreasn)]

(In reply to Fabien Cazenave (:kaze) from comment #7)
> (In reply to Andreas Nilsson (:andreasn) from comment #5)
> > One way of solving this bug would be to style different message sources
> > differently, as Fabien proposed in comment #4. I've attached a mockup for
> > this.
> 
> Your mockup makes sense to me. However, I don’t understand why there should
> be a difference between the “Chat” and “Twitter” views in your example: when
> several messages are posted in a row by the same person, it’s better to
> display the name/avatar only once, imho. This is the current situation as of
> today, and I would like it for Twitter if less space were lost with bubble
> margins/paddings.


The way I see Twitter messages is that they are individual entities [1], rather than a flow of content that a chat is.
I know it costs some space, but in this case I think it makes more sense.


> Besides, I think this is more a matter of screen estate than of message
> sources (though it’s worse with multi-user chats like IRC). That’s why I
> think it should rather be a “show avatar” checkbox; maybe this box should be
> checked by default on multi-user chats, but on small screens I think
> everybody will want to check it.

I really don't want to solve this bug with checkboxes.


1. This is also how twitter.com itself works.

Comment 11

[Fabien Cazenave [:kaze]]

(In reply to Andreas Nilsson (:andreasn) from comment #10)
> The way I see Twitter messages is that they are individual entities [1],
> rather than a flow of content that a chat is.
> I know it costs some space, but in this case I think it makes more sense.

Right, that’s also how hotot works, I should’ve seen it.
I guess it would be OK for Twitter if you could gain ~25% of vertical space in this layout. 
The problem is, the current layout takes too much space, even for Twitter. I you can come up with a much more compact layout it should be enough (= displaying 6-8 twitter entries per page is OK).

I don’t think the inter-messages timestamps make any sense at all on Twitter. That should be an easy way to save space.
Again, I don’t think the bubbles are worth the loss of space.

> I really don't want to solve this bug with checkboxes.

Pref? User-defined CSS?
Maybe it’s just me, but I can’t follow any kind of conversation with only 6 lines of backlog. 25 lines should be a bare minimum, imho.

(In reply to Florian Quèze from comment #9)
> (In reply to Fabien Cazenave (:kaze) from comment #7)
> > I personally don’t see the point
> > in those inter-message timestamps since we already have a timestamp for
> > every message.
> 
> Uh. We removed per message timestamps at the time we added these
> inter-message time indications in Instantbird

I think per-message timestamps are *way* more valuable than inter-message time indications. Besides, per-message timestamps don’t take any vertical space, and we already have plenty (too much?) of horizontal space.

Comment 12

[Fabien Cazenave [:kaze]]

(In reply to Andreas Nilsson (:andreasn) from comment #10)
> I really don't want to solve this bug with checkboxes.

What about using a media query for this? If [N] messages or more can be displayed, show avatar icons; if not, forget the avatars.

[N] could depend on the type of conversation: e.g. 6 for Twitter, 15 for private messages, 25 for multi-user chats.

Comment 13

[Patrick Cloke [:clokep]]

(In reply to Fabien Cazenave (:kaze) from comment #11)
> (In reply to Andreas Nilsson (:andreasn) from comment #10)
> (In reply to Florian Quèze from comment #9)
> > (In reply to Fabien Cazenave (:kaze) from comment #7)
> > > I personally don’t see the point
> > > in those inter-message timestamps since we already have a timestamp for
> > > every message.
> > Uh. We removed per message timestamps at the time we added these
> > inter-message time indications in Instantbird
> I think per-message timestamps are *way* more valuable than inter-message
> time indications. Besides, per-message timestamps don’t take any vertical
> space, and we already have plenty (too much?) of horizontal space.
Really you need to look at the information you're trying to get from those timestamps (as Florian's link to the Time Bubbles blog post talks about: it's a long read, but it's good).

(In reply to Fabien Cazenave (:kaze) from comment #12)
> [N] could depend on the type of conversation: e.g. 6 for Twitter, 15 for
> private messages, 25 for multi-user chats.
I'm not sure of why there is an insistence on different displays for different protocols. You don't display NNTP different than POP3 mail or IMAP mail, why should that not apply here? Why should Twitter be different than IRC or a chat room in XMPP? They're just ways of getting information back and forth, the user doesn't care about the medium it's sent in. Don't make assumptions about the underlying protocol (e.g. Twitter messages are unrelated: you'd be surprised how some people essentially instant message over Twitter) or that IRC is "special" and needs to be some archaic monospaced font, etc.

I think that using media-queries is a good idea and should be pursued to stop showing avatars, etc. based on the available height. (It'd be even more fun if you display them if a message is long enough. ;))

Comment 14

[Fabien Cazenave [:kaze]]

(In reply to Patrick Cloke [:clokep] from comment #13)
> Really you need to look at the information you're trying to get from those
> timestamps (as Florian's link to the Time Bubbles blog post talks about:
> it's a long read, but it's good).

I read it. If we had enough vertical space, well, why not — but I think the current situation (≤ 6 messages per screen!) calls for drastic savings of vertical space.

> I'm not sure of why there is an insistence on different displays for
> different protocols.

I do see a difference between three cases:

1/ private conversations (two people): there’s no need for a user list, and it’s quite obvious to know who’s talking. Following such a conversation still requires more context than just 6 lines.

2/ multi-user chatrooms (IRC, MUC): a user list is useful (if not required), and we need even more visible lines than with 1/ as more people are talking. We also need a quick way to identify who’s talking (usually, this is done with nickname colors).

3/ Twitter: a timeline is a list of short messages, which is not a conversation — that’s why 6-8 lines could be enough here.

I’d prefer having a consistent UI, too, but I think this is rather a matter of taste. As this is a bug report, I prefer to sum up with an objective criteria like «25+ lines are required to follow a conversation» and let the talented IM folks decide how they want to achieve this.

Comment 15

[Benedikt Pfeifer]

Attachment: Mockup of a more compact message bubble

I agree that there's far too little information shown here.

Andreas, do you think the user icons have to be inside the message boxes? I created a mockup what it could look like with reduced paddings and the user icon outside the message box with an indicator to display who said this message.

(In reply to Fabien Cazenave (:kaze) from comment #14)
> I’d prefer having a consistent UI, too, but I think this is rather a matter
> of taste. As this is a bug report, I prefer to sum up with an objective
> criteria like «25+ lines are required to follow a conversation» and let the
> talented IM folks decide how they want to achieve this.

I don't want to sound impolite but just naming a funny number doesn't make something an 'objective criterium'.

Comment 16

[Richard Marti (:Paenglab)]

Attachment: proposal

This is a proposal based on the mockup of comment 15.

- the user icons are aside of the bubbles
- the bubble with the nick called have a Highlight border.
- if the window is less than 600px tall then the user icons are removed and the
  spacing is smaller.
- exchanged the margin-left, -right and padding-... with the -moz- counterparts
  to be rtl conform. 

I can't say how it looks under Twitter because I don't use it.

Comment 17

[Richard Marti (:Paenglab)]

Attachment: Screenshot with patch on normal window

Comment 18

[Richard Marti (:Paenglab)]

Attachment: Screenshot with window height less than 600px

Comment 19

[Andreas Nilsson (:andreasn)]

Comment on attachment 612823 [details] [diff] [review]
proposal

Looks good, if we can do something about the alignment. Posting the mockups I showed you on irc shortly.

Comment 20

[Andreas Nilsson (:andreasn)]

Attachment: normal window mockup

Comment 21

[Andreas Nilsson (:andreasn)]

Attachment: small window mockup

Comment 22

[Florian Quèze [:florian]]

Comment on attachment 612823 [details] [diff] [review]
proposal

I like the direction this is taking.
2 comments:
- when looking at both your screenshots and Andreas's mockups, I think the space between the timestamp and the right border of the bubble should be identical to the space between the nick and the left border of the bubble.
- 600px for the media query seems a bit too large. It's the height of the frame in which we display the messages, not the height of the full Thunderbird window. When the Thunderbird window is maximized on the 13" screen (resolution of 1280x800) of my Macbook, that frame has a height of 597px, so with your patch applied I can never see the contact icons on my laptop's primary screen.

Comment 23

[Richard Marti (:Paenglab)]

Attachment: Patch

This patch aligns the nick and the text. I removed the bottom padding of the text because we have already a padding of 5px on the surrounding box. I gave HR a top margin of 2px to give again a little space between text and HR.

(In reply to Florian Quèze from comment #22)
> 
> - when looking at both your screenshots and Andreas's mockups, I think the
> space between the timestamp and the right border of the bubble should be
> identical to the space between the nick and the left border of the bubble.

done

> - 600px for the media query seems a bit too large. It's the height of the
> frame in which we display the messages, not the height of the full
> Thunderbird window. When the Thunderbird window is maximized on the 13"
> screen (resolution of 1280x800) of my Macbook, that frame has a height of
> 597px, so with your patch applied I can never see the contact icons on my
> laptop's primary screen.

I gave now 500px. Is this okay?

Comment 24

[Richard Marti (:Paenglab)]

Attachment: Normal window with patch

Comment 25

[Richard Marti (:Paenglab)]

Attachment: Small window with patch

Comment 26

[Florian Quèze [:florian]]

Attachment: Attachment 616729 with some additional changes

(In reply to Richard Marti [:paenglab] from comment #23)
> Created attachment 616729 [details] [diff] [review]
> Patch
 
> > - 600px for the media query seems a bit too large. [...]
> 
> I gave now 500px. Is this okay?

Yes.

Thanks for the updated patch!

I've just tried it, I like it. I took the opportunity to make some additional changes:

- changing the margin at the top of message bubbles has also changed the margin between the first message and the border of the frame; I added a padding on #Chat to restore the spacing there (this way the spacing between the message bubble and the top of the frame is the same as the spacing between the message bubbles and the left/right borders of the frame).
- removed the variable spacing of interval messages (the time between 2 message bubbles that is displayed when messages are separated by more than 5 minutes) when the window's height is less than 500px
- removed the font-bold and text-shadow attributes of #lastMessage, as it should have the same appearance as interval messages.

Comment 27

[Andreas Nilsson (:andreasn)]

Comment on attachment 617451 [details] [diff] [review]
Attachment 616729 [details] [diff] with some additional changes

looks good!

Comment 28

[Andreas Nilsson (:andreasn)]

Comment on attachment 616729 [details] [diff] [review]
Patch

Minus on these as I think we should go with Florians latest patch.

Comment 29

[Andreas Nilsson (:andreasn)]

Comment on attachment 617451 [details] [diff] [review]
Attachment 616729 [details] [diff] with some additional changes

Also setting ui-r+ on this patch

Comment 30

[Mike Conley (:mconley) (:⚙️)]

Committed to comm-central as http://hg.mozilla.org/comm-central/rev/d72f64d657a9