Background

We received some feedback from users that messages displayed in the new message thread view were slightly difficult to read due to the light blue background. This feedback was specific to messages sent to the user (as opposed to from the user - which appear on a dark blue background).

We decided to run a series of usability tests to ascertain how we could make these messages easier to read.

In each test, we used variations of our messaging thread and asked participants to indicate which version they found most readable and why.

We ran the test with 20 people between 44-64 from the UK.

Usability test 1

In the first round of usability testing, we tested three prototypes with variations of our messaging thread background.

We included our current version with a light blue background, a version with a full white background with a faint border and lastly a version with a light grey background. Both message bubbles are well-known patterns in messaging applications for displaying messages from other people.

To our surprise, the light grey background - which has the lowest contrast ratio with the text - was favoured (60%) over both our current design (13%) and the white background alternative (27%).

Open

Feedback snippets from Usability test 1

• To be brutally honest, I don't really see much of a difference, in terms of legibility. I guess the darker background on this one stands out the most as a separate response. The second one was too pale, and the outline one didn't follow the pattern set by the first message.

• I prefer the more obvious background, that still leaves the text legible.

• The grey highlights the statement.

• The contrast between the white and grey draws my eye to the info box

Usability test 2

In the second test, we wanted to see if adding a stronger border to the white background would affect its readability and how it would fair against the version most people preferred in the previous test.

The results were again the same. The grey background version (80%) was preferred over the white background version (20%).

Open

Feedback snippets from Usability test 2

• The grey background in the second text is easier on the eye. In general, eliminating too much bright white is a good thing, I think.

• Slightly grey background clearer

• The grey shading makes it clear that it is a reply and is more familiar because it looks like text/WhatsApp chats

• The shading makes it stand out as an actual chat reply bubble

• I like the lightly shaded background rather than the glaringly white background as it makes the text easier to read and the page look more professional

Feedback snippets from Usability test 3

• I like the lightly shaded background rather than the glaringly white background as it makes the text easier to read and the page look more professional

• There is a relatively large amount of meta data. I see the long string at the end when first glancing and think uh oh, this looks complex when in fact it is a very simple message if I read it from the top. So, it needs a clear distinction between message and meta data. Emboldening helps to achieve this though you cold have also made meta data smaller (or at least the message id bit, why is that even there, could you not put a mini accordion in to hide it?)bit

• The boldness of the main text/words differentiates it from the rest of the text

• The text is brighter and bolder

Outcome