Now that we have these awesome menus, have we thought of any ways to possibly make them look better? I feel like there’s a lot of wasted space (especially on mobile) which also makes the click targets much smaller.
Mobile
Desktop
How about something like this?
It could make the targets easier to click and read, maybe we could start this as a mobile-only experiment because of the extra space?
I definitely like it for the first tab, maybe we can start experimenting there?
To me the big issue is click target on mobile on the first tab, I wonder if a simple adjustment to spacing there will get us most of the way here.
Curious at what @awesomerobot thinks here. I agree the huge blank whitespace is a bit much.
I think a bigger change is warranted for Mobile here.
I would like it if it lookes like this. 
For what it’s worth, I haven’t had any usability issues in the first tab. Not that I use that tab often, but I don’t remember ever misclicking anything when I have.
I think this is nice, but it might be good to make the logout button isolated from the rest. By my understanding, you can plug into that menu to add options, and it might be confusing if the log out button suddenly moves from the left to right side or vice versa (even if it doesn’t change often).
For me, the biggest awkward thing is the significant blank vertical space on mobile in all of the tabs, like @rishabh originally mentioned.
Two options based on @rishabh’s mock-ups , I learn towards 3-columns but it does limit space for text (“enter anonymous mode” can likely be shortened, and isn’t on by default anyway…)
Edit: though now that I think of it, 2-column is probably safer for different locales with longer words
“Enter Anonymous Mode” may be a text at right bottom like “Log Out.”
For design, I like the compact look of third column style a bit more.
I think the issue here is mobile:
I guess big buttons can work here but then I would move log out to the bottom maybe and give it full width … I don’t know …
Overall desktop feels ok-ish as is.
Desktop is fine, I think this should be a mobile only change.
New topic? This discussion looks off-topic for quick access which has been completed (and which is great) and will not be affected by the latest proposals.
I don’t get why these latest changes are needed. But I may have missed a rationale presented elsewhere for why “a bigger change is warranted for Mobile here”.
I like having desktop and mobile menus the same. I use both and it is less strain on my brain.
Multi column layouts are generally slower to read. Icons are handy but not so much if buttons are added or removed.
If landing space is insufficient vertically - it is already the lateral width of the drop down menu - then why don’t we have icon buttons for all menus?
I guess that filling the blank white space is the main goal. I’d settle for other features before the proposed large buttons:
Yeah I lean towards more consistency (easier to maintain too), but tapping items is a different experience than clicking on them… so sometimes different layouts are warranted.
I’m not too worried about this because there are so few items.
Maybe we should? Have to start somewhere. Maybe the hamburger menu could be iconified down the road too.
Not opposed to this to get parity with the tabs on the user menu, but I suspect that badges/invites aren’t really important in this context (badges are already in the hamburger menu, most people don’t use invites) so they might be more noisy than helpful.
Doesn’t make sense with 6-7 items really
Maybe I’m misunderstanding, but they’re already in the same order (drafts and anonymous modes don’t have full tabs on the user page, so those do break it up a bit)
This crossed my mind, but I want to stay away from it for now. At the moment all these menus are comprised entirely of things you can click to go somewhere or do something… I’m not sure they’re the right place for pure informational content?
This is a little tricky because really at most this menu has 7-8 items, and making those fit on an iPhone X is different than making them fit on an older iPhone or Android. I think two-column boxes are a better use of the space, but there’s still space on big phones.
We could be really fancy and dynamically resize these boxes based on viewport height? If our goals are to occupy space and make super easy tap targets we could go really nuts. This is likely too extreme, but this illustrates that even going huge leaves some space.
If you want to go into one-handed reach-ability ideally all of this menu should be at the bottom… (the tab style doesn’t make as much sense with this layout, just a quick example). Then you start complicating things with content directions though (should the list start from the bottom if the menu is at the bottom? that’s a big can of worms)
Anyway, that’s a bit of a ramble… I think the two-column icon boxes are a good place to start. It achieves the goals of using the space a little better and making things much more tappable.
Instead of trying to fill the entire space, why not make the menu only take up as much space as needed instead of using the full height? It already changes height dynamically on desktop. Is there a reason not to do the same on mobile?
The full-height follows the mobile app pattern of “full height swipe-able menus.” If they weren’t full-height I don’t think it would be as clear that you could swipe them away (at the very least the additional whitespace serves as additional swipe area).
These would be a huge improvement and I like a precedent like that. (not that the current situation is bad).
Is it common enough for users to check their drafts to warrant moving it to its own tab in the menu (instead of the profile tab), just like notifications, bookmarks, and messages? I assume it would be relatively uncommonly used compared to notifications, but I wonder how it would compare to bookmarks. I didn’t even know you could view all of your drafts until the most recent menu change put it in the profile section of the user menu, so I do wonder if making it even more prominent would be even better.
Bookmarks will be made dramatically more useful soon.
Hi Kris @awesomerobot Thanks for all your work on the UX.
The two column look is great.
Also the more prominent position for drafts suggested by @seanblue sounds like a good idea. I overlooked it completely … it is useful and atm hidden.
I’m not that sure many users even go over to the left of the user menu at all to see if it’s clickable, as the three tabs on the right catch all my focus.
I was wondering as you might be coding in that area … if you could add individual css classes to the list. As all are class = “read” atm. I’d like to be able to hide some.
I’m doing a strange individual private client forum where users can’t see each other. A little like @joebuhlig is attempting in his theme.
Cheers
