The Effects of Mobile User Interface Red and Blue on Affordance

Abstract

Online shopping and e-learning utilizing smartphones are becoming more active. In this process, decision-making such as "Yes or No" is being made directly on the display. Mobile displays do not provide visual clues, i.e., affordance, for behavior induction, such as properties that can be pressed in the user interface, in physical contact. Therefore, this study aimed to investigate the effect of red and blue graphic user interface on affordance in the mobile environment. The research questions are as follows: First, does hue affect affordance? Second, does tone affect visibility? Third, what is the relationship between visibility and affordance? The PCCS color system was used, and red, blue light tone, vivid tone, grayish tone, and dark tone were selected. Using paired comparison, eight user interfaces were paired sequentially in pairs of two so that all samples could correspond to one-to-one, making a total of 16 pairs. The participants were 26 people in their 20s to 30s, and an iPhone 11 pro was used for the device. When checked by hue, it can be confirmed that red user interface has a higher affordance than blue user interface. The z-score by tone confirmed that red showed a positive (+) value in light, grayish, dark, and vivid tone, but blue showed a negative (-) value in dark, vivid, grayish, and light tone. Therefore, It can also be confirmed that red user interface is the color with high visibility. When considering visibility, the z-score by tone confirmed that red user interface showed a positive (+) value in vivid, light, dark, and grayish tone, but blue user interface showed a negative (-) value in all cases. C*, a factor with a high correlation with visibility, was confirmed. L*, a factor with a high correlation with intuitive choice, was resulted.