Message thread display - Usability testing
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
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
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
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.