Tweaked Scores Page

I’m modernising caption.me code at the moment, and currently re-writing the Scores page.

As well as re-writing the code, I’ve also made a few visual tweaks. Now would be a good time to discuss the changes if you have any feedback.

I plan to activate the new design in a few days.

Old vs New

Changes

  • Using a green-red colour range to show how scores/ratios compare to each other
  • Title case rather than lowercase
  • Emphasise the top 5 scorers with larger text and icons, condensing the height of the list
  • “More” Button rather than text link
  • No more garish orange background on users
  • Re-order columns so the coloured columns are shown together
  • 1 DP for V/C ratio, as opposed to 2 DP
  • Grey avatars shown for users without their own avatar

Poll

  • New design is better
  • New design is worse (please comment)
  • Undecided / don’t care
0 voters

I like most of the text changes, the grey avatars, and losing the garish orange background for sure, but find the additional colour-coding a bit blingy.

My preference would probably be the new left hand side with the old right hand side (but I’m sure the new right would settle on the senses soon enough).

1 Like

Perhaps move ‘Captions’ column far right?

3 Likes

Thanks for the feedback. I’ve tweaked it a bit more to reduce the saturation of the colour, and to move the Captions column to the right:

3 Likes

Sorry, mate, didn’t mean to be hypercritical in that last post. Saturation was fine, it was just the 3 columns of colour coding that hit me as a bit much.

If anything, I’d suggest the score column doesn’t need colour coding given the ranking is already highlighted by descending order and decreasing font size.

But now I’m being hypercritical again. It looks good as is :+1:

1 Like

I see what you mean. On the other hand, one thing I like about the colour coding is that it really highlights large discrepancies, like the generous voting from you and @Hercules_Rockefeller this week, and the leap in score from 1st to 2nd place (kudos @Stephen_Bean!)

1 Like

One thing I don’t like is that people with good scores, but not top-5, have their scores shown in red.

Perhaps we should just colour the top five scores?

image

1 Like

Ah, so we’d have more of a spectrum going on. I should have looked closer at the colour variations. So if Steve didn’t have such a huge lead this week second place would be closer in colour to him. I get it now :+1:

I think the whole column colour coded looked better and makes more sense with the spectrum model.

EDIT: I’m guessing the leaderboard colour coding is based on a percentage of the leader’s score? If so Steve’s huge lead won’t be helping to differentiate the reds in the above example, and we could probably expect a more gradual variation in colours, generally.

1 Like

Correct, and yes - you’re right, we shouldn’t see so many people with red scores on a more average week.

1 Like

I don’t see the logic of the colours used in the Voted? column - but then, I don’t see the logic of them in the older version either. And it doesn’t bother me, because if I want to know who has voted more, or less, I can just read the numbers.

It’s based on frequency, Molly. Some people won’t be on site as often as others. For example, I’m normally sound asleep during the midday caption. Others will be unable to caption for other reasons.

The frequency of captions written ignores this, and the ratios, which the colour coding reflects, express how frequently people are voting/getting votes based on how often they are writing captions.

Personally, I try to vote twice for every caption I write. I like that the new colour coding reflects this.

1 Like

That’s the votes per caption column, though, isn’t it? It’s the plain “Voted?” column which puzzles me. For instance, your score of 24 and Hercules Rockefeller’s score of 44 are both bright green, whereas John Harrison’s 24 is a dull yellow-green, along with scores ranging from Karyn’s 21 and Chris Keegan’s 34. Basically, I’m saying that the colouring of this column does not match up to the values in it. However, a similar thing was the case in the original format, although this time it was 27 and 35 which are coloured the same although scores in between those are coloured differently.

Yep, so the colour in the Voted column reflects the ratio of votes given over captions written.

1 Like

Yup, as @James_Lennox said,

  • “Votes/Cap” is coloured based on votes received per caption written
  • “Voted” is coloured based on votes placed (on other people’s captions) per caption written

So one colour is your caption quality, and the other is your relative voting generosity.

1 Like

Ah! So the figures shown are the number of votes given, but the colours relate to the proportion of votes given to captions written. My bad - I had just assumed that the colours would relate to the raw numbers in the column! But this way there is twice as much information available in a single column. (Apart from for those with red-green colour blindness, of course :smiling_imp:)

1 Like

The new scores tables are now visible on caption.me.

The scores will also update more frequently (every 15 minutes) after this change.

Please let me know if you spot any issues.

Thanks!

1 Like

Ah, I see there are some issues on smartphones. I’ll get those fixed

Edit: fixed

1 Like

Hi Chris. I like the new look very much. A minor point but is it deliberate that our names are now right justified underneath our captions?

ah good spot, thanks @Dot_Old. No - I hadn’t intended to change the alignment there. I’ll get that sorted

1 Like

Brilliant, thanks Chris. It looked a little odd!

1 Like