Click UI Testing: Iterative Colour Tests

By July 3, 2018No Comments

Portfolio > User Research Studies > Click UI Testing: Iterative Colour Tests


Colour is a key component to the design of a ‘find’ feature (similar to the find feature in a browser), that allows users to sustain context while searching for a key term in an information-rich screen. 

USER PERSONA: Lab Administrators,  IT people and lab and researchers on Clarity LIMS (see for more context)

CONTEXT: Users on lab software searching through a file list to find something specific.

APPROACH: I did not want to assume that people had used find in their browsers, so I took inspiration from their patterns, but did not make assumptions on colour. I used colours from a provided colour palette with the minimum amount of UI elaboration as possible. I tested the initial set of options with 3 colour blind team members and removed one unreadable option (they all could not see). 

SETUP: Multiple choice question on Usability Hub including an ‘and why’ question.

RECRUITMENT: Through the Clarity Influitive online community.



TEST QUESTION: Of the colours shown, which do you find the most noticeable?



Pink – 50%

“It was the darkest, and stood out most amongst the other colours. 

It is the darkest colour and doesn’t blend in with other colours on the screen.” 

“The highlighting is noticeable but the text is hard to read for the search box”


Yellow – 21%

“Yellow is used for highlighting, more standard in electronic documents than purple. Did not choose green because you have a green folder button and there is no relation between the search results and the button.”

“Yellow – sticks out – but appears to match the color of the i in illumina.”


Green – 0%

“…The green is just terrible, hard to see the lines next to the gray.”

Orange – 21%

“I had the easiest time seeing, and distinguishing the text in that colour as well as identifying the color as being a separate object on the page.”



Since yellow and orange were evenly split (with yellow having brand overlap problem), I took orange ahead into the second iteration and tested it against the pink colour. I changed both of the designs to ‘take up more space’ in the background colour, and toned down their intensity.


Portfolio > User Research Studies > Click UI Testing: Iterative Colour Tests