This site has been retired. For up to date information, see handbook.gnome.org or gitlab.gnome.org.


[Home] [TitleIndex] [WordIndex] 

Status Indicators

Contents

  1. Status Indicators
    1. Relevent Art
      1. Windows 7
        1. Battery
        2. Network
        3. Bluetooth
        4. Volume
        5. Comments
      2. OS X 10.5
        1. Volume
        2. Battery
        3. Network
        4. Bluetooth
        5. Time Machine
        6. Spaces
        7. Input Method/Language
        8. Also see
        9. Comments
      3. iPhone
        1. Also see
      4. WebOS
        1. Cellular signal
        2. Wi-Fi
        3. Battery
        4. Bluetooth
        5. Airplane mode
        6. Comments
      5. Moblin
        1. Battery
        2. Network
        3. Volume
        4. Comments
      6. Maemo
        1. Also see
      7. Android
        1. Also see
      8. GNOME
        1. Battery
        2. Network
        3. Volume
        4. Bluetooth
        5. Also see
        6. Comments
      9. Ubuntu/Humanity
        1. Battery
        2. Network
        3. Volume
        4. User Status
        5. Comments
    2. Design Recommendations
      1. Volume
      2. Battery
      3. Network
      4. Bluetooth
      5. User Status
    3. Also See

Relevent Art

Windows 7

Battery

Network

Bluetooth

Volume

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

Battery

Network

Bluetooth

Time Machine

Spaces

Input Method/Language

Also see

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

Also see

WebOS

Cellular signal

Wi-Fi

Battery

Bluetooth

Airplane mode

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

Network

Volume

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

https://lh6.googleusercontent.com/-pnhdakp2--U/Sodoa5Jbt3I/AAAAAAAAWrI/dUlVSjsvJDU/s800/screenshot-maemo.png

Also see

Android

Also see

GNOME

Battery

Network

Volume

Bluetooth

Also see

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

Network

Volume

User Status

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:

Volume

Should have the following states:

Battery

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:

Bluetooth

User Status

Also See

2024-10-23 11:03