Player slots

Components

Last updated: September 2017

Player slots are used when displaying a list of players in a vertical stack. e.g. drafting or a lineup on live scoring.

The core player information

When displaying players there is a core set of information always displayed so that users know which player(s) they are working with:

  • Position
  • Name
  • Headshot (when context appropriate)
  • Team (when context and sport appropriate)

Displaying a player’s name has a number of rules and guidelines:

  • To avoid confusion with players that play under a nickname defer to that name, for example Brazilian footballer Edson Arantes do Nascimento should be displayed as PelĂ© because that’s the name he plays under.
  • Prefer a player’s entire first name over their first initial, where space allows.
  • Displaying only a player’s last name is not acceptable.

When displaying a player’s team alongside another team, for example in a fixture, the player’s team should be bolded: BRA vs ARG

Player slots

The default player slot works for the majority of contexts. A wider version is available for use in tabular contexts.

Narrow headshot

For use when space is at an absolute premium.

Wide/tabular

In larger contexts this player slot is available and creates a more tabular view allowing for easier comparison between players, ideal when building/editing a lineup.

Condensed

When there are no actions on a player slot, and when there is a only a small amount of information that needs to be displayed the condensed player slot can be used.

Player slot regions

The player slots are designed to show a player’s core information, and with 4 specific locations for player status items, data points, context data point and actions.

The drafting context is shown below:

And in the tabular variant the layout changes slightly:

In the live scoring context certain pieces of data are no longer relevant or they have less priority than before, and the action of adding/removing a player doesn’t make sense any more. In this context we update the data points displayed, and set the context data point to the player’s total points score along with making it larger.

A player swap context would require showing a different set of data points and actions:

Display player status

Player status items featured in player slots include news indicators, injury indicators and sport specific indicators.