Exploring the Relationships between Distractibility and Website Layout of Virtual Classroom Design with Visual Saliency

Previous studies reveal two different opinions about the relationship between distractibility and media multitasking, which is the simultaneous use of different media at the same time. Some studies suggest that media multitasking is associated with increased distraction, while in contrast, other studies found there is no significant correlation. The aim of this paper is to examine whether there is correlation between distractibility and different website layouts of a virtual classroom for online education, a form of media multitasking. This is achieved through the use of eye tracking technology to record scanpaths and analyze eye tracking metrics through a spatial scale with the principle of visual saliency, Graph-Based Visual Salience (GBVS), between different areas of interest (AOI). This paper found that visual distraction is significantly correlated between online learning performance and six typical website layouts of virtual classrooms. These layouts were classified through 30 existing online learning platforms, according to the different locations of the chat room, instructor, main display area, navigation tabs, as well as participant list in the interface. The results show that the value of visual distraction is negatively correlated with academic performance (r = −0.666, P < .001). The research from the perspective of visual saliency can provide valuable support for physiological indicator testing tools of visual distraction, and highlights the application of eye tracking metrics in behavior.