# Tags display design on front page

**URL:** <https://meta.discourse.org/t/tags-display-design-on-front-page/31816>\
**Category:** UX\
**Created:** [Agosto 6, 2015, 7:28am UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816 "2015-08-06T07:28:28Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)\
**Post date:** [Agosto 6, 2015, 12:31pm UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/21 "2015-08-06T12:31:13Z")

</div>

I have one suggestion: can we paint it red? 😉

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [Agosto 6, 2015, 1:22pm UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/22 "2015-08-06T13:22:02Z")

</div>

As much as I agree that the tag glyph isn’t a fantastic icon aesthetically, it’s really easy to understand at a glance.

I wouldn’t repeat it though — just use one and the have a comma separated list

![](https://global.discourse-cdn.com/meta/original/3X/7/6/76917f80c09a4e5eb2572257ba447800542afbd5.png)

---

<div class="post-metadata">

**Author:** ![AstonJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/astonj/32/215041_2.png) [@AstonJ](https://meta.discourse.org/u/AstonJ)\
**Post date:** [Agosto 6, 2015, 1:35pm UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/23 "2015-08-06T13:35:25Z")

</div>

Looks good Sam (works better than I thought it might).

I prefer the tag glyph as well.

Also, looking thorough the list of topics now you’ll probably get a better idea of what I mentioned in my last post; that tags now enjoy a more elevated position (say, than categories) because they are in your direct line of view as you scan the list of topics. So wonder if it’s worth playing with auto-adding the category name as a tag.. or experimenting with adding more info in that line as per my mockup and including the category, topic starter, date it was started etc.

---

<div class="post-metadata">

**Author:** ![clay](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/clay/32/102156_2.png) [@clay](https://meta.discourse.org/u/clay)\
**Post date:** [Agosto 6, 2015, 4:40pm UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/24 "2015-08-06T16:40:51Z")

</div>

@sam  
Tagging is very useful. One suggestion that I have is that if you open an old topic and add/change tags on it, that should probably bypass the “bump” to the top of the “latest” list. Otherwise, when a mod/admin goes back and tags older content, it screws up the default view for users.

I’ve been doing this on our Discourse install. Sometimes it seems to bump posts and other times it doesn’t. I’m not sure why it is inconsistent.

---

<div class="post-metadata">

**Author:** ![DavidGNavas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidgnavas/32/68313_2.png) [@DavidGNavas](https://meta.discourse.org/u/DavidGNavas)\
**Post date:** [Agosto 6, 2015, 4:49pm UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/25 "2015-08-06T16:49:29Z")

</div>

What about #?

![](https://global.discourse-cdn.com/meta/original/3X/5/a/5ac4e6ec4423292b1c0654965ada1b3930198c7e.png)

---

<div class="post-metadata">

**Author:** ![holden](https://avatars.discourse-cdn.com/v4/letter/h/e36b37/32.png) [@holden](https://meta.discourse.org/u/holden)\
**Post date:** [Agosto 6, 2015, 4:56pm UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/26 "2015-08-06T16:56:41Z")

</div>

@sam  
My first vote is for the hash symbol  
Second vote is for the square

The glyph seems old

---

<div class="post-metadata">

**Author:** ![jspautsch](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jspautsch/32/62603_2.png) [@jspautsch](https://meta.discourse.org/u/jspautsch)\
**Post date:** [Agosto 6, 2015, 5:55pm UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/27 "2015-08-06T17:55:38Z")

</div>

The hashtag is an interesting idea. Modern, ubiquitous, and could be used to reference a tag in a post.

[Edit] Heh, forgot that hashtags in post mark headers.

Also, on my site I found that giving the tags a link-esque style (some kind of desaturated blue) helped differentiate them from titles without drawing too much attention.

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [Agosto 7, 2015, 12:36am UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/28 "2015-08-07T00:36:29Z")

</div>

We could also do “clear” squares, since a grey square could be a category with color set to grey.

 ![](https://global.discourse-cdn.com/meta/original/3X/0/7/07b7585caad24ea9741e34e1b42b3b2650f29160.png)

Bullets also look fine to me, personally.

We could also try just the comma between words:

![](https://global.discourse-cdn.com/meta/original/3X/1/1/11bb992154fc88ec4eb53662c1da1c2e7d1d75da.png)

> [@jspautsch](#):
>
> [Edit] Heh, forgot that hashtags in post mark headers.

This is 100% deal-breaker. No hashtags. But IMO it does work quite well, despite the fighting with markdown over

#hash  
`#hash`

This is why we are pushing for space required to make headers in CommonMark there, `# hash` versus `#hash`.

@awesomerobot having the tag glyph repeated on many topic lines is going to create the same problem @sam alluded to about having categories underneath.. it gets very busy.

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [Agosto 7, 2015, 12:39am UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/29 "2015-08-07T00:39:21Z")

</div>

Sorry to paint the bike shed but clear squares is what I get when an icon font fails to load or someone posts an emoji on an iPhone.

I think I am just going to keep default ultra simple, and add a site setting so people can pick “tag” glyph or Stack Overflow style box.

It makes it much easier for people to style tags however they want to and provides some reasonable defaults to work from.

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [Agosto 7, 2015, 12:40am UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/30 "2015-08-07T00:40:22Z")

</div>

I absolutely oppose the tag glyph. It is horrible.

---

<div class="post-metadata">

**Author:** ![jspautsch](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jspautsch/32/62603_2.png) [@jspautsch](https://meta.discourse.org/u/jspautsch)\
**Post date:** [Agosto 7, 2015, 1:33am UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/31 "2015-08-07T01:33:59Z")

</div>

> [@codinghorror](#):
>
> We could also do “clear” squares, since a grey square could be a category with color set to grey.

Don’t forget that anything that matches the category bullet has to match the other possible category styles admins can choose from (adjust dynamically).

Seems to me that unless the symbol explicitly means something that people will recognize (e.g. the tag glyph or a hashtag) or is somehow related to how categories are labeled, it’d be better to go with the “nothing” option. It’s cleaner and users will quickly learn what the tags are.

> [@sam](#):
>
> I think I am just going to keep default ultra simple, and add a site setting so people can pick “tag” glyph or Stack Overflow style box.
> 
> It makes it much easier for people to style tags however they want to and provides some reasonable defaults to work from.

Ah, basically this, nevermind.

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [Agosto 7, 2015, 1:40am UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/32 "2015-08-07T01:40:13Z")

</div>

What we decided to do is not style them at all for now, and each site can decide for themselves. I do not see a clear winner here in any of the mockups, other than a comma between the tags.

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [Agosto 7, 2015, 2:18am UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/33 "2015-08-07T02:18:15Z")

</div>

> [@clay](#):
>
> @sam  
> Tagging is very useful. One suggestion that I have is that if you open an old topic and add/change tags on it, that should probably bypass the “bump” to the top of the “latest” list. Otherwise, when a mod/admin goes back and tags older content, it screws up the default view for users.
> 
> I’ve been doing this on our Discourse install. Sometimes it seems to bump posts and other times it doesn’t. I’m not sure why it is inconsistent.

The only way that could happen is if the only post is the first post. Then the “someone edited the last post” logic kicks in, and since the last post is the only post is the first post…

Utterly off topic for this conversation though.

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [Agosto 7, 2015, 9:48am UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/34 "2015-08-07T09:48:31Z")

</div>

Now that the bikeshed has been painted, this is what we ended up with:

tag style “simple”

![](https://global.discourse-cdn.com/meta/original/3X/0/5/055d6fbf4f29835675d6e96b3ec2d68fb506af13.png)

tag style “bullet”

 ![](https://global.discourse-cdn.com/meta/original/3X/e/d/ed09edfd0535f1d6a4f09e15469367baf00aaf56.png) 

tag style “box”

 ![](https://global.discourse-cdn.com/meta/original/3X/7/5/75177a6ad9f155189fbc49a1e329ed58875bd991.png) 

You will need to be on v1.4.0beta8 +5 or later Discourse to get these options.

Simple is default.

---

<div class="post-metadata">

**Author:** ![AstonJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/astonj/32/215041_2.png) [@AstonJ](https://meta.discourse.org/u/AstonJ)\
**Post date:** [Agosto 7, 2015, 5:25pm UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/35 "2015-08-07T17:25:33Z")

</div>

Any thoughts on these?

 ![](https://global.discourse-cdn.com/meta/original/3X/e/f/efbe55f3031cd80277a0551c8b8001bcbe78b018.png) 

Both of these free up the categories column (do we feel it adds enough value to take up such valuable space?)

---

<div class="post-metadata">

**Author:** ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)\
**Post date:** [Agosto 12, 2015, 10:13am UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/36 "2015-08-12T10:13:38Z")

</div>

I like this (current styling on Meta):

 ![](https://global.discourse-cdn.com/meta/original/3X/8/4/84ecd9d6b88c73a85c7500c4dc6446edc56de727.png) 

It quickly becomes apparent that when tags are used for something other than as a sub-sub-category but rather a unique identifier that can be applicable across multiple categories, it doesn’t need to be prefaced with a “tags:” or a glyph, because it’s plain English (or, language).

On a slightly different note, what’s up with the unique coloring? I see some tags have different colors. This seems like a new feature; I’m intrigued!

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [Agosto 12, 2015, 11:53am UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/37 "2015-08-12T11:53:49Z")

</div>

There is a secret reason tags are not totally obnoxious on metas front page:

“suppress overlapping tags in list” : Hide tags from list views, if they overlap with title

Additionally I have been nuking some totally pointless tags, like “showcase” that had one topic. Medium term I don’t think I even want TL0 and TL1 tagging stuff on meta.

The magic styling was added manually to our staff tags: “A list of tags that can only be applied by staff members”

Go ahead and try to tag something with “planned” 🙂 or try removing that tag.

---

<div class="post-metadata">

**Author:** ![RBoy](https://avatars.discourse-cdn.com/v4/letter/r/2bfe46/32.png) [@RBoy](https://meta.discourse.org/u/RBoy)\
**Post date:** [Setembro 19, 2017, 9:54pm UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/38 "2017-09-19T21:54:59Z")

</div>

Was there any consensus on this? Am trying to figure out how to embed a tag in a post. Say I want provide a link that will open a page with all posts with that tag is there a shortcut way to do it?

The hash I believe is used to link to topic categories.

---

<div class="post-metadata">

**Author:** ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)\
**Post date:** [Setembro 19, 2017, 9:55pm UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/39 "2017-09-19T21:55:29Z")

</div>

You mean like #tagging::tag?

```
You mean like #tagging::tag?

```

---

<div class="post-metadata">

**Author:** ![RBoy](https://avatars.discourse-cdn.com/v4/letter/r/2bfe46/32.png) [@RBoy](https://meta.discourse.org/u/RBoy)\
**Post date:** [Setembro 19, 2017, 11:43pm UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/40 "2017-09-19T23:43:52Z")

</div>

For example I want to embed a link to pull up all  
Posts that are tagged with the tag `ux` , is there a way to do that?

[Página anterior](https://meta.discourse.org/t/tags-display-design-on-front-page/31816.md?page=1)

[Próxima página](https://meta.discourse.org/t/tags-display-design-on-front-page/31816.md?page=3)
