I’ve been at work creating another EyeWire script to enhance the user experience. This time, I decided to enrich the leaderboard by coloring the players’ names in the color of their highest rank. One reason for doing so is outlined by a5hm0r:
Before creating this topic, I asked for feedback on a prototype of the script in chat with the following image:
This was an early draft of how the leaderboard could look, and since then a lot of discussion and feedback has happened in the chat.
As you can see in the screenshot, larabadara19 and bl4ckscor3 are colored in moderator/mentor colors. My first plan was to color the users in the same color that would appear if they write a chat message. This is also the color that a user, should they have multiple ranks, can decide on via the /team
command. Initial feedback asked for dynamic updating of the color on the leaderboard once a user changes their chat color:
This posed an issue on the development side of mine, as I couldn’t find a way to hook into that. There may be a way to do so, however after further feedback, which I will outline in the next paragraphs, the idea for chat-based colors was scrapped.
Very early on, it was also suggested to add a legend to to the leaderboard to explain the different colors and symbols:
I do not have any objections to this and feel this is a must-have if any of this is implemented. So there will be a legend, probably in the form of a questionmark symbol in the top left of the leaderboard.
A major talking point following that was to have the color be the color of the user’s highest rank (Player < Scout < Scythe < Mystic < Admin), and additionally indicate users as a moderator and/or mentor on the leaderboard using icons. This immediately solves the /team
problem I explained above. There are about 100 chat messages in a discussion relating to this, which I have posted in a secret gist here. I will be compiling the key aspects in the following.
The first idea was to use the emojis and to indicate moderators and mentors respectively. Over the course of the discussion, many different emojis were proposed ( and ; , , and for both; , , and for both; for both) however I personally found the book and the speech bubble the best of those all - even if it’s just for the sake of prototyping. It is important to note, that this can still be changed and is by no means final. Other proposed ideas were to use colored dots like for competitions, or specially crafted images - however they may look.
The next problem that arose was: “Where should these icons be placed?” Ideas included having them show up at the very front of the leaderboard like this…
…or behind players’ flags, like this:
(Sidenote: The coloring is left out in these images as I did not have the script running at the time.)
The first idea seems very clean at first glance, however the biggest problem with this is, that there is no connection between the icon and the rank number - they belong to two completely different contexts. Think of it like placing the country flag in front of the rank number. I do not think that this solution is great.
The second thought looks much better compared to the first one. The country’s flag and the moderator/mentor icons regarding the specific user are bundled in one place, and look easily accessible. However, objections from users in chat came up, saying they thought these icons got invisible behind the flag. Thus, a third option was thrown into the room:
Have a seperate column for the moderator/mentor icons. This may be ok, however in my opinion the columns should be related to the leaderboard, and whether a user is a moderator and /or mentor is not related to the leaderboard, but to the user. Again, think of it like the flag had a seperate column just to show a user’s country. For the sake of completeness, here are two images of how such an extra column could look (created using an image editor to save time):
If I had to choose between these two options, I would choose the second one.
This has been everything I have received feedback-wise so far. What follows, is a short summary including some additional information about the script:
This script will edit the leaderboard to show each player’s name in the color of their highest rank, and display some icons based on whether they are a moderator and/or mentor. This includes the leaderboard after submitting a cube. The main problems are what icons to display, and where to display them. Currently, to make it possible for the moderator/mentor icons to display properly regardless of the user’s name, the leaderboard’s width is increased by a bit. The same is done to the cubes panel, should the Cubes addon be enabled (this is only applicable to players ranked scout and above). The leaderboard will not be edited when a competition is displayed, meaning no rank colors, and no moderator/mentor icons (see screenshot at the bottom of the post) in order to preserve information about the competition.
Short, technical information (you can skip this if you are not intereseted in how the script works)
Every time the leaderboard is updated, an API query is sent to get the information displayed on the leaderboard. Based on that, each player is queried regarding their assigned ranks. These are then saved so that the next time the leaderboard updates, the information about the players is already there and no additional API queries have to be made.
And now I am asking for your thoughts and opinions. If you have any feedback, please do not hesitate to reply to this topic. I am open to everything. Thank you very much!
To try out the script, please visit this GitHub page and follow the installation instructions: GitHub - bl4ckscor3/ColorfulLeaderboard: A Tampermonkey script for EyeWire to colors users in their role's color on EyeWire's leaderboard and adding icons to indicate whether they're a moderator and/or mentor
And lastly, two images showing the script in action at the time of posting this:
The script does nothing when a competition is displayed as to not obscure information about said competition: