Add color and subcategory styling to category and chat mentions

I love it. But I would like if for categories its color would show in the icon when typing and a way to signify if its a subcategory while typing and in the baked post like the old way it would show the root and the sub category

10 Likes

I like very much the idea of using the category color!


As for the icon, what about using the same category design we chose in the settings (boxed, bullet, bar…) instead of using a folder icon?

I’ll try to make a mockup tomorrow.

5 Likes
  1. Bullet
  2. Boxed
  3. Bar with subcategory

alternatice category links

I used pretty much the HTML code of the category selector for each style, with a bit of modification (margins and stuff like this + the light rounded background introduced in this topic).

12 Likes

Yes, I think we’ll definitely add a category color in some way. Keeping things monochrome to start simplified some questions around the initial implementation, but the colors have always been something we’ve associated with categories…

Rather than supporting the alternative category styles, we’ve considered moving those options to stand-alone theme components instead and making the default bullet style the sole category style. That would simplify quite a lot as well.

One situation I’d be interested in more feedback on is how to style icons associated with subcategories… does it seem reasonable to extend the subcategory color split to other icons as well? so for example a chat channel mention associated with a subcategory could look like this:

image

12 Likes

Is there actual need for splitting categories and sub-categories in this context? They are styled links and that’s it. Trying to remember all possible color pairs and which belongs where is perhaps too overwhelming and gives no informative value.

Those bars are quite tiny anyway and adding more small details and color spots makes everything… noisy.

What ever, but hopefully monochrome shall be an option anyway :wink:

5 Likes

I don’t recognize all category colors myself, but I am familiar with the colors of the categories I frequent, which makes it a little easier to pick them out of a list.

I think “this is a subcategory” can be valuable. There are also cases where a site has multiple subcategories with the same name, so in that case the color could serve as the most obvious differentiation for a mention. It definitely adds some noise, and I’m sure people have different preferences for signal:noise ratio.

6 Likes

We didn’t know earlier if a link was leading to category or sub-category. I know — what was earlier is not reason to not do things better now, but… was that such kind issue that made someone’s life harder :wink:

I just don’t figure out why direct link to sub-category would need some mark, that tells it is sub-category of unknown category (I mean, another than using same names; which is UI/UX/logical and couple another design error :upside_down_face: if an user must understand color coding). It is just a link after all.

This is not any bigger issue for me, though. But I like how it looks now and — again — if I can choose minimalistic monochrome version I’m just one totally happy small admin :rofl:

2 Likes

For what it’s worth, and feel free to call me old-school, but to me the new design lacks the # as a clear identifier of what it is that I’m looking at. The # is an obvious way to teach people how to create a link like that yourself, and you’ve removed it and replaced it with an icon that tells you more about the target, but less about the nature of the link.

I’d keep the # and add the icon to the end of the hashtag instead. This way you’ll be enhancing them without obscuring them.

4 Likes

I like this idea! Personally, bullet style is my favorite.
Having a two-color icon isn’t an issue at all with simple shapes like squares, but it can alter a bit the readability of the bubble icon for example… Not 100% sure though. It looks a bit weird, but maybe it’s just I’m not used to it.

Also, what about categories that have specific icons (like the padlock on the default staff category)? Would they be displayed as well?

It would make sense for tags in my opinion. # are used widely on pretty much every social platform.
I even customized tags to do this on three forums I’m working on. All tags are prefixed with # when linked in a post.
But it looks a bit off for category links.

2 Likes

IMO that’s the main reason why # should not use nowadays. Social side doesn’t use hashtags as tags, but as some weird short jokes. If we introduce using tags as those should use marking them with # we give a strong signal tagging should do same way what happends like in Instagram. Then we have to teach to users two things instead one: what tags are and how to not use them.

Again — if someone wants to use #, colors, icons or blinking gifs I don’t care as long all of those options are something an admin can choose from, not forced to use.

2 Likes

I think the color split can work for some people.

Please do not use the :label: icon since it would make it too easy to confuse tags and categories.

What about some [ > subcat ]? The > would look like a chevron used in fancy Emacs or Shell powerlines.

any suggestions for a less confusing alternative? we’ve been assuming that the tag icon would be the most obvious icon for tags… maybe # could work as an alternative if we move away from using it for chat channels? though our tags don’t really work like #hashtags do on other platforms… if we add colors for categories, would the tag icon then be less confusing?

3 Likes

Again… the most obvious solution is leave everything as it is now. And let admins use CSS as it is created… change the look and feel as they want.

All it needs is carefully planned CSS to offer easy customization. Everyone would be happy then (except users perhaps, but who ask what they want :wink: )

Indeed for tags, I second that, but not for subcategories.

1 Like

I like the idea of having colored bullet-styled categories mentions in posts and I also wholly share your feeling here:

Subcategories may be “sub”, but they are categories by design, and in regard of this, I suppose they should inherit the mentions design of the main categories. :person_shrugging:
Like @hellekin, I wouldn’t like them styled as if they were different things than categories like prepended by a :label: icon.

Two-color icons could work very well after all (and they could very easily be hidden with CSS for people who don’t like it - the opposite would be more complicated).
Two-color bullets have been used outsides posts for years without any complaint to my knowledge.
My only concern would be that a two-color bubble icon for chat mentions may seem weird at first, but this feeling has no real-life basis right now, especially when I think about the already widely used two-color bullets. :thinking:

1 Like

Perhaps because those had zero value and showed quite rearely to an user?

Are you now suggesting you would like offer two options: color coded or nothing?

I have still big difficulties undestand what is the value for readers, because it is actually hiding the target — reader must know colors means same as category and reader must know what color is connected to which category. And even then… what is the value for that, what an user gets and benefits?

Sorry, but that breaks every single UX-rule too.

On this kind of topic, there’s always a slope to becoming a bike-shedding discussion. I have no knowledge in UX.
I am a Discourse forums admin and a Discourse forums user, but I’m used to IT/web stuff and my views don’t necessarily reflect what’s best for a community. I’m here sharing my feelings and not facts (which would need data at best). :slight_smile:

1 Like

The reader would just work it out intuitively in passing, I think, especially as likely there will be a coloured box at the top of every topic. The writer just types # so wouldn’t have to know either.

I quite like the idea of moving away from displaying the hash symbol for multiple things, and would probably vote for the proposal above – one/two colour (category) box and chat icons, one-colour tag icons. Though the two-colour chat icon would take some getting used to.

Most admins have zero idea that is even possible.

Yes. I think you should not treat them differently (and there are also little known sub sub categories).

oh I see, I misunderstood! if it wasn’t clear we definitely won’t use the tag icon for subcategories! the tag only makes sense for tags.

3 Likes