Status Indicators

Relevent Art

Windows 7

Battery

• Full

• Full, plugged in, not charging

• Medium, discharging

• Medium, charging

• Low, discharging

• Low, charging

• Warning low

• Critically low, discharging

Network

• Disconnected, some available

• Searching

• WiFi connected

• WiFi problem

• Wired connected

Bluetooth

• On
• Off

Volume

• Max

• 66%

• 32%

• 0%

• Mute

Comments

Except for bluetooth, color is used effectively as an indicator. The use of the caution and stop symbols to indicate low battery are a bit strange. Especially considering that the caution emblem is also used on the network icon to indicate there is a problem with the connection. The use of black outlines and white fills allows the same icons to be used on light and dark backgrounds. The battery charging icon uses an animated fill level - this is pretty distracting. Overall the icons are very unremarkable or a bit ugly. The Wi-Fi icon, unfortunately, uses the bars metaphor that many devices today are using for cellular signal strength.

OS X 10.5

Volume

• Low/muted

• Maximum

• Medium

• Low

Battery

• Full, plugged in

• Full

• Critically low

Network

• Airport off

• Wi-Fi Available

• Wi-Fi connected full strength

Bluetooth

• Off

• On

Time Machine

Spaces

Input Method/Language

Also see

• http://developer.apple.com/documentation/userexperience/Conceptual/AppleHIGuidelines/XHIGMenus/XHIGMenus.html#//apple_ref/doc/uid/TP30000356-CHDFJEAC

• http://developer.apple.com/documentation/userexperience/Conceptual/AppleHIGuidelines/art/mn_menubaritems.jpg

• http://en.wikipedia.org/wiki/Menu_extra

• http://menu.jeweledplatypus.org/

Comments

Effective use of color as an indicator. The charging symbol is a bit hard to see and it obscures the charge level. The network icon only shows Wi-Fi (airport) status and not wired or VPN. The Wi-Fi icon uses the same metaphor as most phones and mobile devices. The wireless networks available icon may not be obvious. Low volume and mute both show the same icon. Battery icon is inclined - presumably to save vertical space.

iPhone

• Cellular signal

• Airplane mode

• Edge

• 3G

• GPRS

• WiFi

• Network Activity

• Call Forwarding

• VPN

• Lock (screen locked)

• TTY (set up to work with TTY machine)

• Play (song playing)

• Alarm

• Bluetooth

• Battery

Also see

• http://www.apple.com/iphone/how-to/index.html#basics.status-icons

WebOS

Cellular signal

• 1 of 5

• 4 of 5

• Full bars

Wi-Fi

• Full strength

• Searching

Battery

• Full

• Full, charging

• High

• Medium

• Medium, charging

• Low

• Warning low, charging

• Critically low

Bluetooth

• On

• Paired

Airplane mode

• On

Comments

Excellent use of color as an indicator. Like Windows 7 they use black borders and white fill as basic components. Unlike Windows the icons are not flat in appearance. And are actually quite lovely. Since this device is capable of both cellular and Wi-Fi it is important to distinguish them. The icons use the metaphors that are predominant in the mobile industry - ie. bars are for cellular strength. The use of green for the fully charged battery is a nice way to indicate that the battery is now charged (in leiu of an explicit notification) when someone may be waiting for this to occur. The charging indicator uses a lightning bolt or spark symbol instead of trying to represent a physical plug. This may be since the charge may not actually be coming from a plug but another device over USB. This nicely sidesteps any localization issues where plugs look different. It is also arguably easier show this indicator than it is to show a plug with enough precision to effectively communicate the state and yet not distract. The use of the ellipsis when scanning or connecting to networks comes off quite nicely.

Moblin

Battery

• Full

• Good

• Caution

• Low

• Charging

Network

• Offline

• Idle

• Error

• Wi-Fi weak

• Wi-Fi ok

• Wi-Fi good

• Wi-Fi excellent

Volume

• High

• Medium

• Low

• Muted

Comments

The represented states of behavior seem to have been well chosen. The use of color seems a bit arbitrary and does not always used to indicate an important state or message. The use of gray line drawing means that the same icons cannot be used on both light and dark backgrounds and very likely needs to be tailored to the background color choice. The use of finite states in the battery levels is nice because it mirrors the states of the volume indicator and since it doesn't imply a continuum. For example, with a continuous fill of the battery level one may expect to see it vary continuously. The simplicit of the rendering and the metaphor is quite nice. The Wi-Fi indicator uses the metaphor used most widely in the mobile device market. The lines used in the volume level indicator seem not to obey laws of physics but may get the point across just the same. I really have no idea what to make of the other network status icons (eg. idle).

Maemo

Also see

• http://maemo.org/development/documentation/manuals/4-0-x/writing_hildon_desktop_plug-ins_for_maemo/#status-bar-plugins

Android

Also see

• http://developer.android.com/guide/practices/ui_guidelines/icon_design.html

• http://developer.android.com/guide/practices/ui_guidelines/icon_design.html#statusbarstructure

GNOME

Battery

• No battery, plugged in

• Battery critical

• Battery critical, charging

• Battery warning - 20%

• Battery 20%, charging

• Battery 40%

• Battery 40%, charging

• Battery 60%

• Battery 60%, charging

• Battery 80%

• Battery 80%, charging

• Battery full

• Battery full, charging

• Battery full, charged

• Battery empty

• Battery missing

• UPS critical

• UPS critical, charging

• UPS warning 20%

• UPS warning, charging

• UPS 40%

• UPS 40%, charging

• UPS 60%

• UPS 60%, charging

• UPS 80%

• UPS 80%, charging

• UPS full

• UPS full, charging

• UPS missing

• Keyboard 40%

• Mouse 80%

• Phone critical

Network

• Wired

• WWAN

• Not connected

• Wi-Fi, no signal

• Wi-Fi, 25%

• Wi-Fi, 50%

• Wi-Fi, 75%

• Wi-Fi, 100%

• Searching (stage 1)

• Connecting (stage 2)

• etc... Connecting (stage 3)

• VPN active

• VPN connecting

Volume

• High

• Medium

• Low

• Mute

Bluetooth

• On

• Disabled

• Paired

Also see

• http://bugzilla.gnome.org/show_bug.cgi?id=504822

• http://jimmac.musichall.cz/i.php?i=NetworkManager

• http://jimmac.musichall.cz/i.php?i=PowerManager

Comments

Ineffective use of color. Amount of detail interferes with ability to quickly discern state and makes it hard to see on different backgrounds and lighting conditions. The Wi-Fi indicator uses a metaphor that is most commonly associated with cellular signal strengths. This is a problem now that our system may also support cellular connections. The various network activity (eg. connecting etc) animations are poorly done - they move off the edge of the icon, use color poorly, are fuzzy, take the connection states too literally, etc. The ad-hoc icon is not consistent with the others. It isn't clear that one needs to show both charging and plugged in for any but the battery full state. Perhaps it is better to use another indicator here instead. The battery missing case is strange. The mouse, keyboard, and phone icons should not appear in the status area directly. If they are bluetooth devices perhaps they should appear in the bluetooth menu. Or maybe the battery menu should show them. But it isn't clear that an icon is needed there.

Ubuntu/Humanity

The Humanity icons in this page are from the pre-release which were lighter.Humanity release version is distributed as two themes Humanity and Humanity-dark with sufficient contrasts for light and dark panels.

Battery

• gpm-ac-adapter

• gpm-battery-000-charging

• gpm-battery-000

• gpm-battery-020-charging

• gpm-battery-020

• gpm-battery-040-charging

• gpm-battery-040

• gpm-battery-060-charging

• gpm-battery-060

• gpm-battery-080-charging

• gpm-battery-080

• gpm-battery-100-charging

• gpm-battery-100

• gpm-battery-charged

Network

• nm-device-wired

• nm-device-wireless

• nm-device-wwan

• nm-no-connection

• nm-signal-00

• nm-signal-0

• nm-signal-25

• nm-signal-50

• nm-signal-75

• nm-signal-100

Volume

• High

• Medium

• Low

• Mute

• Volume=0

User Status

• Available

• Busy

• 

• Away

• Invisible

• Offline

Comments

Very limited use of color. Only used for indicating critically low battery. There are positive states that should be indicated as well. Overall a fairly ineffective use of color. The metaphor used for the wireless signal icons is the worst I've seen. Not only does it use the bars that cellular signals often use - it uses the cellular tower symbol as well. They wouldn't be that bad as cellular icons though. Except they are very difficult to see. The no-connection state is dangerously bad. The icon is almost invisible. This is a state that should attempt to draw the user's attention - not hide from the user. The wired connection icon is OK. The volume muted icon suffers much the same problem as the no-connection icon. It is almost invisible. This is not good. Using vertical bars for volume (like Moblin) isn't bad for small icon sizes since it avoids some low resolution issues but it isn't a physical model and would likely look pretty strange at larger sizes. The battery power icons aren't bad. The one obvious problem is that the charging indicator is confused with the battery level indicator. This is just a jumble at these small sizes. If color isn't used here the charging indication should be done separately. Also, the battery full state is not very effectively communicated.

It is nice that they've tried to make new user status messages. However, I'm not sure that anyone is going to understand them at a glance. Also the use of latin characters may be an issue. There is almost no difference between offline and available - which seems downright odd.

Design Recommendations

Status icons should use a style that is consistent with the text and menus present on the top panel. In general, these icons should use colors in a considered and measured way. Icons and indicators must not change rapidly or abruptly (not more than once a second). Icon changes should transition smoothly.

Also see:

• https://bugs.launchpad.net/ubuntu/+source/software-center/+bug/433858

• https://wiki.ubuntu.com/NotifyOSD#Icon

• https://wiki.ubuntu.com/SymbolicIcons

Volume

Should have the following states:

• High
• Medium
• Low
• Muted

Battery

• {{}} gpm-ac-adapter
• {{}} gpm-battery-000-charging
• {{}} gpm-battery-000
• {{}} gpm-battery-010-charging
• {{}} gpm-battery-010
• {{}} gpm-battery-020-charging
• {{}} gpm-battery-020
• {{}} gpm-battery-040-charging
• {{}} gpm-battery-040
• {{}} gpm-battery-060-charging
• {{}} gpm-battery-060
• {{}} gpm-battery-080-charging
• {{}} gpm-battery-080
• {{}} gpm-battery-100-charging
• {{}} gpm-battery-100
• {{}} gpm-battery-charged

Network

Dan would like to see:

1. wifi icons a-la Pre + Apple
2. cellular icons like the Ubuntu ones except that match whatever style we come up with; but the same thing with a tower on the left and the bars
3. an encrypted-wifi icon
4. a vpn lock icon
5. a 'wired' icon that doesn't suck; honestly I think the computer + [X] thing is a fine motif but I don't really care as long as it's not a diagonal seatbelt
6. a progress icon
   • windows 7 style spinner in the corner seems fine to me, or the Ubuntu spinner they have in karmic which is the FF/Mac OS X startup spinner that takes up the entire icon

that's about it; we do have nm-device-wired and nm-device-wireless that are shown in the connection editor but honestly those don't matter as much

In detail:

• {{}} nm-device-wired
• {{}} nm-device-wireless (same as signal-100?)
• {{}} nm-device-cellular
• {{}} nm-wireless-disconnected (same as off?)
• {{}} nm-wireless-available
• {{}} nm-wireless-connecting
• {{}} nm-wireless-signal-00
• {{}} nm-wireless-signal-25
• {{}} nm-wireless-signal-50
• {{}} nm-wireless-signal-75
• {{}} nm-wireless-signal-100
• {{}} nm-cellular-disconnected (same as off?)
• {{}} nm-cellular-available
• {{}} nm-cellular-connecting
• {{}} nm-cellular-signal-00
• {{}} nm-cellular-signal-25
• {{}} nm-cellular-signal-50
• {{}} nm-cellular-signal-75
• {{}} nm-cellular-signal-100
• {{}} nm-connection-vpn (stock lock icon?)
• {{}} nm-connection-encrypted (ie. wpa)

Bluetooth

• Available
• Discoverable?
• Disabled

User Status

• user-available
• user-busy
• user-away
• user-invisible
• user-offline?

Also See

• http://repo.or.cz/w/gnome-osd-icons.git git://git.jimmac.net/gfx/novell/gnome-osd-icons