Abstract
Flat website design has become more and more popular in recent years due to its simplicity and elegance. Nevertheless, the current flat design thinking is mainly applied to conventional websites such as corporate websites. Recently, the increase in public demands has significantly increased the browsing frequency of government websites. To optimize the government website, this study establishes a government website design framework from the perspective of flattening. The established framework can extract flat design elements from the massive flat website design schemes in the past. Based on flat design elements, the particle swarm algorithm (PSO) algorithm in the established framework realizes the design and optimization of government websites. Subsequently, the performance of the CNN, which is used as the fitness function of the PSO algorithm, in predicting public acceptance is analyzed with a case study. The case results show that the average relative errors between the prediction results predicted by CNN and the real public acceptance in two provinces are 2.5416% and 1.4788%, respectively, which indicates that the predicted and real results are in good agreement. Moreover, the linear correlation coefficients between predicted and real public acceptance are 0.9553 and 0.9937, respectively, which further indicates that CNN is reliable as a fitness function of the PSO algorithm. Therefore, it is feasible to use the PSO algorithm to optimize the government website design scheme.
1. Introduction
Currently, with the rapid economic and social development, the government pays more attention to improving governance capacity through the transformation of government functions, thereby adapting and promoting economic development and social progress [1]. Government websites are the bridge between the public and the government [2]. Government departments generally publish relevant information such as newly adopted rules and regulations on the website to convey information to the public promptly. Moreover, the government website is a way to reflect the credibility of the government, so the design of the government website affects the public’s impression of the government [3]. Besides, government websites are also a way for the public to supervise the government. The government website provides a channel for all-around supervision, such as supervision by the masses, direct supervision by subordinates and departments at the same level, and so on. Meanwhile, government websites have the effect of educating the masses and leading values. Usually, government websites are designed in strict accordance with the style of spreading positive energy and leading the frontier of the times, and it is difficult to find the emergence of negative energy information in them [4].
With the improvement of the level of social productivity and the advancement of science and technology, the public’s concept of expressing their demands has become stronger, which has increased the frequency of browsing web pages [5]. So, the design optimization of government websites is significant. In the past few decades, the design thinking of web pages has undergone many iterations. In the modern era, many statistical reports on website design show that flat website design thinking is more and more popular among people. Therefore, the flat design idea has the potential to better play the role of government websites.
Flat web design thinking abandons all decorative effects [6]. For example, shadows, perspectives, textures, gradients, and other elements that can create three-dimensional visual effects used in traditional web design are abandoned in flat web design. In addition, in the process of flat web design, all the element borders are clean and neat, without adding any feathers or shadows, making the website interface look simple and convenient [7]. Generally, a flat website design has the following advantages. First, the flat design makes the interface of the website more concise and comfortable. Based on simple elements, it is more convenient to express a lot of information and display process methods, thereby reducing the cognitive barriers of web browsers. Second, flat design allows websites to adapt to more resolutions. As the proportion of mobile phones used in people’s daily life is getting higher and higher, and the resolution difference between mobile phones and computers is very large, the flat website design enables the web pages to adapt to mobile phones and computers at the same time, which greatly reduces the cost of developing multiresolution websites. Thereafter, a flat website design is very beneficial for search engine optimization. Concise design elements reduce the complexity and memory footprint of the website design, which significantly improves the loading speed of the website while reducing the load on the server. Besides, a fast website loading speed can also save time for web browsers, which can increase people’s favorable opinion of the website.
Although the design idea of flat web pages has many advantages, it is currently mainly used in corporate website design. There are differences between government websites and corporate websites [8]. For example, in terms of color, the element color and background color of corporate websites will be set in different styles according to different industries, while the background color of government websites is usually more formal, such as red and blue. In terms of design purpose, in addition to listing the current important notices, the corporate website will also promote the characteristics of the company as much as possible, while the government website mainly provides services for the public around the three major themes of government affairs disclosure, online service, and government-civilian interaction, rather than purely to expand publicity efforts. In terms of layout, government websites and corporate websites have different propaganda focuses, so there are also big differences in the use and arrangement of elements such as pictures and text. Therefore, in the process of designing government websites with the idea of flattening, it is necessary not only to learn from the design style of conventional websites such as corporate websites but also to analyze the uniqueness of government websites, thereby selecting appropriate design elements and layout.
Considering that there are a large number of designed website resources on the Internet, which can provide numerous data references for the design of government websites. So, to better design government websites, this study proposes a government website design framework based on deep learning and particle swarm algorithm (PSO) from the perspective of flattening. The deep learning method applied in this study is a convolutional neural network (CNN), which can fully extract the design elements of a flat website with good results. With extracted design elements, the particle swarm algorithm, an evolutionary algorithm, can optimize the design of government websites. Finally, a high-level government website design scheme can be obtained. The CNN method can extract relevant features and content of government websites, which will help government staff to discover the relationship between some work data, which is also conducive to government staff to carry out their work efficiently. The PSO method has obvious advantages in optimizing features.
This paper is arranged as follows: In Section 1, the research background of the study is introduced, and the role of flat design ideas in current website design and the design points of government websites are also described in this section. Then, the development of related research works is described in Section 2. In Section 3, the establishment of the government website design framework and related basic theories are described. Section 4 describes case studies that analyze the effectiveness of the established framework. Section 4 shows the accuracy of CNN in predicting the relevant data and features of government websites by using the average error of relevant features of government websites, the linear correlation coefficient of predicted values, and the form of graphs. Subsequently, the feasibility and reliability of the established government website design framework are analyzed in Section 5. Finally, the conclusion of this study is drawn in Section 6.
2. Related Work
The government website is an important bridge between the government and the public, and the design and optimization of government websites are significant to improving the relationship between the government and the public and improving the efficiency of government work. Therefore, in recent years, the study on government website design has attracted the attention of many scholars.
By analyzing the design of past government websites, Lee and Lee [9] found that although the past government websites could provide basic propaganda services for the public, they were insufficient in terms of democratic appraisal. Based on this question, they propose a model for evaluating government websites and provide corresponding countermeasures for improving public participation. Thereafter, to further explore ways to improve the communication between the government and the public, Prayoga et al. [10] took the website design of a county as an example and evaluated the design of the government website from the aspects of readability and interface design friendliness. Based on the evaluation results, how government websites can better serve the public was analyzed, thereby providing a reference plan for improving the usability of government websites. From the perspective of e-government, Irawan and Hidayat [11] establish a comprehensive model for evaluating the usability of government websites based on richer cases. The established model assesses the factors that affect the usability of government websites and provides multiple channels for improving communication between the government and the public.
In recent years, the increased public demands have greatly increased the browsing frequency of government websites, so it is of great significance to improve the browsability of government websites. Rahayu et al. [12] analyzed the reasons that affect users’ interest in visiting the website from the user’s point of view. The results of the study show that the interrelationships between multiple websites and hyperlinks are important factors that affect users’ interest in browsing websites. To further increase users’ interest in browsing the website, Pelet and Taieb [13] analyzed the impact of website fonts and layouts on browser behavior in flat design scenarios. The results of the study show that the recognizable nature and layout friendliness of fonts in flat websites increase the interest of browsers in the website. Moreover, Cousins [14] compared the flat website design scheme and the traditional website design scheme. The comparison results show that the color scheme used by the flat website design scheme can guide users to use the website more conveniently. Based on the abovementioned analysis, flat design thinking has the potential to play a role in optimizing the design of government websites.
According to the abovementioned analysis, although the researchers tried to evaluate the usability of government websites and put forward measures to improve the communication between the government and the public, there are still deficiencies in the interface optimization of government websites. Therefore, this study tries to optimize the interface design of government websites from the perspective of flattening.
3. Methodology
From the perspective of flattening, to improve the service level of government websites, based on deep learning [15] and PSO [16], this study establishes a government website design framework. The schematic diagram of the framework is shown in Figure 1. As can be seen from Figure 1, the established design framework is divided into two parts: the flat website design element identification system and the PSO-based government website design system. Next, we briefly introduce these two parts separately.
3.1. Flat Website Design Element Identification System
To design a government website with flat thinking, the design elements used to design a flat website are required. The flat website design element identification system is to extract the design elements in the existing flat website. The structure of the flat website design element identification system built in this study is shown in Figure 2. The identification system is established based on an improved CNN, note that the applied CNN is essentially an intelligent data-driven method. With the established flat website design element identification system, numerous common flat design elements can be extracted from existing flat website design cases, thereby providing the element basis for the design of government websites.
As can be seen from Figure 2, the established flat website design element identification system is mainly divided into two subparts: feature extractor and classifier. The maximum pooling layer can further reduce the amount of parameter calculation. The information contained in government websites is relatively complex, which will generate a large number of data sets. In order to be able to accurately predict the relevant factors, this requires a max-pooling layer.
3.1.1. Feature Extractor
Feature extractors can extract implicit feature information from web design graphs. The feature extractor in this study consists of convolutional layers and pooling layers.
In deep learning, compared with other network layers, convolutional layers are better at image processing and can extract local feature information from images [17]. As indicated [18], convolutional layers have the properties of translation invariance and inductive reasoning. In addition, the convolutional layer also has the feature of weight sharing, which makes it possible to reduce the number of trainable parameters when using the convolutional layer to build a neural network, thereby improving the training efficiency of the network to a certain extent. The operating principle of the convolutional layer is depicted in Figure 3. In order to be able to extract deeper relevant features of government websites, the number of filters selected in this study is 128, the learning rate is 0.0001, and the value of the sliding step is 2. It also contains two fully connected layers.
As shown in Figure 3, the convolution operation is the elementwise multiplication of the convolution kernel and the corresponding area in the input image. When the multiplication area scans the length and width of the input image, the output of the convolutional layer can be obtained. Based on the convolution operation, the mathematical expression of the convolution layer is as follows:where and b represent the weights and biases of the network layer, respectively. F denotes the activation function. Considering that the exponential linear units (ELU) alleviate the abnormal gradient propagation problem of sigmoid and tanh, and it is closer to zero-center distribution than rectified linear units (ReLU) [19], ELU is used as the activation function in each network layer in this study. And the expression of ELU is as:where α is a constant, and α is set as 1 in this study.
To reduce the complexity of the network, max-pooling layers are added to the feature extractor. Although both max-pooling and average-pooling layers can reduce the number of trainable parameters of the network, compared to the average-pooling layer, the max-pooling layer preserves the maximum value of the corresponding region, thus preserving the original information of the input as much as possible, thereby improving the working performance of the network [20]. To more clearly show the working process of the max-pooling layer, the operating principle of the max-pooling layer is shown in Figure 4.
As shown in Figure 4, the size of the output image of the max-pooling layer is greatly reduced compared to the input image, which not only greatly reduces the scale of the network but also improves the generalization performance of the network by discarding part of the data. The expression of the max-pooling layer is as follows:where pooli,j,k represents the value at the location (i, j) of the k-th output feature map of the max-pooling layer, and H and B are the height and width of the kernel in the max-pooling layer, respectively.
3.1.2. Classifier
With the feature extractor, the feature information hidden in the flattened website can be extracted. To obtain the design elements contained in the flattened website, it is necessary to establish a mapping relationship between the extracted feature information and multiple types of design elements. To establish such a mapping relationship, fully connected layers are adopted in this study. Since the fully connected layer realizes the classification of the extracted features, it can also be regarded as a classifier.
The schematic diagram of fully connected layers is shown in Figure 5. Based on the fully connected neurons, fully connected layers realize the classification of the extracted feature information. The mathematical expression of the fully connected layer is as follows:where and b represent the weights and biases of the fully connected layer, respectively. Note that although the weights in the fully connected layers have a larger number of trainable parameters compared to the convolutional layers, this is a compromise that the fully connected layers have to make to preserve as much feature information from the feature extractor as possible.
Since the process of flat website design element identification involves the classification of multiple design elements, softmax is used as the activation function in the output layer of fully connected layers [21]. The expression of softmax is as follows:
With softmax, the value range of all output neurons can be limited to the range of (0, 1), which is closer to a form of probabilistic expression and can improve the training efficiency of the network. Besides, the sum of the values of all output neurons is 1, and the output value of each neuron in the output layer of the classifier represents the probability of the design element appearing in the flattened website.
Based on the abovementioned description, with the flat website design element identification system, common design elements can be obtained from numerous flat website design cases, thereby providing a material library for the flat design of government websites.
3.2. PSO-Based Government Website Design System
In the process of designing a flat government website, the main design points are to choose the shape of the label, the background color, the size and position of the picture, etc. This process involves the combination of multiple design elements, so this study attempts to use evolutionary algorithms to optimize the combination of design elements. PSO, an evolutionary algorithm, has the advantages of a simple algorithm and good global optimization performance compared with the genetic algorithm or artificial fish swarm algorithm. Therefore, the PSO algorithm is adopted in this study.
The specific steps of the PSO algorithm can be found in Ref. [22]. After setting the range of design elements to be selected, a government website design scheme can be obtained by randomly selecting design elements and combining them. At this point, another important step is to evaluate the level of the design scheme, that is, to construct the fitness function in the PSO algorithm. Usually, the level of government website design scheme is reflected by the acceptance of the public.
Suppose the expression of the fitness function of the PSO algorithm is as follows:where X and y represent government website design image and public acceptance, respectively, and F is the mapping relationship. To establish the mapping relationship F, considering the feature extraction ability of CNN for website images, CNN is applied in this study. The structure of the constructed CNN is shown in Figure 6.
Figure 6 shows that in the CNN, except for the global average-pooling layer, the structure of other layers is consistent with the structure of the feature extractor mentioned in Section 3.1.1. With the global average-pooling layer, the trainable parameters of the network are greatly reduced, which improves the training efficiency of CNN.
Based on the abovementioned description, after setting the range of the flat design elements, with the CNN-based fitness function, the PSO algorithm can perform iterative calculations, thereby obtaining the optimized government website design scheme.
3.3. Workflow of the Government Website Design Framework
Based on the abovementioned description, the workflow of the government website design framework is depicted in Figure 7, and the detailed steps are as follows:(i)Extraction of flat website design elements. Firstly, the established flat website design element identification system is trained with flat website design images with known design elements. Since the element recognition system is a multiclassification problem, the training loss function uses cross-entropy [23], and its expression is as follows: In Equation (7), the data format of y is usually one-hot, and in addition, K represents the number of categories of labels. With the calculation in Equation (7), L can represent the comprehensive error corresponding to all samples. Then, with the trained element recognition system, flat design elements can be obtained from the massive flat website images.(ii)Categorize flat design elements. By classifying flat design elements, an element library can be better provided for the flat design of government websites.(iii)Government website interface design and optimization. Firstly, preset the range of flat design elements for designing government websites. Then, the government website design scheme is optimized based on the PSO algorithm. To improve the accuracy of the fitness function, it is necessary to train the CNN-based fitness function. Since the output of CNN corresponds to the public acceptance, the loss function adopted in CNN is the mean square error (MSE) [24], and its expression is as follows: where N represents the number of samples that participate in network training. Finally, after iterative calculation, the government website design scheme corresponding to the maximum fitness function is optimal.
4. Case Study
As indicated in Section 3.3, to obtain a better government website design scheme from a flat perspective, the construction of a CNN-based fitness function is very important, which directly affects whether the website design scheme can be optimized.
To explore whether the established CNN can effectively realize the mapping relationship between the government website design scheme and public acceptance, this study takes the government website design report of a European country as an example to analyze the effectiveness of CNN.
To facilitate the analysis of the government website design report, the data in the report is divided into 15 groups according to the provinces in this study, and each group contains 200 samples. The variables of the sample are composed of (X, y), where X and y represent website images and public acceptance, respectively. To improve the training efficiency of CNN, the pixel values in the picture are normalized. Since the pixel value range of the grayscale image is [0, 255], the 0-1 normalization method is adopted here [25], and its expression is as follows:where max(X) and min(X) represent the maximum and minimum pixel values of the image, respectively. Through the normalization operation, all pixel values in the image are in the range [0, 1], and then, the distribution of the pixel values is closer to the zero-centered distribution, which is beneficial to improving the training efficiency of networks. It should be pointed out that although the picture has been normalized, the numerical relationship of each pixel value in the picture has not changed. Besides, the value range of public acceptance is [0, 100].
In the process of exploring the accuracy of CNN in predicting popular acceptance, the 15 groups of data in the report are divided into the training, validation, and testing sets. The training set and validation set are used to train the CNN, and the testing set is used to validate the prediction performance of the CNN. Besides, the training set, validation set, and testing set contain 10, 3, and 2 groups of sample sets, respectively.
5. Results and Discussion
5.1. Effectiveness of the Established CNN
After the established CNN is trained with the training and validation sets, the performance of CNN in mapping between government website design schemes and public acceptance is evaluated via the testing set.
The testing set contains sample sets corresponding to two provinces, and the two sample sets are denoted as P1 and P2, respectively. The comparison between the prediction results of CNN and the real results on the testing set is depicted in Figure 8. As indicated in Figure 8, in the two provinces, the predicted and real public acceptance trends are very close. There is a large difference in the characteristics of public acceptance of government website content, which indicates that the data set collected in this study is relatively extensive, which helps CNN to grasp the content of different types of government websites. For some samples in province P1, the deviation between the predicted results and the actual results is relatively large. This may be because some samples in province P1 have large deviations from the samples corresponding to the training set and validation set, which makes the prediction deviation of the trained network relatively large. Although the predicted and real public acceptance in province P1 is greater than that in province P2, the deviation in province P1 is acceptable, so, the predicted and real results in the two provinces are in good agreement.
(a)
(b)
To more clearly present the deviation between the predicted and actual results in the two provinces, Figure 9 displays the relative error of predicted and public acceptance in the two provinces. The formula for calculating the relative error is
(a)
(b)
Among them, ypre and yreal represent the predicted and real results, respectively, and abs is the operation used to calculate the absolute value. As can be seen from Figure 9(a), in province P1, the maximum relative error between the predicted and the real public acceptance is close to 6%, and the distribution of the relative error corresponding to the samples in this province is relatively average in the range of [0, 6%]. This shows that although the relative error corresponding to some samples exceeds 5%, on the whole, the trained network’s prediction of public acceptance in province P1 is very stable. As shown in Figure 9(b), for province P2, the maximum relative error between the predicted and actual public acceptance is slightly greater than 5%. Moreover, most of the relative errors corresponding to the samples in province P2 are less than 3%, and even concentrated in the range of [0, 1%], which shows that the trained neural network has very good prediction performance for the samples in province P2. According to the analysis of Figures 9(a) and 9(b), the relative errors corresponding to the most of samples in the two provinces are within 5%, especially in the P2 province, only one sample has a relative error slightly greater than 5%. To corroborate the results of the analysis in Figure 9, the average relative error between predicted and real public acceptance in the two provinces is calculated. The comparison results of the average relative errors corresponding to the two provinces are shown in Figure 10, and the average relative errors of provinces P1 and P2 are 2.5416% and 1.4788%, respectively. The average relative error corresponding to the two provinces shows that although the average relative error of province P1 is nearly twice that of province P2, the average relative error of province P1 is still far less than 5%.
As indicated in Ref. [26], a relative error of 5% is acceptable in practical applications. According to the results in Figures 8–10, the public acceptance predicted by CNN has a good consistency with the real public acceptance, which indicates that the CNN-based mapping relationship between the government website design scheme and the public acceptance has good accuracy.
5.2. Statistical Analysis
To further validate the effectiveness of CNN in predicting public acceptance, a statistical analysis of the prediction results of CNN is conducted in this subsection.
Firstly, the MSE between the predicted and real public acceptance is calculated, and the results are depicted in Figure 11. The calculation formula of MSE is consistent with Equation (8). As shown in Figure 11, the MSE between the predicted and real results in the two provinces is 2.9316 and 1.8695, respectively. So, the relative relationship between province P1 and province P2 is consistent from the perspective of statistical analysis and the perspective of relative error. Since the value range of public acceptance is [0, 100], it is generally considered that MSE less than 5 indicates a good agreement between the predicted and real results. Therefore, the calculation results of MSE show that CNN has a good performance in predicting public acceptance.
Secondly, a linear correlation analysis is performed between the public acceptance predicted by CNN and the real public acceptance. The correlation calculation results are depicted in Figure 12. Note that the abscissa and ordinate of the points in Figure 12 represent real public acceptance and predicted public acceptance, respectively. It can be seen from Figure 12 that although the deviation between the points in the province P1 and the line y = x is slightly large, the corresponding relative deviation is still small, so this deviation is acceptable. In addition, for province P2, the corresponding points are closely around the line y = x, which shows that in province P2, the linear correlation between the predicted and real public acceptance is very strong. Moreover, the calculated linear correlation coefficients corresponding to the two provinces are 0.9553 and 0.9937, respectively. As indicated in reference [26], a linear correlation coefficient greater than 0.95 indicates a strong linear correlation between two variables. So, the linear correlation results further indicate a strong agreement between the predicted and real public acceptance. If the data of the public acceptance of the relevant content of the government website are distributed on both sides of y = x, it can be shown that CNN can better predict the characteristics of public acceptance, which also shows that the weight distribution of CNN is relatively uniform.
(a)
(b)
According to the analysis in this subsection, the results of statistical analysis are in good agreement with the relative error results, which also confirms the reliability of each other’s calculation results. Therefore, with the results of statistical analysis, the accuracy of the CNN-based mapping relationship between the government website design scheme and the public acceptance is further validated.
6. Conclusions
From the perspective of flattening, a government website design framework is established in this study. The established framework can extract flat design elements from numerous flat website design schemes. Then, with the design requirements of government websites as constraints, the PSO-based algorithm is used to design and optimize government websites. With a case study, the performance of deep learning methods involved in optimizing government website design schemes is analyzed. The results revealed that:
As indicated from the calculation results on the testing set, the relative error of the predicted and real results corresponding to most of the samples in the two provinces is within 5%, especially in province P2, CNN shows better prediction accuracy. Moreover, the average relative errors of the predicted and real results in the two provinces are 2.5416% and 1.4788%, respectively. So, the relative error results show that the CNN-based mapping relationship between the government website design scheme and the public acceptance has good accuracy.
Statistical analysis results show that the linear correlation coefficients of the predicted and real public acceptance in the two provinces are 0.9553 and 0.9937, respectively, which further demonstrates that the CNN involved in optimizing government website design schemes has promising prediction accuracy. The CNN method can help government workers find relevant content on websites, and this method is more accurate and efficient. For cumbersome website content, it can save a lot of time and effort for government workers. The use of this method is also more convenient for the trained CNN network.
Data Availability
The data used to support the findings of this study are available from the corresponding author upon request.
Conflicts of Interest
The authors declare that they have no conflicts of interest or personal relationships that could have appeared to influence the work reported in this paper.