Should category go below the topic title on the topic page?

(Jeff Atwood) #1

I find that over time I’ve started to really dislike our categories-in-front design.

Category is very important, but putting it in front of the title might be a bit too strong. What if category was, instead, just below the title?

The sizing is probably fine as-is on the page but in the scrolled down docked header, things would need to shrink a bit.

Not proposing any change to the topic list page at the moment, just thinking about this for the topic page.

(cpradio) #2

I don’t feel strongly one way or the other about this especially since the header height doesn’t look to have grown much (if any).

Placing them on a separate line does grant us the ability to have longer title names shown before the ‘…’ takes place.

(Jeff Atwood) #3

Another advantage is that it lets you have somewhat longer category names (3 words, longer words) without much consequence. And combine them in category / subcategory form too.

You still shouldn’t have giant category names, but this opens some flexibility that we didn’t have before.

(note that I am NOT proposing any change to the category list or suggested topics which are still column-based)

(Dave McClure) #4

I’d be curious to explore that in another topic though… (Also in email digests)

(cpradio) #5

What affect (if any) on mobile devices? Right now I think the category is hidden… (if I recall correctly)

(Dave McClure) #6

It’s only hidden when you scroll down (the whole title is hidden too). At the top of the topic you see it all.

(Gerhard Schlager) #7

I like that proposal. Shrinking the category names shouldn’t be a problem. They aren’t that important when I’m reading a topic.

(Jeff Atwood) #8

I think that (mobile) also looks pretty bad and would look a lot better with the categories underneath the title, too.

(Kris) #9

I don’t think it’s a bad idea… though it does feel a bit odd with short category names… end up with a whole lot of awkward blank space under the title. Is this solving for the (hopefully) less common problem of long category names and leaving the short category names with some awkwardness?

Would it be crazy to suppress category names in the scrolled down header entirely?

(cpradio) #10

Also would it make sense to indent the category so it lines up with the text and not the star? Would that help with the offset of short category names?

Edit, just realized it is this way in Jeff’s mockups but not in @awesomerobot’s mockup.

(Kris) #11

Yep, that alignment makes more sense - ignore my mockup. Feels a bit odd to me despite that.

(Sam Saffron) #12

Also the star looks totally out of place there (but you know how I feel about star anyway :slight_smile: )

(Jeff Atwood) #13

This still really bothers me.

(Trivia: way way back when we used to have category on the right side of title, but that was also when we allowed titles to span multiple lines in the dock. Robin changed it one day and basically, nobody noticed. :confused: We don’t allow multiple line docked titles any more, so I don’t think category on the right is possible, it’d be truncated into …)

@awesomerobot What we have now only works well on very short category words like “ux” and “help” and so forth. It falls down on long single words and is a disaster on multiple words, much less category/subcategory. The category is a very important part of the topic, almost as important as the other words in the title, really – and it’s a key navigation element if you want to see more topics of that type.

I think category has to be in the docked title in some form. We do show category below title in a lot of other places and I think it’s a much better overall layout.

There is quite a bit more room for “title before scrolling up” versus “docked title”, so we could have a slightly different approach for those two forms.

(Dean Taylor) #14

Perhaps slightly distracting - but just “floating” an idea:

EDIT: I wasn’t logged in at the time so the star isn’t there.

EDIT 2: A couple with the star

(Gerhard Schlager) #15

It’s probably too complicated, but it would be awesome if the category position depends on its length.

Say, categories with max 5 characters are shown in front of the title and on the same line. Everything else goes below the title. It just looks weird when short titles like “ux” are shown below the topic title.

(Dave McClure) #16

or perhaps just make the badge width have some minimum to make it look less weird?

(Jeff Atwood) #17

Hmm, I think an extra-wide badge containing     UX     would look pretty weird.

(Kris) #18

Ergh, yeah I understand why moving it is a good idea — it’s just that I can’t think of a great place to put it.

This is just so much better

than this

I tried hanging the category, like @DeanMarkTaylor did… which is a bit odd, but keeps that topic title aligned nicely

So I guess the two lines is probably the best option?

(Dean Taylor) #19

Perhaps something that makes the floating category names a little less of an eye catching element is needed?

Just playing with ideas - thought I would share.
I’m sure an actual designer could do far better - on a two line design

Note white border around label

Note gradient top

Note drop-shadow

Note additional category example

(David Maxwell) #20

I like the alignment, but the fact that it crosses the topic line REALLY bothers me visually. It’s lending more credence to the topic categories than it should - AND it interferes with the topic being displayed.