Usage alternative user interface proposal


  • Sidebar used as navigation to avoid over-cluttering a headerbar
  • Sidebar uses symbolic icons to show the user a quick overview of the current status, using colors to warn if necessary
    • CPU symbolic icon showing 0-4 lines based on CPU usage 0-25%, 25-50%, 50-75% 75-100% (needs design, currently uses drive-multidisk-symbolic)

    • Memory symbolic icon resembling chip or memory, also showing 0-4 lines with memory usage% (needs proper design)
    • Network symbolic icon can be in one of the following states:
      • sending (network-transmit-symbolic)

      • receiving (network-receive-symbolic)

      • sending and receiving (network-transmit-receive-symbolic)

      • idle (network-idle-symbolic)

    • Storage symbolic icon can be in one of the following states (based on drive-multidisk-symbolic, background/foreground disk color changed like for the network symbolic icon)

      • reading
      • writing
      • reading and writing
      • idle
    • Battery symbolic icon showing 0-4 lines (0-25%, 25-50%, 50-75%, 75-100%) with the usual battery status indicator symbolic icons
  • Each detail page is composed of a chart and a processlist with process name + category-relevant columns (Sending+receiving speed in case of network, etc.)


Proposed interface v0.02 Proposed interface v0.02 in SVG format

Relevant Art

Existing usage design

Usage mockups from design team github



Goals and scope



  • The Storage section should contain information about how much disk space is available, how much space is used for Applications, etc (see Usage mockups). "Disk activity" probabily needs its own section -- StefanoFacchini.

    • the Storage section has been left out intentionally, based on an idea from the Usage wiki page: "scope of this application: it seems to that this app is predominately focused on processes, so why not rename it to Processes (or Tasks or something...) and move the Baobab storage profiler and related stuff to Disks (Storage)" -- RobertRoth

    • anyway, Disk seems like a better name for what I do have as Storage right now, so renaming it is a good idea, and that leaves place for a Storage with baobab's content -- RobertRoth

  • A sidebar seems indeed more appropriate than a view selector. Using informative icons is a good idea but I would use far bigger icons, and I would place them before the attribute names, to make the usage closer to the Contacts app -- MathieuJourdan

    • Maybe placing the icons before the attribute name would work, but I'd say having bigger icons needs discussion, as the icons serve another purpose here: Contacts has bigger icons for the faces to be recognizable, while here, as we're using symbolic icons with colors, they are recognizable at small sizes too (that's what symbolic icons are for, to have minimum details but still recognizable) -- RobertRoth

2013-08-29 15:10:42

Design/Playground/UsageAlternativeUI (last edited 2014-01-10 00:59:54 by SvitozarCherepii)