Look and Feel of Plasma sidebars

KDE sprint in Randa boosts productivity since VDG members and developers talk directly to each other. Goal of this proposal is to unify the user experience of Plasma sidebars.

KDE Plasma makes intensively use of sidebars. It is used for the task switcher, provides access to plasmoids, and offers a preview for activities. Since all these applications are core features the sidebar should have a common look and feel.

Issue

Plasma-Sidebars

Figure 1: Task switcher (Breeze style) and plasmoid sidebars.

Today, the application switcher is a small bar with thumbnails of the application along with the application icon and the title with ellipsis in the middle. The bar disappears when the user realeases the keys and offers no further functionality. On the other hand, the plasmoid sidebar is sticky until the user closes it or changes the focus to another app. The bar contains of a search function, has functions to add more items (GHNS), and a different kind of preview. And in case of the activities switcher the preview provides additional interactions, such as clone or close, that are shown on hover.

Requirements

  • For consistency purpose a title has to be shown on top.
  • The sidebar has to be provide an option to make it sticky in order to allow advanced interactions.
  • The sidebar needs an explicite close button when shown sticky.
  • The sidebar has to provide a search bar in order to filter long item lists.
  • The content of the sidebar should be visualized consistently over different apps, inclduing a preview, the app icon, the title, and additional information.
  • The content should be categorized in groups, if appropriate.
  • The sidebar may provide item specific functions, for instance close, configure etc, in order to interact with the app without the need of activation.
  • The sidebar should provide global functions, for instance close all, tile windows etc., to interact with all items at once.
  • The sidebar has to be responsive in terms of individual preferences (widescreen users may want to use wider sidebars) but also in respect to the device.

Solution

Plasma sidebar

Figure 2: Proposal for sidebar standardization

1) Every sidebar should have a title. Right hand, options to make it sticky and to close is available. Sticky means the sidebar does not close automatically when the user releases the key.

2) Sidebars allow to search through the list. The function works as a filter which means the number of items is reduced to those that fit the entered text. To make this feature useful (the proposal removes the catgeory dropdown from the plasmoids sidebar) it has to respect category names as well as additional text.

3) Groups can be collapsed in order to get an overview. In case of non-categorical data such as tasks this part of the UI can be ignored.

4) Items has to have a previews, the icon, label and a description. That means plasmoids need another image that illustrate how the app will look like plus the name and a short description. Tasks are shown as usual with the difference that the title is splitted into the app name (e.g. Konqueror) and details (e.g. active page address). In case of quadratic previews the textual information is shown as an overlay. Active items are identified by a frame, or the like.

5) Known from gwenview the items may provide an interaction when the user hovers over it. Those interactions are item specific, for instance close, save, print, clone, share etc.

6) Additonally, the sidebar offers global interactions that affect all items. That might be the Get new widgets function but also the (new) option to minimize all windows or to show them tiled. In case of small sidebars it makes sense to show only the most important functions and perhaps icons only. However, the sidebar may be resized by the user (common gripper at bottom right) or depending on the screen real estate. In this case not only the buttons may be adjusted and enriched with the label but also the sidebar content is arranged appropriately. Eventually, the ‘sidebar’ becomes maximized and reprents the current grid view.

Discussion

What do you think about this guideline? Which feature did we forget, is there something to complain about, perhaps from the accessibility group? Please join the discussion.