I’m Claudio and I work as UX lead at Canonical, publisher of Ubuntu. This is my first post here on Meta Discourse, but we all are Discourse users for the community forum of our websites and products at Canonical.
While ago we explored what Discourse could look like when it is included within the main domain of an existing website, instead of a subdomain (e.g. moving from ‘discourse.ubuntu .com’ to ‘ubuntu .com/discourse’).
Using the top-level website instead of a subdomain would necessarily change the navigation of Discourse, its interactions and the overall look & feel in order to be included in a consistent and seamless way. We understand that this is an exploration work that would affect several parts of the existing UX, but we thought to share it with you anyway and eventually discuss if part of these modifications can interest or be a valid (as a template maybe?) proposal for upstream, too.
Style wise, it uses our open-source CSS framework Vanilla and its components.
I am going to post all the visuals here, replying to this initial intro.
Please let us know what you think, we would be available to discuss this further or more in detail.
In our proposal, we removed the burger menu that comes with the default Discourse and used a side navigation component as the main entry point for all the pages. The reason is that adding Discourse to existing website navigation requires to be consistent with the existing structure of the website. In doing so, we can also expose to the users all the available pages and topics directly in one navigation component, always visible.
The search functionality is integrated into the global navigation of the website and would include search results from Discourse, too. As this could require an important front-end and back-end change, the search input field could be moved into the Discourse pages to be standalone.
When users sign-in, the ‘new topic’ call to action is visible, as well as the ‘account’ item in the side navigation on the left.
Instead of having ‘Latest’, ‘New’, ‘Unread’, ‘Top’, ‘Categories’, ‘Bookmarks’ exposed all together on the top of the page, we can have the categories in the side navigation and the rest in a drop-down where users can select what view of the content they want to see.
We reorganised the table when displaying all topics. Categories are displayed via coloured tags that users can click to access to a specific topic directly. The users profile picture and multiple users are visually collapsed to save space. Replies, views, activity are still visible.
Within a topic/category, the ‘follow option’ call to action appears. With a drop-down, users can decide the level of notifications they want to get. Our proposal displays the label in the drop-down so that users can easily understand their subscription to that topic.
When signed-in, the user’s profile picture and information are displayed on top. In the About page, secondary pages expand in the side navigation while ‘All topics’ collapses. If the user is signed-out, the about page is the same but doesn’t show the profile on top and ‘account’.
The horizontal menu items in Discourse are included in the side navigation bar; “Summary - Activity - Notifications - Messages - Badges - Preferences“. Subpages menu items will open under the relevant main one, e.g.: Activity > All, Topic, Replies, Drafts, Likes, Bookmarks.
Please let us know what you think, we would be available to discuss this further or more in detail.
Things are good. But the left menu visually merges with the main content. See if you can separate it like in Stack Overflow, eg… Perhaps the background, indentation, color. Lots of options.
I noticed that since we worked on this, Discourse has changed the notification/follow icons (much clearer now I must say), so we need to update this accordingly.
I would love to click around and give some feedback on how it feels, there are quite a few hidden bits of UI that you probably need to look at as well, like flag ui/bookmark ui and so on.
This looks great! One thing I don’t see represented here are notifications:
Would those be listed along with the sidebar “account” link?
Also I assume there are no plans to use tags because I don’t see those represented here… that was one reason we moved away from having a dedicated category column.
With the category under the title we are able to keep categories and tags closely associated and also remain consistent with the title layout at the top of each topic page (I also just noticed in your design that the category isn’t displayed once you enter a topic, is that intentional?).
Thanks for your reply @awesomerobot
Moving discourse under the main domain (not, for instance meta.discourse but discourse.org/meta) we needed to drop the user picture as it could clash with an existing one in the main website account/profile pic.
I reckon the tags weren’t there when we explored this solutions, so it is something that needs to be included in a follow up. Categories under the title is indeed a very good point.
Thank you all for your feedback, it will help with the follow up of these designs.
