Date: prev next · Thread: first prev next last
2017 Archives by date, by thread · List index


 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 could not 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)
   - 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


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.