Minimal Topic List Design with Sidebar for Navigation

(Lowell Heddings) #1

Continuing the discussion from Simple Sidebar Theme:

Very… rough, and cluttered and not visually what I really want. But this is what I want to accomplish as far as navigation goes. The navigation scheme is instantly understandable for anybody that has spent any time on the web.

If you are inside of a category the category selector dropdown thing could come back (and the sidebar could change as well to be subcategory or something, I dunno)

The general idea for my redesign is this:

Navigation in Discourse is confusing for many regular people (based on the constant complaints I’ve seen), and the more powerful navigation / filtering options are buried for power users to the point where they are useless (also based on complaints including mine). For instance, How do you find all the topics that you posted into from the interface easily, and see if there have been responses that didn’t directly reply to you? Up until recently, bookmarks were buried so far that you’d get a 1-Up for finding them. :mushroom:

Meanwhile, the topic list page is a lot of wasted space and unnecessary visual clutter, as illustrated by the minimal design discussions gaining momentum here on Meta.

But I think the biggest problem is that 1100 pixels is just too wide to scan your eyes across while going down the list. Most content websites fit their content into a 600-700 pixel column for best readability, and the same is true for a list of topics. The full-width topic list is the same sin that forums have been using forever, and the success of Twitter, Facebook, and everybody else with modern interfaces kinda illustrate that you don’t go full-wide unless you are showing off a visual medium like pictures or videos.

So, the ideas behind the redesign, which I’m still not sure how to accomplish yet but will eventually figure out:

  • Topic list uses @sam’s really nice minimal design, but the width is reduced to 700-800px make room for a sidebar.

  • Main menu consists of Latest | Unread | My Posts (which is any topic you’ve posted in at all). These are really the most important things that people want to get to quickly, and it keeps the main navigation really simple and easy to understand. There are too many options right now.

  • Categories drop-down and Categories page are removed from the main menu for the main Latest / Unread / New pages. The Categories drop-down shows up only if you are inside of a category page. It’s way too confusing otherwise, and I’ve basically never used it on the front page. Note that it is necessary and works well once you are inside of a category, because you need a visual clue right at the top to let know where you are in the navigation (breadcrumbs). By limiting the top nav to only the 3 I mention above it keeps the menu clean even with the category drop-down visible.

  • Sidebar menu has these options (theoretically configurable per forum and per view)

  • Category List (top level only)

  • Alternate Topic View Filter list (this could potentially be collapsable or something)

    • New Posts (Since X criteria or something)
    • Bookmarked
    • Posts I’ve Read
    • Top Posts (in x timeframe)
  • Related or Popular topics (if you are in a topic view)

  • About box (for various links you’d put in the footer like FAQ, Rules, Contact, About)

  • Slot for a regular 300x250 advertisement if one should choose to do that.

The sidebar should be kept really minimal, clean, and simple. It’s also a good place to put extra stuff that isn’t useful enough to be in the primary navigation, but shouldn’t be completely buried either. Categories are really important, but it’s impossible to visually scan and see a list of categories right now when you are on the front page. (And unlike some forums, I would never want to make the categories page the default)

Notes on the “New” tab: The problem with this tab is two-fold: One, when you have just a couple of new posts to look at, you don’t need this tab at all, because they show up on Latest. And two, when you have a ton of new posts to look at… the tab gets completely out of control almost immediately. You’re better off putting this into a secondary navigation area like the sidebar.

This is my eventual goal, but there’s no time frame on it, it’s just something I’m hoping to move towards and figured I’d post to see what other feedback I might get out of it.

(Theron Boerner) #2

Would this be a slight improvement?

The colors on the bottom show sub categories and the parent category’s colors. I also don’t know what Topic Views means.

(Lowell Heddings) #3

One thing I forgot to mention and will add to the main post when I am not on a mobile device is that the sidebar should automatically hide on an iPad or other tablet in portrait mode. Won’t work well otherwise.

(Lowell Heddings) #4

I like the look but all the extra colors are too much. Just one color per category (or maybe no color coding)

(Kane York) #5

Interesting. I’m also seeing complaints from other people that Discourse and all those other sites are “too thin” with a maximized browser.

Agreed, not everything needs lots of colors.

(Jeff Atwood) #6

Just to clarify, I envision the hamburger sliding out from the right as a full size sidebar widget, much like what’s pictured here. Definitely for category selection, ala the existing function.

This also covers the mobile scenario as well.

Not happy with the current design of the hamburger but no time to work on it for 1.2.

The end of Clown Vomit, or, simplified category styles
(Lowell Heddings) #7

It would definitely be useful to be able to add widgets to the hamburger menu or customize it in some way.

Also, a number of the things in the hamburger menu could probably be moved to the user profile menu to clean things up and Messages and Bookmarks could be moved to the hamburger from the profile menu. For instance, Twitter puts their keyboard shortcuts, help (FAQ), and other infrequently accessed things into their user menu.

Not that they have a hamburger of course, but I feel like most of the time, hamburgers are used on mobile sites as a navigational thing, with non-nav items maybe at the bottom of that. Even Chrome has started burying the non-navigational or non-feature items on their hamburger menu into a submenu at the bottom.

So stuff like FAQ and About that are barely ever needed are better buried under the profile menu (or somewhere else) and the hamburger is quick access to navigational elements.

(probus) #8

Did anything ever come from this? The big hamburger update didn’t really deliver on this front…

(Iceman) #9


Any updates on this subject? I can’t really find a plugin that achieves this for categories.

(Iceman) #10

@codinghorror (mentioning you since you are a founder and know this better than anyone) since there are no updates on this, could you please point me in the “right direction” in regards of how to develop this function? Plugin? HTML/CSS?

There used to be a “Your First Plugin” Tutorial Thread but seems to have disappeared.


(Joshua Rosenfeld) #11

This guide?