Improve navigation (sidebar?)

[christianbundy]

What version of this package are you using? 2.9.7

What problem do you want to solve? The top navbar is simple, but not very ergonomic (especially on small screens). I think we should improve it, but I'm not sure how.

What do you think is the correct solution to this problem? I think a Patchwork-style sidebar is reasonable on desktop, but I'm not sure what to do on mobile. Here's a very rough sketch that wouldn't take very long to implement:

I'm inspired to make a Shellogram-style sidebar that's more interactive, but I'm in some technical debt that would make that difficult right now. I should probably just repay that debt. My mistake was implementing a tree-like dependency graph where the most often-used tools (database connection, main template, etc) are leaf nodes, when really I think the leaf nodes should be the code that's used the least.

Now

Maybe future?

Are you willing to submit a pull request to implement this change? Yep.

[christianbundy]

New hotness:

[christianbundy]

cc: @mycognosist

[mycognosist]

@christianbundy That's looking rad! I really like the ergonomics of the nav bar - no more unnecessary scrolling to reach the menu.

Have you come up with a solution for mobile?

[christianbundy]

Thanks! Having to scroll to the top of the page always felt so silly, so a sidebar feels good. I was tempted to do a sticky header but:

%ZyBgJ3rUgwKNY1VUO9CDgOY1MvODRrgfMoCEExynxm8=.sha256

Mobile is tricky, and I haven't been able to come up with a great solution yet. I could put the left sidebar outside of the viewport on the left, but I'm not sure how it should be accessed. When trying out Piet's app I didn't notice that the left edge was swipe-able until I read about it in the documentation, but I'd like to keep the app free of sticky headers, footers, or modals.

The solution I'm leaning toward is a simple sidebar layout where wide screens get a Patchwork-like layout and mobile gets a current-Oasis-like layout where you have to scroll to the top. Maybe with an additional "swipe left" menu for advanced users? I feel like there's a simple solution here but most seem to add lots of complexity.

[christianbundy]

Also, as much as I love all of the magic of modern CSS, none of it works in browsers like Lynx/Dillo/etc and that feels kinda bad. :man_shrugging:

[mycognosist]

Hmm yeah, interesting. I think my main issue with a sticky header in a text-rich context is that it eats up vertical space. When I'm reading lots of text on screen I like all the height I can get.

I don't spend much time with phones but I'd give a +1 to the sidebar layout with Oasis-like top nav on mobile. At least then it's totally accessible to the user and clearly visible on page-load. I can imagine a lot of folx totally missing a swipe-able menu.

Re: compatibility with Lynx etc., I feel you. Maybe there's a lite fork in the future.

[christianbundy]

Had another idea last night that I want to write down before I forget it: maybe on mobile the nav should be at the top and the messages should scroll horizontally instead? I could add buttons at the bottom that go left/right (maybe with anchor tags and scroll snap eventually) but that would mean the top menu is never more than 1 message away.

:man_shrugging:

[jedahan]

Interestingly enough, firefox preview puts navigation on the bottom of the screen so it is more user accessible. They put the hamburger in the top right, so this idea of 'most important buttons on the bottom' seems good.

More recently, left/right swiping is associated with an action on an item (hide/favorite, for example). We are accustomed to long scrolling feeds but it would be cool if we could break that addiction in a meaningful way. Perhaps left/right is the top "thread" and comments are below.

Either way, if you have items in a 2d scroll, please have them peek a little bit:

[cinnamon-bun]

I like the desktop sidebar! (How did you move the scrollbar away from the side of the window? Is it overflow scrolling inside a div?)

For mobile, I dislike pages that scroll horizontally & vertically, because a thumb-swipe action isn't purely vertical, it makes an arc:

Using left-right buttons instead of native horizontal scrolling would fix that.

The left-right buttons could be at the top to enable quick skipping across several threads. Otherwise if you hit a long thread you'd have to scroll all the way down to move past it.

For keyboard accessibility on desktops we would need to add keyboard shortcuts to go sideways. (I like to use tall narrow windows on desktop, and scrolling sideways isn't easy there)

[cinnamon-bun]

Or, a no-javascript design:

The page is a bit wider than the screen so you can use native horizontal scrolling to get the menu.

The horizontal scroll only goes to the right so your thumb-arc won't accidentally scroll sideways as you try to scroll down. (Except for lefties...)

[cinnamon-bun]

Last thought: peeking the next item into the screen shows that scrolling is possible, but it also makes the app more addictive. It's hard to stop when you have a partial hint of what's next. I think this is why "jQuery Masonry" style layouts are popular (e.g. Pinterest). It's hard to get to a stopping point when you can see a little bit of the next item.

A solution is to show just the border of the next item but not its content.

[christianbundy]

I like the desktop sidebar! (How did you move the scrollbar away from the side of the window? Is it overflow scrolling inside a div?)

Thanks for the feedback, that's really helpful. It is overflow scrolling inside the div, although that detail was more of a happy accident of my hacky prototype -- I can't decide whether it's good because it ties the scrollbar to the thing being scrolled or whether it's bad because it's not the browser default and might not be intuitive.

It's hard to get to a stopping point when you can see a little bit of the next item.

It's so clever but so insidious. +1 on peeking to ensure that people know there's more available without the dark pattern of creating FOMO.

More recently, left/right swiping is associated with an action on an item (hide/favorite, for example). We are accustomed to long scrolling feeds but it would be cool if we could break that addiction in a meaningful way. Perhaps left/right is the top "thread" and comments are below.

I really like this idea, thanks for pointing this out!

The horizontal scroll only goes to the right so your thumb-arc won't accidentally scroll sideways as you try to scroll down. (Except for lefties...)

I have a hunch that the CSS scroll snap would solve this, but I should probably try it on a real device with real people (ideally with varying dexterity).

---

Aside: I'm loving this thread, I always sketch stuff on paper but it's way more fun to see low-res art of everyone else's ideas.

[georgeowell]

Crossposting from my closed duplicate issue https://github.com/fraction/oasis/issues/91

Hate to be that person but we should more closely match the layout of existing social network clients to meet user's expectations. For clarification, I am referring to where we display menu options "popular latest inbox... etc".

I personally think we should be really boring here and either have a Facebook style "bar" across the top or some sort of Mastodon style split thing either on both sides of the feed or to a specific side.

Mastodon v3.0.1

Oasis mock-up (nord theme)

This is my very ropey mock-up :smile: I think this looks really clean though. I don't think we should offset the actual feed as has been done above.

I'm not sure what would should happen on mobile. Tusky is a pretty decent Mastodon mobile app to reference.

[jedahan]

Looks great!

For mobile, I would advocate for actions to be on the bottom (nav, perhaps posting). The new firefox for mobile moves the nav bar to the bottom is nice. We could make it limited with just 4 or 5 buttons for now. Would be awesome if the buttons had text, but maybe not totally necessary if we kept the number small.

[christianbundy]

Resolved by #95. :tada: