A Comparative Research on Usability and User Experience of User Interface Design Software

—With the development of science and technology, people increasingly rely on intelligent interactive products, thus promoting the vigorous development of the user interface industry. Software with high usability and user experience can improve users’ effectiveness and satisfaction, as well as the user viscosity. Taking three design software: Sketch, Adobe XD, and Figma, which is most frequently used by design industry practitioners and students, as research cases, this study compared and discussed the impact of interaction design and interface layout on the usability and user experience combining with subjective experiment methods, scale scoring, user testing and retrospective think-aloud interview, as well as objective experiment method, eye tracking. It is found that the overall usability and user experience of Figma is the best, Adobe XD is the second, and Sketch is the worst. The main reason for this result is that the three software have different degrees of issues in interface layout, information quality, and interaction logic. Based on the results, the optimization suggestions for the usability and user experience of user interface design software are proposed from three perspectives: interface design, information quality and interaction design.


I. INTRODUCTION
With the rapid development of the Internet industry and the widespread use of new media, user interface (UI) design emerged, and corresponding tools and software also developed, as well as the application and design of software interfaces have been achieving greater improvement. UI design software play a significant role in the design and development of applications. However, there are few studies focusing on the usability and user experience of UI design software, which does not match the use of such software in the field of UI design [1]. In order to better understand the factors that affect the usability and user experience of this software and to enhance its interaction performance, research on UI design software is necessary. This research compares the overall usability and user experience of Sketch, Adobe XD, and Figma using one objective indicator: eye-movement data, as well as three subjective indicators: scale scores, behavior index and user interviews. It also analyzes the design factors that affect these two aspects. This research contributes to uncovering factors that affect the usability and user experience of UI design software and provides references for optimizing the design and development of such software.
The rest of this paper is divided into 6 sections. The current application of usability and user experience evaluation system in interactive interfaces is discussed Section II. Section III compares the interface layout and interaction design of the research cases. Section IV discusses the preparations for the research. The results from the two dimensions of usability and user experience are analyzed in Section V. Section VI proposes optimization suggestions. And the general conclusion is given in Section VII.

II. LITERATURE REVIEW
Currently, the main observed aspects for assessing the quality of software products are usability and user experience. Usability focuses on system quality and user performance during use, while user experience focuses on the overall satisfaction of users with the system. To analyze and redesign the physical human-computer interface, Ma J et al [2] adopted a subjective and objective multidimensional usability evaluation method. Interaction Experience (IX), a higher-level concept integrating the concepts of usability, user experience as well as accessibility, was proposed by Juergen et al [3] to explore the problems in user-system interaction more precisely.
Vision also is the primary modality for users to interact with the human-computer interface, and related researches show that the fixation metrics [4], saccade metrics [5] and pupil metrics [6] are relative to users' perceived cognitive difficulty and information capturing efficiency. Therefore, combining eye-tracking as an objective physiological assessment method can evaluate the interface quality of software more effectively [7].
For the shopping website pages with different interface layouts and interaction design, Liu C et al [8] acquired the user's subjective perceived usability from the four dimensions of standardization, ease of learning, navigation and attractiveness by questionnaires and interviews. Combined with the eye movement data, they established a relationship model for the perceived usability level of the shopping website pages. Lu C et al [9] used objective eye movement index and behavior index, with subjective scores of four usability indicators, including information clarity, interface comfort, overall satisfaction and performance support, to evaluate the human-machine interaction interfaces with different interface layouts. Pan F [10] proposed an interface usability evaluation model based on eye movement experiment and system usability scale, and conducted quantitative and qualitative analysis on the usability of the ticket purchase website with different information design. Wang Y et al [11]  The majority of the existing researches focuses on the usability or user experience of information and human-machine interaction interfaces. Most of them explore the user experience from the five dimensions of presentation, framework, structure, scope and strategy, or the three dimensions of instinct, behavior and reflection [12][13][14]. And the usability is mostly evaluated in terms of ease of learning, effectiveness, satisfaction, efficiency, ease of use [15][16][17].
Interface design, as one of the most important elements of the software, is influenced by many factors [18]. The interface layout, information design and interaction design are the most significant factors in interface design that can directly affect the usability and user experience. Therefore, this research selects three UI design software with high usage and representative as cases, taking the three significant factors as the entry point to consider their impact on user experience and usability.

III. COMPARISON OF THE INTERFACE LAYOUT AND INTERACTION DESIGN
A questionnaire on the use of UI design software was conducted before the experiment, and the usage rate of each common UI design software is shown in Fig. 1. Sketch, Adobe XD and Figma are the three UI design software used most frequently by design industry practitioners and students. The experiment uses the three software as the case study. Interface design is one of the most essential components of software design since the interface is the most direct interaction object for users when using software, and its efficacy and experience have a significant impact on users' intention to use and purchase. Therefore, this research focuses on the core characteristics of interface design: layout and interaction, to compare the similarities and differences of the three software and analyze their impact on usability and user experience.

A. Comparison of Interface Layout
Sketch, Adobe XD, and Figma all adopt the same interface layout, which is shown in Fig. 2. The interface is divided into four areas: the top bar, the left and right sidebars, and the canvas. However, the three software differ in the internal structure of each area, mainly in the following aspects.  The property inspector appears on the right sidebar in Sketch, Adobe XD, and Figma, and the interior layout is highly consistent. As for the canvas, there is no distinction among the three software.

B. Comparison of Interaction Design
In addition to the interface layout, there are some differences and commonalities in the interaction design of the three software. Most of the common functions of the three software interact in the same way, for example, users all add or delete element properties by clicking the Add or Delete controls.
The menu levels of the three software differ. Some functions in Sketch require users to jump to the second level submenu, whereas users only need go to the submenu when using Adobe XD and Figma, and the overall interaction path is shorter. There are also variances in editing property parameters. Figma only shows the parameters frequently edited, with the remainder hidden in the corresponding submenu, while Adobe XD and Sketch show all the parameters in the first level panel of the property inspector.
As demonstrated in Fig. 5, the interaction of export is distinct. When exporting in Adobe XD, users simply select the needed content in the canvas and click Export. In addition, users can choose the content to be exported and set the parameters in the Export dialog. In Sketch and Figma, users must first select the content, then add export action and set the parameters in the property inspector, finally click Export. If users click Export without making the content exportable, the system will notify users that no content is selected or that all frames will be exported by default. This process is more timeconsuming than the previous one

A. Subjects
Depending on the level of skill, users can be classified as novices, intermediates, and experts. The majority of users are intermediate users, and their amount and frequency of use are consistent. Therefore, the research should primarily focus on intermediate users, and collect their opinions as well as related data on software [19]. The subjects have to be students or practitioners of design industry with at least 6 months of experience in UI design or other related software. Nielsen's research on the number of usability test subjects serves as a basis for the experiment [20]. 17 university students were recruited to participate in this experiment. All subjects were between the ages of 19 and 25, with 9 males and 8 females.

B. Task for Experiment
The key functions of the UI design software were summarized and analyzed before the experiment. A series of interactive tasks covering functions that users use frequently in their daily work were set by combining the results of the UI design software usage questionnaire, and the tasks are shown in Table I study, which were the latest versions at the time the experiment was conducted. During the experiment, the three software were run on an iMac computer which has a 27-inch display, and all the subjects were required to finish tasks assigned by the experimenter on this computer.

C. Evaluation Index System
Combining the definitions of usability and user experience in ISO 9241-11-2018 [21], the three dimensions of usability and the primary factors affecting user experience are utilized as the basis for evaluation. The usability and user experience evaluation system based on eye-tracking technology, evaluation scales, retrospective thinking aloud interview, and user testing is constructed from both objective and subjective perspectives, as shown in Fig. 6. By analyzing the subjective and objective data, the elements influencing the usability and user experience of UI design software are summarized [22].
In this experiment, the user testing is a usability evaluation method that collects feedback data on user behavior and satisfaction indicators when using a specific human-machine interface. User testing mainly defines usability problems by observing the process of completing a series of prescribed tasks under a specific scenario and by asking the subjects to record the real usage. In this experiment, the usability evaluation of the software was conducted by testing users, observing and recording the number of failures and the completion time when performing tasks with each of the three software, also using the retrospective thinking aloud interview to obtain participants' experience with the software. www.ijacsa.thesai.org The evaluation scales consist of Post-Study System Usability Questionnaire (PSSUQ) and After-Scenario Questionnaire (ASQ). PSSUQ takes information quality, and interface quality as the main evaluation indicators. ASQ quantifies satisfaction by rating the system's support in performing tasks, time spent, and support information. The two questionnaires both adopt a 7-point Likert scale, with 1 indicating "strongly disagree" and 7 indicating "strongly agree", and a higher score on this scale means better usability or satisfaction of the system. Eye tracking is a common data collection method in usability testing. Based on the usability and user experience evaluation standards, the indicators of task completion time, number of task failures, and total fixation duration in the area of interest (AOI), as well as the heat and gaze plot maps are selected for analysis. The number of failures and task completion time are crucial indicators to evaluate effectiveness and efficiency of the software. The total gaze duration in the area of interest can quantify the difficulty of the object the user is viewing, i.e., the effectiveness of the system's information. The heat map and gaze track map are common visualization forms of eye-tracking data, which mainly demonstrate the user's attention to information and visual search path.

D. Experimental Process
Each subject was given the same task to complete using the three software. Due to the high similarity between the interfaces of Sketch and Figma, the order of subjects using the software was specified as Sketch, Adobe XD, and Figma to prevent learning effects. Only one individual was tested in each experiment in a quiet and bright environment. The procedure of the experiment is shown in Fig. 7.

V. RESULTS
The collected data were assessed for variance chi-square using IBM SPSS.25.0. One-way analysis of variance was used for data with chi-squared variance, while data without chisquared variance were assessed nonparametrically using the Kruskal-Wallis method. In this experiment, all statistical results were evaluated with the 95% confidence interval. The mean was expressed as "m", while the significance was -p‖.

A. Difference in Usability
There are some variances in the degree of support for UI design among the three software, according to the data collected from the experiments.
1) Overall evaluation. The statistical results do not show significant differences when subjects rated the three software overall on the usability scale (p=0.209>0.05), but in the posttest interview, nearly 58% of subjects indicated that the overall usability of Figma was significantly better than that of Adobe XD and Sketch. Thus the usability of Figma can be considered higher than Adobe XD and Sketch 2) Effectiveness evaluation. The difficulty of acquiring valid information in an area and the attractiveness of the target to the subject are proportional to the duration of fixation in AOI [23]. Table II shows the duration of fixation in AOI during the completion of tasks using the three software, revealing that the three software do not show significant differences in Task 2, Task 4, and Task 6 (p 2 = 0.425 > 0.05, p 4 = 0.398 > 0.05, and p 6 = 0.974 > 0.05), while the statistics for the other six tasks reveal significant differences. www.ijacsa.thesai.org Furthermore, there are significant differences in the total duration of fixation in AOI (p = 0.001 < 0.05). Table III shows the average times of failures while subjects conducting tasks. According to the post-hoc test, the difference between the times of failures using Sketch and Adobe XD is significant (p=0.038<0.05). Combining the interface design analysis of the three software, it is found that some ancillary information or icon meaning of Sketch is unclear, which results in subjects spending longer time focusing on the area and increases the difficulty in acquiring valid information compared to Adobe XD and Figma, as confirmed by the post-test retrospective thinking aloud interview. In conclusion, the effectiveness of the three software shows significant differences, and the subjects have difficulty extracting the target information using Sketch, indicating that Sketch has the lowest effectiveness, while the difference in effectiveness between Adobe XD and Figma is not significant.
3) Efficiency evaluation. Table IV depicts results of the average completion time of each task and its one-way ANOVA test. The time of task failed was not included in the statistics [24]. In Table IV, there is no significant difference in the completion time of Task 2, Task 4, Task 5, and Task 6 among the three software, while the total task completion time of Sketch is significantly longer than that of Adobe XD and Figma (p=0.00<0.05). The heat map and gaze plot map of Task 3, Task 8 and Task 9, in which subjects performed poorer during the experiment, were selected for comprehensive analysis. Hotspots of different colors can visually reflect the subjects' attention to information and the distribution of gaze points: the longer fixation in red areas, whereas the shorter fixation in green areas [25].   Task 3: Add and edit a shape. In this task, the subjects were required to add a new shape and adjust the parameters of its properties. Fig. 8 shows the specific eye movement map, where hotspots are distributed in Sketch's interface the most widely and the gaze points are the most intensive. Combined with Table II, Table IV and the post-test interview, it is found that Add Layers function of Sketch is hidden in Insert submenu in the top bar, which varies from most of subjects' usage habits. Therefore, subjects were unable to find the required functions quickly. The more amount of eye-track crossings and the longer length of adjacent trajectory segments in Sketch, indicates that subjects' eyes constantly shifted red between the top bar and the canvas, their viewpoints were also more dispersed when using Sketch. In Sketch and Figma, the hotspots area in the right column are larger, which shows that subjects spent more time in this area. In conjunction with the subjects' performance, it reveals that the layout of information in Property Inspector of Sketch and Figma is more compact than Adobe XD, which increases the cognitive burden and leads to lower efficiency of capturing information and completing the task when using the above two software.
Task 8: Export the frame and set the relative parameters. Table IV shows that subjects spent the longest time using Sketch to complete this task and the shortest time using Adobe XD. The specific eye-movement performance is shown in Fig.  9. The subjects' eyes mostly focused on the target function www.ijacsa.thesai.org area when using Adobe XD, and most of them had shorter eye-movement trajectories and fewer red hotspot areas, indicating that their sight did not stay in a specific area for long. Combined with the subjects' performance, it can be seen that since the Export button of Adobe XD is in the Window menu, which is in consistent with majority of subjects' experience, and the parameter information is clear, the subjects could quickly understand the text then completed the task efficiently. The eye-tracking hotspots are dispersed throughout the interface of Sketch, and the amount of eyetracking crossings is more than the other two software, indicating that the subjects' attention to the interface was scattered. Subjects indicated that Export button in Sketch is small and secluded, and the process is also distinct from their usage habits, making it hard to find the button quickly and requiring them to spend much time trying. Besides, subjects spent the longest total duration of fixation when using Sketch to complete Task 8 (see Table Ⅱ), implying that the subjects were unable to find the target and acquire information quickly, resulting in low task completion efficiency. Task 9: Save and rename the file. Combining the statistics in Tables II and IV, it reveals that the subjects' total fixation of duration and completion time when using Sketch are significantly longer than the other two software (p 1 =p 2 =0.000<0.05). Fig. 10 depicts the specific eyemovement diagram for this task. The subjects' eye-movement hotspots when using Sketch concentrate in the menu bar of the window and top bar. The large area of red hotspots and a host of eye-tracking crossings indicate that the subjects' sights shifted between two areas for times, moreover, the browsing speed was slower than Adobe XD and Figma. The subjects claimed in the interview that the main reason for the long time spent on this task using Sketch is that they did not realize the "Copy" meant saving the file as a new file, thus they kept searching for the "Save as" button. It can be seen that ambiguous wording increases the cognitive load of users and reduces their efficiency. The analysis of the data leads to the conclusion that the subjects are the most efficient in completing tasks using Figma, followed by Adobe XD, and Sketch is the worst.

4) Satisfaction evaluation.
In the post-test interview, the subjects expressed that they preferred Figma to the other software for its succinct interface, reasonable layout, the clear expression of icons, and functions in the toolbar were sorted according to the frequency and priority of use. Additionally, some common parameters are presented in the first-level interface, allowing users to shorten the interaction path and improve efficiency. The majority of subjects thought Sketch's interface was too complicated, which led to a low efficiency in searching for information, and the interaction path of some functions and the interface layout did not conform to usage habits, which hampered the efficiency. On the basis of posttest interview, the satisfaction of the three software can be ranked as Figma>Adobe XD>Sketch.

B. Difference in User Experience
As indicated in Table Ⅴ, there are significant differences in the overall experience and the information quality of each software.

1)
Although there is no statistically significant difference in the overall usability scores of the three software (p=0.209>0.05), combined with the specific difference in scores (m F =88.17>m A =80.86>m S =75.14) and feedback from subjects in the interview, it can be concluded that there are some differences in the overall user experience among the three software. The data shows that Figma with its succinct interface, clear and organized property control panel, and low learning cost, gives subjects the better experience in UI design.
2) System quality evaluation. Comparing the scores for overall and each subscale of the system quality, it is found that the overall system quality and (p=0.330>0.05) do not show significant differences among the three software. Key factors determining the subjects' ratings are whether they can find needed functions quickly and edit parameters efficiently.
The results of the subjects' ratings reveal that Sketch is not very helpful in completing the tasks, primarily due to its complex interface layout, insufficient or ambiguous support information, also the interaction of adding new layers and exporting which differs from usage habits, as evidenced by observations of the experiment and subsequent interviews. While Adobe XD can improve the efficiency, most of subjects indicated that its functions were not as comprehensive as the other two, only supported basic UI design works. In conjunction with results of the scale and interviews, the ranking of system usefulness can be concluded as Figma>Adobe XD>Sketch.
3) Information quality evaluation. The subjects considered Figma to have the best information quality, followed by Adobe XD and finally Sketch. Although there is no significant difference in the overall information quality scores of the three software (mF =32.36>mA =28.07>mS =26.50, p=0.097>0.05), but in the scores of particular indicators such as information validity (mF =5.57>mA =4.57>mS =4.14, p=0.012<0.05). Also, subjects indicated that the information in Sketch was confusing and redundant resulting in capturing the needed information inefficiently. The main issue with Adobe XD is that the vital information or functions are not prominent enough in the interface, and insufficient auxiliary information to assist users.

4)
Interface quality evaluation. The overall and specific indicators of the interface quality only differ in scores, but do not show significant differences. The interface quality of Figma is the best, followed by Adobe XD then Sketch (m F >m A >m S ). According to the subjects, Figma's interface is the most concise and clear, especially the property inspector, where common properties are shown in the first level panel while less frequently modified properties are collapsed in the second level panel, ensuring a concise interface and shortening the interaction path. Sketch's interface quality is poor for the layout and information architecture of some functions that does not correspond to usage habits; Adobe XD's interface is simple, but some of the frequently edited parameters are folded in the secondary panel, increasing the interaction path. Besides, some frequently used functions are secluded.

VI. DISCUSSION
Based on the results of the preceding analysis, it can be concluded that interface design, information quality, and interaction design highly affect system usability and user experience. Therefore, the designer can optimize the system from the perspective of these three dimensions.

A. Interface Design
Figma's interface is concise, and the color scheme of the interface helps users distinguish the panels clearly. The presentation of the content is clearer than the other two software, and the arrangement of functions is consistent with most users' preferences. The interface of Adobe XD is also concise, but some common tools are not sorted according to the frequency of use. Massive information is presented in Sketch's interface, and the arrangement of some function buttons does not correspond to users' behavior logic. For design software, the interface layout can affect the efficiency and user experience. Different layouts of controls have a significant impact on the eye-movement behavior, so the layout design needs to fully consider the proximity of each area [26]. The interface layout should be reasonably designed based on user's usage habits to make the information more organized [27], reducing the user's cognitive load and effectively improving the efficiency of information acquisition.

B. Information Design
The three software rated low on indicators of information guidance, information prominence, and information clarity in the after-scenario questionnaire. The main issues include unclear semantic expression of icons and some textual information, as well as insufficient auxiliary information. Therefore, when designing icons, it's crucial to ensure that icons are easily recognized and remembered by users [28], and the communication barriers between users and interface can be eliminated [29]. Simultaneously, it is vital to distinguish primary and secondary information in the interface, as well as to emphasize the main information to make it explicit, so as to improve users' cognitive efficiency. The UI design software should also increase or optimize the information that can assist users to work more efficiently. Furthermore, shared resources, such as plug-in libraries and design materials, can boost users' satisfaction.

C. Interaction Design
Efficiency and effectiveness are the main factors that influence users' perceptions of software usability and user experience. Figma outperforms Sketch and Adobe XD in both efficiency and efficacy, according to subjective evaluation and objective data analysis. In general, the interaction path in Figma is more in line with the logic of the user's behavior and functions, allowing users to adapt to the system in a short time and increase efficiency. Specifically, Figma distinguishes www.ijacsa.thesai.org information by frequency of editing, with necessary parameters and function buttons in the first level panel and unnecessary information in the second level panel, to keep operation logic clear and progressive while shortening the interaction path. Consequently when designing such software, the interaction of the system should be concise to make users feel natural and smooth during the process of operation [30]. On this basis, the interaction of the software needs be tailored to the users' preferences, the migration and reuse costs of the software should also be as low as possible.

VII. CONCLUSION
Three representative and widely used UI design software are chosen as research cases in view of the lack of researches related to usability and user experience of UI design software at this stage. In this paper, effectiveness, efficiency and satisfaction are selected as the evaluation criteria of usability, while system quality, information quality and interface quality are the evaluation criteria of user experience. Objective indicators, the eye movement index and behavioral index, and subjective indicators: evaluation scales, retrospective interviews, and user testing, are used to evaluate and analyze the user experience and usability of the three software. According to the results, each software has varying degrees of problems in interaction design, information quality, and interface layout. Therefore, interface layout, interaction logic, specific interaction pattern, and information visualization should be optimized based on the user's deep needs, as well as the behavior logic, cognitive load, and function logic, so that users can achieve high efficiency through a reasonable humancomputer interface.
Though the experiment was designed to prevent learning effects, the results were influenced by the fact that the subjects became familiar with tasks for the same task was performed with three software during the experiment. The number of experiment sample should be expanded in future studies, while experiments should be conducted through a more rigorous form of group control to reduce the interference with the results.