Understanding Visual Attention to Button Design Utilizing Eye-Tracking: An Experimental Investigation

Abstract

As graphical user interfaces continue to become more complex; it is becoming increasingly important for user interface (UI) and user experience (UX) designers to understand how design elements influence user attention. This study investigates the impact of button shape on user perception, focusing on shape preferences, attention distribution, and perceived pleasantness. To isolate the effect of shape, buttons with five different corner radii (completely angular to completely curved) were presented without contextual influences in a pairwise comparison. The research combined eye-tracking technology with digital questionnaires to collect both objective and subjective data. The results obtained revealed a preference for buttons with moderate corner radii, while buttons with completely angular corners received the least attention and were the least favored. Notably, discrepancies emerged between subjective preferences and objective attention rankings, particularly for wireframe buttons. This research demonstrates the effectiveness of eye-tracking in UI/UX design studies and provides valuable insights into the relationship between attention and preference for abstract design elements. The findings offer fundamental theory for creating more intuitive and effective graphical user interfaces, while also highlighting the limitation and importance of examining design elements within relevant contexts in future studies.

1. Introduction

The number and importance of graphical user interfaces (GUIs) and, thus, user interface (UI) and user experience (UX) design is constantly increasing [1,2]. GUI is defined as the graphical user interface between a human and a machine [3]. It facilitates the operation of interfaces using graphical elements [4]. These include, for example, images, symbols, and color. The aim when designing such GUIs is to make them as usable as possible. Usability is defined as the “Extent to which a system, product or service can be used by specific users in a specific context of use to achieve specific goals effectively, efficiently and satisfactorily.” [5] (p. 9).

As computer technology continues to advance, the range of information that can be displayed in a graphical user interface has expanded, becoming increasingly functional and informative [6]. This presents a challenge for designers, as enriched layouts may lead to overly complicated interfaces, potentially overwhelming users due to the limitations of human attention and cognitive resources [6,7,8]. One potential solution to this issue is to strategically direct users’ attention by manipulating specific design elements [2]. In this context, visual attention and salience are of great importance. The term “design elements”, as used in this work, refers to the fundamental components employed in the development of designs [9]. These components include, but are not limited to, lines, shapes, and colors. Attention is understood as a cognitive process through which individuals select certain information while ignoring other information [10]. The capacity for selective attention enables individuals to prioritize or disregard specific aspects or stimuli [11]. Visual attention can be effectively directed through the application of visual salience [12]. A stimulus is considered visually salient if it stands out in a particular context [13]. The salience of design elements plays a crucial role in emphasizing features within a GUI and guiding users’ focus toward important areas [14,15,16,17]. For example, according to a study by Ebert et al. [18], the visual design of a warning should receive at least as much consideration as the informational content it conveys. Especially for warnings, the research suggests highly visually salient warnings are more likely to be noticed by individuals.

Limitations in human attention can occur particularly when spatial or temporal mechanisms of selective attention are overloaded [19]. For instance, an excess of visual stimuli in a given space has been demonstrated to impede the effective processing of information [20]. In the context of visual search tasks, performance metrics demonstrate a decline when the number of objects is increased or when the objects move more rapidly [21]. This phenomenon suggests inherent limitations in our cognitive ability to track multiple objects concurrently. This raises concerns in both academia and industry, as many catastrophic accidents happen due to inattention [22,23]. It is therefore important to understand the limitations of attention. Processing limitations include, for example, inattentional blindness and change blindness [19]. Inattentional blindness refers to the failure to perceive an object or event in the field of view because the attention of an individual is focused on something else [24]. A perceptual error is said to be the result of a lack of attention to an unexpected element [25]. This is particularly the case if the element does not appear relevant to the current task or if the current task is associated with a high degree of task commitment [23,26]. Change blindness is the phenomenon of not perceiving change in the environment, as the focus of attention is often not on the changing part of the corresponding area [19,27]. Change blindness suggests that the content of the representations in a person’s short-term memory is heavily dependent on selective attention [27]. These phenomena have already been observed in various settings [27,28,29,30]. According to Davies and Beeharee [31], change blindness and inattentional blindness have been observed in the context of mobile device usage. Their findings indicate that the identification of newly inserted objects is consistently higher than that of changes made to existing objects on a screen. These phenomena have already been observed in various settings.

The human visual system is tasked with processing a vast array of information, and its performance is shaped not only by attentional constraints but also by various cognitive biases [32]. A distinction is made here between the attentional bias, selective bias, and salience bias. With the attentional bias, a person tends to focus their attention more strongly on certain stimuli than on others [33]. The perception and interpretation of information can be influenced by previous experiences, emotions, and beliefs [34]. Sequential bias is also referred to as the sequence effect, where decisions are always influenced by previous decisions or experiences [35]. These are sometimes difficult to recognize and eliminate [36]. This is particularly important during study implementations. The salience bias refers to the tendency of people to give more attention to information that is more salient or conspicuous than less salient information [37]. Companies such as Apple Inc. use the salience bias, for example, for the customer experience in their stores and on their website [14].

As users allocate a reduced amount of attentional resources to different elements within a more complex design, it is of advantage to gather information regarding the attention allocated toward individual elements [38,39]. Eye tracking serves as a valuable method for obtaining such data [40,41,42,43,44]. In the context of GUI design, search tasks are particularly pertinent [32]. During the process of searching for information within an interface, users’ eye movements provide objective indicators of attention distribution and information processing [45]. Key metrics in eye tracking include fixation duration, which is defined as the time the eyes remain fixated on a specific target [46]. Fixation duration is regarded as an implicit measure of visual attention. Another important eye tracking metric is the area of interest (AOI) attention ratio, which is defined as the proportion of time an individual spends looking at a designated area of interest during a task relative to the total time spent on the task [47]. Consequently, the AOI attention ratio can be utilized to ascertain which areas of a user interface garner the most attention from users [48]. Given that such data offers reliable insights into how individuals distribute their attention, it finds applications across various research domains, including the automotive industry [49,50]. Furthermore, this information is crucial for the future design of graphical user interfaces [51].

The salience of design elements, such as color, has already been investigated in several research studies [2,52,53,54], with one study also demonstrating that salient stimuli attract more attention than others [55]. According to Heimann and Schuetz [56], when observing a scene or image, people’s eyes naturally linger on and repeatedly return to the parts that contain the most relevant or meaningful information from their perspective. Previous work [57,58,59] has already shown that people look longer at stimuli that they subsequently select. Additionally, preference is reflected in allocated attention [56,58,60,61].

This study was preceded by an comprehensive examination of the topic based on the principle of the design thinking process [62]. Prior to the experimental study, four expert interviews were conducted with professionals in the field of user experience and user interface design. These interviews provided valuable insight into the limitations, challenges and methodologies associated with GUI design. Subsequently, it was considered relevant to define manipulable design elements within a GUI to provide a corresponding overview. In this process, 16 distinct design elements were identified as illustrated in Figure 1. There is already a lot of research on color and its impact in different contexts [46,52,54,63,64]. Among the presented elements in Figure 1, the design element “shape” in the form of a button was selected as a systematically manipulable design feature. This was because buttons are relevant to user interface and user experience design because they are utilized in various contexts and frequently in conjunction with GUIs. A subjective evaluation of buttons has already been made in a study by Becker et al. [65].

This study investigates the relationship between button shape and user perception, isolated from contextual influences. By analyzing shape preferences, attention distribution, and perceived pleasantness, the research aims to translate visual perception theory into practical UI design recommendations. The study bridges psychological principles and user interface design, providing evidence-based insights into fundamental aspects of visual perception. The goal is to support designers by developing more intuitive and effective design recommendations for graphical user interfaces.

The three research questions were:

RQ1: What shape of button do subjects prefer in a pairwise comparison?

RQ2: Is the objective attention distribution reflected in the subjective preference?

RQ3: Which of the presented buttons do subjects find most pleasant?

2. Materials and Methods

2.1. Particpants

The study was conducted with a total of 20 participants. The prerequisite for participation was to be at least 18 years old. No additional requirements or preconditions were necessary for this study. Participation in the study was voluntary and took place without any compensation. All participants provided their informed consent. Participants were recruited at Furtwangen University in Tuttlingen. The final sample consisted of ten (50%) male participants and ten (50%) female participants. The age of the participants was between 22 and 72 years (M = 31.90, SD = 13.39). Due to missing values, the eye-tracking data from 4 of the 20 participants had to be excluded.

2.2. Study Design

Various forms (IV1) of buttons were considered in this study. The different forms of buttons are shown in

Table 1. The different blue buttons and wireframe buttons.

	V1	V2	V3	V4	V5
radius (wireframe)
radius (blue)

. The buttons are presented in 5 variations regarding their corner radii and in two different colors (IV2). The corner radii were incrementally increased through 5 steps, with each radius advancing in 6-unit intervals spanning 0 to 24. The colors used are black and white (BW), as known from a wireframe, and blue. In wireframes highly simplified visual components are common as they are used in the early stages of a user interface design [66]. The blue color was chosen because there was no disturbance by a brighter color intended and blue is associated with calm and relaxation [64]. Blue is also listed as the most preferred color this preference tendency is also shown in the context of display items [65,67].

In line with the logic of pairwise comparisons, the five shape variations are compared individually for each color. The dependent variables (DVs) for the pairwise comparisons include the distribution of attention, measured through the AOI attention ratio data, and subjective preference. Additionally, participants rank the buttons directly based on their preferences using a questionnaire, where the dependent variable is the perceived pleasantness.

2.3. Materials and Method

To collect the demographic and subjective data, a questionnaire was created using the questionnaire software Unipark Tivian XI GmbH [68]. The questionnaire was also used to structure the course of the study. This ensured that the study was conducted in a standardized manner. Figure 2 shows the hardware components from the study management perspective. The presentation of the questionnaire was on an Apple iPad Pro 12.9. Participants were sitting in front of a computer monitor. The iPad was placed to their left and used via the built-in touchscreen. The data resulting from the questionnaire was analyzed using the software IBM SPSS Statistics Version 29. In the main part of the study, the participants were equipped with an eye tracker. For the eye-tracking, Dikablis Glasses 3 from the company Ergoneers (Egling, Germany) were used [69]. A series of data was recorded using the eye tracker. The most significant parameter for this evaluation was the area of interest (AOI) attention ratio. The AOI attention ratio in eye tracking is a metric that quantifies the amount of visual attention a specific region of interest receives relative to the total attention given to the entire visual stimulus [40,48]. It is typically expressed as a percentage. The data collected by the eye tracker was recorded, stored, processed and analyzed using the DLab software 3.0 Manual [47]. The data resulting from DLab was then further processed in Microsoft Excel and R. The multiple paired comparison test method was used in conjunction with the eye-tracking [70,71]. There were always two buttons presented at the same time. These two buttons on each presentation were designated as the two AOIs. The participants’ task was to compare the pair of buttons and select the preferred element from the pair (forced choice). It was not possible for participants to abstain. This process was repeated for all possible pairs of buttons. In order to rule out a reading direction effect the pairs were also presented mirrored. A total of 25 pairs of buttons were evaluated per button category. In total, the participants had to choose between 50 pairs of buttons. The pairwise comparison was presented with the help of a 27” BenQ EW2780 LED monitor and implemented using the PsychoPy software version 2021.2.3 [72]. PsychoPy is a library for the Python programming language that offers tools for reliable study control and automatic logging of important time points and inputs made by the study participants. In the context of this study, the choice between the presented buttons could be saved directly through the input in PsychoPy. With the help of a trigger program by Birkle et al. [73], direct communication between PsychoPy and the DLab eye-tracking software was achieved via an Ethernet connection. This made it possible to trigger special PsychoPy triggers in DLab based on the information displayed by PsychoPy. As a result, the randomized representations of the buttons and the inputs from the pairwise comparison were reliable and traceable in real time.

2.4. Study Procedure and Implementation

At the beginning of the study, a general introduction to the purpose and procedure of the study was given. Participants were then asked to read the consent form thoroughly and sign it. After further open questions, if any, were clarified, the demographic data were requested from the participants using the questionnaire on the iPad. Subsequent to the completion of the questionnaire, the eye tracker was configured and calibrated prior to the commencement of the eye-tracking study. Initially, several test runs were conducted. During the actual eye-tracking study, pairs of wireframe buttons were first presented, followed by blue buttons in the second part of the study. The pairwise comparison procedure in the eye-tracking study using the example of the blue buttons is shown in Figure 3.

In the experimental phase of the study, study participants were instructed to focus on the fixation “X” for a duration of 10 s. Figure 4 shows a participant at this stage of the study. Subsequently, a randomized pair of buttons was presented for a duration of five seconds. The study participants then had the task to look at the button pairs while they were visible. After five seconds, the buttons disappeared, and the study participants were asked to select the button they preferred. The participants were not informed about the specific context that their preferences should be based on. The text displayed in Figure 3 was presented during the selection phase.

Following the completion of the comparative analysis, the eye-tracker was withdrawn from the study participants, and the second section of the questionnaire was initiated. In this section, the buttons with varying corner radii were to be arranged according to their perceived pleasantness. The presentation of these buttons in the questionnaire was also subjected to randomization, a process that applied to both the wireframe buttons and the blue buttons. Subsequently, the study participants were granted the opportunity to pose open-ended inquiries prior to their dismissal. The course of the study can be seen in Figure 5.

3. Results

The Bradley–Terry model (BT model) was selected for the evaluation of the pairwise comparisons [70,74]. The model predicts the probability of one item winning in a pairwise comparison based on assigned strength parameters. It is based on the assumption that the probability of one item winning over another item in a pairwise comparison is proportional to the ability parameter of the two items. These ability parameters represent the relative strengths of the items being compared. A higher ability parameter for an item indicates a greater likelihood of that item being preferred or winning in pairwise comparisons. The model can, therefore, be used to estimate the relative strengths of the items that are compared and to rank them accordingly. The statistical computing environment R [75] was used for the evaluation. There the “BradleyTerry2” package for calculating corresponding estimates was used [76]. In the following chapters, the results obtained from the eye-tracking data are presented as objective rankings and those from the pairwise comparison with forced selection as subjective rankings. In addition, the resulting frequency tables from the rankings are shown in the questionnaire.

3.1. Eye-Tracking Results of the Pairwise Comparison

The eye-tracking data set contains data from 16 of the 20 study participants. The data are used to determine the objective ranks of the wireframe buttons. The respective winners/losers in the pairwise comparisons were determined via the AOI Attention Ratio in percent. The button with a higher percentage is considered the winner. The results of the wireframe buttons are shown first, followed by those of the blue buttons.

3.1.1. Results of the Wireframe Button

The observed frequencies of the wins and losses of the different wireframe buttons (see Buttons BW) in a pair comparison are shown in

Table 2. The observed frequencies of the wins and losses of the different wireframe buttons.

Buttons BW	V1	V2	V3	V4	V5	Wins
V1		12	11	9	12	44
V2	20		12	13	20	65
V3	21	20		16	21	78
V4	23	19	16		18	76
V5	20	12	11	14		57
Losses	84	63	50	52	71	320

. Table 2 shows that the third version (V3) won the most pairwise comparisons (78 out of a total of 320; see the last column of the sum of wins). This is followed by the fourth version (V4; 76 out of 320), the second version (V2; 65 out of 320), and the fifth version (V5; 57 out of 320). The first version (V1) resulted in the fewest wins (44 out of 320).

After determining the frequencies, the simple Bradley–Terry model was estimated. The estimation of the pair comparison data via generalized linear models provides the effects from the individual pair comparisons of the five button versions. Similarly, the percentage of glances at the AOIs provides a clear ranking. The estimators for the item parameters and the ranks assigned to the wireframe button versions are shown in

Table 3. The estimators for the item parameters and the ranks assigned to the wireframe buttons.

	V1 *	V2	V3	V4	V5
estimate	0	0.5500	0.8872	0.8346	0.3442
rank	5	3	1	2	4

* V1 acts as the reference object.

.

The parameter for the first button version (V1) was set to zero in this case and therefore acts as a reference object. Based on the coefficient estimators, the study participants most frequently preferred the third button version (V3). The fourth button version (V4) is in second place, followed by the second (V2) and fifth (V5) button versions. In last place was the most angular and therefore first button version (V1). For visualization, a graphical representation of the coefficient estimators is shown with the gray line in Figure 6. The first button version (V1) also represents the reference object.

3.1.2. Results of the Blue Buttons

The observed frequencies of the winners and losers of the blue button versions in the pair comparison are shown in

Table 4. The observed frequencies of the wins and losses of the different blue buttons.

Buttons Blue	V1	V2	V3	V4	V5	Wins
V1		10	4	9	12	35
V2	22		11	19	23	75
V3	28	21		13	17	79
V4	23	13	19		18	73
V5	20	9	15	14		58
Losses	93	53	49	55	70	320

. In the last column, the sum of the wins shows that the third version (V3) won the most pair comparisons (79 out of a total of 320). This is followed in order by the second version (V2; 75 out of 320), the fourth version (V4; 73 out of 320), and the fifth version (V5; 58 out of 320). The first version (V1) resulted in the fewest wins (35 out of 320).

Subsequently, the simple Bradley–Terry model was estimated again. The estimators for the parameters of the items and the ranks assigned to the button versions are shown in

Table 5. The estimators for the item parameters and the ranks assigned to the blue buttons.

	V1 *	V2	V3	V4	V5
estimate	0	1.0696	1.1834	1.0234	0.6302
rank	5	2	1	3	4

* V1 acts as the reference object.

.

The parameter for the first button version (V1) was also set to zero in this case and therefore acts as a reference object. Based on the coefficient estimators, the study participants most frequently preferred the third button version (V3). In second place was the second button version (V2), followed by the fourth (V4) and fifth (V5) button versions. In last place, the most angular and therefore first button version (V1) can be found. The blue line in Figure 6 also shows a graphical representation of the coefficient estimators for the blue buttons. As mentioned before, the first button version (V1) represents the reference object.

3.2. Results of the Pairwise Comparison with Forced-Choice

The data set of the pairwise comparison with forced choice contains the data of 20 study participants. The data are used to determine a subjective ranking of button versions (BW buttons; blue buttons). The respective winners/losers in the pair comparison were determined with the help of the data resulting from PsychoPy. The button that was marked as preferred in the pairwise comparison was considered the winner. Which of the button versions were preferred was determined. The following section presents the results in two parts with the results of the wireframe buttons (BW buttons) presented first, and those of the blue buttons (blue buttons) presented subsequently.

3.2.1. Results of the Wireframe Buttons

The observed frequencies of the winners and losers of the wireframe button versions (Buttons BW) in the pair comparison are shown in

Table 6. The observed frequencies of the wins and losses of the different wireframe buttons.

Buttons BW	V1	V2	V3	V4	V5	Wins
V1		1	0	0	4	5
V2	39		9	10	17	75
V3	40	31		23	20	114
V4	40	30	17		28	115
V5	36	23	20	12		91
Losses	155	85	46	45	69	400

. In Table 6, the sum of the wins in the last column shows that the fourth version (V4) was preferred in most pairwise comparisons (115 out of a total of 400). This is followed in order by the third version (V3; 114 out of 400), the fifth version (V5; 91 out of 400) and the second version (V2; 75 out of 400). The first version (V1) shows the fewest gains (5 out of 400).

After the frequencies were presented, the simple Bradley–Terry model was estimated. The estimators for the parameters of the items and the ranks assigned to the button versions are shown in

Table 7. The estimators for the item parameters and the ranks assigned to the wireframe buttons.

	V1 *	V2	V3	V4	V5
estimate	0	2.9083	3.9163	3.9428	3.3256
rank	5	4	2	1	3

* V1 acts as the reference object.

.

The parameter for the first button version (V1) was also set to zero in this case and thus functions again as a reference object. Based on the coefficient estimators (see

Table 8. The observed frequencies of the wins and losses of the different blue buttons.

Buttons Blue	V1	V2	V3	V4	V5	Wins
V1		0	3	3	9	15
V2	40		12	19	19	90
V3	37	28		23	24	112
V4	37	21	17		26	101
V5	31	21	16	14		82
Losses	145	70	48	59	78	400

), the study participants most frequently preferred the fourth button version (V4). In second place was the third button version (V3), followed by the fifth (V5) and the second (V2) button version. In last place, the most angular and therefore first button version (V1) can be found. For visualization, a graphical representation of the coefficient estimators is shown with the gray line in Figure 7. The first button version (V1) represents the reference object.

3.2.2. Results of the Blue Buttons

The observed frequencies of the winners and losers of the blue button versions (blue buttons) in the pair comparison are shown in Table 8. Here, the sum of the wins in the last column shows that the third version (V3) was preferred in most pair comparisons (112 out of a total of 400). This is followed in order by the fourth version (V4; 101 out of 400), the second version (V2; 90 out of 400), and the fifth version (V5; 82 out of 400). The first version (V1) shows the fewest gains (15 out of 400).

The simple Bradley–Terry model was estimated again. The estimators for the parameters of the items and the ranks assigned to the button versions are shown in

Table 9. The estimators for the item parameters and the ranks assigned to the blue buttons.

	V1 *	V2	V3	V4	V5
estimate	0	2.1490	2.6720	2.4070	1.9620
rank	5	3	1	2	4

* V1 acts as the reference object.

.

Again, the parameter for the first button version (V1) was set to zero (reference object). Based on the coefficient estimators, the study participants most frequently preferred the third button version (V3). In second place was the second button version (V2), followed by the fourth (V4) and fifth (V5) button versions. The most angular and therefore first button version (V1) can be found in the last place. The blue line in Figure 7 also shows a graphical representation of the coefficient estimators for the blue buttons. The first button version (V1) represents the reference object.

3.3. Comparison of the Ranks

An overview of the ranks of the various buttons resulting from the subjective and objective data in the pair comparison of the presence study is shown in

Table 10. Comparison of the ranks in the subjective and objective pairwise comparison.

Rank	Objective BW	Objective Blue	Subjective BW	Subjective Blue
1
2
3
4
5

. The table shows that the ranking of the wireframe buttons resulting from the objective data differs from that resulting from the subjective data. Only the fully square button is in the same position in both rankings. The first and second ranks as well as the third and fourth ranks are swapped in their respective positions. However, the ranking of the blue buttons resulting from the objective data and the ranking resulting from the subjective data do not differ. In both rankings, the ranks for the individual button versions are the same. The rankings of the wireframe buttons and the blue buttons resulting from the objective data differ in the third and fourth rankings. There, the ranks of V2 and V4 are reversed. For the wireframe buttons, V4 is in second place. V2 is in second place for the buttons. The rankings of the wireframe buttons and the blue buttons resulting from the subjective data also differ. Only V1 is in fifth place in both rankings. All other ranks of the button versions are not the same as those of the wireframe buttons.

3.4. Results of the Ranking Assignment in the Questionnaire of the Study

Frequency tables were created to evaluate the ranks of the button versions assigned in the questionnaire. The frequency table for the ranks of the wireframe buttons can be seen in

Table 11. The frequency table for the ranks of the wireframe buttons.

Buttons BW	V1	V2	V3	V4	V5
Rank 1	0	5	5	3	7
Rank 2	0	4	7	7	2
Rank 3	1	3	8	6	2
Rank 4	2	8	0	3	7
Rank 5	17	0	0	1	2

. The results show that the first button version (V1), which represents the fully square button version, was most frequently assigned to the fifth rank. V1 was never assigned to the first or second rank. No clear allocation can be seen for all other ranks, but it should be mentioned that V3 was never assigned to the fourth or fifth rank and V2 was also never assigned to the fifth rank.

The frequency tables for the ranks of the blue buttons are shown in

Table 12. The frequency tables for the ranks of the blue buttons.

Buttons Blue	V1	V2	V3	V4	V5
Rank 1	0	1	7	6	5
Rank 2	0	7	5	4	4
Rank 3	1	4	6	6	3
Rank 4	4	6	2	2	6
Rank 5	14	2	0	2	2

. Here, again, you can see that the first button (V1) version was most frequently assigned the fifth rank. V1 was never assigned the first or second rank. No clear allocation can be seen for all other ranks. V3 was never assigned to the fifth rank. For V3 and V4, the most frequent (≥4) assignments are between the first and third rank. For V2, on the other hand, the most frequent assignments (≥4) are between the second and fourth rank.

4. Discussion

The objective of the eye-tracking study was to ascertain the question of which button subjects preferred in a pairwise comparison and whether the objective attention distribution was reflected in the subjective preference. The results of the study are outlined in Table 10, which provides an overview of the ranks resulting from both the objective eye-tracking data and the subjective decisions made in the pairwise comparisons.

The results indicate that for all button types (objective wireframe, objective blue, subjective wireframe, subjective blue), V1, which represents the most angular button version, ranks fifth and last. In contrast, V5, which represents the roundest button version, ranks fourth in all cases except for the subjective evaluation of the wireframe buttons. These findings mainly align with a study by Becker et al. [65], which showed that completely angular and completely curved button corners are the least preferred.

Looking at the rankings resulting from the pairwise comparison, the ranks resulting from objective and subjective data for the wireframe buttons and the blue buttons differ. For the wireframe buttons, there are specifically differences in ranks 1 and 2 as well as in ranks 3 and 4, with each rank being mirrored in its representation. The coefficient estimates indicate that there are only minimal differences between ranks 1 and 2, which correspond to button versions V3 and V4. For the blue buttons, ranks 2 and 3 are mirrored in their representation. The rankings derived from the eye-tracking data (objective) show V3 on the first rank of the wireframe buttons, which is consistent with the ranking of V3 of the blue button versions. A larger sample size or multiple iterations might provide a clearer evaluation of these ranks. The minimal difference in the rankings for the blue buttons suggests that preferences for specific button versions manifest in allocated visual attention. This finding corroborates the literature described in theory [56,58,60,61]. According to Milosavljevic et al. [77], there is a potential for visual saliency biases to influence everyday choices. This raises the question of whether the buttons ranked higher are more salient than those with lower ranks. It is important to acknowledge that the present study exclusively examined the allocation of attention to button shapes in the absence of contextual information.

When comparing the rankings derived from the eye-tracking data, ranks 1, 4, and 5 do not differ from one another. V3 is ranked first, indicating that it received more focal attention than other button versions, both among blue buttons and wireframe buttons. V1 is in the last position, while V5 is ranked fourth. Following the assumption that preference is reflected in allocated attention, the findings align with those of Becker et al. [65], who did not report a ranking between completely angular and completely round buttons. Based on the current results, it can be concluded that completely angular buttons are less preferred than completely round buttons. This is further supported by the rankings from subjective data, where V1 is also ranked last among both blue and wireframe buttons. V5 ranks fourth among blue and the objective ranks of the wireframe buttons and third among the subjective ranks of the wireframe buttons. When comparing the remaining ranks of button versions based on subjective data, it becomes evident that ranks 1–4 differ notably. This prompts the following questions: firstly, to what extent does color influence subjective evaluation, and secondly, if so, why, and what are the underlying mechanisms by which color exerts this influence?

The research question of which buttons are perceived to be the most pleasant by the participants can be answered by examining the frequency distributions shown in Table 11 and Table 12. These distributions are derived from the questionnaire administered during the study and reflect the ranking of button versions based on perceived pleasantness. The results clearly show that V1 frequently occupies the last rank for both wireframe and blue buttons in terms of the pleasantness evaluation. This is also seen in the results from the objective and subjective data of the pairwise comparison. A higher rank for V3 among wireframe buttons is indicated by its never being assigned to either the fourth or fifth rank. These results confirm the preference and greater attention reflected in the previously described rankings from both subjective and objective data shown in Table 10. For blue buttons, V1 was never assigned to the first or second rank, and V2 was assigned once to the first rank. Here, V3 was also never assigned to the fifth rank among the blue buttons, showing a tendency toward higher ranks (ranks 1–4). Button V4 was more often assigned to higher ranks (rank 1–3) than the lower ranks (4–5). It should be noted here that the salience of a button in the pairwise comparison may have influenced the answers of the study participants. The evaluation of the results must be viewed under the influence of a possible salience bias [77].

In summary, V1 received the least attention and was rated least preferable and least pleasant in comparison to the other button versions. In terms of eye-tracking data, V3 ranks first, a result which aligns with the rankings of the blue buttons derived from subjective comparisons. However, this is not the case for wireframe buttons. The frequency distributions in the questionnaire indicate that V1 is also ranked lowest in terms of perceived pleasantness. Furthermore, V3 tends to be assigned ranks 1–3 concerning pleasantness.

The present study is subject to several limitations. Prior to the pairwise comparison task, participants were asked to define the term “preference” for the task themselves. They were not advised on how or in what context to define the word “preference” for selecting the preferred button, which may have influenced the deviating ranks resulting from the subjective data. Additionally, during the eye-tracking study, participants looked at the fixation X for 10 s each. It is possible that this duration was sufficient to ensure that the previously displayed button pairs were forgotten; however, the potential influence of visual memory should be considered. Although the buttons were presented in a randomized order regarding their shape, the order of presentation should be considered, as the wireframe buttons were always presented before the blue buttons.

The present study employed a multidimensional approach, incorporating a pairwise comparison with eye tracking. This approach is regarded as a very useful method, although it should be noted that the results between the subjective preference and the attention distribution are not completely consistent. It is therefore recommended that a multidimensional approach with different eye-tracking parameters, as well as measurement methods, be utilized in future research. Additionally, incorporating a questionnaire with open-ended questions into the study design is deemed to be beneficial. This approach facilitates the collection of feedback regarding both the methodology and the various design elements [78].

A further significant limitation pertains to the quality of the eye-tracking data, specifically the discarding of four sets of eye-tracking data from the final sample. The duration of the two runs of the pair comparison was limited to a maximum of 15 min, and a thorough examination revealed indications of participant fatigue, as well as issues related to inaccurate calibration and the use of make-up, which resulted in poor data quality. The issue of fatigue was evidenced by prolonged periods during which participants exhibited closed eyes. Such factors must be considered in future investigations.

Another limitation of the study was the presentation of the buttons in isolation from any contextual framework. The buttons were solely presented as shapes and lacked any labels. This was because an abstract initial study of attentional allocation without distraction was to be conducted. It is conceivable that the evaluation of these buttons might vary if they were to be labeled or viewed within a contextual framework, as is usually the case with graphical user interfaces. This is a possibility that will be examined in subsequent research. It is noteworthy that Becker et al. [65] presented their buttons in the context of a radio screen of a multimedia display in a vehicle and obtained similar results. At this point it is worth noting that Becker et al. [65] presented their buttons in the context of a radio screen of a multimedia display in a vehicle and obtained similar results.

The measurement of salience also constitutes a limitation of this study. Preference and the visual attention distribution were measured. Based on the results presented and the existing literature, it can be inferred that the rankings may also reflect the salience of the buttons, as visually salient objects are more likely to be chosen [77]. However, this assumption should be validated through a more detailed analysis of the eye-tracking data. The initial gaze could serve as a useful metric for this purpose, as demonstrated in the work by Weber et al. [2]. Additionally, it is advantageous to evaluate the salience of design elements subjectively. The findings of this study may provide valuable insights for the future design of graphical user interfaces (GUIs). Notably, clear results were observed for the fifth-ranked version of the completely square button. This button version did not receive the highest visual attention, nor was it preferred or perceived as particularly aesthetically pleasing compared to other button designs. However, these results should be interpreted with caution, as the button versions need to be tested in an appropriate context before specific design recommendations for GUIs can be made. Future research will extend this work to include an analysis of the salience of design elements in relevant contexts.

In the context of future research, the utilization of a combination of pairwise comparisons, eye-tracking, and interviews emerges as a promising avenue for exploration. This approach would facilitate the selection of two GUIs, each characterized by distinct design elements, by users. Moreover, the integration of eye-tracking data and interview responses would enable the extraction of insights into the rationale underlying user decisions. Additionally, it is imperative to undertake a comprehensive examination of the influence of both primary and secondary tasks in conjunction with GUIs, with a view to elucidating the salience of design elements.

5. Conclusions

The present study set out to investigate the relationship between button shape and user perception, isolated from contextual influences. Shape preferences, attention distribution, and perceived pleasantness were evaluated. The study contributes to UX design by investigating the fundamentals of human visual perception and interaction patterns to promote design strategies and interfaces that are both aesthetically pleasing and highly usable.

While the study provides valuable insights into the topics of attention and preference in the context of the design element “button”, isolated from contextual influences, several questions remain unanswered. It is essential to recognize that the field of visual perception is both complex and expansive, and a thorough understanding of the various influences on vision, perception, and stimulus processing is critical for advancing knowledge in this area.

As discussed in this paper, as technology advances, it is of great relevance to create user interfaces that are intuitive and pleasant to use while also offering designers hands-on tools to simplify the work for designers. Employing a range of methodologies can enhance our understanding of underlying human processes in relation to the use of digital surfaces. For future research, it is crucial to evaluate the salience of buttons more precisely by examining initial gaze patterns. In addition, further investigation into the other design elements depicted in Figure 1 is required, as are studies of the implications of overlapping design elements and the influence of established design principles. Other pertinent questions to be explored include whether preferences for button versions change over time during pairwise comparisons and how the graphical user interfaces of commonly used digital devices impact preferences for button designs. Further research in this area is recommended.