Best way to choose color combination from palette?

Question

I have the following scenario:

This is a color picker for a software we're developing. Basically we have different Groups for Items and Items are displayed as boxes in a grid with a given color scheme that can be customized through the following interface.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Before today we didn't have many groups or categories to put the items on, but the problem is that the number of groups for a specific instance of this interface has grown, and we just cannot keep adding radio boxes or tabs to filter the items.

I thought about having a collapsible list with the table inside, or even an accordion to hide inactive categories, but the problem with the accordion is that with a lot of groups it's just useless.

I also suggested, having a default color scheme, and then only aggregating changes, but the problem with this approach is that you might have adjacent item boxes together that might look similar if you're not able to compare them from the list.

Someone else suggested having the groups in a dropbox... but you're the experts... so I rather hear it from you guys! :)

What would be the best way to present this color picker.

Answer 1

I am a little confused here, so taking your example above can white be the only color on black or can I specify the text to be any color on the black background (assuming I want to use the black background). If you want to provide your users flexibility to do that,then try something like this

Edit: As sysscore, suggested you could just also put in a color preview after showing the pickers for foreground and background colors

However if you are prepared to provide only specific color combinations, then you need to ensure that users can understand how those colors will work with each other, so instead of providing adjacent colors, superimpose the colors on top of each other as given below:

I am not very sure on what practices you will design which foreground color is suited for which background color but this link (Colourlovers) is an excellent resource to learn more about it.

Answer 2

I wouldn't let users mess up the GUI with a poor choice of colors. Lack of contrast might seriously affect usability. To suit different tastes, I'd offer a few ready-made color schemes.

Answer 3

Is changing all the colors for the items a common activity? If its more likely that users will just be changing the colors for one category, you could integrate the color changing into whatever UI is used for editing that category. We're running into a similar issue (categorizing questions in a quiz, rather than choosing colors for an item), and I'm in the process of doing some user outreach to figure out which activity is more common. That said, if somebody has to set up all the colors for the first time, maybe they need both interfaces. (Sorry, that got a little rambly)

Answer 4

I ended up with this after all your comments.

To help reduce some of the User Experience strains that we currently have, I added some more features the Colour Picker as described below:

1. Instead of having two different columns for text and background colour, we have only one that displays coloured dummy text with its background colour to ensure that the user is happy with the selection.
2. The user is not prompted anymore to a secondary screen to change the colours (As suggested by @mervinj answer). Instead, after picking a row, the user will be able to select a colour from the colour palette below. This colour palette is only enabled when a valid row has been clicked before.
3. A (restore) icon next to the row indicates whether that colour has been changed from the default colour palette. By clicking it, it will restore the original value.
4. Hovering the (restore) icon will temporarily display the original colour scheme.
5. Clicking the (restore) icon will make it disappear.
6. The Text colour palette is dependant from the Background colour palette. This is due to the fact that some text colours are difficult to read when combined with different background colours as shown in the right side of the image of this answer.
7. Hovering over the colour palette while a row is selected with live-preview that colour. A tab that lists only those colours that have been changed is also added to the interface.
8. The interface is exactly the same but will only list categories/groups if they have items that have changed.
9. The ability to restore the whole colour palette to the default is added at the bottom right side of the screen.
10. Categories/Groups appear as collapsible panels that display an Item Label, a Dummy Coloured Cell and a Single Restore Button.
11. Clicking on the Category/Group wont select it, but rather expand it or collapse it.
12. The categories/groups appear collapsed at the beginning so that it's easy for the user to expand the one needed. It's state is saved through the user session in case the same user wants to keep changing colours from that group/category later on.

Benefits

---

• Making the Text Colour Palette dependable of the Background Colour Palette and vice versa increases the chances for the user to succeed picking a good colour combination (ensuring good quality contrast happens).
• Having the All/Customized Tabs at the top enable the user to find modified colours easily.
• The interface provides the means to inform which colours have been changed, what's the default value and the ability to restore them.
• Making the List Collapsible allows the user to easily find what is been sought for and to display any number of Categories/Groups.