Category Archives: Citrus UI

Command cleanup: Indicators and the status bar

While I’ve talked about the context bar, I failed to mention one important aspect of it: Indicators.

These are common contextual (i.e. appearing/disappearing based on the state of things) commands that are not related to the current selection, like “Save”, “Undo”, and “Paste”, and they sit at the right of the bar. Indicators take some load off the status bar, which, in today’s LibO, uses a “saved status” section that acts as a “Save” button on double-click (very non-standard behavior).

And that brings me to the status bar: it’s been drastically reduced in Citrus, consisting of only a zoom slider, a button for showing the toolbox that doubles as an “insertion mode” indicator, and textual indicators of the current state. If you hover over or click on the “Statistics” indicator, you get some more statistics:

Page style indication is left to the page fizz/context bar (which one gets by selecting a page), language indication is left to the text/paragraph context bars/fizz.

Command Cleanup: Menus and toolbars and fizz, oh my!

Today, LibreOffice organizes commands in a number of ways. Menus, toolbars, sidebars, and dialogs (including the “Customize…” dialog) all sort commands into different categories, which can make it quite difficult to find certain commands under different scenarios. What’s worse, there’s no central place that houses all the currently available commands, so the user might have to browse all the various available UI contraptions to find the command he is looking for.

Last time, I showed you how menus are organized. Well, it turns out that this organization applies not only to menus, but to other parts of Citrus as well, including the context bar (the main toolbar) and fizz. Menus are the central UI for finding commands here: if a command is available, it’s somewhere in the menu hierarchy. Text fizz contains a subset of the commands from the text context bar, which contains a subset of the commands from the Text menu.

So it basically boils down to this: fizz is for really fast access to a select few commands (it’s closest to the pointer, appearing centered above the selection), the context bar holds more commands and is still relatively easy to access, and the menu structure replaces dialog windows for access to more tedious options. Clicking the “ellipses” icon on either the context bar or on fizz shows a menu containing the commands not shown on the bar/fizz, like so:

One can customize fizz or the context bar by dragging an item to or from this “ellipses” menu.

Having commands organized in a singular way should also be a boon to developers: Menus and toolbars and fizz don’t have to be coded separately.

That said, there are areas of this interface for which I’ve received criticism. Notably, because the whole interface is contextual, the “copy” and “cut” items only appear when something is selected, and only under that object’s menu (so if you select text and want to copy it, you go to “Text” > “Copy”). I’m hoping that these commands will be discoverable because they appear in fizz by default:

(Note: the icons would be different. I’m just experimenting with using the standard file manager symbols for copying and moving for the clipboard.)

Command cleanup: Menus, again

This is basically going to be an image-based post.

I’ve talked about command organization before, but now I’ve actually mocked it up. The following are not standard menus — they might include split buttons, galleries, color pickers, etc. Plus they change based on context (so when you have text selected, you get a “Text” menu, an “Image” menu with an image selected, etc.). This is done to minimize the number of dialogs in LibO, as dialogs are annoying and break workflow. On those operating systems that can’t handle these menus (Mac OS X and Ubuntu, perhaps, as they both use global menus), LibO should offer dialog windows instead.

This application menu will look a bit different on each platform. On Mac OS X and Gnome, it will integrate with the platform’s application menu. On Windows and desktop environments that allow widgets in the title bar, the menu will be in the title bar (à la Firefox). And everywhere else, it will be a standard menu. And here’s the rest of the menus:

Note: These mockups are based on the theming section of gnome-design git master branch. I’m not sure who the author of the theme is, so props to everyone involved. I’ll add a name if it surfaces.

P. S. Sorry for letting the blog stagnate for such a long time. I’m planning to post more now, but I can’t promise anything.

Citrus: Wave 2

I’ve been gone for quite a while and it’s about time I wrote something here.

So, without further ado, I’m starting a new wave of Citrus posts. Expect a real post soon, for now here’s a mockup:

Quick summary (in the spirit of the first post):

  • the menu bar has different categories
  • there’s a search box on the same line
  • there’s a toolbar below with commands that apply to the current selection on the left and common contextual stuff that doesn’t apply to the current selection on the right
  • The ruler appears contextually, but can be enabled to show full-time or disabled completely.
  • The status bar has been reorganized.

And here’s an SVG file (it should be much more browseable than the last SVG file): http://rapidshare.com/files/451087506/citrus.svg (sorry for the RapidShare, Google Docs wouldn’t cooperate).

Citrus UI: Review

UPDATE: Here’s a more current version.

—————————–

Hi everyone,
I still don’t have time to work on Citrus yet, but, as in the last days I’ve been getting many more hits than usual, here’s a list of all the important Citrus UI posts I’ve done so far:

Citrus UI: the first post

How styles work + how menus look

How the menus are organized

Managing windows through LibO menu (early prototype)

Fizz: small toolbars that show up with selection

How you can select pages

How you can select paragraphs

How you can select and edit tabs

Search

Replacing the splash screen

Citrus: Where things go

Commands in Citrus are organized a bit differently than how they’re organized now. The new organization aims to bring more logic to the whole organizational structure and weed out vague categories like “Tools” or “Edit”, as well as bad categorization (e.g. how the “File” menu is used to house commands that aren’t related to the current file).

Also, menus are now contextual, which means that you no longer get grayed-out menus and commands, but rather these inapplicable commands and menus are hidden by default.

The new menus are:

LibreOffice

The LibreOffice menu includes everything related to the application as a whole. It features commands for creating and opening documents (“New“, “Open“, “Open Recent“), managing open windows, and using and managing the application (“Options“, “Help“, “About“, “Extensions“, “Quit“).

File

This menu houses everything specific to the currently open file. It includes commands for file output (“Save“, “Export“, “Print“, “Rename“, “Preview in browser“), file history (“Undo“, “Redo“, “Repeat“, “Versions“, “Track changes“), and other commands that have to do with the whole file (“Statistics“, “Select all“, “Refresh“).

Window

Everything specific to the current window goes under this menu. Basically, it includes all the commands for showing UI elements in the current window (“Show Ruler“, “Show Navigator“, “Toolbars“, …) and commands concerning window modes (“Zoom“, “Full screen“, “Selection mode“, “Outline“, etc.).

This menu is more like the old View menu rather than the old Window menu, but as it is placed where the View menu used to be, and as it’s immediately obvious what this menu does just by looking at its commands, it shouldn’t be too hard to get used to this menu.

Insert

Just like now, Insert is a menu for inserting stuff into the document. Paste is now the first item under Insert (because when you paste, you insert stuff).

Contextual menus

Then you get contextual menus. When you open Writer, with nothing selected, you get three contextual menus: Pages, Paragraph, and Text. If you were to select an image, you’d no longer get a Text menu, but you’d get an Image menu instead. You might not even get a Paragraph menu — that depends on whether the selected image floats or behaves like a character.

Pages contains commands that pertain to the current page group. It basically includes all of the commands from the current “Page…” dialog, as well as Page styles. As long as you’re in Writer, you’ll get the Pages menu. If you were in Impress, you’d get the Slide menu instead.

The Paragraph menu also contains all the commands from the “Paragraph…” dialog and Paragraph styles, as well as “Bullets and Numbering…”

The Text menu includes character formatting options, styles, hyperlink and language options, as well as “Cut” and “Copy“.

Cut and Copy are now under contextual menus. If you’re working with a text in a chart, you can copy some selected text from the chart under the Text menu or copy the whole chart under the Chart menu. If nothing is selected, you don’t get Cut/Copy.

That’s the jist of it. I know I left out a ton of stuff, so feel free to post comments with questions.

Citrus Labs: Color codes

The icons in Citrus are very simple. They usually use one or two colors: white/black (depending on the theme) and a “group” color.

By “group color”, I mean a color attributed to a certain set of commands. In the two mockups above, you can tell that blue is the group color for text commands, while orange is the group color for paragraph commands.

These icons weren’t originally intended as part of the proposal, but I wonder if this kind of color coding might be a UX improvement, as it visually separates the toolbar into sections and makes it immediately obvious what you’re working with (e.g. you could see that you’re working with an image because the group color of the toolbar would be yellow).

What do you think?

Citrus: The “View” Menu Problem

While trying to reorganize LibO’s menus, I ran into a problem.

You’ve probably noticed that, in Citrus, menus (except “View” and “Insert”) are organized by the thing they apply to: things under “LibreOffice” apply to LibreOffice in general, things under “File” apply only to the current file, and so on.

You’ve also probably noticed that there’s no “Edit” or “Tools” menu in Citrus: they’ve all been sorted out into the appropriate contextual categories. The problem I ran into is that “Selection mode” doesn’t really fit into any of the categories I set. The only category that it sort of made sense in was “View”.

“View” is special in that it contains commands that pertain to the current Window. (If you change the view in one window, the view in other open LibO windows shouldn’t change.) Selection mode works the same way: if you change the selection mode in one window, it doesn’t change in another window.

So here I need Help appropriately naming the “View” menu so that it can also fit the concept of modes. (“Window” seems confusing, as many other programs use that menu to list open windows, but it’s a possible solution. “Instance” sounds too technical. And then I’m pretty much out of ideas.)

Citrus Labs: Paragraph selection

Not too long ago, I introduced Fizz. The point of Fizz is to make simple edits quicker. If you select text, you get Fizz, if you select an image, you get Fizz, if you select a page, a table, a chart, you get Fizz. Yet… there’s no simple way to select a paragraph.

So… here’s what I came up with:

This paragraph handle would only show up on hover over the area next to the paragraph.

Paragraph selection would be especially useful when it comes to lists: to move list items up and down, all you’d do is select them and drag. You would select multiple paragraphs with Shift/Ctrl.