How best to describe ranking and prizes using icons?

Question

I have a site with an online game, there is a ranking of players.

For each game the player gets points which are summed up in their ranking.

During the game I want to show how much the player won now, how many games they played and how many points they need to get the next level in the ranking.

Here is the current text explaining these three concepts:

The total prize is 1900 points
Place in the ranking: 8064
Until the next ranking is: 100 points

It takes a lot of space. I would like to replace the text with understandable icons so I can fit this all on one line. But I can not figure out what pictures/icons you can identify these ideas.

What visual metaphors would be appropriate for these concepts?

UPD: Thanks, @Ben Brocka . Total prize - is a number of points, that were already won by player. Prize for current game is displayed separately.

Answer 1

Icons need to be metaphors of what they represent; this produces a problem when a concept is too abstract. If you use icons consider adding tool tips (hover text) that explains the icon and make sure to test with users and verify they understand the icons.

Icons

Note that these are metaphors, not actual icons you should directly use. I found these quick from Icon Finder to be examples. Make sure to create/buy icons that match your own site's design, using suitable metaphors.

Prize:

A trophy is an understandable prize. I wasn't sure if you meant "current points by player" or "points I get if I beat this game" but the trophy metaphor is abstract enough to potentially mean both.

Ranking:

I've seen the podium icon used frequently for ranking in games, it's fairly understandable and suggests the concept of ranking. Showing a # sign before the ranking number can help show that it's a rank, not a count.

Rank up:

An up arrow or an arrow curving up is a common way of showing Level Up, the metaphor applies rather directly to Rank Up as well.

No Icons

Consider that you can save a lot of space from your current wording without using icons however. Some examples:

1900 Points | Rank: #8064 | Rank up: 100 Points
Score/Prize: 1900 | Rank: 8064 | Next Rank: 100 Points

With some whitespace or other separator you can clearly divvy these up without linebreaks to keep them distinct.

Answer 2

When some information takes up too much space, the first questions you should ask is, "Does this need to be available at this stage of interaction?" (in other words, "what kind of actionable value does this information provide to the user seeing?").

In your situation, opponents might need to know only how much superior/inferior the others are or maybe just the absolute rank, while the current player may only care about points left until the next rank up. Ask your beta testers or at least put yourself in your user's shoes and see what's needed because right now we're solving for "what [you] want to show".

Once you know your users' needs, you can start arranging elements on the screen. The question to be asked at this stage is, "Doe this information need to be visible at all times?". It could be that users want it on demand so you can use the longer notation. If they do need it at all times, replacing words with graphical metaphors isn't simple.

The key to a good icon is universal meaning of what it represents. In games, it's possible to teach players about local conventions, such as red circle for health and blue circle for mana. It's also possible to use some conventions for rankings, such is the case in military-themed games where chevrons are used. However, you're asking for icons to represent total earnings of "points", absolute rank, and points remaining until gaining a position. They can be easily expressed in a short text notation as No. 456 | 789/794 pts. and explained that the first number is the current points & the second number is points needed to gain a position.

If you still want icons, you can go with what Ben Brocka has suggested. Though beware that when an icon is too small it becomes hard to discern what it represents.

Answer 3

If you are showing this in a list of players, the "points till next" may probably be inferred. For example, if I have 1800 pts and the person above me has 1900, I'm 100 points away.

If it's on a single player UI (i.e. not a list) then perhaps a progress bar could overlay the points text? Something like windows 7 does when an app has a progress bar (the taskbar icon on my start menu turns partially bright green as it loads).

Alternately, in either case, you could use a hover to show the points till next rank, since this is easily discoverable and [most likely?] non-critical data.

It's very unclear what you mean by "prize" at this point without more context, so I don't feel like I can offer suggestions for that part.