Search Performance and Aesthetics: Harmonious Colours and Grouping for a Better User Interface

: Visual search is people's essential natural mechanism to execute day-to-day tasks that occur mainly on digital screens and control panels. Human interaction with digital devices is usually dependent on the visual elements of the screen, which draw attention and guide users to the element of interest. This study investigated the impact of colour harmonies and their grouping patterns on the visual search performance and direct manipulation tasks on a table-like cluttered interface. The results obtained in this study show that different colour harmonies affect time performance of visual search tasks. Search performance is changing due to different colour harmonies. The use of split complementary and triadic colour palettes for the UI design outperforms analogous colours in visual search performance. The research also shows that any colours of the specific colour harmony can be used without influencing search performance, in other words, search performance will not change if the same colour harmony is used. Results also imply that colour coding using different grouping patterns affects visual search performance.


INTRODUCTION
Human-computer interaction has revolutionised day-to-day human activities, from simply clicking one button to turning on the device to complex interfaces with cluttered displays that cannot be used without training or instruction.Despite increasing the complexity of the interface and broadening its functionalities, the main style of interaction remains the same from the beginning point and click task [1].Although the development of new hardware devices, such as light pens, digitizers, joysticks, arrow keys, trackballs, touch screens, and solutions used for manipulating virtual objects in a three-dimensional space, including special gloves [2], the main principle of interaction-point and click task-remains the essential style of interaction.
In addition to the technological aspect of the physical interaction mechanism with the interface, natural psychological mechanisms guide users in their interaction and decision-making.Many studies have provided theories and proven human response mechanisms to visual stimuli such as colour, shape, and the distance between shapes, including Gestalt principles and preattentive theory.Commonly, colour features influence the usability of an interface owing to different colour attributes, associations, and representations.The impact of colour can cause both errors and highly efficient task execution.Additionally, colour is considered one of the human attention's most basic preattentive features [3].
Previous research on this topic mainly focused on pure primary and highly saturated colours, which are rearly used for UI buttons.The main objective of our research is to investigate colours organised in Itten's harmonies and their search performance on the UI.The motivation for our research is to investigate colours that are close to the real use in the UI, and test search performance between different colour harmonies.
We believe it is essential to examine whether there is a difference in the visual search task performance between colours in different harmonies.These results could be significant when choosing a preferable colour group for a UI colour palette using colour harmonies.The relationship between the colours in each harmony can differ in conspicuity and performance.We investigated whether a particular harmonious relationship between colours can lead to better visual search performance.We propose that colour harmonies can be used as a guide for choosing a colour palette for UI design, knowing each harmony's visual search performance and different harmonies' performance.Regardless of the colour chosen, a designer can predict and adjust the time spent searching for the point of interest on the display.
We consider the application of certain colour harmonies in user interface design.In particular, we explored whether known colour harmony principles can be used, to improve visual search performance, and help designers choose the proper colour combination.Additionally, this study examines the effect of grouping patterns on visual search performance and its interaction with the type of colour harmony.

The Impact of Colour on the Visual Search Performanceof the User Interfaces
Colour coding is an indispensable part of designing all types of user interfaces, including websites and mobile applications, human-machine interfaces in the industrial environment, displays in vehicles, and all types of innovative user interfaces for virtual reality, augmented reality, etc.
The effectiveness of colours in improving the usability of a display has been studied for many years.The importance of colour attributes, such as hue, lightness, and saturation has been examined under diverse conditions in the previous studies.In addition, many researchers have investigated the conspicuity of the user interface elements coded with specific colours [4][5][6][7].Regarding conspicuity and noticeability, it has been claimed that colour contrast is an important factor in visual search efficiency [8,9].For example, Bodrogi [8] investigated the impact of the chromaticity contrast displayed on a multicolour user interface.This confirmed that the chromaticity contrast is an efficient tool for controlling the conspicuity of the displayed elements.
Similarly, Nagy and Sanchez showed that visual search time can be measured as a function of the colour difference (the distance on the CIE lab diagram) between the target and distracter [10].Another similar conclusion was derived from a visual search of multicoloured geographical maps [5].Maps that contained colours with 150 o and 80 o of perceptual difference were perceived as the most noticeable.Not only the hue of the colour but also the lightness and saturation affect the visual search performance and noticeability of the UI elements [11,12].Some researchers have investigated colour features in experiments with figure background colours and computer icons.There were similar conclusions regarding the colours and colour combinations that were most noticeable.Previous research has shown that certain colour combinations for figure/background improve users' visual search performance on an LCD monitor [13][14][15][16][17][18].On the other hand, research emphasizes that improper use of colour can lead to severe consequences, decreased performance, and visual fatigue [19].Additionally, it is claimed that optimum performance is dependent on the careful selection of colours in the design of visual displays [13].
The above research implies the complexity of colour as a design element and the presence of potential risks that can cause involuntarily human fault.Another essential colour feature to consider is colour association with a specific task.It was demonstrated in the work of [20] that colour association can cause sensation to the user which is not correlated with the desired action.Consequently, the user may make a mistake or cause more resource consumption or other unwanted actions, as shown in [20].
Although there are studies explicitly related to the role of various colour features, very few have dealt with colours in harmonious relationships.The use of colour harmonies in graphics and UI design is recommended [21].It is suggested using split complements, one colour plus two colours on either side of its complement, or choosing three colours at equidistant points around the colour circle [21].Humans perceive hues as more harmonious and preferable, whereas complementary colours are often perceived as least harmonious [22][23][24].It is common that similar hues, often included in analogous colour harmony, are used in web and visual designs for digital devices and are considered the most appealing colour combinations [25].Therefore, the aesthetic preference of colour combination might be relevant in terms of functionality and performance.Conclusions from the study [26] indicated that colour combinations of high preference resulted in greater legibility and faster response, which was measured using an EEG device.In contrast, less preferable colour combinations had less legibility and slower EEG response.

Colour Harmonies
Several theories claim that colours can be in a specific relationship that is perceived as aesthetically pleasing, and the relationships are called colour harmonies [25].However, theories differ in the rules proposed for certain relationship among colours.
Itten's theory categorizes colours into twelve evenly spaced colours in the hue circle (colour wheel).The hue circle is based on three subtractive primary colours blue, red, and yellow.These primary colours in the Itten hue circle form an equilateral triangle.An equal mixture of two primary colours produces a secondary colour, and these are evenly spaced on the hue circle.Itten's theory supports harmonious combinations of two (complementary harmonies), three (triadic harmonies), four (tetrad harmonies), and six colours (hexad harmonies).Itten described the rules of colour harmony from an artistic perspectives.
In contrast to colour theories used in fine art, and its artistic representation and classification of colour, such as colour wheels, in science, colour is defined and represented via colour spaces (e.g., RGB, CMYK, Lab, Hsv etc.).However, colour spaces cannot offer UI designer recommendation on which colour combination to use.Neither colour spaces nor colour harmonies are complete in describing the colour properties and their impact on the user when using a UI on digital devices.Combining these two methods of defining colour, can provide useful guidance on colour usage for UI design.
The most prominent and frequently used colour harmony is Itten's harmony.Our work aims to examine three different harmonies because the recommendation of the UI design proposes the ideal use of three primary colours for interface design [27].
Colour harmony, which is considered the most appealing to the human eye, is analogous [23].The relationship which defines this harmony is that colours are adjacent to each other, whereas the complementary colours are on opposite sides of the colour wheel.Analogous colours are most frequently used in design [25].However, colour conspicuity is low when using similar colours [23].Therefore, it is of great importance for visual search tasks to be conducted efficiently and with minimal errors.

Impact of the Grouping UI Elements on Visual Search Performance
Grouping and arranging elements to create a whole is one of the basic Gestalt principles [28].There are various ways to arrange elements to be perceived as a whole, where colour is one element that is effective for creating visually separated groups.
It is known that grouping visual elements using colours can affect visual search performance.Michalski [2] confirmed that the use of colour for grouping purposes noticeably speeds up task performance.According to the results of his study, there is a recommendation for using larger coloured areas rather than smaller ones due to better operation speed and accuracy.The preattentive theory also indicates that one differently coloured object causes a preattentive effect and immediate recognition of an object [29], but only if the difference in the colour of the target and distractors is sufficiently large [3].
To examine the relationship between colours of the same harmony and their ability to create visually separated groups, different grouping layouts were used.Additionally, the grouping of elements regardless of colour was examined.

Participants
Twenty college students, aged 20 to 29 years, participated in this study.All participants had a normal or corrected vision without colour blindness or weakness.The participants did not participate in any similar experiments.

Apparatus
The experiment was carried out in the university laboratory, under constant lighting (~300 lx), which is a recommendation for classrooms and office screen-based tasks.Stimulus presentation and participant data collections were performed using a custom-built interactive web page.The stimuli were displayed on a 24 inch LCD monitor (Eizo CG241W) at a resolution of 1920 × 1200 (16:10).The viewing distance was set to 50 cm from the monitor screen.

Experimental Design
Generally, all combinations produced 24 experimental conditions to be examined: (three types of harmonies) × (four colour combinations) × (two grouping patterns) = 24.

Stimuli
The stimuli used in the experiment consisted of 24 rectangular buttons of the same size, organized in a matrix, without outline or space or margin.There were 28 tables, each containing 24 coloured buttons, each of which was assigned a three-digit number.Each table consists of buttons of three different colours.Each table represents a different colour harmony (a total of 3 examined harmonies).Three examined colour harmonies vary in two grouping patterns.The numbers that appeared on each button were randomly assigned.The tables in the test also have a random sequence of appearing to remove the bias of the individual differences between the participants of the experiment.
First, participants were shown the stimulus (one button on the screen), and were required to memorize the colour of the button and the number assigned to the button.Afterward, participants had to visually search for the target on the button matrix and find the memorized button.Each button matrix in the experiment consists of three colours (eight buttons in one colour × three colours) organized in two grouping patterns defined for the experiment, which means that every trial (search) participant is provided with a new button matrix, with specific colour harmony and one of two defined grouping patterns, in randomized order.When participants find the target, they need to move the cursor to the target button and click on the mouse button.A visualization of the experiment is shown in Fig. 1.

Colour Combination
The experiment was designed to evaluate the noticeability of Itten's well-known colour harmonies.For the experiment and recommendation of the number of colours on the user interface.All twelve colours on the wheel of Itten were used in the experiment.The colour harmonies used in the experiment were: split-complementary, triadic, and analogous.
The colours selected for the experiment were chosen using the Paletton web tool and adjusted according to the W3C contract checker to fulfill AA requirements for the contrast between text and background colour [30].The lightness and saturation of the colour were held constant to maintain the uniformity of all the colours in the experiment.Palleton, developed by [27], was also developed to fill the gap between artistic preferences and good practices for using colour to help designers.
The font of the numbers on the buttons is sans-serif and bold, size 14 px according to the W3C recommendation.

Procedure
The participants were required to memorize the colour and number of target buttons when performing the visual search task.The target remained present for 3000 ms.Each trial began by memorizing the target for 3000 ms.Subsequently, the participants had to visually search for the target on the matrix with randomly assigned coloured buttons and numbers.When the participants found the target, they needed to move the cursor to the target button and click the mouse button.The participants repeated the action until all 28 matrices were identified.

Data Collection and Analysis
We considered accuracy and search time when participants find the target icon as dependent variables.The data was recorded by a custom experimental program and analyzed by ANOVA and post-hoc test in SPSS.

RESULTS
The statistical analysis of the results involved both descriptive statistics and hypothesis testing.The important parameters included frequency, percentage, and average sample size with a standard deviation of the sample.The results are presented in the tables.Differences in the parameters used were tested using ANOVA and t-test for large independent samples.The impact of the interaction between two independent variables and the individual impact of independent variables on the dependent variable were investigated using a two-factorial analysis of the variance of different groups.Statistical processing and analysis were performed using the specialized software package SPSS for Windows.Tab. 1 shows that the mean time for the target button search for the first grouping pattern using analogous colours was 4.905 ± 2.494.For the second grouping pattern using analogous harmony, the average mean time for the target search was 5.183 ± 2.616.The mean time for the target button search for analogous harmony regardless of the grouping pattern was 5.183 ± 2.616.217 N -number of participants, Min -minimum value on the sample, Max -maximum value on the sample, M -mean, SD -standard deviation, Sum -sum, A -analogous colour harmony, S -split-complementary colour harmony, T -triadic colour harmony, K -monochrome button matrix (all buttons coloured in the same colour).
The mean time for finding the target button for the first grouping pattern using split-complementary colours was 4.254 ± 1.503.The same harmony for the second grouping pattern had an average mean time for the target search of 4.749 ± 2.808.The mean time for the target button search for split-complementary colour harmony regardless of grouping pattern was 4.503 ± 2.261.
The mean time for the visual search for each button matrix for the first grouping pattern using triadic colourswas 4.037 ± 1.183.The second grouping pattern for the same colour harmony mean time was 4.458 ± 2.107.
The number of incorrect responses for analogous colours for the first grouping pattern was 4, whereas, for the second grouping pattern, the number of incorrect responses was 11, as is shown in Tab. 2. Therefore, there were a total of 15 incorrect responses for analogous colour harmony.
The number of incorrect responses for splitcomplementary colours for the first grouping pattern was 7. In contrast, for the second grouping pattern, the number of incorrect responses was 22, shown in Tab. 2. Therefore, there were a total of 29 incorrect responses for splitcomplementary colour harmony.
The number of incorrect responses for triadic colours for the first grouping pattern was 45, whereas, for the second grouping pattern, the number of incorrect answers was 25, as shown in Tab. 2. Therefore, there were 70 incorrect responses for triadic colour harmony.
For the monochrome button matrix, which consists of one colour, the total number of incorrect responses is 5.
One-way ANOVA is used to determine whether there are statistically significant differences in the search time between three examined colour harmonies (analogous, split-complementary, and triadic), shown in Tab. 3.
The search time for the target button for analogous colour harmony was 5.183 ± 2.616, for the splitcomplementary colour harmony was 4.503 ± 2.261, and for triadic colour harmony is 4.247 ± 1.719 (F = 13.161,p > 0.001).Therefore, an additional Tukey Post Hoc test is conducted to examine which colour harmony the statistically significant results are present, as shown in Tab. 4. The Tukey test showed that the search time for the target button for analogous colour harmony was significantly longer than for both split-complementary and triadic colours.However, the search time between splitcomplementary and triadic colour harmonies did not show statistically significant results..00N -number of participants, Min -minimum value on the sample, Max -maximum value on the sample, M -mean, SD -standard deviation, Sum -sum.A -analogous colour harmony, S -split-complementary colour harmony, T -triadic colour harmony, K -monochrome button matrix (all buttons coloured in the same colour).A -analogous colour harmony, S -split-complementary colour harmony, T -triadic colour harmony, K -monochrome button matrix (all buttons coloured in the same colour).
A t-test for the large independent samples was used to examine whether there was a statistically significant difference in the search time between the three examined colour harmonies and monochrome button matrices (see Tab. 5).The test results were statistically significant and showed that there was a significant search time difference between the three examined colour harmonies and the monochrome button matrix.Monochrome button matrixes provided a search time of (6.000 ± 3.217), and analogous colour harmony ((5.183 ± 2.616), t = 2.788, p < 0.01).Split-complementary colour harmony provided search time of ((4.503 ± 2.261), t = 5.521, p < 0.001).Triadic colour harmony provided a search time of ((4.247 ± 1.719), t = 7.275, p < 0.001).A -analogous colour harmony, S -split-complementary colour harmony, T -triadic colour harmony, K -monochrome button matrix (all buttons coloured in the same colour).
In addition to examining the visual search time measurement for three different colour harmonies and monochrome button matrices, we examined whether there was a statistically significant difference caused by the two different colour grouping patterns used (see Tab. 6).First, we examined whether there were differences between two colour grouping patterns of the same colour harmony (the differences were tested for each examined harmony).We examined the visual search time differences for the first and second grouping patterns regardless of colour harmony.For analogous colour harmony, the first and second grouping patterns did not show statistically significant differences in search time (t = 1.784, p > 0.05).Furthermore, for split-complementary colour harmony, there was no statistical difference in search time between the first and second colour grouping patterns (t = 1.829, p > 0.05).However, a statistical difference was observed between the first and second colour grouping patterns for triadic colour harmony (t = 2.057, p < 0.05).The mean search time for the first colour grouping pattern for triadic colour harmony was 4.037 ± 1.183, and that for the second colour grouping pattern was 4.458 ± 2.107.
There was a statistically significant difference between the first and second colour grouping patterns regardless of the colour harmony (t = 3.153, p < 0.01).The mean search times for the first and second colour grouping pattern were 4.400 ± 1.848, and 4.889 ± 2.590.590 N -number of participants, Min -minimum value on the sample, Max -maximum value on the sample, M -mean, SD -standard deviation, Sum -sum.A -analogous colour harmony, S -split-complementary colour harmony, T -triadic colour harmony, K -monochrome button matrix (all buttons coloured in the same colour).We used different groups for two-way ANOVA (see Tab. 7) to examine the individual impact of two independent variables (colour harmony and colour grouping pattern) on the dependant variable (search time), and the investigation included the mutual impact of two independent variables.Colour harmony had a statistically significant impact on search time (F = 13.277,p < 0.001).Colour grouping patterns also had a statistically significant impact on the visual search time (F = 10.208,p < 0.01).The Eta squared gained at value between 0 and 1.When it is 0, the independent variable does not have an impact on the dependent variable.According to Cohen (0.01 -small influence, 0.06 -moderate influence, and 0.14 -large influence), the impact of the interaction between colour harmony and the colour grouping pattern has a small influence on visual search time.The interaction of colour harmony and colour grouping pattern was not statistically significant (F = 0.065, p > 0.05) (see Fig. 2).The adjusted coefficient of determination explained 3.7% of the variance in the dependant variable (R 2 =0.037).

DISCUSSION
The main objective of this study was to explore the impact of colour on the adjacent buttons on the UI screen during simple manipulation tasks involving both goaldirected movements and a visual search process.Unlike prior studies regarding colours in UI design, the current investigation examined the effect of colour combinations derived from certain harmony.Furthermore, much attention has been paid to the role of different background colour grouping patterns used as visual grouping factors.
The results obtained in this study provide a clear insight that there is a significant difference in the visual search performance task among the three investigated colour harmonies.Analogous colour harmony provided the longest search time in comparison with splitcomplementary and triadic colours, where triadic colours resulted in the lowest search time.These results can be explained by considering the difference in distance between colours in the CIE lab chromaticity diagram, splitcomplementary harmony, triadic harmony, and colours in analogous harmony.Colours that split complementary and triadic harmony are more distant in colour space than colours that make analogous harmony.These results follow the research of Nagy and Sanchez.They found that colours that are more distant in the CIE lab diagram of chromaticity are more conspicuous and found in a shorter amount of time, opposite the colours that are closer to each other on the chromaticity diagram [10].However, there was no significant difference between the splitcomplementary and triadic colours did not occur.This result is expected, considering the similarity of these two harmonies and the similar distance of colours inside these two harmonies.Single-coloured stimulus sets resulted in a significantly longer search time compared to all colour harmonies tested.Therefore, the obtained results show that the colour used as a visual element for accenting information significantly affects visual search performance on monitor display.These results follow the research of Wolfe and Horowitz [3], who advocate that colour is one of the main preattentive factors that guide visual search.
Incorrect responses occurred for every stimulus set.Analogous colour harmony yielded the lowest number of incorrect responses (15 incorrect responses), whereas triadic colours yielded the highest.The splitcomplementary colours are in the middle with the number of incorrect responses.These results indicate that analogous colours can be used if the goal is to minimize the possibility of user error.In contrast, analogous colours resulted in the highest search time.Therefore, if the goal is to minimize search time, analogous colours are not a suitable choice.After analogous colours, splitcomplementary colours provided a greater number of incorrect responses (29 incorrect responses), whereas this colour harmony resulted in a shorter search time in comparison with analogous colours.Although triadic colour harmony resulted in the lowest search time for the target button, the number of incorrect responses for this colour harmony was the highest (70 incorrect responses).The results obtained for the incorrect responses of different colour harmonies can indicate further investigation of the ratio between search performance and incorrect responses for specific colour combinations.
Finally, the experiment included a comparison of two different colour grouping patterns.Inside analogous colour harmony, two different grouping patterns did not show a significant difference in search performance.The same results were obtained for the split-complementary colours.However, triadic colours showed a significant difference in search time performance for the two different colour grouping patterns.This could indicate that the specific set of colours in a specific layout or grouping pattern can result in different search times.
The investigation of the colour grouping pattern, regardless of colour harmony showed a significant difference between the two grouping patterns, with the second grouping pattern providing a longer search time.This grouping pattern was divided into three large areas.According to [2], larger uniformly coloured areas are of better operation speed and accuracy.In contrast, our findings indicate that uniform coloured areas that are too large can slow down search performance.The interaction between colour harmony and grouping patterns was not significant.

CONCLUSIONS
Generally, the findings showed a strong influence of colour harmony on the visual search performance task.Additionally, the colour grouping showed significant influence on the visual search performance as well as the interaction between harmony influence and grouping influence.Coloured button matrixes with background patterns were significantly better operated than single coloured button matrices, supporting the claim that preattentive features and colour accenting provide better guidance and accelerate visual search tasks.The research also confirms that the usage of split complementary and triadic colour palettes for the UI design outperform analogous colours in visual search performance.
Gestalt theorists have advocated the use of colour as an effective grouping factor which was later repeated in other studies.However, few experimental studies have dealt with the influence of colour harmony on performance in the context of user interface design.Although the research was focused on the UI formed of adjacent coloured buttons, the use of colour harmony for the colouring buttons and visual search performance depending on the used harmony may be useful in the analysis or examination of other forms of UI and graphical structures in the context of user interface design, for example, menus, forms, design elements, lists etc.Further research will investigate the behavior of the different colour harmonies applied on different kinds of UIs, different UI screen sizes, the ratio of applied colours, and the interaction of colour harmony and other colour properties such as saturation and lightness.

Figure 1
Figure 1 Two colour grouping patterns used in the experiment

Figure 2
Figure 2 Search time performance, the interaction of colour harmony and colour grouping pattern

Table 1
Visual search time for target, descriptive indicators

Table 2
Incorrect responses, descriptive indicators

Table 3
Search time differences among colour harmonies (ANOVA)

Table 4
Search time differences among colour harmonies (Tukey Post Hoc Test) colour harmony, S -split-complementary colour harmony, T -triadic colour harmony, K -monochrome button matrix (all buttons coloured in the same colour).

Table 5
Search time differences among colour harmoniesand monochrome button matrixes (K) -t-test SD -standard deviation, F-ANOVA test, t-test, p-statistical significance.

Table 6
Search time differences among colour grouping patterns (t-test)

Table 7
Search time performance, the interaction of colour harmony, and grouping pattern (two-factorial ANOVA)