The end of Clown Vomit, or, simplified category styles


(Jeff Atwood) #1

You may have noticed that we are in the process of standardizing on the “color chip” display style for categories across Discourse.

This is for a couple reasons. First, the criticism that there is a bit too much color on the page by default, ala Clown Vomit.

Discourse was always intended to be a rainbow system, and the featuring of color in categories was originally intentional. But:

  • the block color in categories grew to feel excessive and loud over time
  • we are trying to rein in and simplify the core Discourse pages, as I agree that we unfortunately made the layout too complex when we started
  • we already began switching to color chip category styles on the /categories page and in a few other areas where we had to as a bunch of categories together in the block color style was visual chaos – it felt increasingly inconsistent to have two “main” visual styles for categories.

Another thing I grew to dislike about the category block color style was that it visually fought with a bunch of other stuff on the page…

  • avatars, which are also blocks of color with a letter
  • buttons, which are also blocks of color with words

And it was quite noisy in columns, too:

Overall I was very pleased with the category page redesign that de-styled categories down to color chips in 1.1. After using it for a while there, I think it looks so much better overall, and has so many more advantages, that the color chip category style will replace the color block category style everywhere in the 1.2 release.

We have also taken this opportunity to normalize a lot of our category rendering code so if you wanted to style your category badges differently, that should be more possible in the 1.2 release we are working on.


Sam's personal "minimal" topic list design
Battle Axe - A free theme by the Tappara.co hockey community
Category style bullet now enabled on meta
Categories in hamburger are misaligned
Redesigning the default category page
Minimal Discourse
Minimal Discourse
Internal oneboxing does not work on topics in private categories
(Dylan) #2

Personally I didn’t really mind the color category badges the way they were, but it does look cleaner this way.


(Erlend Sogge Heggen) #3

I dig it. I’m a real stickler for straight lines and parallels though, and those indented sub-categories are bothering me. What if we made the overall category line a tad wider, while the sub-category lines are made thinner, and shares the main line’s space when they’re put together, as such:

While I was doing mockups I also had a “happy accident” that led to this random thought: “Gravatar-style” algorithmic category blocks:

Dunno what I think myself yet. Just putting it out there.


(Dean Taylor) #4

I don’t necessary think this an amazing idea (the one below in this post)…

… but I was just wondering what the profile / avatar images would look like if they lost a little colour too.

I added this CSS:

<style>
.topic-list img.avatar { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.topic-list img.avatar:hover { -webkit-filter: none; filter: none; }
</style>

Here is a little peek for those interested:


(Jeff Atwood) #5

And yet…

Indentation is a very natural way of showing parent child, no?

  • dogs
    • Clifford
    • Harry
  • cats
    • Garfield
    • Sylvester

(Jeff Atwood) #6

Put in some sepia for Ye Olde West Discourse! :wink:


(Dean Taylor) #7

Here you go @codinghorror


(Erlend Sogge Heggen) #8

[quote=“codinghorror, post:5, topic:24249”]
Indentation is a very natural way of showing parent child, no?
[/quote]Absolutely, but there’s a world of difference between a clear indentation and a nearly indistinguishable one that makes you go “is it a little further to the right or?..”

Anyhow, just something to consider and possibly play with. Love the change regardless :wink:


(Mittineague) #9

Not that it bothers me any, but did you intend for “uncategorized” to be chipless and nameless?


(Jeff Atwood) #10

That is how it is supposed to work out of box. Categories are really optional.

I believe you can turn on a special mode where uncategorized shows up, particularly if you rename it to something else.


#11

Nice change :+1:

I like the way Categories - Discourse Meta shows its category style.
So here I have additional ideas:

  1. For mobile





  2. For desktop

    What about putting category column ahead of topic column?


What do you think of these?


(Jeff Atwood) #12

It is a good idea for mobile and we will be doing that in 1.3, not a fan for desktop or tablet.


(cpradio) #13

Can you elaborate on this? Can you do it purely from CSS or do you need to overwrite the single category badge template via a plugin?


#14

This is a big step backwards for me, usability wise. I hate the current trend towards minimalism. The colors mean things!

The colors are just confusing now, and so small that it’s more difficult to even see what they are. It’s difficult to tell whether it’s relating to the thing on the left or the right. The words seem smaller and more difficult to read.

//discourse-meta.s3-us-west-1.amazonaws.com/original/3X/c/f/cf360db44eb27cfde198862b17ec6ddfdb08486d.png

Old way, much better:


#15

The end of easy visual discrimination. It’s a gee whiz effect, but not something conducive to scanning stuff on the screen.


#16

Indeed. Seeing a green and red avatar in the most recent poster column has become a good indicator that nothing of value has been added to the discussion on our forum. This helps to prevent needless clicks.


(cpradio) #17

For those interested, one of our CSS gurus discovered it can be done using only CSS (it at least works in Chrome – YMMV). I primarily did this as a CSS exercise.

Linking to the completed CodePen (so you don’t have to figure it out in the topic above)


(Sam Saffron) #18

I completely agree with normalising category styles, having two differing styles sends a confusing message to users.

However, I am still not a massive fan of the “bar” style, something about it does not look right to me. It is sometimes hard to tell the line is visually tied to the category. When I see “browse other topics in | ux” the bar feels a bit closer to the n then the u, which is super odd. Also it is way too tall.

There are 2 things though I think we should address going forward, besides getting feedback from @awesomerobot about niggles with bar

  1. A single, easily overidable, raw template for categories. Probably even a combo box in site settings to select “style”

  2. Much more subdued colors out-of-the-box for category color picker, in my minimal style I went with opacity 0.7 or 0.8 to reduce the visual noise. Much of the “clown vommit” effect is due to the large number of loud colours, old style looks fine with subdued colors.


#19

When you take this with one of @codinghorror’s initial complaints - that the categories are easy to confuse with buttons - it doesn’t make sense to apply the minimal design in the menu. In the menu, categories are buttons. They should look like buttons.


(Alessio Fattorini) #20

Indeed! I like subdued colors… It might be the right way.