Leaderboards

Leaderboards are used throughout the product as a way of listing the entrants of a given contest, displaying supporting data about each users performance in relation to that contest and when required, providing additional behaviour so the user can to explore the data further. The overall aim of leaderboards within the product is to provide a more engaging and exciting in-play and post contest experience, and enhance the competitive, fun aspect.

Flexibility

Leaderboards are used in a few different areas so a flexible and scalable approach is important to allow for variations in required function while maintaining a predictable set of behaviour patterns. We’re aiming for consistency in behaviour and visual design across platforms and screens sizes as much as possible, while allowing for maximum scannabilty and ease of interaction.

Basic structure

Each leaderboard is comprised of a list of cells which contain several elements. These elements are interchangable depending on the specific leaderboard use but all cells in a given list must contain the same set of elements. Cells are arranged in a vertical list spanning the full width of their container.

Required elements

Position rank
Won money indicator
User avatar
HEP indicator
Username

Contextual elements

Data chunks
Commishioner icon
Expand arrow
Action icons area
Expanded content area

Tappable regions

For cells with expanding behaviour, the whole cell becomes a tappable region with the exception of the HEP icon which is tappable independently. When the user taps or clicks within this area the cell expands. The username should appear in Blue in this case to reaffirm this behaviour. For all other cases the username should be Navy.

For cells with additional actions, these should be represented by appropriate icons on the right of the cell and use a dividing line so there is a visual separation from the behaviour of the rest of the cell.

Static cell

Expandable cell

Action cell

Sizing

16px padding within each cell on all contexts.

Username, rank and all data values are $epsilon and data labels are $eta on small screen contexts.
Data values can increase to $delta and data labels to $eta on large screen contexts.
32px avatar used in all contexts.

Data spacing

Space between data chunks is 12px on small contexts, 24px on medium contexts, 32px on large contexts and 64px on very large contexts.

Entries treatment

An approach to numbering is required that allows cells to accommodate large numbers of entrants, while maintaining readabilty, yet not impairing the experience when viewing smaller numbers. With this in mind a descending typescale has been used which allows numbers 1-9999 to be viewed within a 40px space without affecting indentation. For numbers 10000-999999 the space for the number increases to 54px. This approach allows the treatment of numbers to remain consistent across all platforms and context sizes. The typescale is as follows:

Position 1-99: 16pt
Position 100-999: 14pt
Position 1000-999999: 12pt

Money and time indicators

On small screen contexts the amount of money won is stacked in a pill element under the username, and the time indicator is stacked with the score. On larger screens both of these elements are afforded their own data chunk. A green band is then added to the rank to indicate money won.

User position

To highlight the users position within a list, the cell background uses Grey lighten2 and their username, rank and score are all set in bold.