New in-game HUD sneak peek

First Riot Post
1234511 ... 27
Comment below rating threshold, click here to show it.

Rayven

UX Designer

10-01-2009
1 of 21 Riot Posts

We’re very excited to introduce to you a special sneak peek of our new in-game interface for League of Legends! This interface has been under development for quite a while internally, and has gone through many revisions and many more design discussions. I’ll be taking you through this in development version of our new in-game HUD and talking about some of the specifics, along with how we got to where we’re at, and then talking about what else is coming down the road. Keep in mind that this is in development still, so things are subject to change, and the art will be finalized as we move forward. We’re showing you this today so you can give us feedback to make it even better! So sit back, enjoy the show, and let us know what you think about the new in-game HUD for League of Legends!

What’s different between this new HUD and our current HUD?

Compartmentalized information

  • One of the major things you’ll notice is how the information is compartmentalized. The abilities are all logically grouped together in the center, along with your health, mana and experience. The most important information all in one place, front and center.
  • To the left, you’ll see player information, stats and items. The stats section will hold more statistics and will be grouped tighter together for more “at a glance” viewing.
  • The minimap will remain largely unchanged on the right.
  • In the upper left is your team area (discussed more below), and the upper right is the scoring area.

Easier to compare you vs enemies
  • In the upper left you’ll notice your information replicated, and directly beside it is information about your target. This gives the player a very quick comparison between your own health vs your targets for those close fights.

Smaller size, less intrusive shape
  • The overall footprint of the HUD has been significantly reduced, not only in total area, but also height into the game space. This will result in much more usable gameplay space. The shape of the HUD is also more player friendly with a consistently flat shape (except for the mini-map). No more potential HUD interference while playing on the Purple Team!

Team information on all the time
  • In the upper left, not only will you be able to get at-a-glance information about yourself and your target, but your teammates will also have information presented. At-a-glance info for their health, mana, level and status of their ultimate will be on all the time and unobtrusive.

More minimalist (but higher quality) art
  • Not only is the overall footprint reduced, but the art itself is reduced in size. Gone are the thick frames and wasted space! The new HUD will have much higher quality, detailed, but minimalistic art that is themed in an awesome LoL look!

Smarter scaling
  • When you scale the elements in the new HUD, they will scale much more intelligently than the current HUD. The compartments of information will scale and it won’t affect chat and buffs. So, no more deciding whether you want to read chat or have a smaller HUD – how you can do both!

Why did we make the decisions that we made?

Player feedback
  • Consistently we have read the threads on the forums, talked to people in-game, had competitive players on-site to talk with, and we’ve taken all of the HUD feedback over the months and tried to address the concerns of you, our community members in our new design.

Our own design /review process
  • Our team, fans of the game as we are, always has feedback, and our UI designers and artists have taken that in and passed ideas around for quite a while. We also went through and made a list of problems with the interface, and made sure before we even started that we were solving THE RIGHT problems. These exercises, along with iteration and constantly getting eyes on the work have led to what you see now.

Time allotment / getting it right
  • We want to get the new and improved HUD out to you as soon as possible! But we also want to take the time to make sure that we nail it and solve all the right problems, and deliver the level of quality that you expect and that we hold ourselves to.


What’s still coming down the road?

More customization
  • One of the things we’ve kept in mind while designing this HUD is future customization. We would like to give players the ability to move clusters of information around the screen to the exact position they want, as well as more

Better performance
  • As we continue to optimize our HUD systems you should see increased performance across the interface, resulting in increased in-game frame-rates and UI responsiveness.

Animations and more polish
  • Over the coming months and years, we’ll be continuing to tweak and refine the UI as well as adding some animations and visual polish to give the HUD an even higher level of overall quality.

*Note* Writing by Travis "Volibar" George


Comment below rating threshold, click here to show it.

Larias

This user has referred a friend to League of Legends, click for more information

Adjudicator

10-01-2009

neat


Comment below rating threshold, click here to show it.

HappyNihil

Member

10-01-2009

looks very good so far, but of course its hard to judge before playing it

edit: show us number of kills on both teams and number of destroyed towers for both teams pls so that we dont have to switch to team stats all the time


Comment below rating threshold, click here to show it.

Madrox

Senior Member

10-01-2009

What resolution are those shots taken at? (still reading, was just curious)

EDIT: part of my question was answered with more reading.


Comment below rating threshold, click here to show it.

Thrillhouse

Senior Member

10-01-2009

Minion kill # should be somewhere visible besides the scoreboard (near the K/D/A would be the most obvious place).

Otherwise looks great.


Comment below rating threshold, click here to show it.

Dragonglove

This user has referred a friend to League of Legends, click for more information

Senior Member

10-01-2009

w00t. That looks awesome!


Comment below rating threshold, click here to show it.

Fayd

Adjudicator

10-01-2009

Shiny. I like shiny.

Overall, this is a nice change...you have my approval!


Comment below rating threshold, click here to show it.

Myrox

Senior Member

10-01-2009

maybe some space between the spells, abilitys, and pissive, or some diffrence between the look of them?


Comment below rating threshold, click here to show it.

Karrot

Senior Member

10-01-2009

It looks nice. Very busy, though.


Comment below rating threshold, click here to show it.

Pendragon

Director of Player Experience

Follow RiotPendragon on Twitter

10-01-2009
2 of 21 Riot Posts

Quote:
What resolution are those shots taken at and will there be an option to scale your UI? (still reading, was just curious)
The images were taken at 1900x1200, and I scaled them down to 1440x900 to be web friendly.


1234511 ... 27