Some ideas to clean up topic list menu buttons on mobile layout


(Dave McClure) #1

The main topic list on a mobile phone looks a odd to me the way the buttons wrap around on the top nav.

In particular, having the ‘Create Topic’ button on its own line, when there is all that extra space next to categories seems wasteful, so I started off with this change when playing around:

Then I experimented with:

  • eliminating the category dropdown
    perhaps on mobile, with an unbound category list, it’d make more sense to have a click on the category badge take the user to the category page. If a subcategory is chosen, it could use this idea to hint the parent category, but only display the subcategory text.
  • using a dropdown for the latest/new/unread stuff
    since this list of options is under better control, it could be collapsed to a dropdown for mobile

Finally, now that all that space is saved, making those top nav buttons sticky would be do-able on mobile too without eating up half the screen:


(itlo) #2

I like it. This is the way to go. Well done.


(Kris) #3

I like it! Really the dropdown is the best way that list can be handled (without doing some crazy custom UI or messing with the hamburger menu)

Personally, I’d want to remove that categories button entirely and just leave it a link to “categories” in the dropdown… it grants a lot of room to play with that way (say if a nav item or category had a really long name)

So you’d have the categories page in the dropdown, and if you click on the hamburger you still get the list of individual categories.


(Dave McClure) #4

Would you see the category name there at all though with the tweak you’re thinking of?

If I’m in a category, is there any visual indication of it other than the fact that its implied by the badges being the same on every topic?

Just curious what you have in mind - happy to wait and see where you think things land best…


(Kris) #5

Getting back on this. The mobile nav sucks, definitely needs to change soon. Here’s a thought.


(nXqd) #6

This does look great in my opinion.


(Jeff Atwood) #7

We slated this for version 1.4, definitely long overdue.


(Sam Saffron) #8

I just deployed this, which, in my very humble opinion in 100 times better than what we had

Slight change off @awesomerobot’s original mock is that I totally suppress the breadcrumb on home page. Its a useless use of space.


(Jeff Atwood) #9

Looks very good, just needs rollup of numbers such as

  • New (12)
  • Unread (6)

to be complete! cc: @awesomerobot


(Dave McClure) #10

Much better!

Things are still a little weird when a category is selected though, fwiw:


(Sam Saffron) #11

Yeah, I know, I may conditionally float “new topic” left … not sure.

Not sure about the value of the breadcrumb on mobile … I may nuke it and have something simpler.


(Jeff Atwood) #12

You could change + New Topic to simply + when a subcategory is selected. Or possibly in general for mobile…

(Also why are these buttons different shades of grey?)


(Sam Saffron) #13

Its a general issue we have with the category breadcrumb, it likes having a diff color for, I don’t know why.

Changing to + may work will give it a try.

Rollup is in, awaiting a deploy.


(Kris) #14

I think a layout like this, but updated to support the idea of subcategories could still be nice — this is a shitty 2 minute mockup…


(Kris) #15

I can take a look later if there are still issues with the grey! This is so much better than it was!