small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

Published on <a href="https://blog.prototypr.io/how-overwatch-leagues-ui-is-an-esports-game-changer-9db218c0d466?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Chris Harrison 
<h3>Overwatch League’s UI is an eSports game changer</h3>
<h4>How a few key changes turn Overwatch’s visual clutter into visual clarity</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/600/0*WzUuw6-zIDeTkcCG.png">The quintessential MLB-style two-tone logo
When Blizzard announced their big push toward eSports — namely the Overwatch World Cup and Overwatch League — one of the common concerns was around how watchable the game was from a spectator point of view.
In mid-2016, I actually witnessed this issue head on. Some friends and I ran an online Overwatch tournament, and we spectated and commentated every game. Following the games, especially if you’re not a regular player, is extremely difficult. Just identifying the team a player belongs to is hard to do quickly, and trying to understand who caused a big explosion or which side a shield belongs to can be an exercise in frustration.
The crux of the problem is Overwatch’s visual style. Overwatch relies on really strong character silhouettes and some basic visual queues to help tell players what’s happening at a glance. Enemy players have a red aura and nametag, while friendly players have the same in blue, for example.
This works okay for team identification if you’re in the game, but when you’re watching on a Twitch.tv stream, these identifiers proved to not quite be enough.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*G0Tc5s_S_ZaZuya9.jpg">Just like traditional televised sports, home and away colours avoid any confusion.
Blizzard first attempted to tackle the problem during the Overwatch world cup, where each team’s characters were assigned country-based uniforms. This solved a key problem, particularly with mirror matches. It wasn’t quite so hard to determine which team a character was on, even if you had the same character on your own team.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*4keB7a17bgeZCTe0bGBt8A.png">That’s my real username. If you’d like to lose a game of ranked because some silver-ranked Torbjorn keeps talking about the HUD, feel free to add me.
In Overwatch league they even go one step further. Teams have home and away skins, and their player indicators (Which now include health, something missing from Overwatch at launch) are themed appropriately too.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*2JAVKu3_mhW79PDcap4KhQ.png">Houston Outlaws’ signature neon green is pretty hard to miss.
Similarly, when spectating in first person view the HUD has been reskinned into the team’s colours.
You can really, really tell the difference when t he game is in motion:
<img alt="" src="https://cdn-images-1.medium.com/max/768/1*gCrc1wjT2hZWsgTdw7TTmw.gif">August 2016 — Overwatch’s default spectator view.
In the clip above, you can see how difficult it is to identify who’s on what team for the spectator. While the player has in-context awareness, the viewer may not.
<img alt="" src="https://cdn-images-1.medium.com/max/768/1*_biTS-Vj9ckbkcE0c744Cw.gif">January 2017 — New York Excelsior vs Houston Outlaws. No mistaking who that big green bubble belongs to.
In Overwatch League, however, it’s abundantly obvious. If whatever’s on screen belongs to Houston, it’s green. If it belongs to New York, it’s White. So simple, so effective. Even character effects, like shields and explosions, are recoloured to match.
Overwatch League’s production values are fantastic, and Blizzard have done a fantastic job adapting their visual style for competitive play. I think it’s something we’ll see other eSports pick up soon — if for no other reason than being able to sell their team-themed skins.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=9db218c0d466" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/how-overwatch-leagues-ui-is-an-esports-game-changer-9db218c0d466">How Overwatch League’s UI is an eSports game changer</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How Overwatch League’s UI is an eSports game changer

How Overwatch League’s UI is an eSports game changer

Overwatch League’s UI is an eSports game changer

How a few key changes turn Overwatch’s visual clutter into visual clarity

Top Stories

Top Stories