How difficult would it be to make the Discourse UI more like Flarum?

This already works great @awesomerobot!
Could you please add an “All Categories” banner as well?

3 Likes

Nice work! Anyone having this live on their Discourse? I would like to check it out how looks like…

1 Like

I add this in my forum and it’s perfect! A little thing is that it takes only the first lines of the description of the categories and don’t show links.

This is my text with links :

We only see the first two lines (and without links)

1 Like

I wish there were more discussion here about some of the other potentially nice aspects of Flarum. Flarum just graduated to 1.0, finally. And although I continue to feel Discourse is superior in most respects, I also like some things about the Flarum design/UI. So I hope if others likewise miss some Flarum-like aesthetics, they will also chime-in here and maybe we can finally get a theme built (I, sadly, lack the skills, but may be able to contribute monetarily to a group effort on it if there is interest).

For now, to get started on addressing things besides the header, I believe the sidebar can be mostly replicated with:

Although it does not support Tags. Alternatively this:

Problem is that both appear to be in need of some update/maintenance or refactor.

One feature/design approach that seems entirely missing from Discourse, AFAIK, is a more obvious text box-like “reply” area, which I think is a nice alternative to the “Reply” button:


Notice how this is more than just a possibly “easier” or more “frictionless”-looking reply approach. The addition of the avatar image already there is actually an interesting detail that I personally think encourages interaction because it subtly makes you feel like you’re already involved.

In fact, I think this is probably a good enough idea to deserve a feature request of its own…

2 Likes

Also consider: Custom Layouts Plugin

2 Likes

Oh yes, good point! I will try it out ASAP.

Right; reply being a distinct action you have to trigger, rather than a prefilled input box is a highly intentional design element from the earliest days of Discourse. We want to encourage reading, not immediate replying because “someone is wrong on the internet”. I think a lot of current problems on the internet can be traced to too many people responding too quickly, with not enough thought.

The introduction of the chat feature should also take pressure off the “I must immediately respond with the first emotion that comes to mind” impulse as well, and direct it more appropriately.

If you want sidebar, that’s a Teams feature.

3 Likes

Hold on now Jeff, I get the feeling you may be misunderstanding the request (and/or the way Flarum works). You know I am quite familiar with the reasoning behind Discourse and many of its design decisions. :smiley: Anyway, probably better to continue this over on the topic I created for it:

Hello,

Finally from Flarum I came to Discourse because of very many reasons (Which is Better? Discourse or Flarum? - #31 by GVG), but still more prefer Flarum’s more light-rounded-elegant design. Maybe someone already make a more elegant style for Discourse as clear CSS or plugin etc?

If not - can anyone help with it? I can write a detailed specs.

1 Like

This theme is quite nice! ☁️ Discourse Air Theme, there are more options in #theme-full as well!

10 Likes

Thanks, dear! :slight_smile:

But when I post some suggestions about that Theme - author recommend me to post them contrary here… so here they are:

My portion of suggestions:

  1. At my opinion almost whole Discourse (all text and spaces and icons and top menu panel etc) are monstrously huge. Just try to open for example MS Word or web Outlook, take a closer look how effective and compact MS devs use each minimal space! How accurate and extremely functional each panel and icon! After that change back to Discourse - and it will shock you with it abnormally huge text, monstrous empty spaces, big icons, too simple design, etc. The default Discourse text&spaces size is not only unusual (I’ve never don’t see a such huge styles at thousand of web resources or many other forums as Invision/Xeno/Flarum/etc) but what is more pity - it’s just ineffective space wasting and force users to scroll more, than they must - it’s inconvenient. So at this point I would like to see the more compact for about 20-30% style.
  2. Categories list - I really don’t like the default Discourse Categories listing because of lack of useful information at Categories list at left and conversely overload with unneeded topics at right. For me it was always uncomfortable to read Discourse Categories page. Please, just look to Invision/XenForo forums categories pages - they present more useful info, they are more accurate, more compact, often can be visually extended with icons or even images. At aspect of Categories represent - Discourse Categories page are really out of date and looks messy! Is it possible to add icons to Discourse Categories? Can you display them like this: https://ipb.stylesfactory.pl or
    Forums - Codebite.dev - Theme IPS etc? Or not so elegant but still much more comfortable and useful: XenForo community
  3. I really like Flarum Tags-Categories menu at left - it helps for faster navigation and looks nice. Is it possible to always (at all categories main and nested) display all Categories at left not as dropdown menu, but as always visible menu?

I’m not familiar with Discourse core components separating so don’t know - those improvements must be made at Theme or as Plugin or by simple custom CSS?

2 Likes
  1. It’s surprising that you consider the text monstrous! it’s 15px by default, which I think is 1px larger than Flarum. We’re still on the small size in my opinion! If you look around at some news websites (which are optimized for easy reading), the standard is usually larger than 16px (which is the browser default). Many are closer to 20px for articles!

    The width of text is also a conscious decision on our part, shorter line lengths are generally considered easier to read Line length | Butterick’s Practical Typography (but of course this can be subjective, we try to land on defaults that work for most people).

  2. We have 6 different category page styles to choose from, they have varying amounts of information, and they can all be customized with category images. If you’re an admin you can visit a category page and add images by clicking the wrench

  3. It’s possible to build a sidebar nav in a theme, though a little trickier to make it always present. There’s a theme component that does this for topic list pages: Topic list sidebar navigation, though it reuses the dropdown menu so it’s not 100% what you’re after. We have to support sites with dozens of categories, which is why we tend to stick to the dropdown.

it varies… if you want things to be smaller and more compact, that can definitely be achieved with CSS! But sidebars and other additions will need more advanced theming, some of which is covered in the developers guide to themes.

11 Likes

Hi, Kris! Thanks for detailed answer!

Agree with you - the main Discourse messages text are pretty good enough, can be just a slightly smaller (as you say 15px-14px). I just start to explore your Discourse and not complete the full list of improvements which I need yet. At this paragraph by “monstrously huge” I mean an overall UI, please, look at screenshot:

Do you have any demonstration for all of them? (Your main Discourse Demo does not allow admin login, unfortuantely.)

At this aspect it’s truly the contradiction itself. The classic UI Dropdown list must be used to select 1 from many 1 time (date, country, etc). But at most forums-communities users prefer to communicate at MANY forums Categories. Thus when Discourse add this Dropdown Categories list as some kind of navigation improvement, Flarum make it better as easy&always accessible menu. What is a specially bad that Discourse Dropdown Categories does not support nor Ctrl+Click, nor RightClick+“Open in new window” in-browser’s actions. At classic using case when active user or admin/mods return to forum - they want to open 2-4 favorite Categories for monitoring when any new topic will appear at them - but with Discourse Dropdown Categories it’s impossible. With Discourse Dropdown Categories list user must choose and navigate Categories one-be-one and with a such method user can just forget to explore some Category, or will jump over Categories like the easter bunny, etc. Also always visible Categories can help for better topics separation on new topics creation according to the meaning - because user will see all of them thus will not be lazy to search the proper one. BTW I just invented the perfect solution for this point.

Dear Kris, I’m not the web dev and don’t really know CSS etc unfortunately, can we together step by step complete the job of this topic together with your professional skills? I’m sure it will be very popular! :slight_smile:

1 Like

I’m 62 and wear glasses.
Larger fonts really help me with readability and eye strain.

Also smaller paragraphs with more whitespace helps me to not lose reading focus (where I’m up to), which I find happens with large blocks of small font text.

I can increase the font size in preferences whch is useful, you can also decrease it to test what it would look like <15px

5 Likes

I have to agree with this point, and I’ve always found the Discourse category switcher to be annoying and limiting. It hurts discoverability for new users, and annoys (some) power users (like me). Ironically a dropdown does seem to be a good idea on mobile for accessing categories quickly, and yet it’s not available on the front page on mobile (yet): Category Dropdown in Mobile View - #10 by renato

I honestly think the dropdown is the wrong solution for the understandable and real problem you (@awesomerobot ) raised: dealing with lots of categories. With the ever-increasing screen sizes and resolutions of desktop displays, why not seriously reconsider a persistent sidebar? It could have a simple, collapsible “tree” view, a classic UI paradigm that has been used for ages. Or accordion-style sections (like “panels” in many desktop apps, e.g. Lightroom), or probably a number of other possibilities. The dropdown is really the best idea the team had? Maybe I should open a separate topic about this… (please let me know if you think so)

1 Like

This already exists to a large degree with the Layouts plugin and the associated Category widget.

See our site for a demo: https://thepavilion.io

2 Likes

Oh I know, and it’s great! In fact I knew I had seen a good example recently, but couldn’t remember where, and it was your site. :wink: (although I’d like some clearer indication that those are expandable categories) However not everyone has easy/affordable access to plugins (e.g. I think Discourse official hosting would actually require the Enterprise plan to use your plugin!?), and perhaps more importantly I’m suggesting it is a fundamental usability/design issue of Discourse itself, which means it should (in my view) be addressed in the core. Or at least as an official plugin.

Not to take anything away from the great work you’ve done, but at a certain point if something is popular, useful, and liked enough, that should be a signal. And again I point to the increasing use of sidebars in many other community tools. There’s something to this, something that Discourse seems to be missing so far… (and without clearly addressing it with a compelling counter-argument, as far as I’ve seen)

2 Likes

If you are prepared to put in the time to learn the ropes and set aside a little time each month to maintain your site, self-hosting gives you complete discretion over plugin installation and is very affordable indeed. (It can also be a very rewarding experience)

2 Likes

Most active internet users are younger (by statistic 20-45) and used to 14px fonts. Anyway, because of present of individual settings for the font size - its OK, but I still prefer to set default value to 14px at my community. It just help to display more text at once, so lower annoying scrolling.

Yes that’s true. I already self-host one of my Discourse instances on Digital Ocean. But I work with a wide variety of people/companies/teams, some of which absolutely do not have the time or (mostly) expertise to self-host. But then neither do they have the budget for a paid hosting option that allows custom plugins (lowest cost I’ve found is $40/mo, and that only supports “well known plugins”).

For e.g. a non-profit (or just a small business) that uses shared web hosting for their website that costs like $10/mo and does everything they need, it’s a bitter pill to swallow to pay 4x more for a community solution that meets their needs better than Facebook or some other free option. So it’s no wonder many do end up choosing Facebook, not because it’s better, but because it’s free and it’s easy.

Meanwhile Flarum can just be tossed onto their existing, shared LAMP hosting with no additional cost and probably work just fine. I’m not saying there is no difference between the two except the tech stack and therefore Flarum is better because it’s easier. I’m just saying that from the perspective of many potential users/community owners, it can be hard to justify Discourse because of higher resource needs and more complex/unusual hosting requirements (vs. LAMP).

You have to look at all this from the point of view of the wide range of potential Discourse users, not just the people who use this forum, and not just a customer who is willing/able to pay for Discourse hosting at $100-300/mo or more. A big part of what I try to raise awareness of here in Meta is that Discourse limits its audience and makes it harder for certain classes/types of communities to use it. Some qualify for non-profit discounts with Discourse org, but that’s still a minimum $50/mo (unless they’re an edu org). Many are simply small businesses, often startups, or interesting semi-informal communities that want a great platform to improve their discussions, and for them the costs often seem steep, whether self-hosted or otherwise.

I’m also not saying that Discourse pricing is unreasonable. I’m just saying that the answer “Well if you want plugin access just self host” really ignores a lot of the reality that a broad swath of potential users experience.

3 Likes