Re: [libreoffice-design] Concept – Contextual Toolbar with Add-Button

Hi Thibaut,

looks like a really cool Notebookbar focusing on the average user with a broad spectrum of needs - 
Eve. The current 'contextual sections' variant was made having Benjamin in mind. Therefore all 
icons have a label, sections are labeled, and only the most relevant features are present. Big 
buttons should stand out, ideally with more detailed and colored icons so that the visual focus 
goes to those buttons. Your layout is rather balanced, and with the sparingly use of labels there 
is enough space to provide more functions. Users with not so perfect sight may struggle with 
bullets vs. numbers, for instance, that are distinguished by only a few pixels. Casual users may 
not recognize some functions and need to read the tooltips.

The idea to show a menu when the width is not sufficient for all icons is quite interesting. You 
may compare it with the implementation at the tabbed variant. But I wouldn't use Add and a plus 
icon, though. 

And last but not least about user expectation. This was also a question when we created the 
contextual sections. But on the other hand we have a sidebar that allows very efficient access with 
widescreen displays. And why not show a few functions in the toolbar and everything else in the 
sidebar? Calligra did this and has only New, Open, Save, Undo, Redo, Cut, Copy, Paste, and Find in 
the toolbar.

So far from my side. Many thanks for sharing your idea,
Heiko

On 02/15/2017 08:55 PM, Thibaut Brandscheid wrote:
>  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.

-- 
Dr. Heiko Tietze
UX Designer
Tel. +49 (0)179/1268509


-- 
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