The UXD Research team recently conducted a study to explore differences between light and dark visual themes for PatternFly’s navigation component. Previous research on this topic yielded inconclusive results, so the PatternFly team wanted to follow-up on that study to determine if meaningful differences in performance, perception, or preference existed or not between the two themes.
The test approach
For this study, a mixed methods approach was used in which data collection was conducted through unmoderated and moderated techniques. All data was collected through the Loop11 platform, an online user testing platform. Fifty-six participants performed task scenarios in the unmoderated protocol, while eight participants performed the same tasks in moderated testing.
Participants were presented with one of four variations of the interface (shown below).
Participants were asked to complete five tasks as part of the study. The first four tasks were designed to measure participants performance (i.e. task completion time) and perception (i.e. how readable is this interface?). The fifth task was designed to measure the participant’s preference for dark theme or light theme.
Following each question, participants were given a chance to explain why they responded the way they did. This method allowed us to gather quantitative and qualitative data to build a complete picture.
Data analysis on the quantitative data revealed that there were no statistical differences between light and dark navigation themes in terms of performance or perception. There was, however, a statistically significant difference in preference between the themes. Participants significantly preferred the dark theme more than the light theme and indicated this preference was due to the reduced strain on the eyes and the increased contrast between the navigation bar and the content area. For more details, check out the PatternFly Visual Theme Results PDF.
The PatternFly team has decided to move forward with a dark theme for navigation, as opposed to the light version given the research results. From a visual design perspective, the intent of the light navigation theme was to use dark imagery and backgrounds in the content area of the applications. The heavy dark content required a lighter navigation style to balance it. As PatternFly has been adopted, we realized that not all the applications and pages have data visualizations that use the dark imagery. For this reason, it made sense to adjust the approach to the dark theme for navigation.
Development will begin immediately to introduce the dark navigation theme to PatternFly. To ensure applications have adequate time to adopt and migrate, the dark navigation will be added to PatternFly as an opt-in solution. The plan is to deprecate the light navigation at a later date, after adequate time for adoption has passed.