Console Widget Behaviour

Pierre Kil edited this page Nov 30, 2017 · 2 revisions

This section defines the behaviour of the console widgets in terms of rendering and user interaction; this should be used to ensure consistency between all console applications: -

Size vs. Resolution

The display density (PPCM - pixels per cm) of modern devices vary greatly (38PPCM for a typical LCD monitor up to 128PPCM for some mobile devices), due to this large variation sizing UI elements in pixels has its' limitations; as an example, consider a square of size 50px: -

Display Density (PPCM)    Physical Size(mm)
38                        13.2
128                       3.9

This variation in size can make the difference between something being legible or not; on touch screens this can also mean the difference between a user being able to interact with UI Elements or not...thumbs/fingers are not as precise as a mouse cursor!

Careful consideration should be paid to this when sizing UI Elements; if an Element is automatically sized and the user has no control over it's dimensions then it should adapt to suit the display density to maintain accessibility.

General Behaviour

The following rules apply to all widgets (unless specified otherwise in the individual widget specifics).

  • Widgets should occupy 100% of their container
  • If an image is used in place of a widget component then use the image's native size unless the image is larger than the container, in which case the image should be scaled to fit the container whilst maintaining aspect ratio
  • When an image is used in place of a widget component it should be positioned in the top left of the widget container
  • For widgets that accept interaction the entire container should be used to capture interaction events irrespective of internal component dimensions
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.