## 4 Model Construction
### Layout Aesthetics and Visual Cognitive Mapping Model
#### (1) Symmetry \(C_{a1}\)  
The symmetry in interface layout is calculated based on three main directions: vertical, horizontal, and diagonal symmetry. According to the literature [26], the symmetry is calculated as:  
\[C_{a1}\ =\ 1-\frac{|s_{\text{vertical}}|+|s_{\text{horizontal}}|+|s_{\text{ radial}}|}{3} \tag{1}\]  
where \(S_{\text{vertical}},S_{\text{horizontal}}\) and \(S_{\text{radial}}\) denote vertical, horizontal and diagonal symmetry values, respectively,  
\[S_{\text{vertical}}\ =\ \frac{1}{12}\bigg{(} \begin{array}{l}|X^{\prime} _{\text{UL}}-X^{\prime}_{\text{UR}}|+|X^{\prime}_{\text{UL}}-X^{\prime}_{ \text{UR}}|+|Y^{\prime}_{\text{UL}}-Y^{\prime}_{\text{UR}}|+|Y^{\prime}_{ \text{UL}}-Y^{\prime}_{\text{UR}}|+|H^{\prime}_{\text{UL}}-H^{\prime}_{\text{ UR}}|+|H^{\prime}_{\text{UL}}-H^{\prime}_{\text{LR}}|\\ +|B^{\prime}_{\text{UL}}-B^{\prime}_{\text{UR}}|+|B^{\prime}_{\text{UL}}-B^{ \prime}_{\text{UR}}|+|\theta^{\prime}_{\text{UL}}-\theta^{\prime}_{\text{UR}}| +|\theta^{\prime}_{\text{UL}}-\theta^{\prime}_{\text{UR}}|+|\theta^{\prime}_{ \text{UL}}-\theta^{\prime}_{\text{UR}}|+|R^{\prime}_{\text{UL}}-R^{\prime}_{ \text{UR}}|+|R^{\prime}_{\text{UL}}-R^{\prime}_{\text{UR}}|\end{array} \bigg{)} \tag{2}\]  
\[S_{\text{horizontal}}\ =\ \frac{1}{12}\bigg{(} \begin{array}{l}|X^{\prime} _{\text{UL}}-X^{\prime}_{\text{UL}}|+|X^{\prime}_{\text{UR}}-X^{\prime}_{ \text{LR}}|+|Y^{\prime}_{\text{UL}}-Y^{\prime}_{\text{UL}}|+|Y^{\prime}_{ \text{UR}}-Y^{\prime}_{\text{LR}}|+|H^{\prime}_{\text{UL}}-H^{\prime}_{\text{ UL}}|+|H^{\prime}_{\text{UR}}-H^{\prime}_{\text{LR}}|\\ +|B^{\prime}_{\text{UL}}-B^{\prime}_{\text{UL}}|+|B^{\prime}_{\text{UR}}-B^{ \prime}_{\text{LR}}|+|\theta^{\prime}_{\text{UL}}-\theta^{\prime}_{\text{LL}} |+|\theta^{\prime}_{\text{UR}}-\theta^{\prime}_{\text{UR}}|+|R^{\prime}_{ \text{UL}}-R^{\prime}_{\text{LL}}|+|R^{\prime}_{\text{UR}}-R^{\prime}_{\text{ LR}}|\end{array} \bigg{)} \tag{3}\]  
\[S_{\text{radial}}\ =\ \frac{1}{12}\bigg{(} \begin{array}{l}|X^{\prime} _{\text{UL}}-X^{\prime}_{\text{LR}}|+|X^{\prime}_{\text{UR}}-X^{\prime}_{ \text{UL}}|+|Y^{\prime}_{\text{UL}}-Y^{\prime}_{\text{LR}}|+|Y^{\prime}_{ \text{UR}}-Y^{\prime}_{\text{LL}}|+|H^{\prime}_{\text{UL}}-H^{\prime}_{\text{ LR}}|+|H^{\prime}_{\text{UR}}-H^{\prime}_{\text{LL}}|\\ +|B^{\prime}_{\text{UL}}-B^{\prime}_{\text{UR}}|+|B^{\prime}_{\text{UR}}-B^{ \prime}_{\text{UL}}|+|\theta^{\prime}_{\text{UL}}|+|\theta^{\prime}_{\text{UR }}-\theta^{\prime}_{\text{UL}}|+|R^{\prime}_{\text{UL}}-R^{\prime}_{\text{LR}}| +|R^{\prime}_{\text{UR}}-R^{\prime}_{\text{LL}}|\end{array} \bigg{)} \tag{4}\]  
where \(X^{\prime}_{j},Y^{\prime}_{j},H^{\prime}_{j},B^{\prime}_{j},\theta^{\prime}_{j}\) and \(R^{\prime}_{j}\) are the dimensionless values of \(X_{j},Y_{j},H_{j},B_{j},\theta_{j}\) and \(R_{j}\) after the canonical treatment, respectively, and:  
\[X_{j}\ =\ \sum_{i}^{n_{j}}|x_{ij}-x_{c}|,j\ =\ \text{UL},\text{UR},\text{LL}, \text{LR} \tag{5}\]  
\[Y_{j}\ =\ \sum_{i}^{n_{j}}|y_{ij}-y_{c}| \tag{6}\]  
\[H_{j}\ =\ \sum_{i}^{n_{j}}h_{ij},B_{j}\ =\ \sum_{i}^{n_{j}}b_{i},\theta_{j}\ =\ \sum_{i}^{n_{j}}\bigg{|}\frac{y_{ij}-y_{c}}{x_{ij}-x_{c}}\bigg{|} \tag{7}\]  
Figure 4: Layout element representation and localization. \[R_{j}\ =\ \sum_{i}^{n_{j}}\sqrt{\left(x_{ij}-x_{c}\right)^{2}+\left(y_{ij}-y_{c} \right)^{2}} \tag{8}\]  
\[G^{\prime}_{i}\ =\ \frac{o_{i}-\min\limits_{1\leq j\leq n}\left\{o_{j}\right\}}{ \max\limits_{1\leq j\leq n}\left\{o_{j}\right\}-\min\limits_{1\leq j\leq n}},G \ =\ X,Y,H,B,\theta,R. \tag{9}\]  
where \(UL,UR,LL\) and \(LR\) denote upper left, upper right, lower left and lower right, respectively, \(\left(x_{ij},y_{ij}\right)\) are the coordinates of the center of element \(i\) in quadrant \(j\), and \(\left(x_{c},y_{c}\right)\) are the coordinates of the center of the interface. \(b_{ij}\) and \(h_{ij}\) are the width and height of the object, respectively, and \(n_{j}\) refers to the total number of objects on the quadrant.