Keywords

1 Introduction

Over the years, esports broadcasts have attracted more and more spectators. The reporting of esports matches is mostly done by commentators [1] and via dashboards that provide additional information to support the spectators’ interpretation of gameplay [2].

Research has been conducted on dashboards and other ways of enhancing the spectator experience, contributing guidelines, recommendations, and design goals. A theme repeatedly occurring in this line of research is the adaptability of the dashboards (e.g., [2,3,4,5,6]). However, throughout those studies, the importance of the presented information to individuals appears to not have been considered, since little is known about this so far [7,8,9]. This suggests that important steps within a user-centered design process are missing, such as the identification of the end-users and their needs [10]. While there is an established body of work regarding video game players and their experiences, not all esports spectators actually play the game themselves, and the experience they seek from spectating may also be different. Based on previous research, we can delineate three different types of esports spectators: players, passive-viewers, and spectator-players [6]. According to Stahlke et al. [6] a ‘player’ is normally in primary control of the observed gameplay, which in this study represents a player of an esports team, that also spectates to learn. A ‘passive-viewer’ may be invested in the matches and the competition, but is not actively participating within the esports community and thus not part of a team. The spectators that are interacting with the community are referred to as ‘spectator-players’ but are also not part of a team.

Inspired by previous design goals regarding adaptability, this study explores how these different types of spectators value different dashboards elements and their preferred placement. To address this, we created a small tool allowing users to individually place dashboards elements in order to investigate the following three questions:

  1. 1.

    What is the importance of individual dashboard elements during esports matches to players, passive-viewers, and spectator-players?

  2. 2.

    What are the preferred placements of the individual dashboard elements for players, passive-viewers, and spectator-players?

  3. 3.

    How far are the individual dashboard elements displaced?

The study is focused on the multiplayer online battle arena game League of Legends (LoL) [11], one of the biggest esports games. During the study, a three-step research process was followed. First, a survey was conducted to gather demographic information, the spectator type, and ratings on the importance of the individual dashboard elements. Next, the tool was experienced and the dashboards were created through rearranging predefined elements. Finally, a qualitative evaluation in the form of a semi-structured interview was carried out.

The results show significant differences between the importance of the dashboard elements across the different spectator types. This was corroborated by the information that could be perceived from the placement of the dashboard elements from the outcomes of the dashboards designed by the participants. Our results contribute to design recommendations for spectator dashboards that can help researchers and designers with creating adaptable dashboards for esports.

2 Related Work

Several researchers examined the opportunities and challenges presented by spectator experiences in order to propose new design goals or guidelines, to explore research opportunities, and to increase awareness. For instance, Alhamadi [3] identified and investigated the challenges associated with dashboards, what users do in response to those challenges and what adaptions can be applied to mitigate these challenges. Kriglstein et al. [12] hosted a workshop aimed to foster discussion on how technology and HCI can support transforming the act of spectating games from a passive to a more active and engaging experience. With the aim of finding factors that contribute to qualitative spectator experiences, observations and focus-group interviews were conducted by Rambusch et al. [5], leading to the identification of four themes: the need for an overview of game events, exposing hidden objects and highlighting important moments, spectator- and commentator-friendly game pacing, and the importance of professional commentators and casters. Wallner et al. [13] conducted a mixed-methods study exploring the information demands posed by players on post-play visualizations and the goals they pursue with it. Zhu and El-Nasr [14] stated that data is becoming an important central point for making design decisions for most software, including games. By defining the design space for open player modelling and how this can empower players through data transparency, new research opportunities were presented. Kleinman and El-Nasr [15] discussed the notable lack of research exploring how players use their data to gain expertise in the context of esports and argue that there is a need for further research into how players use their data and what they expect from data-driven systems.

Researchers also designed and evaluated different dashboards with experienced esports spectators. Kokkinakis et al. [8] presented a second-screen app for live esports events and discussed implications for the design of such apps by reflecting on the encountered methodological challenges. Aksun [16] focused on investigating the needs and expectations of spectators by considering their motivations and habits in order to reach conclusions on how the experience of spectating esports can be enhanced. The study includes a design intervention regarding improved dashboards to put recommendations into practice and to test their suitability with spectators. This intervention consisted of illustrations indicating how the interfaces could work. However, participants could not experience the design. For Charleer et al. [2], designing and evaluating dashboards resulted in design goals with four themes: adaptability, intelligence, transparency, and glanceability.

Regarding adaptability, a one-size fits-all approach is hard to achieve, as spectators have highly individual ideas and needs [2]. This suggests that a nuanced approach to dashboard design is required, either specifically developing solutions that address individual groups of spectators, or creating flexible solutions that can easily be adapted to a range of viewing settings, preferences, and needs. However, those aspects have not been thoroughly studied yet.

Hence, the present study aims to extend some of the related work. Firstly, design goals were integrated to create an adaptable dashboard. Secondly, this dashboard presented elements with information and statistics demanded by players and spectators. Thirdly, more research was conducted on how individual groups of spectators use their data and how they value this data.

3 Design

A tool with a GUI for creating dashboards was designed with the help of Open Broadcasting Software (OBS) [17]. A user-centered design approach was followed and the final iteration of this process will be reported in this section.

Previous research on the design of dashboards concluded that many participants felt a need to learn how to use the dashboards, since the eye tracking data indicated too much effort was required [2]. We therefore tried to keep the tool as easy to use as possible, and the decision was made to use a simple drag-and-drop function for displacing the dashboard elements with the left mouse button. Before usage, a key on the keyboard had to be bound to the function of (un)hiding elements when selected with the left mouse button. Simply pressing this key hid or unhid the selected element.

The tool has a black background with the gameplay being shown fixed in the middle of the screen. The gameplay shown was a fragment of the first game of the LEC Spring Finals: MAD vs. RGE [18]. Around the frame for the gameplay, five different interface elements were placed in predefined positions. The tool was originally designed for a resolution of 2560 × 1440 pixels but could be scaled down to any size with an aspect ratio of 16:9.

Five dashboard elements are part of the tool. These elements were chosen, since they were the most present elements during matches on the eSport website of LoL [19] at the time of the study. The different elements are highlighted in Fig. 1.

  1. 1)

    External scoreboard: This element gives an overview of the match and its current state regarding the objectives to achieve. It also shortly presents the current statistics for all 10 players involved in a LoL match.

  2. 2)

    Internal scoreboard: This element is from the game itself. In addition to showing statistics for each player, it indicates the current state of the bought items in the game and information on whether a player is alive or not. When a player is not alive, red numbers indicate the seconds until respawn.

  3. 3)

    Direct opponent: Traditionally, during a game, the five players in one team are divided over three ‘lanes’ and an area in-between, which is called the ‘jungle’. Each player has its own role: the top-laner plays on the ‘top’ lane; the jungler plays in the ‘jungle’; the mid-laner plays on the ‘middle’ lane; and the ADCarry and support play together on the ‘bottom’ lane. This interface element provides information about two direct opponents, for example, the opposing top-laners.

  4. 4)

    Last teamfight: This element shows a bar chart, with a bar for each player, indicating the damage dealt during the last teamfight for each player involved. A teamfight is a fight in which 8 or more players are participating.

  5. 5)

    Webcams: It contains two webcam streams, one for each team. The webcam footage shows one player at a time with their name next to it. The player shown varies, depending on the actions happening during the game.

More, similar, elements are present during the matches, but to avoid split-attention [20], those were left out. One of the main motives to watch esports, is to learn from professional players [6]. To create effective learning environments, designers must avoid the split-attention effect. This occurs when learners are required to split their attention between two or more mutually dependent sources of information, which have been separated either spatially or temporally [20]. Including more elements would necessitate them being placed further apart and could make it difficult to determine whether elements were really determined less useful by the spectator, or simply missed due to cognitive overload.

Fig. 1.
figure 1

Example outcome of dashboard with highlighted elements. 1) External scoreboard, 2) Internal scoreboard, 3) Direct opponent, 4) Last teamfight, 5) Webcams.

Full size image

4 Method

In this section we report how a tool to create dashboards is used by different spectators in order to investigate the values the spectators have towards different dashboard elements.

4.1 Participants

Thirty-one participants (29 male, 2 female) took part in the study. The average age of the participants was 23 years (SD = 3.4), with the youngest spectator being 19 years and the oldest 31 years of age. All participants came from European countries. Recruitment involved sharing the call for participation using personal and professional social networks (including WhatsApp, Twitter, and Discord). All participants reported to have more than 10 h experience watching esports. Eight participants saw themselves as players, twelve as passive-viewers, and eleven as spectator-players.

4.2 Procedure

At the beginning, participants were given information about the study, which was conducted online. Each participant was introduced to the definitions of players, passive-viewers, and spectator-players (see Sect. 1) and asked to which one they felt most connected. Afterwards, participants were introduced to the five different dashboard elements and asked to fill out a survey which consisted of two sections. The first section included socio-demographic questions, i.e., gender (male/female/other); age (in years); spectator type (player/passive-viewer/spectator-player). The second one focused on the dashboard elements and asked participants to rate the importance of individual dashboard elements to them on a 7-point Likert scale (ranging from 1 = not important at all to 7 = very important).

When the survey was completed, participants were shown a video segment of a LoL esports match [18]. The segment lasted 4 min and 27 s and contained a game changing moment in one of the finals as well as a replay of this moment. During the replay, the participants could pause the game and create a dashboard according to their preferences.

During the study, participants were asked to think aloud so the recorded sessions could be transcribed. A screenshot of the created dashboard was saved for each participant. The creation of the dashboard was followed by a semi-structured interview. Notes were taken during the whole session, which on average took 27 min.

4.3 Data Analysis

The data from the survey were analyzed quantitatively. Next to this, the screenshots of the dashboards were analyzed by creating heatmaps out of them. First, the placement of the elements was read in pixels. This enabled the execution of descriptive statistics on the displacement of the elements. The displacement was calculated in pixels in contrast to the resolution of 2560 × 1440.

With the pixel coordinates, a program could be written in Python to translate the pixel data to heatmaps. Twenty-four heatmaps were created. Four for every individual element: one for each spectator type and one with all participants (Fig. 2). Additionally, four heatmaps were created with all dashboard elements involved. Also, one for each spectator type and one for all participants (Fig. 3).

Statements from the participants are used as qualitative data to support and supplement the quantitative data and the data retrieved from the heatmaps.

Variables. In this study, one independent variable was used: the spectator type (players, passive-viewer, or spectator-player). As dependent variables, two variables were included: (1) importance ratings for each element and (2) the displacement in pixels for each element. All results were analyzed using SPSS 27.0 [21]. First, descriptive statistics (i.e., mean score, standard deviations, minimum and maximum values) were calculated. Visual assessment of normality using QQ-plots showed that the data was normally distributed for which reason the data was analyzed using parametric tests. As such, one-way ANOVAs were conducted to assess differences in the importance ratings of the dashboard elements.

Fig. 2.
figure 2

Heatmaps of webcams for A) all participants, B) players, C) passive-viewers, and D) spectator-players. The outer black rectangle indicates the complete interface area and the inner black rectangle indicates the location of the gameplay.

Full size image
Fig. 3.
figure 3

Heatmaps for each individual element with all participants involved. A) External scoreboard, B) Internal scoreboard, C) Direct opponent, and D) Last teamfight.

Full size image

5 Results

In the following section, the results are presented separately for each individual dashboard element. Table 1 gives an overview of the importance ratings based on spectator type. We also report the average numbers of displaced pixels of the elements, to give an indication of the strength of disagreement with the original placing, although no strong conclusions should be drawn from this.

5.1 External Scoreboard

The external scoreboard element appears to be the most important for spectator-players (M = 6.27, SD = 1.01) while it is of similar importance to passive-viewers (M = 5.33, SD = 1.07) and players (M = 5.38, SD = 0.74). However, there was no statistically significant effect of spectator type on the importance of the external scoreboard element as determined by a one-way ANOVA (F(2,28) = 3.170, p = .057, η2 = .185).

The external scoreboard element was used by all participants. On average, the element was displaced by 447 pixels (SD = 302), with a minimum of 280 pixels and a maximum of 2058 pixels.

Almost all (30 out of 31) participants placed the external scoreboard element on the left side of the streamed match (Fig. 3A). All players put the element on the exact same location, connected to the top left side of the streamed match.

5.2 Internal Scoreboard

There was a statistically significant effect of spectator type on the importance of the internal scoreboard element (F(2,28) = 8.562, p = .001, η2 = .379). A Tukey HSD post-hoc test revealed that the importance of the element was statistically significantly higher for spectator-players (M = 5.09, SD p = .018) and players (M = 5.63, SD = 1.06, p = .002) compared to passive-viewers (M = 3.92, SD = 1.00). There was no statistically significant difference between spectator-players and players (p = .463).

The internal scoreboard element was used by all participants. On average, the element was displaced by 371 pixels (SD = 242), with a minimum of 192 pixels and a maximum of 1324 pixels.

All except one participant placed the internal scoreboard element on the bottom of the streamed match (Fig. 3B). Seven out of 8 players placed the element exactly at the bottom-center of the streamed match. For both passive-viewers and spectator-players the placement of the element on the bottom side was slightly more spread out.

5.3 Direct Opponent

There is a statistically significant effect of spectator type on the importance of the direct opponent element (F(2,28) = 7.481, p = .002, η2 = .348). A post-hoc Tukey HSD test shows that passive viewers (M = 3.50, SD = 1.17) valued the direct opponent element significantly less important than spectator-players (M = 4.91, SD = 0.83, p = .005) and players (M = 4.88, SD = 0.84, p = .012).

The element was used by 28 participants. One spectator out of every category hid the direct opponent element. On average, the element was displaced by 193 pixels (SD = 288), with a minimum of 0 pixels and a maximum of 1261 pixels.

24 out of 28 participants placed the direct opponent element on the bottom left corner of the dashboard (Fig. 3C). 23 out of 24 participants who placed the direct opponent element on the bottom left corner also placed it under the external scoreboard element.

5.4 Last Teamfight

There was a statistically significant effect of spectator type on the importance of the last teamfight element (F(2,28) = 4.341, p = .023, η2 = .237). Tukey HSD post-hoc tests revealed that the value of the importance of the element was statistically significantly lower for passive-viewers (M = 4.08, SD = 1.38, p = .025) compared to players (M = 5.63, SD = 1.06). There was no statistically significant difference between spectator-players and players (p = .058) and between passive-viewers and spectator-players (p = .926).

The element was used by 28 participants. Three spectator-players hid the last teamfight element. On average, the element was displaced by 987 pixels (SD = 323), with a minimum of 523 pixels and a maximum of 1436 pixels.

Eight out of 28 participants placed the last teamfight element on the top side of the interface (see Fig. 3D). Half of them put the element on top of the streamed match (3 players and 1 spectator-player). The other 20 participants placed the element on the bottom side of the interface, all underneath the streamed match. 21 participants placed the last teamfight element together with the internal scoreboard element, either next to each other or on top of each other.

5.5 Webcams

There was a statistically significant effect of spectator type on the importance of the webcam elements (F(2,28) = 4.530, p = .020, η2 = .244). A Tukey HSD post-hoc test revealed that the value of the importance of the element was statistically significantly lower for the spectator-players (M = 3.36, SD = 1.57, p = .025) compared to passive-viewers (M = 5.00, SD = 1.13). There was no statistically significant difference between spectator-players and players (p = .071) and between passive-viewers and players (p = .979).

The element was used by 25 participants. One passive-viewer, four spectator-players and one player hid the webcam elements. On average, the element was displaced by 564 pixels (SD = 187), with a minimum of 349 pixels and a maximum of 1118 pixels.

The placement of the webcam elements is the most varied one (Fig. 2A). Six out of the seven players placed the elements on top of the streamed match, all at the same place fitting well with existing elements that are in the game. The placement of the element by the passive-viewers and spectator-players is quite diverse. However, none of the spectator-players put the elements underneath the streamed match.

Table 1. Means (Std. Deviations) of importance ratings from each spectator type. Bold values represent the highest ratings per spectator type, italics represent the lowest rating per spectator type. SB = scoreboard.
Full size table

5.6 Qualitative Feedback

Overall, the players rated the importance of all elements quite high, with the lowest mean of 4.88 for both the direct opponent element and the webcams. The internal scoreboard and last teamfight element were most important to them. One player noted that “as a player in the game one of the most important aspects is to be aware of the items in the game. Personally, I always like to see the effect of the items on the damage dealt.” (P13). This may also support the fact that 21 participants placed the last teamfight element together with the internal scoreboard.

Passive-viewers were more interested in the external scoreboard and webcams. One passive-viewer noted: “I am interested in the state of the game when I am watching. Some elements give a lot of information, which can be very interesting, but I prefer the external scoreboard. It provides simple information which can help me to understand the match even if I did not watch it from the start.” (P4).

Regarding the webcams, a passive-viewer stated that “although the webcams do not really give information about the game, I still like them. I am not really sure why, maybe because it makes it more personal? I also like it when I recognize a player.” (P20).

For spectator-players, the external scoreboard showed to be particularly important as well, because as one spectator-player noted “With one glance at the left side, you know what has been done during the game.” (P30). The importance rating for the webcams by the spectator-players was the lowest of all. Another spectator-player reflected that: “I watch those games for entertainment, but mostly to get better as well. All elements help me to understand what happened and what the result of it can be, except for the webcams. Sometimes it is funny to see which kind of players are behind the screens, but for me, the webcams could be left out.” (P17).

In total, only three elements over all participants have been placed on the right side of the streamed gameplay. When talking about this with the participants, most of them answered similarly as one passive-viewer: “I think I did not place something there, because normally in that place would be the chat.” (P26).

6 Discussion

The aim of this study was to gain insights into differences of the importance the different spectator types have towards different dashboard elements and how they would place those elements.

Our results show that different spectator types rate the dashboard elements differently with respect to their importance. The different values attached to the elements could also be seen when analyzing the heatmaps. Building on these results, we discuss design recommendations next.

Across all participants, the external scoreboard was considered the most important element. Looking at the placement of the element, designers can position the external scoreboard on the left of the streamed gameplay. Designers might want to consider making the element not adaptable at all since the position is highly favored.

The internal scoreboard was the second most important element across all participants but showed to be the most important one for players. Following the results, it is recommended to position the internal scoreboard underneath the streamed gameplay.

The third most important element was the last teamfight element. It was also the most displaced element, meaning the participants put a lot of time, attention, and effort into finding a suitable place for this element. Although eight participants placed the element on the top side of the interface, the position on the bottom side appears recommended. The reason for this is the number of times this element was connected to the internal scoreboard.

The second to last rated element were the webcams. It is also the element that was hidden the most. Designers should allow users to hide certain elements but should also consider that elements can be placed on top of the streamed gameplay. Using the tool, this happened the most for the webcam elements. It seems to visually fit in well with the interface of the streamed game.

Overall, the direct opponent element was the least important one. Next to this, it was also the element with the lowest mean of displacement in pixels. This can be related to the importance of the element: the participants did not want to spend time on moving the element as it was not important to them. Most of the times, the element was only connected to the streamed gameplay with one corner, meaning this element was placed the furthest away from the streamed gameplay. Designers may want to position this element on the bottom left side of the interface.

To improve the user experience of such dashboards, it is recommended to create an example dashboard or template for each spectator type. All templates should have the external scoreboard placed on the top left side of the streamed gameplay, whether the element is adaptable or not. Regarding the internal scoreboard, for the players it should be placed underneath, but connected to, the streamed gameplay and exactly in the middle of the streamed gameplay. The last teamfight element can be connected to the internal scoreboard by placing it underneath the element.

For passive-viewers and spectator-players it is recommended to place the internal scoreboard element underneath, but connected to, the streamed gameplay. For all templates, it is recommended to place the direct opponent element on the bottom left side of the interface, with only the top right corner of the element connected to the streamed gameplay.

For passive-viewers, the webcam elements should be placed somewhere on the bottom half of the interface. Suggested is a place underneath the streamed gameplay in such a way it fits properly with the internal scoreboard and last teamfight. Afterwards, the passive-viewers can always choose to move it on top of the streamed gameplay. For players and spectator-players it is important the webcam elements are placed on the bottom half of the interface, but not underneath the streamed gameplay. This means the webcams should be placed on top of the streamed gameplay on the bottom side, fitting properly with the interface of the streamed gameplay.

In summary, it can indeed be concluded that a one-size-fits-all approach is hard to achieve. As such, this research supports statements calling for a nuanced approach to dashboard design [2]. The recommendations provide a means to address individual groups of spectators and create solutions that can easily be adapted to a range of viewing preferences.

7 Limitations and Future Work

This study has a couple of limitations, which can be addressed in future work. Firstly, it is important to discuss the designed tool. This research is mainly focused on adaptability, but only on two parts of it: the placement of interface elements, and hiding/unhiding them. Since this study focused on LoL, the sizes of the existing elements were used [19], but future research could scrutinize how adaptive size may interact with importance.

Due to the number of participants needed and the time available only one fragment from a single match [18] was used. Future work could research usage over time.

The direct opponent element seemed to fit perfectly in the bottom left corner of the interface, which also was the starting position of this element. This might have biased the participants. Future work may want to circumvent this by, for instance, placing the elements randomly initially. In addition, in this study, relatively few elements have been placed on the right and above the streamed gameplay. This may be the cause of preferences formed by previous designs and the predefined location of other elements such as the chat. Another reason for this could be the preferred script of the participants. Since all participants came from European countries, they most likely are used to left-to-right writing systems. For example, Arabic spectators might have the opposite preferences due to their preference for right-to-left scripts. Generally, because our participants were young and European, it would be interesting to study differences across various target audiences.

Although the five elements were carefully chosen with mitigating split-attention in mind, the effect might still have occurred [2]. Even though the elements represent different kinds of information, the elements connected enhance knowledge acquisition better than separated elements.

Finally, this work only explored an adaptable dashboard tool in the context of LoL.

The tool will be developed further in future research, in which previous guidelines and the guidelines from this study will be integrated.

8 Conclusion

As the broadcasting of esports matches attracts more and more spectators, providing well-designed dashboards to support the spectators’ interpretation of gameplay becomes more important. This work makes an attempt to address this challenge by providing an adaptable dashboard. Findings suggest those adaptable dashboards will look different depending on the spectator type of the user: player, passive-viewer, or spectator-player. This paper presented design recommendations for the design of adaptable dashboards for esports, related to spectator type and with in-depth information about the dashboard elements.