The visual beauty of text overlay images of different proportions of pictures

Abstract

Perceived visual aesthetics is of great significance for the design of human-computer interaction interface. There is much research on interface aesthetics in the academic community. There is evidence that perceived visual aesthetics has an important impact on user experience and interaction, and many scholars have put forward the calculation model of perceived visual aesthetics. This study research the text overlay image. Compared with the traditional text surround image, the text overlay image changes the visual perception aesthetics of the image by embedding the text into the image. Text overlay image is usually superimposed on the image by a piece of text or several pieces of text, which blocks the background area of the image and affects the overall interface aesthetics. However, the text overlay image is applied to various places. In this study, the background white space calculation model (WBB) based on bounding box is used to calculate the perceived visual aesthetics. Explore the visual aesthetics of text overlay images under three proportions: golden section ratio (1:0.618), root mean square ratio (1:0.707) and integer ratio (1:1). The experiment uses the calculation model to obtain the proportion of the blank area of the text covered image in the image background. The subjects' subjective evaluation of different proportion interfaces is obtained through the Likert scale. The results of the two are compared to obtain the proportion of the optimal visual beauty under the text covered image. The results show that: ① in terms of the image length width ratio, the visual aesthetics of the text overlay image with the length width ratio of 1:0.618 is better when the text line spacing is 1 times, and the visual aesthetics of the image with the length width ratio of 1:0.707 is better when the text line spacing is 1.5 times. When the line spacing is 1 and 1.5 times, the visual aesthetics of the image with length width ratio of 1:1 is the worst; ② In terms of line spacing, when the line spacing is the same (1 or 1.5 times the line spacing), the subjects think that the proportion of the blank area of the text covered image with high visual aesthetics in the image background is 0.7218-0.9040. When the line spacing is different (1 and 1.5 times the line spacing), it can be speculated that the visual aesthetics of the text covered image is closely related to the blank area of the image background, In order to obtain a text overlay image with high visual aesthetics, we should consider not only the proportion of the image, but also the blank area of the image background.

Keywords: Interface, Aesthetics, Text Overlay, Scale

DOI: 10.54941/ahfe1002881