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!

FUDCon Tempe after-post

I was also in Tempe, AZ joining a ton of other Fedora peeps for FUDCon. Although exhausted and jetlagged, I had a great time and even got things done.

On day one and two, there were a load of interesting sessions. It’s always fun to learn more about areas you usually don’t get a lot of contact with, like law or anthropology. I could even understand most of the more technical sessions. I also gave a presentation of my own, though my slides won’t be very meaningful without actual commentary. Sorry about that. If anyone really wants them though I’ll put them up somewhere. I think the barcamp sessions were very well organised, while the hackfests felt a bit random and messy.

I finally got to meet Design Team members Maria and Emily, our web guru Sijis and many other Fedora superstars like Mel Chua and Paul Frields. Met a boatload of other people, ate great food and had fun playing games at the hotel. I’m also glad that after talking with a bunch of people, I could clear up my thoughts about F15′s wallpaper a bit (until now I stayed out of that discussion because I simply didn’t know what to think yet).

As for the hackfests, I attended a couple of sessions. Due to lack of time, I sadly had to break my promise to Paul and Pascal and couldn’t attend the Insight hackfest. First there was a discussion with Pam Chestek, Ian Weller, our FPL and the rest of the Design Team about some of Fedora’s logo’s and trademarks. On the second day, I hung out with the other designers to work on the new wallpaper and together with Emily I hacked a bit on our cute new little project Notitie (formely known as Remote Image Annotation). I’ll do a blog post about that one after it’s online at its new home. Hopefully this or next week. :)

Thanks to all attendees and especially the organisers for this wonderful FUDCon!

(And now it’s time to leave for FOSDEM!)

PS Don’t forget to put all your photos in the FUDCon Tempe Flickr pool!

Fedora Design Bounty: Design the FUDCon Tempe 2011 T-Shirt!

The Fedora Design Team Bi-weekly Bounty is a (practically :)) bi-weekly blog post where we’ll outline a quick-and-easy design project that needs doing for the Fedora Community, outlining all the tools, files, and other resources you’ll need to complete the project.

If you’re a designer and are interested in getting involved in the free and open source community, this is a good opportunity to get your feet wet!

Your mission

The next FUDCon, or Fedora Users and Developers Conference, will be held in January and take place in Tempe, Arizona. At this event, hundreds of free software users and developers from all over the world will gather in Tempe to learn, discuss, hack and socialize.

FUDCons are held a few times a year in different regions of the world and for every conference, T-shirts are made for the attendees to wear. Generally, we like to keep some consistency for the designs across FUDCons, but also want to reflect something about each location. Of course, we try to design them in such a way that FUDCon visitors will be proud to wear them and spread the Fedora love wherever they go. :)

Your mission, should you choose to accept it, is to design the official FUDCon Tempe T-shirt!

Your ninja kit

Here are some tips and resources you to get started.

Helpful Materials

• A basic T-shirt template (courtesy of Nicu Buculei), so you can start sketching within a nice template right away!

• Comfortaa is the font we usually use for text on the T-shirts. If you’re using Fedora, run ‘yum install aajohan-comfortaa-fonts’ to get it. Otherwise, click here to download it.

• Logos – the Fedora, FUDCon and other logos will be sent to you after you’ve taken on this Bounty.

Helpful Tools

• Inkscape – a vector graphics editor, which you can use to work with the T-shirt template.
• Scribus – desktop publishing software, helpful for you to prepare your final design for printing.
• MyPaint (optional) – a great tool for sketching and painting.

You can install these on Fedora using ‘yum install inkscape scribus mypaint’ or by searching for them in PackageKit. If you are not using Fedora, you can get them here: download Inkscape, download Scribus, download MyPaint.

Helpful Resources

• To find inspiration and guidance for your T-shirt design, have a look at the previous FUDCon designs and other Fedora T-shirts. As said before, using something location-specific might be fun, though be careful to avoid stereotypes. Also, you can browse through online T-shirt stores like Threadless or BustedTees for other great ideas!
• A basic tutorial on using Inkscape to create a T-shirt design – this has the basics – but I hope your design will be even better than the example in the tutorial!
• The Fedora Design Team: please drop by #fedora-design on irc.freenode.net for any assistance! Join our chat on the web here. Or join and drop an email to our mailing list. Feel free to ask around – I’m Schendje on IRC and Máirín Duffy, our Design Team Lead, is mizmo.

What’s in it for you?

Okay, okay, we get it. You’re a designer or a T-shirt connoisseur, and you’ve got things to do – why would you bother helping out with this? Let’s do a quick run-down of what’s in it for you:

• If you don’t already have it, you’ll get membership into the Fedora Design Team, which includes Fedora voting privileges and hosting space for Fedora-related projects.
• For your personal portfolio you’ll have a screen-printed T-shirt that will be distributed to and worn by hundreds of FUDCon attendees!
• We’ll mail you your very own screen-printed T-shirt based on your design – that’s right, if someone on the street asks you “Where did you get that shirt??!?” you can respond, “Oh, it’s from my own personal line. I designed it!”
• You’ll build skills in using Inkscape and Scribus – these are excellent free & open source tools that are worth learning because you can use them for just about any design project in the future and they are free forever. You’ll also build skills in addressing general layout challenges, and preparing designs for professional screen-printing.
• You’ll be sent a thank you card by our very own Máirín Duffy, a full-color copy of your design, and some Fedora swag in thanks for your help!
• You’ll gain experience in contributing to a free/open source project.
• Bragging rights as a free/open source project design ninja & more importantly a Fedora Design Team Bi-weekly Bounty designer!

You’re completely raring to go and totally psyched, right? Sweet! So where to start?

Ninja by Hector Gomez from openclipart.org – Public Domain.

The Rules

• There are also a few guidelines for the T-shirt. In theory you can use any color for the base, however white has not worked great in the past. The last few FUDCon designs have used black, though blue might also be nice. That way, the Fedora logo only needs two colors instead of three. Generally, try to keep the amount of different colors in your design as low as possible.
• You’ll need a Fedora account to submit your work. Don’t worry, it’s not hard to get, you can sign up for it here, quickly and painlessly: Create a Fedora account. Once you’ve created your account, log in to sign the contributor license agreement (this gives us permission to use your work!)
• If you are interested in taking this bounty on please make a comment to this blog post below. The first person to claim it in the comments will have exactly 48 hours to give it a shot, at the end of which the bounty will be opened up for someone else (you can try to re-claim it if you want.) All status changes will be announced in the comments.
• You must provide source files for your work. This is so we can make any necessary edits or provide translations for the document, create a reusable template out of your awesome deign, or just generally learn from how your design works. If you’re working with Inkscape and Scribus, this means we need the Inkscape SVG file(s), the Scribus SLA file(s), and any other graphics you may be incorporating into it. If you use any graphics you didn’t create yourself, you’ll need to keep track of where you got them from and the license and let use know.
• You’ll need to abide by the Fedora brand guidelines – but please don’t let this stifle any awesome creative and innovative ideas you might have – just check in with your Fedora design team compatriots first. :D More information and pointers to resources on our branding guidelines is available on the Fedora wiki.
• When you’re ready to submit your work, send it to Máirín! Again, if you need any help, feel free to jump on IRC and talk to us, or email the Design Team mailing list!

Good luck!

Tutorial: introduction to Inkscape keyboard shortcuts (with pics!)

All of Inkscape’s keyboard shortcuts are nicely documented, but I wanted to show my own favourites in a way that I think is easier to remember. :)

A list of all shortcuts can be found here on the Inkscape website. Tip: someone on OpenClipart.org made a neat color coded keyboard map!

For this post I adapted some key images for OpenClipart.org.

Navigating

There are many ways to move around your canvas in Inkscape, but I prefer simply using the middle mouse button. Scrolling will of course go up and down, but hold shift and the page will move sideways. The easiest way to move your drawing is to click and drag with the middle mouse button, which will let you drag the entire canvas.

Clicking the middle mouse button will zoom in, while pressing shift and doing the same will zoom out.

If you ever lose sight of your drawings, use the number keys to get it back.

There are shortcuts for pretty much every tool, but one of the most helpful ones is the space bar, which switches between your current tool and the Select Tool.

Moving things

Moving stuff around is easy enough by dragging with the mouse, but sometimes you need something a little more precise. The arrow keys in combination with Shift and Alt allow for different speeds.

When you’re moving objects around with the mouse, you may want to use Control. This will make the object move either horizontally or vertically, instead of freely.

Resizing

The rules for sizing are somewhat similar. Use the handles on a selected object to resize it. Bonus features: use Control and Shift to either lock the proportions or resize symmetrically. You can also combine these.

Others

A few extra ones! Use these to group, duplicate (which is basically a faster copy and paste) and paste in the same spot.

Most important keyboard shortcut in the world

Most of you will know this, but I cannot stress this enough. Save, save, save! :D

Share your own favourites in the comments!

Introducing Hackergotchi Ribbons

Are you participating in a certain event and want to show it to the world? Are you a Google Summer of Code student, going to the next FUDCon or something entirely different? Get your own hackergotchi ribbon and use it on Planet Fedora! :)

Planet GNOME places this badge under a person’s hackergotchi to show they’re participating in the Google Summer of Code. We wanted something similar for our GSoC students, but something which could also be used as a template for future events.

My ugly mug presents: hackergotchi ribbons!

We’ve got templates for GSoC and FUDCon ribbons on the wiki page. They’re designed to be very easy to change, both the text and the color can be altered in a flash.

If you want one, either follow the tutorial on the wiki or ask someone from the Design Team in #fedora-design and we’ll gladly do it for you!

By the way, Nicu did a post today on how to make good hackergotchi’s. If you want to make your own hackergotchi, you should definitely check it out together with his hackergotchi tutorial!

Hi Planet Fedora!

I’m Jef, or Schendje, a new Design Team member.

This is just a test post to add my (as of yet still empty) blog to the Planet.

Looking forward to meeting and working with all of you in the future! :)

Jef