Kinopio Sidebar Idea

why is a a sidebar more space efficient than a button in the footer?

It’s not - I haven’t done a great job at getting my thoughts across here… I don’t think footer vs side is really the right way to frame it… There are a few aspects that led me in this direction… for me the left side of the screen is more important than the real estate on the right side. Especially on a smaller screen. I tend to focus on the left side more as I work, but also, you can’t leave these dialog menus pinned open because anything on the far left hand side is permantly blocked with no way to access them through scrolling, only unpinning.

Shown here: there is no way to edit or see these cards on the left hand side while the dialogs are pinned open. However, Kinopio always has margins built in on the right as cards get added, so this wouldn’t be a problem on the right hand side. In fact, through some testing just now, anytime I add a card to the far right of a space, Kinopio adds enough space for 1.5 sidebars (guesstimating here), so that there is always room to ensure nothing is permanently blocked without having to use a bunch of clicks to unpin, click away so it hides itself, get to the card, reopen, and re-pin. This allows you to have the dialog open and ensure you always have access to all cards on a space with a simple scroll, never having to close the dialog.

The first thought after that is maybe why not move these buttons to the bottom right, but I don’t think that’s right either. The bottom right essentially signifies the open space, directing the user to move from top left to bottom right. Having permanent buttons there (whether open or not) would just feel weird, imo, hence the tab idea in the top right to get to these, and leave them open (never worrying about obstructing cards or other buttons).

what happens to the existing share/user buttons in the top left?

Great point, I admit my mockup was done very poorly. I’d have the button to open right below the notification number so the top of the sidebar would stay at that level, never obstructing the user, share, and notification button.

Which that brings up another issue with the current dialog implementation. I can’t keep these pinned open, because they obstruct other things in the bottom left.

So while this…

  • view all three ^ together

… is important to me, not only does the current dialog implementation not allow me to do that, it also prevents me from getting to Explore, Live, and Favorites.

I think a big aspect is these dialogs, when pinned open, feel disruptive from accessing a plethora of other things. Essentially, you can only do one or the other.

There really is no way to live with these pinned open in their implementation today. I will eventually have to unpin to view/edit the cards on the left (which, in my spaces, are of high importance), or Explore, or Live, or Favorites. The right hand side solves all of these (although I’m probably forgetting/missing something)

And when you throw all of this together, the sidebar tab gives you one click to open, one click to close (if it’s possible to have these share real estate and remember the state of each…). Pinning requires two clicks to open, two clicks to close. In the grand scheme of things its minimal, but for something I truly want to be ever-present, but have to continually close to be able to access other things, it adds up and starts to feel tedious.

These mockups probably do a better job showing how it can live in harmony with the current top right menu…


If we look from the point of view of a pretty fresh space, the Tags dialog pinned open obstructs cards on the left side, and there is open pasture on the right hand side. You might think that’s fine, you are done with the left hand side and should be working towards the right anyways. And while that’s true, I still want visibility to those cards, and there is sooo much open space to the right that I could simply scroll a fraction to allow myself to continue working. Essentially, it’s not so much the size or type of the dialog that matters, but the location (although I think the tabbed sidebar idea makes it possible in less clicks).

2 Likes

OIC that totally makes sense. What if pinning a dialog pins it to the right of the page instead of the left?

1 Like

It would definitely be more useful for me, but maybe a bit awkward and unexpected to have things bounce around like that for people?

2 Likes

One difference between a tool like Logseq and Org-roam is that with Logseq, connections just appear and are easy to spot. It makes serendipitous discovery more likely. With Org-roam it feels like I need to go looking for connections. If I need to go looking, the tool is less useful.

Related to the feelings I’ve been trying to get across here. It’s the difference of a link/tag being presented to you vs having to go looking for them.

Source: https://baty.net/daily/2022/2022-05-10/

i’m not sure how putting things inside a toggle-able sidebar is different than a similar looking ‘tags’ button. in both cases you click a button to see a similarly formatted list of tags (or links etc.).

Are you referring to the idea that you can see all of these (tags/links/comments) together?

So I don’t know that I’m saying anything new there… just appreciated the way he framed it.

I think the key is being able to have links and/or tags always open without obstructing or preventing you from doing anything else. I think the main point is, when this data is always available, it can lead you to places you wouldn’t necessarily think to go. The fact you have to click “Links” or “Tags” eliminates that because the only time you’d do that is when you are looking for something specific.

How that’s implemented doesn’t really matter to me. The sidebar was just the first idea/solution I could think of.

I would still appreciate being able to have a Links dialog and Tags dialog open at the same time though. And lastly, thinking about a potential Tag Space, an ever-present Tag dialog that’s already opened to that specific tag.
To summarize that a bit, being able to see all Links to a space, all instances of the tag associated to that space, and a list of tags used in the space, all at once (while not obstructing other UI components).

2 Likes

I have some promising ways to do this but it’s a ~1week project to do it right, so I’ll have to find the time for it

3 Likes

how important is it that you can view tags and links at the same time, vs clicking to toggle just tags or just links separately. This combination thing is the biggest ui blocker/challenge here, on small screens something like this becomes unusable or requires much fiddling to become usable.

What if the segmented button choices included counts you could see without having to click in (eg “tags(5) | links(10) | comments(3)”)?

1 Like

I’d put that as a lower priority - my original mockup on top sounds like what you are saying, where you toggle between the buttons. The count is a great idea though.

Having two on the screen at the same time is still desirable for me, but I get it.

If it helps, my expectation is it wouldn’t have to work well or would essentially take over the whole screen on iPhone… but that’s besides the point.

I think a toggleable approach would suffice.

2 Likes

coming along…

including Removed in this dialog bc then I can remove that whole bottom footer row (also this placement might be more familiar for ppl coming from notion)

2 Likes

Loving every bit of this. :heart_eyes:

2 Likes

This is now ready for beta testing, let me know what you think!

Working well for me on iPhone so far.

One thing, not needed for launch as it applies to current behavior too, but I wonder if you could still do some UI disappearing on scroll, whether everything disappears or everything but the tag/link dialog…

I’m not sure which would be better, but the disappearing ui is something in pretty sure I’ll miss with…

sadly, that’s one of those is way harder than it looks things because each of the way the components are split up. Like the extra couple days of dev time might not be worth it in this case :frowning:

An alternative I just shipped is if you pin the dialog, it’ll move upwards eg:

Moving up is nice, I like that.

And yeah I get it. It’s not something I’d die on a hill for. Stoked for this to going into prd

1 Like

unless anything wild comes up i’ll ship this tmrw morning :slight_smile:

2 Likes

This happens in PRD right now too, but noticed when you select a tag from the dialog, it stays highlighted (button pressed) even as I jump to different spaces either from that tag or going to another space by other means.

2 Likes

I have to wait to fix that issue, feel free to file it seperately tho

1 Like

shipped https://twitter.com/KinopioClub/status/1527978737731608576

2 Likes

I’m giddy with excitement at this

3 Likes