Every year we had new Master in Engineering students working on both fun (and sometimes boring) Master thesis topics.
So I introduced a new one: eSports dashboards to support spectators.
The high paced action of different players across large battlefields is not easy to follow.
So how could we help spectators get better insights in what was going on, real-time, during these hectic games played by professional gamers.
A huge success among students, but sadly enough spots were limited, and two students “won the lottery” (we have no say in the matter.
It’s quite random): Hans Cauwenbergh and Bram Luycx.
And we got lucky.
This turned out to be one of the best collaborations with students ever.
The DashboardsHans jumped on League of Legends, while Bram took on Counter-strike: Global Offensive.
We designed and set up a couple of surveys on Reddit in order to get insights in spectators’ motivations and perceived usefulness for different statistics provided by the respective games to inform the design of the dashboards.
And then, they were off!Viewer preferences (167 responses for League of Legends, 596 for Counter-strike: Global Offensive)League of Legendsa) Gold distribution, b) Damage dealt, c) Vulnerability.
The dashboard is the result of five iterations: two digital non-interactive designs, two interactive prototypes, and the final fully functioning prototype developed with React.
js and D3.
Iteration one to four were developed using the interface design tool Figma.
22 participants took part in the evaluations of the iterations of the prototypes.
The main view is split in three modules: Gold, Damage, and Vulnerability.
All modules are continuously updated in real-time.
Gold and Damage are quite obvious.
Let me explain Vulnerability.
Vulnerability provides an indication of how vulnerable each player is.
A simple linear equation combines the position disadvantage of the player to the rest of the team and/or enemies, current health and mana points, defensive statistics and summoner spells availability.
These values are combined and visualized around the player icon as a summary indicator.
This view lets spectators make predictions regarding the state of the game.
Hans also added an interesting Jungler visualisation:Counter-strike: Global Offensivea) Round progression, b) Economy button, c) Map button, d) Scoreboard, e) Money Distribution, f) Average Damage per RoundThis dashboard is the result of three iterations: a paper prototype, a non-interactive digital prototype designed using Figma, and a fully functioning prototype developed with React.
js and D3.
14 participants took part in the evaluations of the iterations.
The dashboard consists of Round Progression, Economy, Map, Scoreboard, Money Distribution, and Average Damage per Round.
ResultsThrough semi-structured interviews and eye-tracking we managed to get further insights into the perception and experience of participants spectating these eSports games while using our dashboards.
It resulted in an interesting list of design goals for spectator dashboards that we published and presented at CHI PLAY 2018 in Melbourne, Australia.
LoL and CS:GO eye tracking results from each participant after the evaluation.
The attention heatmap indicates the areas of interest where participants focused more during the whole match.
I’ll refrain from turning this digestible blog post into a long scientific article.
But if you are interested in the guidelines, you can find the article here (or send me a message on my website).
Or go through the slides below!If there is enough interest, I’ll post a summary of the guidelines on Medium 😉 Just let me know in the comments!Hans (full-time) and I (freelance part-time) haven’t stopped here though and are working for GRID eSports Gmbh where a lot of eSports data magic is happening!Next to that, I’m a Freelance Data Visualisation Experience Designer/Adviser.
I’m for hire, so if you have any dataviz needs, come say hi at svencharleer.