Sam's personal "minimal" topic list design

theme-full

(Sam Saffron) #1

Theme Location: GitHub - SamSaffron/discourse-simple-theme: Sam's simple discourse theme

Preview: https://theme-creator.discourse.org/theme/sam/simple

I have been thinking about this a lot, and decided to take a shot at a “minimal” front page customisation.

To select this theme head to your profile: https://meta.discourse.org/my/preferences and select the theme. (remember to click save)

Here is a list of things I did

  • Remove Views
  • Remove Star
  • Get rid of avatar images use names instead
  • De-emphasize categories
  • Use more “traditional color” for topic link
  • Use replies instead of posts

Some conclusions from my experiment:

  • I think “Replies” is much more natural than column name than “Posts”, technically its simply “Posts - 1”, however its a far clearer concept to convey and it correctly calls attention to Topics with only 1 posts, cause 0 is a number that stands out.

  • Long term I think we should offer a “less loud” category style, the current rainbow of colors puts categories in a far more important bucket than the content, categorization feels secondary to title to me.

  • I feel the sea of avatars is a bit loud, not recommending changing it right away but I think it does add a lot of busyness to our front page

  • For me the more traditional topic title colors work better, I find they catch the eye and call attention to the title nicely

  • The simplified design is definitely a lot more “boring”, but I find working through very long lists easier with it.

  • I am really not sure about zebra striping anymore, I think its actually causing more harm than good, the subtle line works way better in my simplified design

  • Star should go, its just adding noise for almost no gain

  • I am not going to get into an “ago” argument again, but for the simplified design I would have preferred “1 hour ago” as opposed to “1h” the extra verbiage would have added clarity and there is room above the name.

I don’t think the “simple design” is better than our current design, I just think it is different, and perhaps more familiar to existing forum users. It packs less information.

Interestingly the “simple design” does not work at all any wider than 850px or so, which calls out to a need for some sort of auxiliary column to complement it (with faq or shoutbox or ads or whatever).

A very cool thing is that this is all achieved using the customize menu.

###PRE-REQ

Select category style bullet in site settings.

Theme lives at: GitHub - SamSaffron/discourse-simple-theme: Sam’s simple discourse theme click “Import” on the theme screen to add it.

Install guide

How to install a theme or theme component


Minimal Discourse
The end of Clown Vomit, or, simplified category styles
How To override an existing handlebars template from plugin - Part II
A more robust ecosystem for creating, sharing and modifying themes
Minimal Topic List Design with Sidebar for Navigation
Reddit Style picture thumbnail on the left
How can I add some custom html to the bottom of the categories page?
Do We Need: The Stats Post, Views, Actively Stats on Homepage?
How do I change the interface layout without using "display:none;"
ensure_logged_in with handlebars?
How to add header menu links
How to add header menu links
A few simple customization examples for newbies
Modify Users column to contain only one avatar (latest poster)
Most liked messages in the topic
Homepage overhaul!
How to embed JavaScript as a customisation?
Timeline Discourse
Issues with my Android Users
Add the mobile UX as a theme option to desktop users as well
WIP: Customize topic list per category
Original Poster Headshot as the first column on Topic List Pages
Requiring users to set a custom avatar before posting
[PAID] We need someone to customize a Discourse design
Show PM participants in title bar
Is it possible to re-order the topic list columns (Front Page)?
Alternative display modes for topic list
Username, user title, and post count beside avatar
Topic List Previews
Questions about site customisations
Customize/Design Category
Is there a guide for custom themes?
Do We Need: The Stats Post, Views, Actively Stats on Homepage?
Sort topics (within category) in alphabetical order by default
Customizing the Home Screen to show Tiles for Topics
Is there a way to hide the tabs of replies, views, activities, users, etc
Paid: Plugin 9gag clone for Discourse
Dark, Simplified, and Slightly More Spacious Discourse
Can I customize Discourse by editing Ruby files in the same way I customize Wordpress by editing PHP files?
Adding unique class names to to the elements in the topic map
In theory, could you make discourse look like phpBB?
New Category request: "themes"
Change the application header
Reddit Style picture thumbnail on the left
About cultural differences of layout of "community software"
Edit existing source of the forum
Edit existing source of the forum
Reddit Style picture thumbnail on the left
(Alessio Fattorini) #2

Great work @sam sounds good! I really like it


(山) #3

I really like the changes. You went back to some sort of square one, but it helps to see it in a minimal way so things can be re-added but carefully considered.

My suggestions would be to color the [categories] with css as the same color/style for the drop down in the upper left so there’s visual cues with the associated category colors already established. For the names, maybe we could take a page from the OP meta bar and style it in a similar fashion so avatars still can be seen, since most use the avatar as a quicker visual cue than text. Like this:

That way there’s only two avatars to each topic list item. The OP and the last reply. Instead of what we have now which includes five avatars instead of just two. Not to mention the OP meta bar already has this information (who has participated in the discussion so far).


(Jeff Atwood) #4

It’s good, but you’ve gone from being avatar heavy to being text heavy in kind of a nonsensical way. People process images (particularly of faces) much faster than names so I think most of all I’d recommend replacing the user names with images, would be less text to process.


(山) #5

Yes, that is the gist of my reply, I am glad you agree. Same for category colors. I think those should come back as well for the same reason. Otherwise, I like @sam’s edits. It’s a nice re-start to add things as absolutely necessary.


(Régis Hanol) #6

Here’s a quick try at adding avatars :baby:


(Sam Saffron) #7

I would retain the usernames here, not entirely sure I want the avatar for creator, but regardless usernames should stay.


(山) #8

For what it’s worth, I used @sam’s screenshot and did a little shopping:

You can also style the OP meta the same way as another column next to that.


(Jeff Atwood) #9

I personally, I much prefer the avatars to usernames – if you are shooting for minimalism that is the way. Also, the word by does not need to be repeated over and over on the page, and can be removed.


(Dave McClure) #10

Taking off from @purldator’s mockup:

  • A little color for the categories via an fa-tag icon.
  • Remove OP name and timestamp from under the topic titles so they are easier to scan


(Sam Saffron) #11

I like what you did with categories, but removing op is a step too far imo, also avatar seems a bit big to me.


(Mittineague) #12

To interject for some clarification, we are talking optional CSS etc. here and not changes to the Core?


(Sam Saffron) #13

To me a huge goal here is to make stuff more extensible, ultimately I do not think the “simple” design should replace what we have now. I do think we need to cull out stars and quieten down categories in our default view, but ultimately there are different types of consumers for Discourse with different needs.

As you simplify, you lose information, which may be desirable to some communities and not desirable for others.

If a community say moved from years on phpbb or what not to Discourse it may make sense for them to use a “simple” design. If a company has a need for an aux column it may make sense to use a “simple” design. Long term I hope the “wizard” you use to setup Discourse allows you to select between a few themes that cater to different groups.


(山) #14

That’s my doing and mostly the shop’ was meant as a proof of concept, not so much a solid final draft. I’d be okay any which way the avatar’s size may become in the end.


(Sam Saffron) #15

Its a mish-mash topic now, which is kind of confusing to everyone.

The default core changes being discussed are:

Merge star and bookmark, do away with stars in topic list
Replies vs. Posts (also here)
Quieten down categories
Color choices

But ultimately there are 2 distinct views being discussed here,

  1. A minimal view
  2. Our default view

(Sam Saffron) #16

Thing is that it is not, colors are hardcoded into a style tag on an element, styling categories now is very hard and requires patching of discourse core.


(山) #18

Interesting, didn’t know that. Hmmn.

I do hope there might be a howto in the near future on ways to go about editing the theme’s hardcode ‘gracefully’ without breaking it in the future with an update to the core. I think if users are given a push in the right direction on how to hack the theme to their liking, then there might be less of a brouhaha with people requesting the removal or addition of elements on the current ui, such as was the original topic at hand. (And if there is a definitive howto on this, I need to find it!)

EDIT: Just noticed @abarker’s reply in the original thread, which is stating the same. (requoting here as ref for this new thread)


(se oli tonnin seteli) #19

I second this too. Even though I understand and respect the goals behind discourse UI design, the looks are something there can never be a strong consensus on because Discourse is in my opinion already very refined and quite spot on.

While codinghorror sees the minimalistic view as less readable and prefers avatars over usernames, I personally think the small avatars are nothing but irritating noise, and some people might argue that avatars should not be used at all while others might want more and even bigger ones.

My professional opinion is, despite sounding shallow or giving the impression that “i’m not getting it”, these issues are effectively matters of taste, so making customization easier also brings the prime ideas of Discourse closer to both admins and users that are not yet comfortable with Discourse.


#20

I think replacing them with names makes things just as busy, just in a different way. A wall of color looks better to my eyes than a wall of text.


(Alessio Fattorini) #21

I do think this is a Great idea :wink: more more adaptable


Show "topic-excerpt" for all post on Latest Page