Redesigning LibreOffice’s color system

LibreOffice is doing great under The Document Foundation‘s wings, but it still manages to surprise and confuse me every now and then when it throws up some awkward UI issues. Its color picking system is one of these issues and I decided to do something about it by complaining loudly on identi.ca. Oddly enough that did not solve the problem, so I decided to have a go at rethinking and redesigning some bits of the process. Here are the results.

For this post I’ll be focusing on LibreOffice Writer version 3.4.3, since that is what I use most often, but I believe that this process works the same across the entire suite. Also, I haven’t actually done any user tests. So these are just my personal experiences and thoughts (though I’ve seen other people run into similar problems).

Color color color color

The system I’m talking about is the one you use to pick and manage different colors. There’s a lot more to colors in LibreOffice, but I’ll get to that later.

So! Let me show you how it works. Say you’re the kind of person who wants to add some color to a piece of text. There’s a Font color button on one of the toolbars, with an arrow next to it. Great! Click the arrow and a list of colors appears:

Notice that the layout is kind of awkward; the color order seems random. But I believe this is just because of my weird personal settings: usually the default colors are nicely arranged by row.

Alright, so you can click one of these and pick a color. Seems fine and straightforward, but what if you want to add a new one? That’s where things get a little odd. You can go to the Tools menu and click Options, after which a settings dialog pops up. After expanding LibreOffice there’s an item called Colors, which shows you this screen:

What we’ve got here is:

• A color table with all of the available colors (notice that the layout here is much better than the one above: the colors are neatly arranged in rows)
• A drop-down list that also has all of the colors
• A Name field with the name of the currently selected color
• Two colored rectangles: the upper one shows the color, the bottom one shows a preview of a new color (I’ll explain later)
• RGB settings and a drop-down to change them to CMYK settings
• Four buttons on the right, namely Add, Modify, Edit and Delete

Then, if we click Edit, a new dialog appears, which I’ll call the Detailed Color Settings:

Let’s take a closer look

Now that you know what it looks like, let’s dive in. What exactly are these problems I’m complaining about? I’ll list the ones that bother me, explain why I think they should be changed and follow up with possible solutions (if I can come up with any).

1. There’s no obvious way to get to the Colors settings. It is hidden away behind a menu item that doesn’t appear to have anything to do with colors, in a settings dialog under another item. Here’s a small screenshot from Microsoft Office 2007. Apologies for the Dutch text; the highlighted button says “More colors…”. As you can see there’s a straight link from the Font color button, which is easy enough to find in both Office and LibreOffice, to a dialog that lets you add a custom color. Presumably, this follows the user’s mental process a lot more closely: “I want to use a color, but the one I want isn’t here. Oh, here’s a button that says ‘More colors…’, let’s check that out.”
2. There are two ways to select a color: using the Color table or using the drop-down list. I think the Color table gives a good, logical overview of all the colors, so I don’t see why the drop-down is needed at all.
3. The interface is laid out in the wrong order. This is one of the main issues in my opinion. It would be better to arrange the elements in order of use and group the related ones together. A good layout is very powerful: order elements correctly, and their relationship to each other can be instantly clear to a user. Below is the order you should follow if you want to add a new color. Notice how the steps are all over the place, instead of being in reading order.
4. Modify and Edit sound like they do the same thing, but they don’t. Modify changes the selected color to the new settings. Edit opens the Detailed Color Settings dialog. In other words, Modify acts more as a Save button.
5. The Name field may not be needed. Personally I think this is a bit overkill: I don’t want to name my colors, I can simply recognize them. But this is debatable, so I’ll leave it alone.
6. The RGB/CMYK settings are fine, but why are they repeated in the Detailed Color Settings? One of these should be removed. Personally I would try to keep all the settings in the Detailed Color Settings dialog.
7. The color field does not seem to serve a purpose. The field above the preview field shows the currently selected color, but so does the drop-down list and the Color table, and the color name is already in the Name field. I assume the field is there so you can compare the color with the one in the preview field below, but speaking of the preview field…
8. The preview field could be removed. Both the color field and the preview field below it are repeated in the Detailed Color Settings. Since that settings dialog is where you should actually set the colors, it seems that that is the only place that should have a preview field.
9. The next four items are about the Detailed Color Settings… The relationship between the left color field, the right color field and the two arrows below them is… complex. After some wiki reading, I think this is what it does: the left field takes the four colors in its corners and mixes them. The two arrows copy a color from the left field to the right one, or vice versa. However, I don’t know why you should even want to mix four colors. Or even if you would want to do so, why not use your preferred graphics editor for that? Color settings are fine, but if you want that amount of control odds are you will be more comfortable (and powerful) in a proper graphics editor. Which leads me to another thing…
10. There is no color code field. If you need to use a specific color, you will probably know its hexadecimal code. But there’s no place to paste or copy this code.
11. Several settings could be combined. In the settings screen, there’s a drop-down to switch between RGB and CMYK. Yet in the Detailed Color Settings, there are three individual columns for RGB, CMYK and HSV values. These could be combined just like before, with a drop-down. This may be a minor thing, but it would remove 7 labels and 7 fields while only adding 1 or 2, which in turn would make the interface much less overwhelming and intimidating for users.
12. The color field doesn’t allow you to adjust the brightness. The only way to do so it by using the Brightness field under the HSV settings. Replacing the field by a color wheel like in many other applications would solve this.
13. Additionally, the buttons of the Options dialog itself are odd:
• OK and Cancel seem to have the same effect. If I modify a color, then click Cancel, it is still saved.
• It’s unclear what Back does. Where does it go back to? According to the wiki, it “Resets modified values back to the LibreOffice default values.”, but it doesn’t seem to do so. But maybe I’m just missing something here.

As with every piece of software, you can keep on pointing out small bugs and inconsistencies, but I think this list covers the big ones.

What would all this look like?

Here’s what all these little changes could look like eventually. Let’s go through the steps again, in quick-hackjob, half-wireframe form.

That’s it. Sure, there’s a lack of standard GNOME icons, it ignores massive parts of the HIG and I haven’t even removed the extra space. But this just an example of what it could look like.

There are many more aspects to color in LibreOffice, like the ability to import and export color schemes. Also, what I described above focuses purely on the UI side of things. I think it might also be valuable to take a higher-level look at the general concept of how colors work in LibreOffice.

Take for instance the default color selections. Create a standard chart in both Microsoft Office 2003 and Office 2007 and compare the results. Notice how without even touching any settings, the 2007 charts already look much better. In one swoop they’ve made millions of charts all over the world just that bit more beautiful. Great default settings can be extremely powerful and effective.

Another thing to wonder about: should this color list exist at all? Why would you want to manage your colors? Just add one when you need it and be done with it. I bet this is one of those things that just grew organically and became a little more complex with every step. Sometimes you need to take a good hard look and decide that many things just have to go because they’re overkill. I personally love the way Office 2007 handles colors (blasphemy, I know!). From top to bottom: a list of theme colors with lightness variations (carefully selected: notice how every single one of these looks good), a list of standard colors and a list of the 10 most recent custom colors:

But these are all things for another time!

So, what now, smartass?

Alright, my little rant is over now. I hope I didn’t sound like too much of an grumpy old man. If any LibreOffice developers are reading this, please believe me when I say I’m doing this out of love. :D

What I hope is that some of these comments are useful and can improve LibreOffice. I realize that writing a blog post instead of reporting bugs is a bit passive-aggressive, but I chose to do this to check if I’m not completely wrong. So, what I’d like to know: are my comments valid? Are there things I’ve missed or misunderstood? If I’m on the right track, I’ll try to contact the LibreOffice developers and designers and see if I can be of use. Let me know what you think!

Advertisement