Bike 1.12 (135)

Oh, wow, this is bad-ass, thank you!

For people like me, who might (accidentally :wink: ) go crazy with a lot of structure/sections in a single document…the new Nav Bar makes it really easy to, uh…navigate to a different part of the doc.

Any plans for shortcut keys for the back/forward buttons? Or is there some configuration that I could do to enable that? (Sorry if I should already know the answer to that).

Thanks again!

Wow Jessie. I love the navigation bar and I’m loving it at the top for what it’s worth. I have one file in particular that I started as a Bike Bullet Journal last May when you launched Bike (guess I’m approaching a renewal soon :grinning:) and the navigation makes it so easy for me to backtrack and search through entires to find something I need to refer to.

I understand those on the thread who prefer this at the bottom, but my eyes seem to adjust better to seeing the items I’m looking for at the top of the screen.

And yes, I’ve noticed the redundancy with one button at the bottom. I’d say that in UX (top or bottom) all the navigation bar items might best be in the same location. But hey, that’s your choice to make as the developer. I’m super happy with the new navigation bar on focus. :+1:t3:

I’ll add Go Back and Go Forward menu items soon.

1 Like

I think that happens to be my case too – intuitively an overhanging branch of descent through the tree structure, with the paragraphs hanging below like leaves and fruit.

( I don’t know if it looks feasible to have a top ⇄ bottom option there ? )

( ⌥⌘/ makes for a very quick visibility toggle, in either case)

1 Like

Maybe, I’ll have to see. I think next preview release will try for putting it in bottom bar. Then we can discuss and decide on option.

This sort of thing at top is definitely the standard. After looking at path displayed in the bottom for 10 min my reaction is that I don’t mind the path, but I’m not used to having the Go Back/Go Forward buttons down there yet.

Anyway, I expect there will still be a number of tweaks and changes before final decision.

As mentioned here I’ve put Bike 1.12 on hold for a bit as I work on some longer term projects. I have been thinking about navigation thought…

I tried moving navigation bar to bottom status bar and it felt a bit weird. I don’t think that I will keep that option. Instead I think what I will try next is to make navigation more a part of the document, then a separate UI element.

What I mean is navigation will be placed right above document content with same background color, and it will scroll with document content. I think this means I won’t need a divider and I think lack of divider and scrolling will make navigation feel much lighter weight at top.

I expect I’ll also add an option to make this bar sticky. So it scrolls by default, but when sticky then it will stay at the top and get a drop shadow when you scroll.

I’m also considering making the navigation path only show two items: HOME > PARENT. I think the intermediate path elements add more visual complexity then help. And if showing only two I can dedicate more characters to the parent label which I think is most important.

Another feature I need to add is auto expand when you navigate to an item.

And yet another feature I’m thinking about is changing layout when you navigate to a row. It feels like it might be better to not show the focused rows guide line (and maybe instead draw a horizontal underline) and also don’t indent its children. This will give more space to type and make focusing into an item feel more like its own little document.

I’m not sure about any of these things, but I’ll likely test these ideas next. As always thoughts and feedback welcome.

Bike 130 Preview makes a bunch of UI tweaks:

  1. I want outline navigation status visible even without the top navigation bar. Now if you are focused into a row you will see a “focus out” button at the end of the first line of the focus row.

  2. I’ve also added “focus in” buttons at the end of the first line of any row that has children. I really like this UI since it doesn’t require any mouseover highlight state or option keys to distinguish between folding a row and navigating to it. It works better with short rows than with long… as does the navigation bar breadcrumb. For a tidy easy to navigate outline keep the higher level items short! :slight_smile:

  3. I removed mouse over highlights. There were a cool feature to add when I was first making app, but got old over time. Everything feels a bit better to me know that they are gone!

  4. I changed the disclosure handle color scheme. Now handles are only “dark” if the row has children AND the row is collapsed. The intention is to only get your attention when something is being hidden from you… same dark color is used for the “Focus Out” button described above… since that’s another case where something is hidden.

  5. Changed navigation bar spacing and truncating. I now truncate to 16 chars or less and try to hit word boundaries. I’ve also make changes so that it’s easier to visually chunk each level: 1. Added padding around each navigation item. 2. Replace any spaces in item text with thin-spaces.

  6. Changed default light background color every so slightly so that navigation bars visually pop out against it.

Let me know how testing goes.

2 Likes

Works well !

1 Like

Just installed the new preview, first thing I notice are lots of gray down arrows at the end of each row in my document that seem, on first glance, to duplicate the effect of the small black “collapsed” arrow already present at the start of each row.
Untitled

Then, clicking on this arrow focuses in nicely on the row, but curiously I was expecting it to also un-fold the rows content (though I see how mirrors the existing “focus row” behaviour, for some reason clicking with my mouse felt like an action that would intend to un-fold).

Though, when I am focused on a row and have this lovely distinct up-arrow at the end of it, that does feel super helpful to better see when I’m focused inside a row. Love that it’s clearer when I’m ‘inside’ a row, and I like that it feels “look there’s more inside this row” is starting to become more clear as well.

Temporarily expansion of a focused row (both when clicking and when focus using menu items) is definitely on my todo list, though I’m not sure it will make it into this release.

Generally I “think” I want:

  1. When you focus into a row it is auto expanded and there’s no way to collapse it.

  2. When you are focused into a row the expand/collapse handle is replaced with the new “focus out” button.

  3. When you are focused into a row layout changes… guide line isn’t show. Maybe a divider is drawn under the focused row. The children rows are no longer indented an extra level.

The reason I haven’t just added these features with this release is there are lots of details to get right. In particular around animation, and that’s going to take some time and I figure better to get this current stuff out rather then hold it back.

I hope this isn’t going to be unpopular, but I seem to be finding all those arrows a bit distracting :slight_smile:

(It seems that I prefer to see data as widget-free as possible – perhaps my cognitive bandwidth is narrowing with age ?)


They’re a good design, but might there be any hope of making them optional, at some point ?

( My eyes keep getting drawn away from the text, and wondering whether an avalanche is coming down the slope )

2 Likes

I like some UI tweaks like navigation bar spacing and truncating, and the change of handle color scheme. :raised_hands:t2: However, I found that the “focus in” button is a little bit intrusive visually, especially when there are many buttons. I understand that the feature is handy for a user who is used to using the mouse or trackpad. Would you consider making it optional? (Like creating an option like ‘Show/Hide “Focus In” Buttons’ in the “View” menu?) Thank you.

Certainly unpopular with me! :slight_smile:

Like everything I’m flexible and in the end I can provide an option if needed.

I would rather find a way to keep them visible, but make them less distracting. I generally think that focusing is at least as important as collapsing in outlines. We already have quite a bit of non-optional UI dedicated to collapsing handles and guides. I hope there can be some design that makes focus buttons all a standard visible part of the outline.

I will keep thinking, but if anyone has thoughts on an alternative please let me know.

From my point of view problems with the existing design are mostly that the control positions aren’t very predictable since they depend on line length. But benefits are you can navigate with mouse (or touch on iPad).

My feeling is that they will make a lot of sense for any iOS iPadOS version that might emerge in the future, but that at the same time I particularly appreciate being able to work on macOS (even some of the time on iPadOS) in a:

  • keyboard-only used
  • only user data visible

mode, in which nothing functionally redundant impinges on the eye. I think it’s always been a strength of your designs.

( So I would personally feel some relief if the arrows became optional,
but, of course, I’m just one data point : -)

2 Likes

@jcb I just noticed in your screenshot the arrows are very big compared to what I see. Are you using a non-retina display?

For reference the row handle size should about match the focus button size:

Screenshot 2023-05-18 at 1.28.03 PM

Yes! I just un-plugged my MacBook from my 1920x1080 vertically rotated monitor, now on the native MacBook Air screen the arrows are far more tastefully sized!

1 Like

one more thing I noticed: When I un-fold a row, I think the fact that the “left-triangle” turns the same colour as the left-triangle on a child-less row makes me think it’s no longer clickable to re-fold again. Even though it rotates and points down, I noticed my brain for a moment go “wait can I click on that same triangle and it’ll re-fold?” and felt like I discovered something hidden when it worked, instead of intuitively knowing that I could just do that in the first place.

I think when the ‘child-less row’ triangle is the same colour as both the ‘re-fold this row’ triangle + the ‘focus-in here’ down arrow (I can’t believe I still haven’t learned the correct terminology), it makes me think I can additionally click on the triangle next to rows that have no children.

1 Like

Oh my god sorry one more thing, I just clicked on “Home” at the top on the navigation bar and it blew my mind! I’ve been using bike for 3h+ each day for a few months and I have no idea when that was added.

Also I love the new look of the navigation bar, even though I have no idea what changed. It just feels better?

1 Like

I love the new focus arrows and don’t find them distracting at all. In fact, they are super-helpful as I can never seem to remember the keyboard combo for focus. The arrow serves as a visual cue (NB: I nearly always use the mouse in my workflow)

1 Like

Yes, the handles don’t follow normal button conventions in this regard, but I think it’s a worthwhile break from convention. Otherwise I was just seeing too many dark handles everywhere.

This was just added in previous 1.12 preview release. It’s pretty new!