Ideas and Concepts
In the last 3 months I played with the awesome feature of Notebookbar. This experimental feature give the user the possibility to use a tabbed toolbar like Microsoft does, but it offers more, much more. I like the idea from the LibreOffice UX team about the context based toolbar. Advantage of the different UI elements:
Toolbars are great to offer the users the most frequently used actions. You can group them and with the Notebookbar you can arrange them in different sizes, with and without labels. The disadvantage is that you can’t show all functions from LibreOffice in the toolbar.
The benefit of a menu bar is that you can sort all actions into a useful structure, and the experienced users know where to find actions that they used only from time to time. The disadvantage of a menubar is that you have to navigate through the structure.
The sidebar is great to group sections of actions, and you have a lot of vertical space, so I decided to use some layout examples from the sidebar.
The benefit is that you can show all actions within the toolbar because actions are placed on different tabs. The problem is that the user have to know where the actions are.
The LibreOffice UX team introduced the toolbar with contextual section, that I like much because users can assign actions to different groups and label them. The Notebookbar offers also the option to place button in different sizes onto the canvas, which is used in the variant with contextual section to draw attention to more relevant actions.
Advanced Grouped Toolbar
My proposal starts with the variant “contextual sections” and extends it to the menubar. In addition I’m a fan of consistency so this is my idea:
The idea is to combine the top level structure from the main menu with grouped toolbar sections.Sections always start with one big labeled icon followed by two rows with 24px icons and labels if needed. Next to the section label a menu is placed at bottom right that provides access to less often used functions from this group. Furthermore small buttons open dialogs from the group (e.g. Paragraph settings on the Format section). The label is also a drop down menu like in the menubar.
So I have the benefit of a toolbar where you can show the main actions for different groups by one click. Advanced actions for a group via smaller icons and a group label to support orientation in the UI. With the bottom menu you get all actions for one group with two clicks.
The drawback of this solution is that 10 sections or more exceeds the common width of 1280px. Ribbons solve this problem with tabs, I’ll do it per contextually showing sections, depending on the screen resolution. he extended grouped toolbar was designed with 1920px (full HD screen resolution) in mind, but will also work on 1280px and on 2560px Screens.
The design is the same as for the extended grouped toolbar but with only one icon row and a second row with the group labels. For users how don’t need the section labels, those can be hidden to save even more space.
This isn’t just a mockup, it’s a real UI file – you can/should test the extended grouped toolbar and the single line toolbar. Thanks to Szymon Kłos
Unfortunately there are some open bugs:
- Switching section depending on the context is not as smooth and flicker-free as possible (see switch between text view and table view) Bug 107083
The group labels don’t work as known from the menubar. Implemented as just a label makes…, because something like the drop down menubar behavior isn’t available yet.Bug 107084
- Theming work now with firefox personas it would be nice if I could define system colors without personas. Bug 107128
- Show/hide the label row isn’t possible with a simple action. Bug 107085
- There are some missing content views like for print and for insertdraw. This bug is still open for the other content based toolbars. Bug 106505 and 107127
- The priority content for the notebookbar need some improvement. Bug 107129
- Show/hide button labels depending on the windows size. Bug 106566
- The action expander for e.g. Paste, Table, … should be right to the label instead of vertical align. Than the alignment of the labels is perfect. Bug 106564
- Groupedbar full and firefox theme groupbar full
- Groupedbar compact and firefox theme groupbar compact
I’d like to integrate the two layouts into LibreOffice master asap you can download a daily build for your System. You can download the .ui files and move them to /share/config/soffice.cfg/modules//ui see „How to create your own Notebookbar“.
Help is very welcome.