Restyle the conversation bubbles, and swap their colors

[jpt]

iMessage convention is that your own messages are on the right in blue, and the other person you are talking to is on the left in grey. The opposite colors are true of Ricochet and this may be confusing to users coming from the Apple platform. Because I reference Apple or Google often I want to clarify I am not advocating for strictly making things look like Apple or Google made them, but I assume they have some sort of psychological or data-driven reason for one color decision over the other and it seems many other chat apps e.g. Signal have adopted this same convention.

I think we should also darken the blue and invert the color of the text on top of the blue bubbles to be white -- well, almost white: I like #fdfdfd (RGB 253, 253, 253) for the white text.

I like the following blue for the bubbles: #1b89e3 (RGB 27,137,227)
And the following grey for the other bubbles: #f3f3f3 (RGB 243, 243, 243)
For the text on top of the grey bubbles, instead of using pure black, try this almost-black blue: #101822 (RGB 16, 24, 34)

I also think it would look nice if the bubbles were slightly rounded, with an 8px border radius.

I don't have a strong opinion about the "arrow" attached to the current bubble and wonder if anyone likes the way it looks without one. I haven't decided yet.

Also the font being used in the speech bubbles is Liberation Sans Regular, as mentioned in #485.

Example of all below:

[special]

I'm really loving all of your work. You are the kind of hero the open source world needs.

iMessage convention is that your own messages are on the right in blue, and the other person you are talking to is on the left in grey. The opposite colors are true of Ricochet and this may be confusing to users coming from the Apple platform.

Yeah, I know we're breaking the trend here. My theory was that the blue bubbles stand out in the conversation, and you'll be more interested in reading what was said to you. I think I still like that reasoning, but I could probably be convinced to match what everyone else does.

I think we should also darken the blue and invert the color of the text on top of the blue bubbles to be white -- well, almost white: I like #fdfdfd (RGB 253, 253, 253) for the white text.

If we do this one, I'll agree that we should also make the outbound bubbles blue and inbound gray, because white-on-blue is less readable. Personally, I don't love the look of the intense blue dark bubbles with white text, which is why Ricochet went with a lighter blue and all-black text. I dislike this across Apple's platforms too.

Here's another factor: the bubble background is also used to show pending/delivered message states. Bubbles are lighter with a solid border and fill in when messages are delivered. With white text, we can't go too much lighter on that background. Are you thinking of changing the appearance of pending messages more dramatically?

I like the lighter gray. I'm wondering how it would look to use the gray and a slightly lighter blue than Ricochet's current one, but maybe that's not enough color.

There's actually a secret third color: the bubbles turn an orangeish color when messages fail and won't be retried. That is extremely rare, though. For reference, current colors are #eaeced, #c4e7ff, and #ffdcc4.

I also think it would look nice if the bubbles were slightly rounded, with an 8px border radius.
I don't have a strong opinion about the "arrow" attached to the current bubble and wonder if anyone likes the way it looks without one. I haven't decided yet.

The rounded bubbles are good. I think the text input is too rounded, though. I like the little arrows, personally -- it's somehow satisfying that they point to the name at the top of the conversation for inbound messages, and to the text input for outbound messages.

I'll just leave this here, from over in #15 ;)

[jpt]

If we do this one, I'll agree that we should also make the outbound bubbles blue and inbound gray, because white-on-blue is less readable. Personally, I don't love the look of the intense blue dark bubbles with white text, which is why Ricochet went with a lighter blue and all-black text. I dislike this across Apple's platforms too.

I would guess Apple's reason for the loud blue is to keep the color contrast up for accessibility reasons, but I agree it borders on an extreme when it's as saturated as it is. I'll try something more subdued while keeping it color safe, I would expect a subtle change though -- really just adding a tiny bit more grey to the blue. I like white text on blue, personally, but I'll try desaturating the light blue with black text as an option too -- I think the blue in the above is just a bit too soft and pastel.

Here's another factor: the bubble background is also used to show pending/delivered message states. Bubbles are lighter with a solid border and fill in when messages are delivered. With white text, we can't go too much lighter on that background. Are you thinking of changing the appearance of pending messages more dramatically?

Hmm. Still thinking on this. I'm very pro white-on-blue, so I'll need to think of replacement motion design compelling enough here to make it worth it :)

Another consideration is simple thin colored strokes around the bubbles with no background at all...

The rounded bubbles are good. I think the text input is too rounded, though. I like the little arrows, personally -- it's somehow satisfying that they point to the name at the top of the conversation for inbound messages, and to the text input for outbound messages.

I think if the input text grows to multiple lines worth, the rounding should have the same border-radius, while it just grows taller for maybe 3 lines worth. This will result in it looking a bit more round at smaller sizes. I'll lessen it and see how it looks though.

I agree the arrows are a good idea, and have brought them back in #484 -- trying for a slightly different shape, maybe analogous to the leg a coffee table from 1960.

[jpt]

As just a stroke:

[jpt]

Could you imagine the strokes themselves filling in as the message is sent, a mask slowly moving up essentially? Maybe from #f3f3f3 so you can always see something, even when it's not fully sent or failed or whichever color. Could make the received message stroke darker grey too.

[jpt]

Oh, forgot to square the input box.

[special]

I'm liking the stroke look! It's interesting, different, clean. With all due respect to 1960s coffee table legs, I feel like the arrow is a bit too pointy, but that is detail.

Could you imagine the strokes themselves filling in as the message is sent, a mask slowly moving up essentially? Maybe from #f3f3f3 so you can always see something, even when it's not fully sent or failed or whichever color. Could make the received message stroke darker grey too.

Makes sense. There is a small challenge here: we have no idea how long a message will take to deliver. The normal range is maybe 600-3000ms, but on unreliable connections it can be minutes.

It's no problem to animate smoothly when completing faster than expected, but we'd have to stop at a certain level or fall back to a different animation for particularly long delivery times.

Now I'm stuck imagining the bubble line redrawing itself all the way around your message. That might be too visually intrusive for message delivery, but oh it does sound pretty.

I think the padding there will be too big for shorter messages.

Great stuff, as always!