In the bottom bar we have the keyboard shortcuts like

[q] Quit [s] Search [←↓↑→,hjkl] Navigation [↵] Open bug [n] New bug [i] Pull [o] Push

Due to the even spacing, when you look into the middle of the bar, their associativity is not easy to read, e.g. is it Open bug [n] or [n] New bug?

Some simple ideas how the UX could be improved:

• Use alternating text colours (subtle is OK), e.g. [↵] Open bug in white and [n] New bug in grey. Background colours would also do.
• Use 2 or more spaces, like:

  [q] Quit  [s] Search  [←↓↑→,hjkl] Navigation  [↵] Open bug  [n] New bug  [i] Pull  [o] Push
  

• Use multiple lines, like:

  Quit  Search  Navigation  Open bug  New bug  Pull  Push
  [q]   [s]     [←↓↑→,hjkl] [↵]       [n]      [i]   [o]
  

• Use a connecting symbol (possibly also some unicode thing), like:

  [q]_Quit [s]_Search [←↓↑→,hjkl]_Navigation [↵]_Open bug [n]_New bug [i]_Pull [o]_Push
  

  [q]·Quit [s]·Search [←↓↑→,hjkl]·Navigation [↵]·Open bug [n]·New bug [i]·Pull [o]·Push
  

• Use a separator symbols, like:

  [q] Quit · [s] Search · [←↓↑→,hjkl] Navigation · [↵] Open bug · [n] New bug · [i] Pull · [o] Push
  

Niklas Hambüchen (nh2) changed the title from Keyboard shortcuts are not not easy to parse visually to Keyboard shortcuts are not not easy to parse visually 6 years ago

Michael Muré (MichaelMure) added label enhancement 6 years ago

Michael Muré (MichaelMure) added label area/ui/terminal 6 years ago

That's a good point. Not sure which one to choose, screen space is expensive there ...

Another solution would be to move them over a special keybinding popup but that does make it less discoverable.

Another solution would be to move them over a special keybinding popup but that does make it less discoverable.

I would definitely keep it on by default, for new users it is super important to learn what they can do pressing what, I would not have had as good as an experience trying git-bug without it.

Not sure which one to choose, screen space is expensive there ...

If you are concerned about screen space, the approach with colours or "Use a connecting symbol" are the most conservative. They use exactly as much space as what's there currently.

For symbols, I think my current visual favourites are dots or triangles

[q]·Quit [s]·Search [←↓↑→,hjkl]·Navigation [↵]·Open bug [n]·New bug [i]·Pull [o]·Push

[q]►Quit [s]►Search [←↓↑→,hjkl]►Navigation [↵]►Open bug [n]►New bug [i]►Pull [o]►Push

I haven't tried the colours yet because that's more effort.

I used "bold" for the last one. It's hard to be subtle with the 16 colors palette of VT100.

I'm leaning toward the triangle one. What do you think?

It's hard to be subtle with the 16 colors palette of VT100.

Some more ideas using background colours (I wrote this gist to make them):

Of this I like row 1 most, row 4 second-most.

Row 1 implemented in https://github.com/MichaelMure/git-bug/pull/372

What I'm wondering is if it makes it easier to read the first time but more obnoxious/invading after ...

What I'm wondering is if it makes it easier to read the first time but more obnoxious/invading after ...

I'll use it a it and report back, but I personally find it much less invading if with 1 eye flick I can double-check the key binding -- I find it more distressing/distracting if I have to start searching, so :+1:

@nh2 How do you feel about it now ? Looking back at it, it feels a bit aggressive to me with the hard blue/black transition. I also liked having the whole help bar colored instead of just the section with text.

Fixed with #372

Michael Muré (MichaelMure) closed the bug 5 years ago