Design/Guidelines/Sidebar

TDF LibreOffice Document Liberation Project Community Blogs Weblate Nextcloud Redmine Ask LibreOffice Donate

• Wiki Home
• Development
• Design
• QA
• Events
• Documentation
• Website
• Localization
• Accessibility
• Marketing
• Diversity
• Wiki Help

• Design Home
• Whiteboards
• Development Blueprints
• UX Principles
• UX Guidelines
• Artwork Resources
• Branding Guidelines
• Meetings

The Libreoffice properties panel is a sidebar, which is a graphical presentation of context-sensitive properties optimized for fast access. Typically, the sidebar contains panes with simple controls that provide quick and task-oriented access to the most frequently changed properties such as font size, line spacing, paragraph alignment, etc. The primary reason of the sidebar is an enhancement to the toolbar in the way that it deals with properties instead of functions.
LibreOffice sidebar contains of a tab bar that offers access to panes each with a titlebar and a deck that containing a variable number of sections each with a content panel title and content panel.
The primary user of the sidebar is Benjamin, so the panes have to provide a simple but comprehensive overview of and access to properties.

General

• Provide access to frequently used features in the sidebar. Make sure to have all features in the dialogs.
• Panes (aka decks) are switchable via tab buttons and via keyboard shortcut.
• Provide means to configure position, size, and content. Allow to detach the panes (decks) into separate (floating) windows.
• Do not crop controls. Define one minimum width depending on the content of all tabs.
• Make sure the size does not change depending whether the vertical scrollbar is shown or not.
• Do not hide controls that are not relevant in the current context within the content panel. Rather disable those properties.
• Do not hide content that is out of context. Rather place them in a separate tab/deck.
• Define sensible defaults but allow as much flexibility to the user as possible.
• Do not touch user-defined settings. Any properties that was changed manually must stay as it is independently from the system state.

Organization of Content

• Avoid vertical scrolling by having content fit into deck height (in respect to LibreOffice’s default resolution of 1280×768 pixels). In the case of too many options, consider splitting them into different deck or (preferably) split over more content panels within the same deck.
• Prefer controls where the setting is one click away (e.g. list box rather than drop down or direct access to recently used colors in addition to the widget).
• Prefer mouse-driven graphical widgets in favor of controls that require the input of an exact value (e.g. an image’s transparency with discrete steps via sliders).
• Consider introducing presets of properties comprising of the most relevant settings. For instance, one page margins with all four values.
• Take care of the appropriate tab sequence to support accessibility.

Appearance and Text

• Prefer the use of a grid layout with one or two columns.
• Align elements to fit the deck width. Left align labels and place the input control right of the (localized) label. Do not place the label above the input control.
• Label control groups in the sidebar, preferably when the content panel name is not clear enough or when many controls are included.
• Use indentation to indicate the organization for labeled sections.
• Provide tooltips with all controls to support accessibility.

Keyboard Access

Activation

• 1) Activate the accessibility mode with F6.
• 2) Navigate using F6 starts at the main menu, followed by the open toolbars, and finally the sidebar.
• 3) On the sidebar, land first on the open deck‘s title bar, or the sidebar‘s tab bar when the deck is closed.
• 4) Leave the accessibility mode with Ctrl+F6 and go back to the document position where the navigation has started.
• 5) Use Escape to go back one step in the navigation, meaning from the content to the content panel title and then to the document.

Tab bar

• 6) On the tab bar, land on the tab of the active deck or the tab of the first deck when the sidebar is closed.
• 7) Jump to next/previous tabs with arrow keys including the configuration button.
• 8) Jump to the title of the first content panel using Enter. In case of no content panel go to the first control with Enter.
• 9) Expand or collapse the deck with space but stay at the tabbar.

Deck

• 10) Cycle through the content panels (e.g. Styles, Character, Paragraph etc.) per arrow up/down.
• 11) Make all parts of the deck accessible including the deck title.

Content panel title

• 12) Traverse the content panels of a deck using the arrow keys when the focus is on the content panel title or through Ctrl+Tab/Shift+Ctr+Tab on any position in the content panel.
• 13) Make all parts of the content panel accessible including the content panel title and the options menu.
• 14) When jumping to the next content panel land on the title.
• 15) Jump to the first control of the content panel using enter.
• 16) Expand the content panels automatically on enter when collapsed.
• 17) Expand or collapse the content panel with space but stay at the title.

Content panel

• 18) Within the content panel navigate between controls using tab/shift+tab.
• 19) Use arrow keys to access controls that are part of a collection such as toggle buttons, lists, dropdowns (e.g. bold, italic, underline etc.).