Design Factors to Improve the Consistency and Sustainable User Experience of Responsive Interface Design

Abstract

Computers have been extended to a variety of devices, such as smart phones, tablets, and smart watches, thereby increasing the importance of responsive interfaces across multi-terminal devices. To ensure a consistent and sustainable user experience for websites and software products, it is important to study the layout, design elements, and users’ visual perception of different terminal interfaces. In this paper, the multi-terminal interfaces of 40 existing responsive websites were studied in a hierarchical grouping experiment, and six typical interface layouts were classified and extracted. Then, the main design factors affecting interface consistency of the responsive website were extracted and classified through eye tracking and a questionnaire survey. Finally, taking a sales management software tool (SA) as an example for design application, we successfully created responsive interfaces across multi-terminal devices with a consistent and sustainable experience.

1. Introduction

1.1. Sustainable User Experience and Interface Design

In recent years, the design field has paid increasing attention to sustainable design, giving importance to the long-term development of human beings [1]. The boundaries of sustainability-related design studies have expanded, and design fields related to “human factors” present new research opportunities [2]. Radjiyev et al. [3] pointed out that human–computer interaction has much to contribute to sustainability through the use of technological devices.

The concept of sustainable interaction design was first put forward by Blevis [4,5]. The user experience is the core content of interaction design and is increasingly of concern to researchers in the field of sustainable human–computer interaction design [6,7]. The notion of a sustainable user experience has been mentioned in several existing studies [7,8,9] A sustainable user experience refers to the sustainability and continuity of the user experience. A sustainable user experience pays attention to the continuity of the user experience process, and the user behavior and experience at all stages, without only focusing on a certain contact point.

With a background of information flooding and global energy crisis, it is of great significance to develop sustainable interface designs. Interface design must serve users and give them an excellent use experience. Modern life is highly dependent on various electronic devices, and software interfaces are everywhere. Improving the efficiency and sustainability of software use through design, reducing visual fatigue and system efficiency loss [8], and extending the life cycle of products are of great significance for enterprise investment and sustainable design development [6]. A sustainable user experience of interface design is mainly reflected in the reasonable continuation of user behavior with the existing design, automatic format matching, efficient and reasonable information architecture, and a good human–computer interaction interface design, which not only brings users the same user experience as “flow”, but also achieves the best interface design effect [6,7,8]. Studies have also shown that websites with a familiar user experience can improve user satisfaction and loyalty [10]. In addition, the structure and format of a webpage can influence users’ cognitive load and the results of interaction [11,12,13].

1.2. Multi-Terminal Product Design and Responsive Interface Design

In the information age, users pay more attention to the service and experiences given by products. Designers need to understand cognitive characteristics and the needs of users, and coordinate tangible products and intangible experiences. Meanwhile, more and more manufacturers are expanding from product design to product service system design [14,15,16,17,18], realizing the optimal allocation of enterprise resources, which is also conducive to the sustainable development of society. With the rapid development of science and technology, product forms are no longer limited to desktop computers and laptops, but also extend to product ecological chains, including smartphones, tablet computers, smart glasses, smart watches, etc. Users will face more human–computer interaction scenes and human–computer interaction interfaces in the future, such as in robots, virtual reality devices, smart home products, etc. [19,20,21,22]. In order to maintain the integrity, consistency, and continuity of the user experience, products will launch on multiple terminal platforms [23] to ensure users can select specific equipment according to different usage scenarios. Shin [24] studied user experiences of cross-platform services and summarized the key elements that affect the user experience, including consistency, mobility, and access. His research revealed the importance of continuity of the user experience on cross-platform services.

As the main information carrier of websites and software products, the interface carries all the interactive actions of users. Therefore, it is becoming increasingly important for designers to provide consistent interface display and design on different devices [25,26]. The appearance of responsive design [27,28,29] is a solution for consistency in images and experiences among multi-terminal devices, and has gradually become a widely used design method [30,31]. Since its launch, the flexibility and adaptability of responsive design has provided users with a continuous and sustainable website browsing experience on different devices [32,33]. Responsive websites have become the standard choice for the field of company presentations, entertainment, shopping, news, education, etc. [34]. A responsive interface develops a series of interfaces with consistency in experience by adopting continuous interaction forms and visual features, combined with user usage habits and behaviors in specific situations on different devices, thereby improving the user experience and product competitiveness of websites and software products [23,35,36,37]. Responsive web design can achieve a better user experience, which is mainly reflected in the fact that the interface can expand and respond to changes in screen resolution and shorten the loading time of the website, which directly affects the access time of users. At the same time, on the basis of familiarity, users do not encounter problems when accessing menus, links, and buttons. They can have higher operation efficiency, retention rates, and conversion rates, which will bring more business and a better reputation to enterprises, and this also fully illustrates the importance of responsive web design.

The responsive interface of the website is controlled by designers who determine the design elements and layout of the corresponding website interfaces according to the specific device display size, and then call and match the corresponding layout interface to the system according to the device properties in the actual application. In responsive design, whenever the screen dimensions are changed, design elements (such as the navigation, logo, banner, etc.) of the interfaces will adjust their size (height and width) and layout [38,39]. However, the hardware attributes, usage scenarios, and user habits of different terminal devices can have a direct impact on the interface design. Nielsen and Budiu [38] emphasized that the responsive interface design should be clear about how the content should be moved with the change of layout; this is not just moving the content to adapt to different screens. Voutilainen et al. [40] also pointed out that a key problem is how to plan the elements and layout in responsive design to adapt to different screen sizes. The main idea of responsive web design is to divide the web interface into modules and arrange them in different terminal interfaces according to different logic in order to optimize the user experience [41]. This also shows the importance of studying the content and layout of responsive web interfaces [42]. The existing research on responsive interface design has mostly focused on development tools and technology [40,43,44] and the availability of responsive web design [29,45,46,47,48,49]. For example, Mikulszky et al. [41] introduced a method for responsive graphical user interface to develop applications, and implemented it in MATLAB to prove the feasibility of the method. Majid et al. [49] summarized five usability principles suitable for responsive web page design through analysis; namely, consistency, familiarity, flexibility, effective feedback, and aesthetic pleasure. However, existing studies have ignored the concrete interface design elements, user perception of these design elements, and how they change with the layout.

Hence, this research focused on the responsive interface layout design of websites for multi-terminal devices (PC, tablet computer, and mobile phone). Therefore, this paper tentatively applied the research method for key design components recognition and design factors extraction of product shape design into a layout study of responsive website interfaces. This included an attempt to study and classify typical design factors of responsive interfaces that affect their consistency, and to guide responsive interface design toward maintaining consistency in the product image and user experience between multi-terminal devices.

1.3. Interface Design Factors

The key to the study of responsive interfaces is how to plan the design elements and layout, which is also the core of maintaining consistency and sustainable user experience between different terminal interfaces. Therefore, it is particularly important to study current interface design and users’ cognition of interface modules and constituent factors. This paper tentatively applies the research method on key design components recognition and design factors extraction of product shape design into the layout study of responsive website interfaces.

Software interface design is unlike the design of hardware products (such as cars), as design factors affecting the consistency among different terminals are not particularly obvious. With the diversification of hardware product forms, interface design should adapt to different forms of hardware products. If the interface of each terminal is an independent version, there will be large differences in different terminals, which is not conducive to the creation of the brand product image, or a consistent and sustainable user experience. However, transplanting an intact interface is relatively rigid, and means it cannot effectively use the characteristics of the terminal and can conflict with the use scenario. This is similar to the genetic and variation characteristics of product shape design factors. Based on previous research on the design factors affecting hardware product shape design [50,51,52], which referred to the product’s family shape gene and brand identity research [53,54,55], the authors tried to apply three levels of design factors, from the design of the hardware shape to that of the software interface.

To maintain consistency between series interfaces, design factors that consider the interface layout among multiple terminals include general design, adaptable design, and individual design factors.

• General Design Factor

A general design factor is relatively fixed during the application, i.e., it is not affected, or is hardly affected, by demand parameters and can be reused on different terminal interfaces. Generally, these design factors include the basic identification elements of an interface. As long as they are aesthetic, impressive, meet user demands, and do not affect the continuity of experience, they can be quickly applied to the serial design of multi-terminal interfaces.

• Adaptable Design Factor

An adaptable design factor is affected by certain parameters in different interfaces, which cannot be universal and must adapt to the design requirements. In this research, an adaptable design factor refers to differentiated interface elements customized for different terminals, which still maintain overall uniformity across different terminals.

• Individual Design Factor

An individual design factor refers to a design feature that is proprietary or closely related to the characteristics of specific terminals. Extremely different design elements are widely applied across different terminals, making them unsuitable for unified design.

The design application of the above three types of design factors in multi-terminal product interfaces is shown in Figure 1. The general design factor maintains consistency across all terminal interfaces, the adaptive design factor is consistent across design features, but has minor adjustments based on terminal characteristics, and the individual design factor is different for each terminal interface.

In the complete design process for multi-terminal product interfaces, even the general design factor will have some changes because the hardware characteristics of the terminals themselves are different. However, because these changes are relatively explicit (such as size and proportion), users can recognize them through certain elements, such as color and graphics. For the adaptable design factors, the change in elements is relatively large for various terminals, and users may need to complete certain tasks to ensure identification because they cannot simply rely on visual appearance. The individual design factors are completely based on the specific terminal. Users may have a certain learning threshold when using these terminals for the first time, as they may face some confusion regarding some of the interfaces that contain individual design factors while migrating from one terminal to another. Hence, this study focused on extracting and classifying the interface design factors based on visual cognition and task operations.

1.4. Study Purpose and Content

This research focused on the responsive interface layout design study of websites for multi-terminal devices (PC, tablet computer, and mobile phone), including studying and classifying typical design factors of responsive interfaces which affect their consistency and sustainable user experience, and guiding the responsive interface design toward maintaining consistency in the product image and a sustainable user experience between multi-terminal devices.

First, the layout and design factors of multi-terminal responsive interfaces were studied. The factors were extracted via tracking of eye movements combined with oral reporting, task analysis, and questionnaire research methods. Next, the design factors were classified into three categories (general factors, adaptable factors, and individual factors), and then were expressed, based on the prototyping method used for the interface. Finally, a sales software was taken as an example for application, and the design proposal of the software for three terminals was created.

2. Materials and Methods

2.1. Experimental 1: Identifying the Design Factors of a Web Interface Design

In this stage, a hierarchical grouping experiment was conducted to examine how consumers perceived the interface layout and the design factors of a certain web interface.

2.1.1. Subjects

Twenty graduate students majoring in design were invited as subjects to participate in a hierarchical grouping experiment. Their design background was helpful to identify influential components and elements from the overall layout of the interface.

2.1.2. Stimuli

Ten professional web interface designers were invited to launch the experimental sample collection based on the interface layout, the style of interface controls, and the degree of perfection of the multi-terminal responsive interface, to cover the responsive web interface type in as diverse a manner as possible. The selection work of the final samples was carried out under the guidance of senior interactive design experts. Finally, 40 different responsive websites were collected from the fields of e-commerce, science and technology, companies, social activities, etc., as shown in Appendix A. The complete homepage view of each stimulus was also intercepted.

Homepages contain relatively more important information (such as the design style, basic layout, and key controls) and are central to a website [56,57,58]. Hence, the homepage was considered as the study object in this exploratory research. Homepage interface images of 40 websites were captured for the experiment and marked with an ID: In (n = 1, 2, 3… 40). All images were printed on A4 paper in black-and-white to eliminate the unnecessary influence of color.

2.1.3. Procedure

The experimental procedure of the hierarchical grouping of one subject is given as an example:

A brief introduction of the experiment was presented.

Next, the subject was asked to freely separate the 40 homepage images into two groups according to differences between these interfaces for the first time. The number of interfaces in each group was not limited.

Then, the subject was asked to split the two groups (generated in the first division) into two subdivisions. This step generated four groups of interfaces.

Finally, each subdivision was divided into two groups again, resulting in eight interface groups.

For each grouping, the subject was asked to provide a verbal description about the criterion for each group, particularly the characteristics of the interface components and elements leading to the grouping. The experiment conductor recorded the IDs of websites in each group and the grouping criterion.

The remaining 19 subjects performed the hierarchical grouping experiment in the same manner. Finally, the grouping data and corresponding verbal descriptions were recorded and prepared for subsequent analysis.

2.2. Experimental 2: Interface Research Based on the Eye-Tracking Experiment

Eye tracking is widely used in human–computer interaction, business, medicine, and other fields to study user visual attention and information search and interface element perception in graphical user interfaces [59,60,61,62,63]. An eye-tracking experiment involves the monitoring of eye movement and gaze direction of a user while looking at a specific target, and performing correlation analysis, using eye-tracking technology. Eye movement behavior plays an important role in the visual cognition process [64,65], and is mainly composed of fixation and saccade, alternating to appear as a sequence [66,67].

Regarding the evaluation indexes established in the literature [68,69], this experiment used the gaze number, visual capture [70], saccade path, and heat map to record the experimental data. Meanwhile, a responsive interface simulator (http://responsivepx.com/) was used to simulate the resolutions of the tablet and the smartphone. However, because the entire experiment could be performed on a desktop computer monitor, this effectively controlled the experimental deviation caused by different devices.

The aims of this experiment were as follows.

(1)

Obtaining the functional components and interface elements important to subjects on the website interfaces from a relatively objective point of view by using eye-tracking data.

(2)

Combining with methods of verbal protocol, questionnaire survey, and perceptual evaluation to further obtain subjective perceptions and feelings of users regarding the interfaces and specific interface controls.

2.2.1. Experimental Materials

To carry out experiment 2, typical responsive interface design samples had to first be extracted as the experimental materials from the samples in experiment 1.

Based on the data from experiment 1, the similarity between 40 samples was measured, and samples with small difference in interface design were merged into one type through cluster analysis. To a certain extent, the final clustering results represented the current typical types of responsive website interfaces.

According to the data transformation process in the literature [51,71], the data obtained through the hierarchy experiment were transformed into similarity data according to the following rules.

After the division at the third time, the similarity of all samples in the same group was set to 0.75.

In the second layer of data, samples in the same group in the third division were removed, and the similarity between any two of the remaining samples was set to 0.5.

Likewise, in the first layer, the similarity between remaining samples was 0.25.

The similarity between samples which did not belong to the same group was 0.

After data of each subject were transformed according to the above rules, the mean of the data from 20 subjects was calculated and the triangular matrix of the similarity was finally generated, as shown in

Table 1. Similarity triangular matrix.

	I01	I02	I03	I04	…	I37	I38	I39	I40
I01	1.00
I02	0.45	1.000
I03	0.25	0.35	1.000
…					…
I38	0.40	0.35	0.30	0.30	…	0.35	1.000
I39	0.35	0.40	0.40	0.20	…	0.25	0.30	1.000
I40	0.30	0.15	0.15	0.15	…	0.50	0.40	0.40	1.000

.

To extract typical samples from the homepage interfaces of 40 original websites, a hierarchical cluster analysis method was used by importing the similarity matrix into SPSS. Finally, the 40 samples were clustered into six groups.

The cluster tree graph, shown in Figure 2, directly reflects the sample composition of each cluster.

From the cluster tree, when the distance between the nodes was nine, the number of clusters was six. This order not only effectively classified the samples, but also meant each group maintained specific characteristics to a certain degree, which were different from other groups, to interpret the results correctly. Then, the K-means cluster analysis was conducted in SPSS, and the final six-cluster center was generated. The six samples with the smallest numerical value in each cluster were taken as typical samples.

The determination of the six typical samples had been confirmed by the design experts, and layouts of them were all typical. T01 was a typical card layout design, which could manage information by zones well, and is often used for personal and other information display websites. This layout is also suitable for users to customize the interface layout. T02 was divided into three parts by adding a background in the middle of the interface, and the contents could be visually distinguished according to importance. T03 was a typical Network e-commerce platform interface. T04 was a typical layout used by information websites, which need to highlight the hot information with the help of a side list. T05 was the favorite layout of official websites of enterprises or institutions. The banner is located at the top of the page, and there information blocks of lists. T06 was a relatively simple website with less content, which divided the interface horizontally through a large banner or background color. It is often used as a portal for emerging small enterprises.

For later experiments, the six samples required size normalization. The horizontal resolution of the web homepage interfaces was set to 1280 pixels, and the six samples were all scaled at this standard (without controlling the longitudinal length), and the final six typical interface samples are listed in

Table 2. Six typical samples.

ID	Sample Legend	ID	Sample Legend	ID	Sample Legend
T01		T02		T03
	http://www3.hbc.com/		http://www.time.com/		https://www.currys.co.uk/
T04		T05		T06
	http://www.24movie.cn/		http://www.ucsd.edu/		http://www.fivesimplesteps.com/

with new IDs (Tn (n = 1, 2, 3…6)) for further study.

So, experiment 2 chose these six typical responsive website interfaces (interfaces on three terminals: PC, tablet, and mobile phone) as the research object.

2.2.2. Subjects

The subjects of this experiment were consumers with experience in using multi-terminal devices. Through a variety of channels (network, relatives, friends, classmates, etc.), 30 participants were invited to participate in this experiment.

These 30 subjects, which included 18 men and 12 women between 25 and 42 years of age, had diverse careers. The common features of these subjects were that they all owned two or more digital product terminals. The 30 subjects were numbered as Sn (n = 1, 2, 3… 30).

2.2.3. Stimuli

Based on the six typical interfaces obtained from Stage 1, homepage interface styles of these six websites for PC, tablet, and smartphone terminals were prepared by using the responsive interface simulator (http://responsivepx.com/). Hence, the number of stimuli was 6 × 3, i.e., 18. According to the actual measurements and comparisons, and following consulting interface design experts, the final resolution settings for the interfaces in all three terminals were 1280 × 960 (PC), 1024 × 768 (tablet), and 375 × 667 (smartphone).

2.2.4. Equipment

The experiment used the Eyelink II system, which has relatively high resolution (noise < 0.01 degrees°) and a fast data transmission rate (500 samples/s), and was able to reduce data noise while the eyeballs were rapidly moving through its own technology.

2.2.5. Procedure

Each subject was requested to complete preset tasks (

Table 3. Tasks of the eye-tracking experiment.

ID	Task Description	ID	Task Description
T01	Looking for entrance of the website profile (about us) Go to a store of HBC (store)	T02	Enter the entertainment section (entertainment) Go to the homepage of Google+ Subscribe to TIME magazine
T03	View one interesting product Find the contact information (contact us)	T04	Choose an article of interest and view View news
T05	Go to the office of the principal (Chancellor) View details of the university (about UCSD) Find an employee called Juarez Jose	T06	Switch website language/country View details about Nokia new phone View official contact information

) designed by the researchers according to the content and theme of the webpage. The design goal of the tasks was to ensure their operation covered controls and elements on the interfaces as much as possible.

A questionnaire was also prepared for subjects after the tasks were completed to evaluate the impact level of control elements (in Table 1) in the interfaces based on their perception through a 7-point Likert scale. A score of “–3” meant “not very important,” while “3” indicated “very important”.

The steps followed in the eye-tracking experiment were as follows.

First, the subjects were informed of the basic process and content of the experiment. The eye-tracker was calibrated.

Next, the subjects operated and finished the tasks. In the process, the path of movement of the eyeballs and operational steps performed by subjects were recorded by the computer. They were also asked to mention the reason and purpose of operations in the form of oral reports during the experiment.

Finally, the subjects were asked to fill in the questionnaire after completing all their tasks.

3. Results and Analysis

3.1. Identify Key Components of Interfaces

After experiment 1, verbal descriptions of the 20 subjects were extracted and cleaned, based on semantics, and merged into specific design factors (visual controls and column of website homepages); then, similar ones were grouped. Subsequently, the frequency of occurrence of each factor was calculated, based on the number of times they were mentioned in the verbal descriptions, which represented the importance of these factors.

Table 4. Statistical results of the hierarchical factors and mention frequencies.

Factors	Description	%	Factors	Description	%
Logo	Logo of the website, usually located at the top of the interface, as one of the identity elements of the enterprise or brand	80	Content Block	Display area, including text, pictures, video, and other multimedia content; is the specific embodiment of the website theme	100
Search tool	Usually located at the top or bottom of the interface, for searching specific content in the website	60	Ad block	Display advertising content	70
Language bar	Switch language type when the website has multi-language versions	10	Social block	Web links to other social media sites	30
Login tool	The entry of a user login for personal operation	50	Footer block	Usually located at the bottom of the interface, including “about us”, “web map”, “privacy clause”, and other information	50
Navigation bar	Display the main functional module of the website, and provide fast jumping	100	Quick navigation (link)	Provide links to other related sites, such as “blogroll”, “cooperative customers”, and so on	30
Banner	An image-based large area content display area	100	Copyright	Usually located at the bottom of the interface, web site copyright information	0
Modal tab	Display content in the form of a tab page	20	Interface layout	The macro-layout and overall segmentation of the website interface	100
Accordion panel	Click on a title to start a content block	40	Interface density	Density distribution of the content on the website interface	70

shows the statistical results of the hierarchical factors and mention frequencies.

According to the statistical results, some controls were repeatedly mentioned in the experiment, such as the banner (100%), navigation bar (100%), logo (80%), and search tool (60%). Some other controls displayed a low frequency of mentions, such as quick navigation links (30%) and the language bar (10%). Further, some controls were not mentioned, such as the back to the top button. Design factors with higher frequency were the contents in the use of the websites that the users were most concerned about, and, thus, were the main design elements of the interfaces. By applying these design factors reasonably to the design of the multi-terminal interface, the degree of recognition of the website would be improved.

Although there are other controls in the design process of an entire website interface, such as sequence maps, breadcrumbs, comment scroll bars, and lists [72], this study limited the research objective to the homepage of the website. Hence, the remaining control elements were beyond the scope of this research.

3.2. Extracting Responsive Interface Design Factors

Through vertical comparison of six typical interface samples (Table 3), common points and differences of the different types of responsive websites on the interface were observed, and the changes in style of key controls and rules of application of design factors in the responsive interface were analyzed. We observed that the series of design of responsive interfaces of the same website in different terminals displayed a hierarchical appearance of application characteristics. While the resolutions of terminals were different, resulting in adjustment of the space and layout on interfaces, there were some similar control styles among different device interfaces of the same website, which created a visual relevance among the series of interfaces (see homepage interfaces of T01 in

Table 5. Series responsive interface of T01.

Resolution	1280 × 960	768 × 1024	375 × 667
Interface example

as an example).

Based on the performance and application characteristics of three-level design factors and the results of the hierarchical grouping experiment and the eye-tracking experiment, the responsive interface design factors were qualitatively extracted.

The overview of responsive interface design factors is shown in

Table 6. Design factors to improve the consistency and sustainable user experience of responsive interface design.

General Design Factors	Adaptive Design Factors	Individual Design Factors
Logo	Banner	Language bar
	Navigation bar
	Content block
	Interface layout	Sensor function control
Copyright	Search tool	Social block
	Login tool	Advertisement block
	Footer block
	Interface density
	Quick navigation

below. Later, factor introductions and extraction reasons will be given in detail according to the types of factors.

3.2.1. General Design Factors

In the eye-tracking experiment, the eye tracker recorded the trajectory of eye movement, gaze duration, and other data of subjects in real time, and displayed it through the data graph. Figure 3 shows the heat map of eye movement data of one typical sample (T01). In this figure, the colored area is the primary gazing area of the subjects, the red area shows the highest degree of attention, and the yellow-green transition represents a decrease in the degree of attention. The area without color implies that the subjects watched for a shorter time or displayed less attention when compared to the colored area, as opposed to not viewing at all. Hence, the area with low attention was ignored when all the subjects were accounted for.

According to the heat map of the six typical samples, the logo of one website was one of the biggest areas of concern. After receiving the task, the subjects would first observe the website logo. This is partly because the upper-left corner of the interface is the primary focus of attention [73], and partly because the logo is the main identification factor of the website interface and, hence, it naturally comes into visual focus. According to the oral report submitted by professional website designers, it was also observed that the copyright of one website was also an essential interface element. Although the subjects hardly noticed this content, it must exist in the website interface as the logo.

• Logo

The logo is one of the important identification elements of a website brand and was consistent among different interfaces of the same website. Figure 4 shows the interface header of T01 on different devices. It can be observed that the position and visual size of the logo element basically remained constant and adjusted with the resolution, so it could be used as a general design factor.

• Copyright

Copyright information is generally at the very bottom of the interface and is less attractive to users, but it is an indispensable element of most websites. Figure 5 shows the layout style of copyright information of T02 on different devices. All elements were reserved and only the font size and segmentation style were simply changed, leading this to be regarded as a general design factor.

3.2.2. Adaptive Design Factors

An adaptable design factor in the interface refers to a control element that is restricted and cannot be directly versatile. In the responsive website interface, the main reasons for limiting design factors include the size and resolution of the screens of different devices, as well as the usage scenarios and user habits for different devices. While designing the related controls, it is necessary to consider the actual scenario to provide a unique design. Moreover, in a series of responsive interfaces on the same website, these design factors can be used in general applications to ensure consistency in visual recognition and experience.

According to the experimental results, adaptive design factors included the search tool, navigation bar, login tool, banner, content block, quick navigation, interface layout, and interface density (some are shown in Figure 6, Figure 7 and Figure 8). Take the search tool (T02) as an example (as shown in Figure 6). As the horizontal resolution of the three interfaces became smaller, its design form was adjusted from the complete style to the landscape icon with text style, and finally to a vertical icon with text style for illustration. Therefore, the search tool could be regarded as an adaptive design factor.

• Search tool

Figure 6. Search tools for the same website at different resolutions.

Figure 6. Search tools for the same website at different resolutions.

• Navigation bar

Figure 7. Navigation bar for the same website at different resolutions.

Figure 7. Navigation bar for the same website at different resolutions.

• Banner

Figure 8. Banners for the same website at different resolutions.

Figure 8. Banners for the same website at different resolutions.

3.2.3. Individual Design Factors

Individual design factors refer to design features that are proprietary or closely integrated with the characteristics of a particular terminal. Hence, the individual design factor cannot be adapted and requires completely different design elements to be applied across different terminals.

In the study of the six typical samples, it was not possible to obtain rich design elements directly from the static interface (only the tab bar control added for smartphones was found in the T01 series interface). Hence, the 40 first-generation samples were analyzed, and their results were combined with the results of interviews with subjects and web designers to obtain the following personalized design factors.

• Language bar

The language bar is a tool used to switch display languages for global versions of websites. On the desktop computer, this control is presented in the form of buttons, drop-down menus, etc. On mobile devices, such as tablets and smartphones, the GPS location system can be used to determine the location of users, and the language setting is automatically recommended without the need for user input.

Since the language bar varies greatly across different devices, it is considered an individual design factor.

• Advertising block

Advertising is an important source of income for most commercial websites, and the location of the advertisement determines its value. However, the placement strategy implemented in the traditional desktop computer screen is not suitable for mobile products. Hence, as an unfixed design element, advertising has a rich form of expression that needs to be adjusted according to the actual situation of the device and the scene, which makes it an individual design factor.

• Social block

The social block is displayed in the form of a button array at desktop resolution. On smaller mobile devices, social blocks are usually hidden in the “Share” button and displayed according to the style of the operating system. Hence, it does not present a design association on the series of interfaces itself, leading it to be regarded as an individual design factor.

• Sensor function controls

A mobile device comprises various sensors for collecting contextual information (location, brightness, distance, sound, etc.). In the website design, special functions, such as voice input and search for nearby sites according to geographical location, are added according to the corresponding sensors. As the special features appear alongside the corresponding control elements in the interface, these elements are used as individual design factors and applied according to the actual situation.

3.3. Evaluation Dimension of Interface Design Factors

To ensure visual consistency in series interfaces, responsive interfaces of the same website adjust the controls and layout according to the resolution of the screen size on different terminal devices. Hence, it is necessary to determine the visual importance of the design factors to account for retention or deletion in the design process.

After extracting the three types of design factors, interface design factors were classified on the basis of visual importance according to the results of the hierarchical grouping experiment and eye-tracking experiment (shown in

Table 7. Design factor dimension table.

Importance	High	Medium	Low
Type
General	Logo		Copyright
Adaptive	Banner	Search tool	Quick navigation
	Navigation bar	Login tool
	Content block	Footer block
	Interface layout	Interface density
Individual		Language bar	Social block
		Sensor function control	Advertisement block

).

3.4. Expression of the Interface Design Factors

The wireframe prototype, which is one of the most widely used forms of expression for interface elements, was used to express the design factors of interfaces in this study, i.e., the above extracted control elements, via adobe illustrator software.

3.4.1. General Design Factors

Expression of the general design factors was relatively simple (

Table 8. Expression of general design factors.

Name	Wireframe Prototype	Size (Horizontal)
		Large (above 780 pt)	Medium (480–780 pt)	Small (320–480 pt)
Logo		≥150 px	≥150 px	≥150 px
Copyright		90% width	90% width	90% width

), and was provided by the studies. The designers only needed to determine the location and size. Normally, the size of the logo remained consistent across the three types of resolution. The size of the copyright changed with the horizontal resolution and maintained itself at 90% of the screen width.

3.4.2. Adaptive Design Factors

Adaptive design factors need the designer to adjust the controls according to the usability of the interface, visual perception, etc. Additionally, during the design process, designers should not only follow the traditional interface design principles but also consider the visual consistency of the controls in different terminal interfaces.

Due to the fact that the expression of adaptive design factors (in

Table 9. Expression of adaptive design factors.

Controls	Wireframe Prototype		Size (Horizontal)
			Large (Above 780 pt)		Medium (480–780 pt)		Small (320–480 pt)
Banner			85% width		85% width		85% width
Navigation bar			90% width		90% width		90% width
Content block			2~3 column Based on design		2 columns Based on design		1 column 90% width
Interface layout
Search tool			15~20% width		15~20% width		Icon 24 px
Login tool			10% width		10% width		Icon 24 px
Footer block			85% width		85% width		85% width
Interface density
Quick navigation			85% width		85% width		85% width

) is their default forms, designers should adjust the expression in practical applications depending on specific circumstances. Banners, navigation bars, information blocks, and quick navigation changed according to the different resolution of the screen. Content blocks were determined by the layout of the interface; login tools and search tools had a variety of forms according to the screen size of the terminal. While the layout and density of the interface did not specifically factor into expression patterns, they controlled the arrangement and density of other controls via the display parameters.

3.4.3. Individual Design Factors

Individual design factors have no fixed style, vary according to the attributes of the device and style of the interfaces, and have high availability requirements. Designers have more freedom, and, hence, generally propose optimal design solutions based on user research and product analysis.

Individual design factors usually appear directly in a special style according to an actual situation in the form of an impression.

Table 10. Expression of individual design factors.

Controls	Wireframe Prototype		Size (Horizontal)
			Large (Above 780 pt)		Medium (480–780 pt)		Small (320–480 pt)
Language bar			Below 10% width		Below 10% width		Icon 24 px
Advertising block			Based on design		Based on design		Based on design
Social block			1 column width Based on design		1 column width Based on design		90% width
Sensor function controls

lists examples of individual design factors. The size of individual design factors has a stronger subjective initiative, i.e., designers can combine subjective aesthetics with factors such as usability, aesthetics, ease of identification, and sustainability to finally define the size and style of the factors.

3.5. Expression of Complete Interface Design

Based on the hierarchical grouping experiment, eye tracking experiment and user’s perceptual cognition of the interface, a complete set of interface design factors extraction and expression mechanism was formed. At the same time, after summarizing the importance, characteristics and layout rules of each design factor, combined with specific design requirements, such as display purpose, design style and other requirements, a certain number of interface prototypes could be quickly built through combining different levels of design factors. It was important that these interfaces shared the general design factors and adaptive design factors; therefore, they had visual and operational consistency. At the same time, the addition of individual design factors ensured certain differences according to different terminals and use scenarios. Which could bring users the same user experience as “flow”, and facilitate realization of sustainable user experience in the process of multi-terminal interface transformation to a certain extent. This was consistent with the characteristics and performance of sustainable user experience of interface design.

The specific application strategy was as follows. In the expression of the complete interface, general design factors were first placed into the interface frame of the specified size according to the specific design requirements. Next, adaptable design factors were added and adjusted according to the requirements and device resolution. Finally, the appropriate individual design factors were selected and added to form a more complete interface wireframe prototype.

Taking the typical sample T03 as an example, its interface could be expressed as shown in Figure 9.

In the actual design application process, these different levels of design factors can form a design factor library, which can be called upon for design by designers according to their requirements. Different levels of design factors can be combined according to specific design requirements to quickly obtain different layout prototype proposals [50,52].

4. Design Application

Taking a sales management software tool (SA, an actual design case of one company) as an example, the design factors abstracted were utilized to complete the multi-terminal responsive interface design of this software. SA is a modern sales management tool for SMEs that optimizes the sales management process and enhances sales. Functions of the software include customer data management, sales process control, order management, social communication, business analysis, mobile services, and enterprise sales management. To control R&D costs and save development time, the software adopted a web-based product form, and realized the interface layout and responsive display at different resolutions via HTML5 and CSS Media queries.

The design was for an application case focused on the description and implementation of the homepage design [56,58] on multiple terminals in the whole design process of the SA.

4.1. Function Tree (Homepage)

According to the functional characteristics and requirements of the product, the functional structure of the SA sales management software homepage was created by using the Affinity Diagram method. The final hierarchical relationship among functions can be seen in Figure 10.

4.2. Interface Design Factors

In previous research, a small number of multi-terminal responsive interface design factors were obtained through experiments. Based on the typical tasks of target users in this case, the corresponding design factors were retrieved to complete the prototype layout of the homepage interface. Owing to the subjective initiative of the designer, more than one interface layout could meet the functional requirements. Two design proposals were submitted (Figure 11) after a team discussion, and the better one was selected using a usability test and user research.

The research and development personnel decided to use a card layout (refer to T01) in the design of the SA homepage interface, which was more suitable for the functional structure of the product and work habits of the users. There are many varieties of contents in sales management work, and the card-style layout provides evenly distributed entries for multiple functions on the homepage for the users to enter directly. Additionally, the system can intelligently recommend common function entries to the homepage based on the user’s position and personal information settings, and support manual modification by the users. In this way, the various functional demands of the homepage for different users can be satisfied to the maximum possible extent.

• Browser (desktop computer)

As shown in Figure 11 (the left image of the two proposals), the homepage layout adjusted the number of function entries (tiles) in the middle of the interface according to the horizontal resolution. The number of function entries in this figure was suitable for the horizontal resolution of 1024. If the computer screen extended horizontally to 1280, there would be one more column (two entries) or tile.

• Tablet PC

The function entries and buttons of the tablet were the same as those of the browser, adjusting according to the horizontal resolution. This was because the tablet was similar in resolution to the desktop screen and the horizontal and vertical differences were small, and could be adjusted with a set of codes. Moreover, during the research process, it was observed that the modes of operation of users were similar between the tablet and the desktop. Hence, similar interfaces could reduce the learning cost.

• Smartphone

The resolution of smartphones was quite different from that of the other two types of terminals (the right image of the two proposals in Figure 11). The number of entries of the function was adjusted. The search function in the top bar was displayed directly through one button.

4.3. Visual Design Factors and Key Modules of the Homepage Interface

After determining the prototype framework of the product interface, the visual elements (color, font, font size, size, etc.) were added to the design factors (Figure 12) based on brand style, product positioning, and brand visual style, to obtain a high-fidelity prototype that could be used for user testing.

Based on the interface prototype and visual design, the final interface design was completed. (Figure 13, Proposal B). The images on the left showed the interfaces of a desktop computer and tablet PC, and the ones on the right were the same interfaces on a smartphone. The homepage interface of SA consisted of three parts: the top (title bar, navigation bar), the content area (function entries), and the bottom (control bar). The responsive program controlled the interface layout of the three parts in different terminals.

4.4. Multi-Terminal Responsive Interface Usability Testing and Results

As for the evaluation and selection of proposal A and proposal B, a user test was conducted via a usability test combined with subjective evaluation.

4.4.1. Stimuli

The specific tasks for usability testing are shown in Appendix B. The specific subjective evaluation indicators are shown in

Table 11. Subjective evaluation indicators and the results.

Subjective Evaluation Indicators	Description	Average Score (Proposal A)	Average Score (Proposal B)
Continuity of operation	During the switching operation of different terminal interfaces, the cost of learning and adaptation is low, and it has good consistency and continuity.	6.00	6.14
Visual consistency	The layout of page information of different terminal interfaces is more unified visually.	6.43	6.57
Rationality of information architecture	The layout of functional blocks is reasonable and easy to identify and operate.	5.57	6.14
Conciseness	Simplicity of interface design	4.86	6.29
Overall satisfaction	Overall satisfaction during use	5.43	6.43

. The subjective evaluation score was based on a seven-point scale, a score of “1” meant “bad user experience,” while “7” indicated “good user experience”. The evaluation indicators were determined by referring to the influencing factors of responsive interface sustainability user experience [6,7,8] and existing research related to user experience evaluation [74,75,76], which also combined the opinions of three design experts. The usability test used the high-fidelity prototype interface of proposal A and proposal B. The test equipment included three terminal devices (the same as in Section 2.2). The subjects conducted the experiment by opening the test prototype demonstration pre-installed on the devices.

4.4.2. Subjects

Seven sales management practitioners (four females and three males, aged between 26–38) were invited to participate in this test.

4.4.3. Procedure

Before the test, the subjects were informed of the purpose and operation procedure of the test, then a simple test and guidance was conducted on the subjective evaluation criteria of the subjects to ensure the effectiveness of the test data. After the preparation work, the subjects were asked to carry out the preset usability tasks. During the test, subjects were encouraged to express their immediate thoughts at any time. Their language and behavior in the test process were recorded for later analysis. After finishing the usability testing task, the subjects were invited to complete the subjective evaluation and simple interview, and the results were recorded for subsequent data analysis.

4.4.4. Results and Analysis

The final average score of the subjective evaluation is shown in Table 11. Based on the results of subjective evaluation, nonparametric tests were conducted in SPSS. The results showed that there were no significant differences between proposal A and proposal B in operational continuity (p = 0.653), visual consistency (p = 606), and the rationality of information architecture (p = 0.241). There were significant differences in the simplicity of the interface design (p = 0.001) and overall satisfaction (p = 0.005), and proposal B performed better than proposal A. Combined with the content of user interviews, both proposal A and proposal B had good operation continuity and visual consistency, and the gap was not obvious. However, in terms of the rationality of the information architecture, the simplicity of the interface design and overall satisfaction, the subjects generally believed that the interface layout of the upper and lower structure of proposal B was visually simpler, the operation was smoother, the learning threshold was lower, and the adaptation of different terminal interfaces was more flexible. Therefore, the overall satisfaction with proposal B was higher than that of proposal A. So, proposal B was taken as the final design proposal.

5. Conclusions

At present, computer equipment is rapidly infiltrating into the daily lives of people in the form of various products. With the increasing fragmentation of equipment, people are exposed to different forms of products in different environments. Hence, the design of a responsive interface plays an important role in ensuring consistency and sustainability in user experience across different devices. It is very important to study design factors and user cognition in responsive interface layouts.

In this research, the interface design of 40 responsive websites on three different terminals (smartphone, tablet, and desktop computer) was studied. Six typical layouts of responsive websites were abstracted, and typical design factors of responsive interfaces were extracted, classified, and then expressed through a wireframe. Finally, a sales management software tool (SA) was used as an example for design application, and ultimately generated responsive homepage interface design solutions. At the same time, the final responsive interface design proposals were tested and evaluated through usability test and subjective evaluation. The results showed that proposal B had better user experience satisfaction overall.

As an exploratory study, this research only focused on the homepage interface design of smartphones, tablets, and desktop computers to demonstrate the feasibility of the research methods and the practicability of the final results. To enhance the integrity of the study, further research will need to extend to other intelligent terminals (such as smart watches, smart TVs, etc.) and other interfaces.