15

I am designing a gamefication app and I need to show an overall leaderboard, displaying all users with points and positions...

The problem is that the leaderboard requires pagination and the logged-in user could appear in the second or third page. I need to come up with a solution to show a logged users his current position.

Consider the following screenshot: let's say the current logged-in user is 50th position. How do I display its position without forcing him to paginate?

enter image description here

5 Answers 5

16

I quite like the approach that the game Wordament takes:

enter image description hereenter image description here

You are able to see the top results, as well as those near your ranking. I would prefer if it could ensure your score was on-screen initially though, probably by reducing the number of players before the "split" and even just above your own score.

1
  • 2
    +1, I instantly thought of Wordament when reading the question
    – Matsemann
    Jan 21, 2013 at 23:19
13

I would show a shaded / coloured bar with the user above the first place person in the list, and then show the standard list with them in whatever position they are in.

It's what StackExchange did for the Winter Bash special, and it worked really well.

enter image description here

I happen to be at the top, so you see me twice, but I would be at the top even if I were in Benny's position.

When Benny is logged in, his view looks like this:

enter image description here

3
  • Thanks!This is a very good idea. Actually a was thinking to show user's current position on a coloured bar after the first let's say 10 positions approximating positions between 10 and user's position. But you idea is much more usable. I didn't think about that!
    – Giults
    Jan 21, 2013 at 16:53
  • @Giults I'd love to say that it was my idea. The credit needs to go to the StackExchange team.
    – JohnGB
    Jan 21, 2013 at 17:01
  • 1
    I like this better than the accepted answer, with the caveat that, if the player is #1, I don't think there's any need to duplicate his/her name. Jan 22, 2013 at 11:02
6

You could try a User Centric approach where the logged-in user sees his position right in the middle of the page, surrounded by the 10 people on top and 10 under him/her. click, or ideally scroll to see full list starting at the top.

1
  • 2
    This is pretty much what anybody who's ever played an Xbox game will expect (I'd imagine PlayStation is pretty similar)… it's the standard online leaderboard presentation in almost every game. (Though annoyingly, the means of scrolling/paging to other parts of the table does still vary between Xbox games.)
    – calum_b
    Jan 22, 2013 at 1:26
2

Another thing I've seen work well is to show them in their actual position if they happen to be on the page or show them as a highlighted row at the top or bottom depending on if they are forward or backward from the current pager position. This gives a little bit better of an idea of where they place.

1

You could have a "jump" panel along side the main list.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.