Category selection menu design suggestion


(Mait) #1

Are we fine with nested scroll bar? I’m not. :disappointed: I really want to avoid nested scrollbar if we have another option.

Topic list and topic editor both have scrollable categories select bar. In there, if scroll hit top or bottom,. whole current page start scrolling. It’s quite nervous keep away from top or bottom especially dealing with poor sensitivity mouse wheel or touchpad.

I think selecting category is active user action. Not like new topic, reply, notification or some other passive actions. Thus we could be more aggressive on space usage. Because they actively select categories button, not gonna excused even take whole area for category popup. We should show them quick and easy at glance because they just clicked button for that reason.

IMO, center aligned, big square box (e.g. 80% max, 16:9 ratio) would be fine. It maybe better using pagination instead of scroll bar if there are so many categories. It’s almost like image view popup box.


(Jeff Atwood) #2

Can you provide a quick visual mockup of what you are proposing?


(Mait) #3


(Kane York) #4

Fixed that up for you.

Not sure I like it.


(Mait) #5

Thanks!

I’ve tried another position.


(Jeff Atwood) #6

We already have one drop-down menu in the “hamburger” icon on the right top.

I am not a fan of putting a ton of functionality behind drop-down menus, and I find that randomly adding a bunch of “if you need it” drop down menus makes the simple click behavior much more mentally taxing – why did all this extra stuff come up? What does it do now? How do I get rid of it?

The strength of the web is that it is (or was) simple: you see something on the screen, you click it to make something happen. Drop-down menus are sometimes necessary in web UIs, yes, but they are not really native to web design. They hide functionality and add complexity. I want to keep those to a minimum in Discourse and use them only when absolutely necessary, or in rare functions for admins or mods who need deep functionality.

This does not strike me as a case where it would be appropriate.


(Mait) #7

we already have drop down menu for categories. I just want to say make it wide. Thus can remove inner scroll bar and show them at a glance.

Don’t bother box color or border color. It’s just my screenshot editor’s default setting for box drawing. My point is layout.


(Mait) #8

I didn’t realized it until you say.

I should say this straight. That’s not Discourse.

Latest, FAQ, Mobile View + Categories cloud. I can’t get it why the button is there for those things. That is like my desk’s third drawer. ‘Where it should go? whatever, put it third drawer.’

If we really should have hamburger button, It could take some check box from user preferences. Email notifications, topic tracking, and change avatar things.

Another point:

We have four entrypoint to categories view.

  • Left top, ‘All Categories’ popup button
  • Top Center, ‘Categories’ view button besides favorited button
  • Top bar hamburger button
  • Category button beside topic title

I know they all have slightly different function or view. But I think it’s basically all same ‘view categories’ button to regular crowd.

At least we should remove two of them or best, three of them. People would depend on it then we cannot remove them when we need another space for another important button.


(Sam Saffron) #9

@codinghorror @eviltrout @awesomerobot I feel having one UI for “bunch of categories” would be beneficial, at the moment we have:

and

I feel the “humberger” style (with possible tweaks) should be used in the cat drop down

  • Hamburger style has more information (topic counts, unread / new counts) thus way more useful
  • Hamburger style does not cut off and require scrolling, for sane category numbers
  • Less UIs and controls to maintain make me happier

(Dave McClure) #10

I had posted another idea in a similar topic a while back, which may be worth considering:


(Jeff Atwood) #11

The hamburger menu is in Google Chrome, for example. Take a look. It’s a fairly common UI technique to have that one “extra drawer” to put infrequently used functionality – the kind that is OK to hide behind a drop-down.

@sam @mcwumbly I think it’s fine to normalize on a “list” category display style.


(Kris) #12

Good points. Though the hamburger style as you mentioned definitely needs tweaks… this is just… no.

The topic counts, unread / new counts need some better affiliation to the category they belong to - something like this (feature cat.) maybe


(Kane York) #13

I have made my decision to perform the forbidden sin of bumping this topic.

Because I think it’s a pretty nice proposal, and more people should see it and it shouldn’t get buried under all of the closed [bug]s.


(Jeff Atwood) #14

OK, then what would the CSS and HTML for that look like?

I think we can use that approach in either layout:


(Dave McClure) #15

One thing I like about the current category dropdown menu is that it looks clean. The main thing that contributed to this so fresh and so clean feeling was making the widths of each category label equal.

I think the same could be done in the hamburger-style approach with a multi-column grid of categories, like so:


(Kris) #16

I agree, it does look much cleaner that way, though it’s a bit difficult because the category names can potentially be kind of long… then those notifications could potentially hit 3 digits (maybe even four someday!)

Might make sense to truncate category names of a certain length?


(Jeff Atwood) #17

Yeah we need to do something about category name length. Having long category names works out very badly.


(Dave McClure) #18

Another space saving consideration would be to change the “number of new topics” indicator to be a numeral within a star


(Jeff Atwood) #19

Or just fold new and unread numbers into the same actual number.

Not 100% sure that independent new and unread counts are all that useful in this particular situation.


(Kris) #20

It’d just be tough to fit more than two digits in there - the nice thing about circles is that it’s just a box with the corners rounded off using CSS, so it expands without any sort of extra logic