Stat icons in the new HUD

Nameless Voice··10 votes·7,078 views
http://i.imgur.com/B2iExTY.png

Let's talk about the icons for champion stats used in the new HUD.

They are really heavily stylised with a deliberately "chunky" design, and it's very unclear what each of them mean. The old stat icons were much clearer, because they represented real things (an axe, a sword, a boot) as opposed to heavily stylised representations of those things.

http://i.imgur.com/B2iExTY.png http://i.imgur.com/1D9k9Fo.png

Some specific examples

  • The "axe" for attack damage is probably the worst offender, since it doesn't look like an axe at all.
  • Attack speed suffers from the axe problem, but also the "trails" used to indicate speed are now just horizontal lines, which don't really indicate speed as they don't follow the presumed direction of the axe's motion. (They're also very small and easy to miss.)
  • Critical chance looks like a spurt of blood, there's no way I would have worked out what that icon was without the tooltip.
  • Tenacity is similar. It looks like "running through blood", which doesn't really give me the impression of resisting disables. My initial thought on seeing the icon was that it was something to do with the slows my champion could apply.
  • The shield icons for armour and magic resist are too heavily stylised, they look more like shapes / emblems than shields. It's not as bad for the armour/MR icons, but it makes the armour pen and magic pen icons very unintuitive.
  • The lifesteal / spellvamp icons are completely unclear. They look more like "bonus AD / bonus AP". They should be something closer to the Vamprism mastery icon: http://i.imgur.com/nAljPZ8.png

Overall, I think there are two problems here: The first is that the new icons are so heavily stylised that it's difficult to see what they're meant to represent. Secondly, the icons are very small, which makes them even harder to figure them out at a glance.

The two together conspire to make the icons really hard to interpret quickly.

15 Comments

MarkedOfKane6 votes

The fact that the stats don't turn green when they have a bonus makes it difficult to figure out what is what. My eyes automatically look at the top of the list for the most important ones. Its just a disaster.

Poohs3 votes

The fact that you needed to supersize the picture so people can see just proves the point that the new stat bar is just unreadable.

Nameless Voice2 votes

That's the default in-game size for me. Maybe you shrank your HUD, or have your browser set to magnify the page?

The Queen Viper2 votes

The new stats bar is just fine and it's only a matter of time you people get used to it... in fact, it still is way bigger than the old stats bar, even with a hud scale of 0!

Nameless Voice3 votes

I like the bar and the layout. I just don't like the icons themselves.

I'm sure I'll get used to what each of them mean quickly enough (by memorising the positions, if nothing else), but that doesn't mean that the icons are clear and intuitive.

SlackerboyTC2 votes

Looks like an old RPG for Sega CD or something, except on the CD I could actually tell what stat im looking at

Saianna2 votes

Nameless Voice, lemme TL;DR your thread:

HUD is piece of bad design made by bad designers who never played any games nor talked to gamers before.

And they actually recieved money for this work.. Best job EVER!

Nameless Voice4 votes

No. That's not the tl;dr of my thread.

My thread was constructive criticism about specific problems in the new HUD which I feel can be addressed and fixed, I wasn't outright saying that the new HUD is awful because it's changed.

Overall, there are a lot of good things about the new HUD, but it also has a number of flaws and areas that could be improved. Telling the designers the specifics of what we don't like and why is far more constructive than saying "I hate it" and not explaining why.

Vistha Kai2 votes

Pretty much this. Their design is simply awful.

Out of 16 icons only 5 are distinguishable. Movement speed, armor, magic resist, heal rate and mana regen.

But even then they are so small only Movement speed and heal/mana regen stand out.


As the saying goes: Don't fix it if it ain't broken.

Fluppets1 votes

They've gone with stylized icons, but the "language" isnt consistent enough to intuitively know what is meant.

For example in the use of the color Red: it fills the shield for what I assume is armor, but it's also used for the crit, range indicator and tenacity. Or is Red to AD what blue is to AP? then why isnt it consistently used as such?

What's also (to me) counter-intuitive is the grouping or lack thereof. When i quickly glance at my stat screen I want 3 general groups:

  • My base/general stats (HP, Mana, tenacity, MS)
  • My defensive bonuses (armor, MR, lifesteal, spellvamp)
  • My offensive bonuses (+AD, +AP, ArP, MP, CDR, AS)

Now it's all bundled together. I mean I definitely see the logic, but it's centered around (I think) left side is AD and right side is AP, but that's from the input POV, rather than the user's POV. The user wants to know a particular thing and his mind goes (I think): "I wanna know my dmg" >> looks at offensive group "I am AD" >> Looks at what's color-coded as AD (either yellow or red I'd assume).

ATM you need to skim through an entire list not knowing what's what.

EDIT:

I made a fast photoshop to show how I would rearrange the icons:

http://i.imgur.com/a9vhzM8.png?1[/img]

I didn't mess around with the colors or icon images, but if I had the time I would:

  • color codes: AD dmg = red. yellow = speed/lines. Blue = AP dmg. Grey = armor. Cyan = MR. Boots = brown
  • AS icon = Red sword + yellow lines
  • Spellvamp Icon same as AP icon (mirrors lifesteal = AD icon)
  • HP = green heart, Mana = blue teardrop

My OCD is stressing about the range indicator (which is AD) being on the right side, but I cba.

ETA: Ok so i messed around with the colors/icons, its very rough, just to get the idea across:

Before: http://i.imgur.com/B2iExTY.png?1 After: http://i.imgur.com/W8uYeaz.png?1

edit: i misinterpreted the green and blue plus signs, I thought it was hp and mana bonus, but its regen, so a plus sign makes more sense.

Nameless Voice1 votes

One problem with that approach is that there's only so much space on the interface. If they arrange them the way you have, then armour and MR (two really important statistics) would be relegated to the expanded panel and only shown while holding 'C'.

Fluppets1 votes

I havent changed the size, this is a copy of the image you posted of the stat panel. I edited the last picture to show the image you posted next to the edited one.

I cant get in-game right now and I only play ranked (so my experience with the new HUD is limited) is the 'Before' picture you posted not the panel that sits besides the Champion face in the new HUD? is your pic the expanded stat page?

Nameless Voice1 votes

In-game, only the bottom eight icons are normally displayed. When you hold down the 'C' key, the panel expands to show the other eight icons, similar to how a lot of the extra stats (such as lifesteal, for example) were hidden away in the character sheet in the old HUD.

Your quick colour tweaks already look much better, I must say. (Though the axe icon is irredeemable IMO.)

Fluppets1 votes

Ahh I see.

edit: ok Ive looked up some pictures, so I guess you can disregard the icon location shuffle: But the general idea of mine is to actually go further in the stylation (is that a word).

At a glance Red = AD, Blue = AP and Yellow are lines and borders (not fill color).

Jambulija1 votes

I find the new ones more clear.

More from Gameplay

More by Nameless Voice