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:
https://drive.google.com/file/d/0B6yaM-XqO5AOUEQ5WC00SnpLTzg/view?usp=sharing
1280 px normal-width mode:
https://drive.google.com/file/d/0B6yaM-XqO5AONDM4X3R4Q2YxUzA/view?usp=sharing
Zip with GIMP files:
https://drive.google.com/file/d/0B6yaM-XqO5AObnFSSFB6S1diLUk/view?usp=sharing
(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,
page-settings...).
The ruler is not displayed by default because it is an advanced feature.
--
To unsubscribe e-mail to: design+unsubscribe@global.libreoffice.org
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
Context
- [libreoffice-design] Concept – Contextual Toolbar with Add-Button · Thibaut B.
Privacy Policy |
Impressum (Legal Info) |
Copyright information: Unless otherwise specified, all text and images
on this website are licensed under the
Creative Commons Attribution-Share Alike 3.0 License.
This does not include the source code of LibreOffice, which is
licensed under the Mozilla Public License (
MPLv2).
"LibreOffice" and "The Document Foundation" are
registered trademarks of their corresponding registered owners or are
in actual use as trademarks in one or more countries. Their respective
logos and icons are also subject to international copyright laws. Use
thereof is explained in our
trademark policy.