In my app, a person can have a variable amount of lists they've created. Each of these lists can have their very own color scheme. In the view where all the lists are shown that the user has created, I figure I'd give the user cues as to what each color scheme of each list is by coloring that particular cell with it's color scheme.

Looks fine if every list has the same colour scheme:

But then this it what it looked like when you have several different lists with several different color schemes (prepare yourselves…):

Needless to say it's a mess. Do you UX gurus have any advice as to how I can show the user "Hey, this list has this color scheme" when viewing this page without coloring the whole cell. I've looked awhile on pttrns but can't find something that looks good.

  • Let's start with the reasoning why every list has their own theme?
    – Jawa
    Commented Jan 5, 2014 at 22:19

3 Answers 3


You could use color somewhere along the edge or corner of the box as a simple status indicator. A nice example is the new GMail mobile app:

GMail Mobile

A useful additional feature will be checkbox icons of the same color along the top that the user can use to filter lists by color.

Color Filters


In your list of lists, you use way too much color as indicator. You are using the underlying list color scheme when you should use the current list color scheme. That's why this second design not only look awful, but is harder to read too.

A list should use the same color scheme on every element. Title have color one, border have color two, background have color three etc. These colors represent an attribute in the list, and your list color scheme is also an attribute of the list.

To visualize the list color scheme I'd make use of category color which is used in Apple, Microsoft and Google calendars. It doesn't stop you from using two colors instead of one, but it doesn't destroy the design of you list of lists.

Here is one example:

enter image description here

You could replace the star with a letter, and assign a color to it to represent that list foreground color.


Perhaps you could offer some progressive disclosure here by shading a corner of the list box with the appropriate color or use a color gradient towards the end of the box.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.