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
$epsilonand data labels are$etaon small screen contexts. - Data values can increase to
$deltaand data labels to$etaon large screen contexts. 32pxavatar 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.
