AN EMPIRICAL STUDY OF VISUAL NAVIGATION AND COGNITIVE LOAD IN MODERN GRAPHICAL INTERFACE TOOLS USING EYE-TRACKING METHODOLOGY (ON THE EXAMPLE OF SKETCH, ADOBE XD, AND FIGMA)

Beyond the interface layout, the interaction design of the three applications also exhibits a number of differences and commonalities. Most of the common functions of the three applications are interacted with in the same way; for example, all users add or remove element properties by clicking the Add or Delete controls. The menu depth of the three applications differs. Some functions in Sketch require the user to navigate to a second-level submenu, whereas when using Adobe XD and Figma users only need to go to a submenu, and the overall interaction path is shorter. There are also differences in editing property parameters. Figma displays only the frequently edited parameters, while the rest are hidden in the corresponding submenu; Adobe XD and Sketch, by contrast, display all parameters in the first-level panel of the property inspector.