# Tags display design on front page

**URL:** https://meta.discourse.org/t/tags-display-design-on-front-page/31816
**Category:** UX
**Created:** [06.Август.2015 07:28:28 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816 "2015-08-06T07:28:28Z")
**Posts on this page:** 20
**Page:** 1

<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: [04.Август.2015 22:07:53 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/1 "2015-08-04T22:07:53Z")

</div>

We have added tags in both search and topic lists.

Help us paint this bike shed!

---

<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: [05.Август.2015 10:12:54 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/2 "2015-08-05T10:12:54Z")

</div>

I am leaning towards this design

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

I tried moving categories below, but it just became too loud. I think the glyph helps a lot cause it allows us to get rid of the bolding of tags and shares a visual language with categories.

---

<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: [05.Август.2015 13:50:10 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/3 "2015-08-05T13:50:10Z")

</div>

anything is better than what we have now with tags randomly slapped on the end of titles.

---

<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: [05.Август.2015 14:56:07 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/4 "2015-08-05T14:56:07Z")

</div>

Hi Sam, that’s cool, though the problem with only using the additional line for tags is that some topics won’t have any - so you get a layout that is not consistent.

I’m pushed for time right now and have literally spent 60 seconds on this:

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

There are a number of positives to this:

- Always consistent whether thread has tags or not
- Opens up the space that was previously used for the category for other cool stuff (icons or text to represent new threads, number of new posts (watched threads), whether you have posted in it, even a square block of the colour of the section might be worth looking at, plus loads more)
- Discourages boredom when going down the list of threads

On the last point - we generally read web pages in blocks/columns (so you’ll go down the list of threads on the far left, rather than read every line from left to right) so having more information available in that column provides more opportunity for something to catch the eye of the reader to click on. It also makes it more interesting - so users are more likely to read more of it.

---

<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: [05.Август.2015 15:48:55 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/5 "2015-08-05T15:48:55Z")

</div>

I’m getting very worried about noise. I made an attempt at fitting tags in with categories. Even though I didn’t particularly like the end-result (this looks just as noisy to me as the alternatives), I’ll put it in here for reference.

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

---

<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: [06.Август.2015 07:35:10 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/6 "2015-08-06T07:35:10Z")

</div>

The sad truth of the matter is that tags are not really needed here, on this site.

However tags can be useful if you find yourself needing “thousands” of categories but again, not really the case here on meta.

I think Sam is right though, underneath title is the only way. Maybe if they were a little bit smaller.

---

<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: [06.Август.2015 07:38:29 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/7 "2015-08-06T07:38:29Z")

</div>

Honestly the only powerful / useful tags on meta would be staff only tags.

Cause I would use them to tag urgent bugs and you could use them to tag release features.

---

<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: [06.Август.2015 07:42:12 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/8 "2015-08-06T07:42:12Z")

</div>

I really hate this tag glyph a lot. Like a lot, a lot. It is hideous.

---

<div class="post-metadata">

### Author: ![jvzr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jvzr/32/102885_2.png) [@jvzr](https://meta.discourse.org/u/jvzr)
#### Post date: [06.Август.2015 07:44:19 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/9 "2015-08-06T07:44:19Z")

</div>

I do too.

Is the display of tags really necessary? Candid question. I figure it’d be mostly used as a search tool or via other means (dropdown menu, etc.). I don’t know if I really need to know the tags associated to every thread in all the categories? Or maybe they should only be displayed within a category, re:

> [@codinghorror](#):
>
> However tags can be useful if you find yourself needing “thousands” of categories but again, not really the case here on meta.

---

<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: [06.Август.2015 07:46:51 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/10 "2015-08-06T07:46:51Z")

</div>

It’s an experiment will remove/change later

---

<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: [06.Август.2015 07:48:45 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/11 "2015-08-06T07:48:45Z")

</div>

You can disable with one CSS rule,

However it would take thousands of carefully crafted CSS rules to recreate it if the backing store did not render tags in list

---

<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: [06.Август.2015 07:49:06 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/12 "2015-08-06T07:49:06Z")

</div>

It is just on as an experiment here, really. Tags are not needed 95% of the time _on this site_ since the category covers it.

I am **fine with the non-bolding** , I think that looks better, but that horrible rotated tag glyph has to go. The tag word alone should suffice for tags, they don’t get a glyph like categories do, because they are lesser, minor, optional groupings.

Some other glyph might work better for tags like a grey square outline, to echo categories, not sure.

---

<div class="post-metadata">

### Author: ![jvzr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jvzr/32/102885_2.png) [@jvzr](https://meta.discourse.org/u/jvzr)
#### Post date: [06.Август.2015 08:01:25 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/13 "2015-08-06T08:01:25Z")

</div>

> [@sam](#):
>
> You can disable with one CSS rule,
> 
> However it would take thousands of carefully crafted CSS rules to recreate it if the backing store did not render tags in list

Sorry, I meant no disrespect on your work. And it actually makes sense 🙂 Cheers!

> [@codinghorror](#):
>
> I am fine with the non-bolding, I think that looks better, but that horrible rotated tag glyph has to go. The tag word alone should suffice for tags, they don’t get a glyph like categories do, because they are lesser, minor, optional groupings.

How about “tags: plugins, tagging”?

---

<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: [06.Август.2015 08:06:07 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/14 "2015-08-06T08:06:07Z")

</div>

Yeah the tags glyph in font awesome is awkward I may try a small square or something like it

---

<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: [06.Август.2015 08:06:50 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/15 "2015-08-06T08:06:50Z")

</div>

That would quickly become a repeated text “ago” discussion, and as Bruce Banner once said, "you wouldn’t like … _to have that discussion with me"_. 😉

 ![](https://global.discourse-cdn.com/meta/original/3X/d/6/d6e8c566d96a656ee0cae16e78edae4a9eb3c56d.jpg) 

The comma might be a nice touch though @sam between tags.

---

<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: [06.Август.2015 08:07:20 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/16 "2015-08-06T08:07:20Z")

</div>

> [@jvzr](#):
>
> tags: plugins, tagging

You would see the word tags 30 times on the screen, we really dislike that level of repetition

---

<div class="post-metadata">

### Author: ![jvzr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jvzr/32/102885_2.png) [@jvzr](https://meta.discourse.org/u/jvzr)
#### Post date: [06.Август.2015 08:08:12 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/17 "2015-08-06T08:08:12Z")

</div>

> [@codinghorror](#):
>
> The comma might be a nice touch though @sam between tags.

Nice way to limit the number of times the actual icon is repeated within the page then.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [06.Август.2015 11:38:06 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/18 "2015-08-06T11:38:06Z")

</div>

Can you only show the glyph at the beginning with a comma separated list behind it?

![](https://global.discourse-cdn.com/meta/optimized/3X/9/b/9b6a0d6f1e07d7c6503458a104a6c0e115705264_2_690x34.png)

> [@erlend\_sh](#):
>
> I’m getting very worried about noise. I made an attempt at fitting tags in with categories. Even though I didn’t particularly like the end-result (this looks just as noisy to me as the alternatives), I’ll put it in here for reference.

@erlend_sh, I don’t like it under categories because the space is limited, how do multiple tags appear?

---

<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: [06.Август.2015 12:07:10 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/19 "2015-08-06T12:07:10Z")

</div>

###Circles

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

###Squares

I really like cause it echoes the category square nicely

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

###Nothing

Which is a blank canvas for everyone to style however gets lots in the title and is just floating there

![](https://global.discourse-cdn.com/meta/original/3X/8/0/80d7bb6b7fa1173e4acecd5ccd8537e5f1b2ced7.png)

@awesomerobot what is your favorite poison here?

10 virtual points go to the first person who suggests painting this red

---

<div class="post-metadata">

### Author: ![ndalliard](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ndalliard/32/44338_2.png) [@ndalliard](https://meta.discourse.org/u/ndalliard)
#### Post date: [06.Август.2015 12:12:47 UTC](https://meta.discourse.org/t/tags-display-design-on-front-page/31816/20 "2015-08-06T12:12:47Z")

</div>

This looks awesome!!

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

[Next page](https://meta.discourse.org/t/tags-display-design-on-front-page/31816.md?page=2)
