| Table of Contents | ||
|---|---|---|
|
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%).
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%).
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
Usability test 3
For the final test, we wanted to see whether regular or bold text performs better in the selected message bubble version with the light grey background.
Studies have shown that readability tends to increase when using a regular font over a lighter (font-weight: 400) and worsens as fonts get boulders (over 700). The reason is that lighter type weights introduce more negative space and heavier type weights introduce more positive space. Both require readers to concentrate more. We tested two versions within this range; in our case, the bold version was preferred by significantly more people (73%) over the regular text (27%).
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
We have a winner!
Based on our findings, we will update our messaging threads so that the background for messages from other people is changed from light blue to light grey, and the text changed from regular to bold.