Concept – Contextual Toolbar with Add-Button

classic Classic list List threaded Threaded
1 message Options
Thibaut B. Thibaut B.
Reply | Threaded
Open this post in threaded view
Report Content as Inappropriate

Concept – Contextual Toolbar with Add-Button

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.

Let me know what you think!

960 px low-width mode:
1280 px normal-width mode:

Zip with GIMP files:
(ctrl+shift+t to toggle show-guides in GIMP)


*Overview *

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.

*Spacing *

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.

*Explanation *

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.

To unsubscribe e-mail to: [hidden email]
Problems? http://www.libreoffice.org/get-help/mailing-lists/how-to-unsubscribe/
Posting guidelines + more: http://wiki.documentfoundation.org/Netiquette
List archive: http://listarchives.libreoffice.org/global/design/
All messages sent to this list will be publicly archived and cannot be deleted