# Exploring Button Design for Low Contrast User Interfaces

Ashley Colley, Çağlar Genç, Markus Löchtefeld, Heiko Mueller, Walther Jensen, Jonna Häkkilä

► To cite this version:

Ashley Colley, Çağlar Genç, Markus Löchtefeld, Heiko Mueller, Walther Jensen, et al. Exploring Button Design for Low Contrast User Interfaces. 18th IFIP Conference on Human-Computer Interaction (INTERACT), Aug 2021, Bari, Italy. pp.411-415, 10.1007/978-3-030-85607-6_48 . hal-04291253

HAL Id: hal-04291253

https://inria.hal.science/hal-04291253v1

Submitted on 17 Nov 2023

**HAL** is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>

Distributed under a Creative Commons CC BY 4.0 - Attribution - International License
<figure><img src="image_2.png" /></figure>

ifip

International Federation for Information Processing

This document is the original author manuscript of a paper submitted to an IFIP
conference proceedings or other IFIP publication by Springer Nature. As such, there
may be some differences in the official published version of the paper. Such
differences, if any, are usually due to reformatting during preparation for publication or
minor corrections made by the author(s) during final proofreading of the publication
manuscript.
# Exploring Button Design for Low Contrast User Interfaces

Ashley Colley<fnref n="1" /> Çağlar Genç<fnref n="1" /> Markus Löchtefeld<fnref n="2" /> Heiko Mueller<fnref n="3" /> Walther Jensen<fnref n="2" /> and Jonna Häkkilä<fnref n="1" />

**Abstract.** Mainstream display technologies have progressed towards higher resolutions and contrast levels. However, for IoT applications, where displays are embedded in the environment, there are requirements to optimize displays for lower power consumption or minimal environmental impact, potentially sacrificing contrast or switching time. We approach this issue by considering the spatial design of UI components. As a first step, we explore switch type UI components (e.g., check box, toggle switch) and evaluate the performance of 4 alternative spatial designs at low contrast levels. As a contribution, we open the issue of spatial UI design for low contrast and demonstrate an approach for its evaluation.

**Keywords:** low contrast · UI components · visibility · design.

## 1 Introduction

The evolution of display technologies has witnessed ever increasing performance in terms of resolution, contrast levels and refresh rates. However, for Internet of Things (IoT) applications, displays may need to sacrifice parameters such as resolution, contrast and refresh rate to achieve low power consumption.

<figure><img src="image_3.png" /><figcaption>**Fig. 1.** The four graphical styles of switch UI component, with the 6 low contrast variants of each tested in the study</figcaption></figure>

Several ‘low-contrast’ display technologies exist, e.g., the chemical lateral flow displays used in cheaper pregnancy tests. Other technologies such as electrochromic [5] and thermochromic displays [6, 9] provide opportunities for the

<footnote n="1">¹ University of Lapland, Rovaniemi, Finland</footnote>

<footnote n="2">² Aalborg University, Aalborg, Denmark</footnote>

<footnote n="3">³ University of Oldenburg, Oldenburg, Germany</footnote>
display designer to optimise the display design to minimise power consumption
at the expense of e.g. switching time and contrast.

Decreased display contrast may lead to situations where the state of the
display is not clear to users [2, 8, 10]. Similar contrast issues can also occur due to
environmental factors, e.g. reduced contrast caused by reflection on smartphone
screens [3] . For people with degraded visual performance, e.g. due to macular
degeneration, cataracts or glaucoma, display contrast is even more critical.

We approach the issue of low-contrast visual displays from a UI design per-
spective by exploring the impact of visual design on the usability one of the most
basic UI components, a simple switch button, when rendered at low contrast lev-
els. Through a smartphone app based user study with 25 participants we report
on the influence of 4 different switch designs when presented at low contrast
levels (Figure 1). As a contribution, we open the issue of design for low contrast
user interfaces and demonstrate an experimental approach for its evaluation.

## 2 Concept

To explore the impact of visual design on usability at low contrast levels we
created 4 alternative designs for the *on / off* switch UI component. This was
selected as it is one of the most basic of UI components, common to all formats of
GUI. As a design criteria, the active visual areas of each of the component designs
were identical, only the spatial arrangement was changed between the cases. The
evaluated switch component designs were (see Figure 1): (A) a ‘checkbox’ style
switch, with white indicating the *off* state and black the *on* state without any
visual reference for comparison. This case was included as a baseline. (B) a left-
right toggle switch style design. - similar in design to switch components of the
Apple iOs or Google’s Material Design. (C) a variant of switch style B, but
with a visual gap separating the two areas of the switch. (D) a variant of switch
style B, but with one graphical areas surrounding the other. The area of the
surrounding area being identical to the central area.

Six levels of greyscale were selected for the components, with the following
percentages of black (k value): 44%, 46%, 48%, 52%, 54%, 56%. These levels
were selected based on initial exploration to provide the right level of challenge
when viewed on a smartphone screen. In components with two filled areas (styles
B - D), the grayscale colors were used in pairs balanced around a k value of 50%,
i.e., [44%, 56%], [46%, 54%],[48%, 52%]. To explore the effect of orientation, e.g.
left-right, the grayscale color pairs were applied in both orientations, resulting
in a total of 6 variations per component style (Figure 1).

## 3 User Study

A test application running on Android smartphones was developed, this included
a test to evaluate the contrast capabilities of the test device / participant, as
well as evaluation of the four switch component styles.
**3.1 Test Procedure**

To identify any issues with either the performance of the smartphones used for
testing, or the participant's low contrast vision, we implemented a sine wave
grating test based on the Functional Acuity Contrast Test (FACT) [4] to our
test app. The test consisted of 25 sine wave gratings with between 1.5 and 18
cycles per degree (assuming a 45 cm viewing distance from a 5" device screen)
and contrasts between 0.6% and 8.3%. Each of the 25 grating patterns was
presented once, and randomly inclined at an angle of either -15°, 0° or +15°.
This test aimed to identify outliers due to, e.g., issues with the participant's test
configuration or participants with poor low contrast vision.

As training, the test app presented an initial screen showing images
of the 4 styles of switch and then one test case of each style of component was
tested, the results of which were discarded. The test application then presented
the 24 test cases (see Figure 1) in random order. For each case, the model
illustrating the switch in *off* and *on* states was first shown, then after a delay
of 1.5 s, the test case image was shown. The participant then assessed if the
presented case represented the *off* state or *on* state of the component, pressing
a button to indicate their selection.

Test participants, recruited through the authors' personal networks, installed
the test app on their own devices, and after completing the test, sent a log
file of the test data to the facilitator. Altogether 28 participants returned data
in the study. After validation with the 1.5IQR rule data from 3 participants
were removed as outliers. Hence data from 25 participants (14 female, $\bar{age} =$
27.2, $SD = 4.6$) was further analyzed.

**3.2 Results**

Of the 25 contrast test images, the mean number correctly identified participants was 23.0, *SD* = 1.3, with participants identifying between 20 and 25 correctly. Hence it was deemed that all participant / test configuration combinations provided a normal level of contrast differentiation. The mean correct response rate across the 4 test cases in each style completed by each participant was calculated (Figure 2. A within-subjects ANOVA identified a significant effect of style on correct response rate at the *p* < .05 level [F(3, 4) = 96.197, *p* < .001]. Pair-wise t-tests, with a Holm corrected *p* level, identified significant difference in the correct response rate between Style A (correct response rate = 0.46) and the other Styles; B (0.99), C (0.96) and D (0.90) [all *p* < .001].

Task completion times were first processed using the 1.5IQR rule, by which times above 6536 ms were identified as outliers and removed from further analysis. Figure 2 shows the median and quartile distribution of the task times. A within-subjects ANOVA test identified a significant effect of style on task time at the *p* < .05 level [F(3, 4) = 8.032, *p* < .001]. Pair-wise t-tests, with a Holm corrected *p* level, identified significant difference in the task times between Style A (1960 ms) and the other Styles; B (2434 ms), C (2452 ms) and D (2704 ms) [all *p* < .001]. No other significant differences in task times were identified.
<figure><img src="image_4.png" /><figcaption>**Fig. 2.** Left: Task time per component (Outliers removed). Right: Mean percentage correct answers per component style. Error bars indicate standard error of the mean</figcaption></figure>

The results were further analyzed to identify if any bias towards on or off state was present, e.g., bias in spatial perception due to left-to-right reading direction [1], or, in the case of Style D, inner-outer bias. For Styles B and C the observed differences were negligible, whilst for Style D a Chi-square tests of independence for showed that there was no significant association between component state and correct response, $\chi^2(1, N = 150) = 1.4, p = .23$. For component Style A there was a clear bias towards perception that the switch was in the on state, with 111 / 150 (74%) of answers responding in the positive sense.

# 4 Discussion and Conclusion

Compared to the other component styles, switch style A presented a much more challenging case to participants, requiring the absolute estimation of a grayscale shade without any reference. When displayed on a white background, participants tended to overestimate the darkness of the shade, with 74% of answers reporting the switch to be in the on state, rather than the expected 50%. The primary cause of this phenomena is the influence of the white background. Prior works have mitigated such issues by presenting grayscale samples on a grayscale noise pattern background [7]. However, our use of a white background is more representative of actual usage within a UI and highlights a potential problem when using this style of component.

We acknowledge that our study was limited by the number of participants. Although our study design represented a good initial approach, it lacked the sensitivity needed to identify subtle differences between the performance of the alternative UI component designs. In future this could be improved, e.g. by limiting the amount of time each component is visible.

**Acknowledgements:** This work has been supported by the European Union's Horizon 2020 Programme under grant no. 760973, DecoChrom.
References

1. Afsari, Z., Ossandón, J.P., König, P.: The dynamic effect of reading direction habit on spatial asymmetry of image perception. Journal of vision **16**(11), 8–8 (2016)

2. Buchner, A., Baumgartner, N.: Text-background polarity affects performance irrespective of ambient illumination and colour contrast. Ergonomics **50**(7), 1036–1063 (2007)

3. Colley, A., Tikka, P., Huhtala, J., Häkkilä, J.: Investigating text legibility in mobile ui: a case study comparing automated vs. user study based evaluation. In: Proceedings of International Conference on Making Sense of Converging Media. pp. 304–306 (2013)

4. Inc, S.O.C.: Functional acuity contrast test (fact) (March 2018)

5. Jensen, W., Colley, A., Häkkilä, J., Pinheiro, C., Löchtefeld, M.: Transprint: A method for fabricating flexible transparent free-form displays. Advances in Human-Computer Interaction **2019** (2019)

6. Liu, L., Peng, S., Wen, W., Sheng, P.: Paperlike thermochromic display. Applied Physics Letters **90**(21), 213508 (2007)

7. Matejka, J., Glueck, M., Grossman, T., Fitzmaurice, G.: The effect of visual appearance on the performance of continuous sliders and visual analogue scales. In: Proceedings of the 2016 CHI Conference on Human Factors in Computing Systems. pp. 5421–5432. CHI ’16, ACM, New York, NY, USA (2016). https://doi.org/10.1145/2858036.2858063

8. Mayr, S., Buchner, A.: After-effects of tft-lcd display polarity and display colour on the detection of low-contrast objects. Ergonomics **53**(7), 914–925 (2010)

9. Peiris, R.L., Nanayakkara, S.: Paperpixels: A toolkit to create paper-based displays. In: Proceedings of the 26th Australian Computer-Human Interaction Conference on Designing Futures: The Future of Design. pp. 498–504. OzCHI ’14, ACM, New York, NY, USA (2014). https://doi.org/10.1145/2686612.2686691; http://doi.acm.org/10.1145/2686612.2686691

10. Wang, A.H., Chen, M.T.: Effects of polarity and luminance contrast on visual performance and vdt display quality. International Journal of Industrial Ergonomics **25**(4), 415–421 (2000)