Topic List design experiments


(Kris) #1

I’ve been looking into ways to make Discourse look a little cleaner if I have a few spare minutes here and there, so I figured I’d document it and see if anything stands out to anyone…

Tried a few things here… changed the new asterisk to “new” text, giving each topic a few more px of vertical padding, making categories a consistent width (dictated by the longest category)

Does the header need a box-shadow? Do the user buttons need outlines? Do topic titles have to be blue?

I’ve seen some reference to NodeBB as looking more “modern” in this thread… is there anything specific (visually) that makes you feel that way as a user?

I’ve been looking at Discourse for over a year now, so some fresh opinions can be nice.


(Victor Hooi) #2

The astericks to “New” I agree with - I never found the “*” particularly intuitive and this makes it much more intuitive, at not much more real-estate.

The wider category labels - not sure about it. I actually think it looks uglier making them this wide - and some of them e.g. “bug” just look a bit stupid when they’re that wide.

The header dropshadow I think could definitely be made more subtle that the current live version - it looks a bit “harsh” to my eyes. It could definitely be made a lot lighter (i.e. lower opacity).

And the outlines around the user buttons in the top right could definitely be removed - I agree with that.


(Kane York) #3

:+1:

Yeah, I think this is more of a personal taste thing. I wouldn’t want it to be everywhere. If you want it for your forum, see Uniform width category headings

Looks good… I think… Might be a bit too much in your example.[quote=“awesomerobot, post:1, topic:13479”]
Do topic titles have to be blue?
[/quote]

Black looks good to me.


(Bill Ayakatubby) #4

As long as it’s still obvious which topics I’ve visited and which I haven’t, you could make them fuchsia. :slight_smile:


(Dave McClure) #5

First of all, I think the layout of NodeBB is inferior in many ways. I’m not a fan of their categories page, and I’m not a big fan of their topic list page. And as I said in that other topic, a lot of things feel cluttered to me.

But here are some of the things that I think contribute to the more modern feeling of the default theme at nodeBB (or at least the theme on the nodeBB ‘meta’ board)

  1. more monochorme, less rainbows
    In general, the color palette is more minimalist and I think this helps make it feel more modern. There are places where a more limited palette could be employed here (the new/unread labels, the category labels, the progress bar, the topic titles)… The colors serve a purpose though, particularly on the categories, so any changes would need to be done with care.

  2. sleeker typogrpahy
    They use smaller, less bold fonts for titles within a topic and I think that looks more modern

  3. performance
    I know this is off topic and covered in that other thread, but I think the faster front end performance does significantly contribute to the modern feel.

Regarding your experiments:

  1. I do like the black (more minimal color palette)
  2. I do like the equal-width category labels. But it also makes the wider color palette more in your face. I think further experimentation with the treatment of category labels that makes less liberal use of the chosen color may be interesting. Not an easy task… perhaps use the color as the font color instead? Or as a smaller color-chip or icon that prefixes the text of each category? Again, not easy or obvious how to improve here without losing functionality!
  3. I think the extra padding does help.
  4. On the topic page, consider making the topic title sleeker and black too
  5. On the topic page, I think node’s treatment of the progress bar is worth looking at (in the header, sleeker)

All that aside, from what I’ve seen over the past few months, you’ve done a great job making things cleaner looking and easier for others to theme, which is arguably the most important thing because others will have the opportunity to try these things out too!


(Kris) #6

Absolutely agree. There’s a handful of visual pieces that I think they’re doing very well - but overall it’s not pleasant to look at.

Thanks for your input! I think Discourse has a really solid foundation going for it so far - but I’m really interested in pushing the base theme that extra step. They’re different beasts entirely, but I think Medium and Ghost absolutely nail the simple aesthetic.

It’s the right balance of typeface weights, color palette simplicity, and whitespace that really drives it home.


(Kamal Patel) #7

Just wanted to heartily second what @awesomerobot and @mcwumbly opined. Put a hefty dose of Ghost styling into Discourse, add a sprinkling of NodeBB, and Discourse goes from pretty to Renoir. (bad methaphor?) Additionally…

  1. If it’s not considered “stealing” of the bad kind, Node’s progress bar and fade-in / fade-out combine to trick users into thinking the forum is something made specifically for a company like Apple. Seriously, that’s the reaction I got when showing it to someone just today.

  2. The topic page / post list is widgetized. From the Question2Answer support forum, I’ve seen that adding widgets (like “new members” or whatever) is welcome. I didn’t see any widget discussion threads on here, but maybe that’s a potential feature. And I agree with what was said before about the sleeker typography. Bigger and bolder typography in some places and opposite in others makes things stand out more.

  3. A few Discourse forums have boxed their replies via CSS (which is the default look in NodeBB). I actually think that’s a much cleaner look by default, but I totally understand that the out-of-the-box Discourse doesn’t need to have a particular look since it can be changed.


(Hrishikesh Thakre) #8

My view is with the current design NEW user’s attention gets diverted from “Topics” text to “Avatar” and “Categories”. I found new users clicking more on those than on topic links.


(Dave McClure) #9

Some overlapping discussion here

https://meta.discourse.org/t/is-activity-too-ambiguous/12257/46?source_topic_id=13479

(Michael - DiscourseHosting.com) #10

Nice. So simple but much more intuitive.


(Jeff Atwood) #11

I like all these changes!*

I say we make it so!

* Except for fixed width categories, we already have enough problems with people setting up ENORMOUS six word category titles without adding fuel to the fire. Also makes the display ever more rainbow-noisy, as pointed out by others above. A little rainbow goes a long way, yo.


(Sander Datema) #12

Completely agree to everything except the category width.

Sorry, another thing I’d rather not see changed: I actually like the asterisk. It’s one of the few visual elements in a mostly textual interface. An asterisk tells me there’s a new topic, no matter how many replies there are. A number in blue tells me there are new posts in a topic I have seen. It’s clear to me.


(Jeff Atwood) #13

Maybe we could just do New in replacement of * only and keep the number alone when there are new post counts.


(Sander Datema) #14

You could, but why use a word when a symbol is so clear? You already have the words of the topic, the usernames, etc.

Anyway, the word ‘new’ will be in the translation.yaml so I’ll just replace it back to an asterisk. :wink:


(Jeff Atwood) #15

The asterisk was never that popular. Trust me on this. I know from popularity.


(Sander Datema) #16

Yes, but I’m a sovereign country on my own sometimes. And 100% of my people found that asterisk amazing.

But don’t you agree it’s odd to add more words in stead of symbols?


(Dave McClure) #17

regarding the categories, another thought to throw out there for fixed widths :grin: :sweat:

:

(hey, the topic title says experiments)


(Sander Datema) #18

And how would new users understand what those letters mean? But ok, experiment.


(Luke Larris) #19

Maybe when hovered over, the letters expand sideways to the right? I don’t think it would fit very well though with the design idea.

@awesomerobot Any thoughts on using different fonts for topic titles?


(Hrishikesh Thakre) #20

One more experimental mock-up