System Status Area

The system status area is located on the right hand side of the top bar. It provides feedback on the state of the system. The area also has a menu which gives access to commonly used actions in relation to system status.

The System Status Area is not an area that is variously called the Notification Area or System Tray and should not be used by applications (foreground or background). This distinction is necessary to ensure the entire top of the screen is designed properly, system owned and coherent, able to be modified or extended, scale well to smaller form-factors, and not become a dumping ground or high-profile branding opportunity.

Goals

  • Use a style that is consistent with the text and menus present on the top panel.
  • Don't distract - indicators should use colors in a considered and measured way. Icons and indicators must not change rapidly or abruptly (not more than once a second).
  • Offer limited, and common functionality.
  • Don't be a primary interaction point - any action that is available through a status icon should also be accessible from elsewhere in the design. For example, network access must also be able to be configured through the system preferences / control-center.
  • Each aspect of system status should map to part of the Settings application.

Non-Goals

  • Steer clear of overt application integration, in order to stay focused on system level status. Therefore, don't include controls for music players or notifications.
  • System configuration/preferences (rather than status).

Relevant Art

Android

http://cdn03.androidauthority.net/wp-content/uploads/2014/10/Android-Lollipop-notifications-AA.jpg

iOS

http://photos2.appleinsidercdn.com/ios7.controlcenter.jpg

Chrome OS

http://opensourceforu.efytimes.com/wp-content/uploads/2012/04/6-system-tray-menu.jpg

Guidelines

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/shell/system-menu/system-status-menu.png

Top Bar Icons

Icons are listed in order of position in the top bar.

Item

When to display

Screen Recording

When screen recording is taking place

Screen Sharing

When the screen is being shared

Location

When an app is using location services

Wired

When wired network in use [1]

Wi-Fi

When wi-fi is in use [1]

Mobile broadband

When mobile broadband is in use [1]

USB tether

When a USB tether is connected [1]

Bluetooth tether

When a Bluetooth tether is being used [1]

VPN

When a VPN is connected

Airplane mode

When airplane mode is on

Bluetooth

When bluetooth is in use

Battery

When a battery is present

Volume

When audio output is present

Power off

When a battery is not present

[1] Network status icon notes:

  • "In use" is defined as being used by network manager as the default route (interfaces are selected using a hard-coded ranking).

  • If the user attempts to use a higher ranked interface and an error occurs, we should also show the status icon for the higher ranked interface. In practical terms, this means that, if the system is using mobile broadband and wi-fi is in an error state, the wi-fi icon is also displayed.
  • Network status is always displayed per interface: generic send/receive or no connection icons are never used.

Item

When to display

Label

Notes

Sliders

Audio

When audio is present

N/A

Speaker icon turns into headphones when they are plugged in.

Microphone

When a microphone is in use

N/A

Brightness

When screen brightness can be adjusted

N/A

Submenus

Wired network

When a network cable is connected

"Connected"
"Connecting"
"Limited Connectivity"
"Error"
If there is more than one wired network, the label should be preceded with the network name. For example: "eth0 Connected"

Wi-Fi

When wi-fi hardware is available

When connected: "<network name">
"Connecting to <network name>"
"Hotspot Active"
"<network name>: Limited Connectivity"
"<network name>: Error"
"Off"

Mobile Broadband

When a mobile broadband interface is available and set up

When connected: "<network name>"
"<network name>: Error"
"Off"
If there is more than one mobile broadband connection, "Off" should be replaced by "<network name>: Off"

Bluetooth tethered network

When a bluetooth device with network is set up, and bluetooth is on

"<Device> Connected"
"<Device> Not in Use"
"<Device>: Error"

If the signal strength can be ascertained, use network-cellular* for the icon; if not, use network-connected-cellular.

USB tether

When a USB tether is connected

Same as Bluetooth tether, replacing the device name with "USB Tether" if a device name cannot be found.

If the signal strength can be ascertained, use network-cellular* for the icon; if not, use network-connected-cellular.

VPN

When a VPN has been set up

"VPN Connected"
"VPN Error"
" VPN Off"
If there is more than one VPN, replace "VPN" with the VPN name.

Bluetooth

When paired devices are set up

"On", "<no.> Connected Devices"
"1 Connected Device"
"No Connected Devices", "Off"

Airplane Mode

When airplane mode is on

Always reads "Airplane Mode On"

Screen Sharing

When screen sharing is taking place

"Screen is Being Shared"

Location

When location services are being used by an application

"Location Services in Use"

Battery

When a battery is present

"Fully Charged"
"<Time> Remaining (<Percentage>)"
"<Time> Until Fully Charged (<Percentage>)"

User

If there is more than one user or session

The user's name

Buttons

Settings

Always

N/A

Lock Rotation

If the screen rotation can be locked

N/A

Lock

Always

N/A

Power Off

Always

N/A

Turns into a suspend button when the alt key is held.

Each submenu should contain high-level controls for the status item. This is typically on/off, but can also include things like switching profiles for wired connections.

If there is a relevant control center settings panel, a link should be provided to it.

Lock & Login Screens

The top bar should perform the same in the lock and login screens. The content of the system status menu varies according to context, though:

  • Sliders are always visible and active.
  • Submenus should be visible but insensitive (expander triangles should be hidden).
  • In the buttons section, only the power off button should be visible.

Old Mockups

Original GNOME Shell menu designs:

Bugs

See Also

Comments

Design/OS/SystemStatus (last edited 2015-10-12 15:41:13 by AllanDay)