From The Document Foundation Wiki
Jump to: navigation, search

Find me on the mailing list.


Minimum Sizes

Minimum Window Size

The minimum window size should be one under which all of the content is accessible, important content is easily accessible, and all visible UI elements is decipherable.

The minimum window size must be equal to or lower than the minimum supported screen resolution, which is 640x480 px. The UI must be modified to adapt to window size if that's needed to be able to follow the guideline above.


Targets should be large enough to fit:

  • a 6x6px square for a mouse target
  • the arrow button in the spinbox in the current theme for theme-dependent controls
  • a circle with a 7mm diameter for a touch target, an 8mm diameter for thumbs
  • a circle with an 8mm diameter for a touch target together with its margins, a 10mm diameter for thumbs

Non-native Theming


Seeing that you’re having a look at tabs, please consider designing something for MDI as well, thanks ;-) —Fitoschido (talk) 2013-12-15T20:17:28 (UTC)


Non-native theming should be used:

  • For widgets that don't have an equivalent in the standard toolkit.
  • When native theming feels out of place.
    • For example, the current tabs in Impress awkwardly float in space.
  • When native theming doesn't fit in with the platform.
    • For example, the native Windows Vista/7 menubar toolbar background is glossy, yet most Microsoft's own applications use a smooth gradient background for toolbars instead.


The theme should fit well with the default icon set.

Currently, that means non-native elements should use Tango colors, use smooth gradients, and try to conform to the Tango lighting guidelines.

UI Hacks

Responsive Layout

Determine icon size based on window width.

Bonus points for:

  • Distributing space evenly across toolbars on the same row
  • Expanding onto a second row if there's not enough space for the toolbar

Principle: ux-efficiency

Reasoning: Same as with websites. Large icons make sense with a large window size, as the cursor has more distance to travel and larger icons make better targets, or on a tablet. However, with smaller window sizes, small icons are needed to keep commands on screen and afford more space to the document.

Page Toolbar

Create a toolbar for formatting pages, containing at least a style picker.

Principle: ux-efficiency

Reasoning: For this to work well, page selection should be implemented after this project is done. Basically, the idea is to allow users to discover page-related formatting options and change them efficiently, without having to wade through the Page formatting dialog. It would also reduce the need to go through the menubar and eliminate the need to have the page style shown in the status bar.

Page Selection

Prerequisite: Page Toolbar

Allow users to select a page by clicking in its margins, its border, or its shadow. Selecting a page would show the Page toolbar instead of the formatting toolbar. Deselecting a page would involve clicking inside a page or clicking outside its shadow.

Principles: ux-natural-mapping, ux-efficiency

Reasoning: It boils down to natural mapping and the reasoning for the page toolbar.

Optional Hidden Items Menu

Add a toolbar flag for showing a menu for showing hidden commands at the end of a toolbar. "Customize..." would be the last entry in each toolbar.

Bonus points for:

  • Ability to show/hide the menu from "Customize..."
  • A customizable icon for each toolbar's menu
  • Drag from the menu to the toolbar to show a command, drag to the menu to hide it

Principles: ux-discovery, ux-efficiency

Toolbar alignment

Add an option to right-align toolbars.

Bonus points for:

  • Additional center alignment

Principles: ux-natural-mapping, ux-visual-hierarchy

Style menus

Add a menu for each style in the Style dropdown containing "Edit Style Based on Selection", "Edit Style...", "Duplicate Style" and "Remove Style".

Principles: ux-natural-mapping, ux-efficiency

Drag to Open Pop-over

Allow the user to open a pop-over of a drop-down or a split button by dragging from the icon outside the toolbar's border.

Principles: ux-minimalism (simplicity of interaction)

Reasoning: The clickable area for the drop-down arrows on a split button can be quite narrow (e.g. under Mac OS) and thus can be hard to target (annoying with a mouse, unusable with touch).