Way to display a lot of end-game data

Question

I am building a web app for providing League of Legends players with a more detailed match history and statistics as well as an internal ranking system (for friends) and achievements, as well as an integrated AI system for helping users improve based on their match stats progression.

Everything is going fine, but I stumbled upon a visual (user experience) design problem.

I am currently trying to find a good way to display a lot of data from individual matches without making it look like an unreadable wall of text.

So far I have tried different approaches such as the current Riot's client way of displaying match data: http://i.snag.gy/W19GD.jpg

Or my own approach: http://i.snag.gy/ubdsG.jpg

However neither seem to satisfy me, which even made me create some custom icons for the data:

But I don't seem to be finding a good way to display such data, so, could anyone give me a slight light on how to do so?

Answer 1

I think the best way to fix clutter is to put the different bits in different boxes. In this case "Tabs" or Frames of data so each forms it's own more concise picture of what happens during the match.

If you took "your own approach" and look about 2/3 the way up it's all damage with 2 tabs you'd use something familiar and get 1/3 the information to it's own section.

I'd also tend to agree with a lot of the comments on "visualize" or "Graph" because they are both good ways to inject tuns of information into the viewers brain at a more primitive level. I'd however add numbers are still good. The damage taken/given/champion could be highlighted easily with a red/blue/gold bar Since this is a superhero game (I'm assuming off the name) you could pull the colors of the super hero into the mix to provide a sort of personalized touch.

I'd also add that timelines in games are MUCH better if they are interactive. This is a game an interactive experience and static summaries are well not as fun and really not interactive. If you do go through the work of adding one do it right and let the person flow through the timeline of the game and see things move

^{download bmml source – Wireframes created with Balsamiq Mockups}

In summary tabs I think would do wonders for this, it's simple intuitive and lets you provide overwhelming amounts of data in nice byte fulls of food.

Answer 2

Few suggestions:

• Use alternating backgrounds to create horizontal rows.
• Sort list by Names
• If your objective is people should visually scan the list to find a name, keep the Names Column left aligned but if your think people would refer to numbers first then you can have your Names Column Right Aligned.

Answer 3

I think a good way (which I have seen on games like Age of Empires, Civilization and other games) is to use a timeline that form the basis for stats like kills (or points or whichever way you rate the player achievements/rankings), and then add different events of significance onto the timeline (like killing streak, multiple kills, etc). I haven't really played the game in any depth, so I can't really give you too much advice, but this seems to be a strategy that has been used in the past successfully and you could look into it further.

Answer 4

Data visualization - make text optional where possible.

From what I can tell, you are trying to display end of match data - not in-game data during play. Given that I don't have the full context, only what I see in your personal attempt, I will try to draw on visualization I've seen that I thought were effective.

In Civilization V - as mentioned in another answer - there is a time basis line chart comparing your against your peers (computer or otherwise). In the game Plague, Inc. A similar stacked line chart is used to show infected population count and deceased population.

For your specific example, it looks like IP and XP have a base value and a modified value - is it the literal numeric value which is important in this context? or, just an overall picture? Maybe a stacked two-tone bar, with a simple label (small text) under it:

=====--
XP (5 + 2)

If it's just the overview that's important - consider removing the data values entirely and use one line:

XP =====--

Another thing to consider is, what data is really important to the user? why? and, can they be grouped in some other ways?

For example, damage is damage, right? You had HP, it was lost. Does the user really need to know the exact amount and the origin? Maybe a stacked line chart, similar to the NY Times example. Maybe have "damage dealt" divided into magic and physical, whose sums should be the total anyway (duplication of information) - stacked bar again (consistency can't hurt):

======----------
Total (physical/magic): 16 (6 + 10)

If it isn't important to the user where the damage came from - outside of the fact we probably need more magical defenses - make the literal value optionally accessible instead of the parenthetical. Maybe a hover or tap on the two portions of the bar reveals the actuals, for example.

Total kills could be treated in a similar fashion. Wards placed. You could even do match time, with how long the user was alive combined with dead for a grand total.

For me, when playing games where I have levels, XP, and gold, generally those are the stats I care about most - put those at the top (the ones your users will care about most, not those specifically) - but, don't assume what is important to the user - find users and ask them. If your game has lots of restrictions based on character level and how much gold (s)he has, then that would probably be at the top; however, if it's more about how many things you killed...

---

http://www.nytimes.com/interactive/2009/07/31/business/20080801-metrics-graphic.html?_r=0

It has been a very long time since I read this book, but I remember it being the de facto data visualization textbook for a course I took.

http://www.amazon.com/Visual-Explanations-Quantities-Evidence-Narrative/dp/0961392126/ref=sr_1_3?s=books&ie=UTF8&qid=1363565975&sr=1-3&keywords=tufte

Eye paths and chunking of data: http://www.andyrutledge.com/eye-paths.php

Answer 5

Another way you can do this is to have all of the data in one place, but makes it easier to skim to the specific information you want to view. A way to solve this is to put emphasis on the title of the data.

^{download bmml source – Wireframes created with Balsamiq Mockups}

This way, users can easily skip to the area they want to if they want specific information without forcing others to go through menus or tabs