Here my concept about how the LO Writer toolbar could be improved. I have
spend around 20 hours on it and to my surprising it is quite similar to the
current default design. I spend a good amount of time thinking about
use-cases, button positioning and alignment. In the end there are a lot of
buttons (actions) that are expected to be there, which keeps the
possibilities to change things at a low level. Unversed users expect to
find e.g. copy & paste buttons, so I can't rationalize them away, same for
a lot of other functionality.
This design is based on the Notebookbar concept. It borrows the idea of big
icons with text to build visual groups and extends it with the idea of
having a low and normal width interface. The low-width UI introduces the
add-button which aggregates all add-a-thing actions, like adding a table or
page break. The content of the last visual toolbar group adapts contextual
to the currently focused UI-element and is therefor not always visible.
This toolbar design is based on an 8 px grid.
- Top, left and bottom padding of the toolbar: 24 px
- Padding between buttons: 16 px
- Padding between button and vertical line: 12 px (padding left & right
from line = 24 px)
- Padding between toolbar and document sheet: 24 px
Application window size:
normal 1280 px (160 x 8)
low 960 px (120 x 8)
*Low & Normal Width Mode *
If the application window is less than 1280 px wide, the low-width mode is
activated and only there the add-button is present. Since the content of
the last toolbar group is context based, it must always contain an
add-button in low-width mode – a small version is sufficient – e.g. to
insert media into a table.
In normal-mode the add-button content is displayed as separate toolbar
group and the add-button is not present.
Office applications by nature incorporate complexity. To allow unversed
users to carry basic tasks, the UI has to be simple and straight forward.
Advanced actions should be present – but easily ignoble.
All displayed buttons are either expected to be there (save, copy, paste…),
are needed to provide basic functionality (bold, text-size, left-align …)
or are lesser accessed but handy actions (add-table, comment,
The ruler is not displayed by default because it is an advanced feature.