Games framework

The Games Framework (Games GEL) helps us make consistent games and apps experiences for children.

Contributors

Platform:Web

Overview

Our Games framework requirements ensure a consistent experience across our ever-growing portfolio of games. By standardising elements of the game UI we can spend more time crafting unique gameplay experiences.

Eight requirements for inclusive design

1. Inputs

Users can navigate the game UI via touch, mouse and keyboard (tab and enter, minimum) with access to an 'exit' button.

By meeting this requirement, GEL UI becomes accessible on external switch devices, eye gaze software and any mouse mimicking hardware.

Use cases

  • Players who have restricted motor skills
  • Helps support comprehension
  • Players with cognitive impairments

2. Colour

The colour of text and background content has sufficient contrast.

Text and icons under 18px
Colour contrast must meet 4.5:1 ratio.

Large areas of colour
Colour contrast must meet 3:1 ratio.

Use cases 

  • Players with vision impairment
  • Players with colour blindness 
  • Players with cognitive impairment
  • Accommodates lower specification devices

3. Structure

Buttons and other interactive elements are clearly distinguishable and have visible state changes (for hover, focus and press).

All game screens have a left to right, top to bottom focus order. 

Use cases 

  • All young players
  • Anyone playing a game using keyboard, touch or mouse 

4. Audio

All GEL UI and notifications have an audio equivalent and are perceivable by assistive technology.

Some players may not be able to see visual content. Having an audio equivalent in addition to the media that can be perceived also supports comprehension. Multiple delivery formats also help cognitively impaired users.

Use cases 

  • Players who struggle to see visual content
  • Pre-literate players who need support with comprehension
  • Players with cognitive impairments

5. Visual

All key audio has a visual or text equivalent presented in a logical, readable manner that does not auto advance. Key information is not conveyed by audio only.

Use cases 

  • Users who struggle to hear
  • Users playing with the volume down

6. Hit areas

All target sizes are large enough to compensate for inaccuracies.

Use cases 

  • Players with motor impairments
  • Anyone playing a game on the move
  • All young players who are using devices for the first time

7. Tutorials

Tutorials, prompts and 'how to play' sections are included and can be replayed. Instructions and prompts are both visible and audible and do not auto advance. 

Use cases 

  • First time visitors to the game

8. Sound and VFX

Visual effects and audio do not play automatically unless the user is made aware this will happen, or a' pause'/'stop'/'mute' button is provided.

All games must have an option to turn both audio and and non-essential animation off.

Canvas size

Games are built to adapt to any screen ratio. But the core gameplay must be contained in a 4:3 safe area to allow it to work across all displays and scale appropriately.

An illustration demonstrating our 4:3 and 7:3 areas

4:3
Core gameplay must be contained in a 4:3 safe area. All games should allow a bleed area where the games scenery should continue to avoid letterboxing.

7:3
To create the sense of a fullscreen experience, background graphics should continue to a recommended ratio of 7:3.

Padding

The padding around each game should be 2% of the longest side of the viewport. For example, the image below show 2% of 400px = 8px padding.

An illustration demonstrating how the padding around the game area works

Buttons

Breakpoints

If a device’s screen width is less than 770 pixels wide, mobile sized buttons must be used. Otherwise, tablet/desktop button sizes must be used. 

Labelling and voiceover

All games should feature a voiceover which is played on hover for desktop and on tap for touch devices. 

Visual treatment

There are three types of buttons in our games: primary, secondary and tertiary buttons. 

The primary buttons are treated so that they are visually richer and more prominent than the secondary buttons which, in turn, are more prominent than the tertiary buttons. There are only three tertiary buttons and they are 'turn sound off', 'turn sound on' and 'settings'.

Throughout our guidelines, all primary buttons are orange, all secondary buttons are dark grey and all tertiary buttons are light grey.

Audible buttons and alt text

For users with impaired vision we use audio labels to communicate a button’s action. Screen readers use text as identified via an Aria label within the HTML. All of the elements are buttons, and the labels are the following: play, exit, sound on, sound off, settings, press and hold for 2 seconds (CBeebies apps only), achievements, how to play, resume, cancel, home, pause, skip, back, restart, levels, next, previous, subtitles on, subtitles off, motion on and motion off.

Button density

To ensure buttons have consistent physical sizes across devices with different screen densities, button assets scale. Our GEL button assets are provided at 1x dppx.

Default AssetsiPhone 5Samsung Galaxy S5
dppx (dots per pixel)1x2x3x
Mobile home button size42px x 42px84px x 84px126px x 126px

Button sizes for mobile

All buttons should have a minimum hit area size of 64px for screens with 1x dppx (dots per pixel). The button graphic itself does not need to visibly match the hit area on smaller devices.

An illustration of the minimum mobile button size and hit area

Hit area
Used on larger displays to ensure the navigation is clear.

Tablet and desktop sizes
Use visual buttons smaller than the hit area to reduce the feeling of on-screen clutter.

Hit area spacing
Button hit areas should never overlap but can be placed next to each other, as long as there is a gap of at least 22px between the button graphics.

Button sizes for tablet and desktop

All buttons should have a minimum hit area size of 70px for screens with 1x dppx.

An illustration of the minimum desktop button size and hit area

Hit area
Used on larger displays to ensure the navigation is clear.

Tablet and desktop sizes
Use visual buttons smaller than the hit area to reduce the feeling of on-screen clutter.

Hit area spacing
Button hit areas should never overlap but can be placed next to each other, as long as there is a gap of at least 24px between the button graphics. 

Game flow

Keeping navigation simple and logical.

An example of a common game flow

An example game flow includes loading, home, exit, how to play, achievements, level select, resume, gameplay, pause, settings, results and conclusion. 

Screen layouts

'Loading' screen

An example of a 'loading' screen

Title
Positioned in the centre of the screen. This can take any form that conveys the game within the space.

Loading
This is positioned below the game title in the centre of the screen. Progress should be clearly indicated.

Logo
Positioned in the bottom right of the screen. This should be the logo of the brand i.e. CBBC or CBeebies.

'Home' screen

 

An example of a 'home' screen

'Exit' button
Primary button positioned in the top left of the screen. Returns user to 'launch' screen.

'Audio toggle' button
Tertiary button positioned in the top right of the screen, to the left of the 'settings' button. Toggles audio on/off, replaced by 'mute' icon if muted.

'Settings' button
Tertiary button positioned in the top right of the screen. Launches the 'settings' screen.

'Play' button
Primary button positioned in the middle of the screen. Primary Call To Action (CTA).

'How to play' button
Secondary button positioned in the bottom right of the screen. Launches 'how to play' screen.

'Resume previous game' screen

An example of a 'resume previous game' screen

'Resume game' dialog
Positioned in the centre of the screen, overlaying the 'level select' or 'game' screen.

'Resume' button
Primary button positioned in the centre of the screen within the 'resume game' dialog. Continues gameplay from previous screen.

'Start new game' button
Secondary button positioned under the 'resume' button within the 'resume game' dialog. Clears previous session data and continues gameplay.

'Character'/'level select' screen

An example of a 'character/level select' screen

'Home' button
Primary button positioned in the top left of the screen. Returns users to the 'home' screen.

'Pause' button
Primary button positioned in the top right of the screen. Launches 'pause' screen, stops background music and movement.

Carousel navigation
Positioned in the centre of the screen, with the 'previous' button on the left and 'next' button on the right. Can be styled around the brand and game.

'How to play'/'achievements' screen

An example of a 'how to play/achievements' screen

'Back' button
Primary button positioned in the top left of the screen. Returns users to the previous screen.

'Settings' button
Tertiary button positioned in the top right of the screen. Launches 'settings' overlay.

Carousel navigation
Positioned in the centre of the screen, with the 'previous' button on the left and 'next' button on the right. Can be styled around the brand and game.

Help content
Positioned in the middle on the screen, in the middle of the carousel navigation. Contains instructions relevant to the game.

'Gameplay' screen

An example of a 'gameplay' screen

'Back' button
Primary button positioned in the top left of the screen. Has to be present during gameplay in CBeebies games, but can also be used to get back out of a zoomed in view for CBBC games. For example, zooming in to a cauldron in a potions room or zooming in to a book on a table.

'Pause' button
Primary button positioned in the top right of the screen. Launches the 'pause' screen, stops all background music and movement.

'Skip' button
Primary button positioned in the bottom right of the screen. Used during cutscenes only. Enables a player to skip any introductions and go straight to gameplay.

'Results' screen

An example of a 'results' screen

'Restart' button
Secondary button positioned in the bottom middle of the screen, to the left of the 'continue' button. Returns users to the beginning of the level. Should be changed to the 'play again' button if it's the end of the game.

'Continue' button
Primary button positioned in the bottom middle of the screen, to the right of the 'restart' button. Continues to the next level or other appropriate screen. Should direct users to the end credits or 'home' screen if it's the end of the game.

'Try again'/'game over' screen

An example of a 'try again/game over' screen

Title
Positioned in the centre middle of the screen, above the 'try again' button. Optional supporting title fitting with the brands tone of voice.

'Try again' button
Primary button positioned in the centre middle of the screen, underneath the title. Restarts the gameplay, either at the start of the level or at the last checkpoint.

'Skip level' button
Secondary button positioned in the bottom right of the screen. Skips user to the beginning of the next level.

'Pause' screen

You can adjust the layout in accordance with the game requirements.

An example of a 'pause' screen

'Home' button
Primary button positioned in the top left of the screen. Returns users to the 'home' screen.

'Audio toggle' button
Tertiary button positioned in the top right of the screen, to the left of the 'settings' button. Toggles audio on/off, replaced by 'mute' icon if muted.

'Settings' button
Tertiary button positioned in the top right of the screen. Launches the 'settings' screen.

'Restart level' button
Primary button positioned in the middle the screen, to the left of the 'resume/play' button. Returns user to beginning of level.

'Resume/play' button
Primary button positioned in the middle of the screen, in the middle of the 'restart' and 'level select' buttons. Returns the user to gameplay.

'Level select' button
Primary button positioned to the right of the 'resume/play' button. Returns user to the 'level select' screen.

'How to play' button
Secondary button positioned in the bottom right of the screen. Launches 'how to play' screen.

'Rotate device' screen

Use brand appropriate tone of voice for the message. The 'rotate device' message must also be readable by a screen reader

An example of how the 'rotate device' screen displays

This screen gives clear instruction to the user on which orientation the users device needs to be in for gameplay.