Keyboard shortcuts

Juan Gomez

I knew keyboard shortcuts would always be a really important feature for nodenogg.in, I am a big fan of keyboard shortcuts, maybe that’s due to my macOS usage which always seemed to have a good focus on shortcuts and productivity, much more than Windows ever did. For me the main issue to consider with getting ideas out of your head and into any system is reducing cognitive loads.1.

Let’s take the post it note as the often default starting point for a design thinking process and as it becomes clearer to me that nodenogg.in is a co-creation2 tool, this mode of quick input followed by then arranging, its becomes more evident the starting mode of rapid entry will benefit from shortcuts the most.3

Some steps of process – post its

• Get the system out of the way, Great ideas really fly when in ‘flow’ state.
  Post it notes are a good example to follow.
• The barrier to use is as low as possible.
• Post its have an inbuilt character limit4
• They start as a collection tool.
• And then can become a spatial tool.

Keyboard shortcuts would help address this process. However picking the right ones is not as easy as it seems.

The process is never that linear when making something like nodenogg.in I am just chipping away at little bits of core functionality and I initially saw the needful keyboard shortcuts to allow quick connection and connection delete mode.

I was mainly thinking about the fact that after one connection was made this mode was turned off, so this would allow 2 handed control of the spatial view using the keyboard and mouse together to rapidly connect nodes and it would help me learn the necessary code for implementing keyboard shortcuts in Vue and Javascript. It was after this that the idea for quick creation would help with the cognitive load concerns I had when testing the initial input mode where students would open one node and just type only into this, the act of finishing and creating via buttons was way to slow and distracting.

So a purely practical starting point, I decided a good rule of thumb would be to follow the path a person is already familiar with so this would be to use well known shortcuts. On macOS these use the Cmd key followed by a letter so for example Cmd + n would mean new and this is what all macOS apps follow as convention, however to create these and it turns out that the Cmd key is apparently not considered a modifier key or at least it seems now that it is the Meta key which maps to cmd (macOS) and the windows key (Windows). But as nodenogg.in runs in a browser, I would need to disable any default behaviour of the shortcuts, this would be wrong, taking over these commands just because a person is at that specific URL would not be delightful.

So I proceeded to map to the Ctrl Key, I thought initially that I would use the keys c and v although usually used for Copy and Paste I felt that it might map to faster human interactions,
this worked well initially in terms of muscle memory, aka my hands where often use to these two commands. A bug then appearing at this stage where I would end up editing the previous data entry, it took me a while to realise what was causing this, I had set the editor text entry to get focus on opening so you could start typing straight away however now the keyboard shortcut was so fast that the editor “heard” the shortcut and started editing the previous entry as the new entry was not yet ready, clicking the button and typing was fine but the shortcut messed this up, so what I did was add a slight delay on the focus so the system was ready for input at the right time, it was a nice distraction and fun hack to deploy.

Of course I went to test on Windows and stupidly realised that the default key for Windows is Ctrl and so on windows these shortcuts would be conflicting. I next decided to move to the Shift key, why I did this before option or alt I am not sure now. I also decided to stick to c and v and that people would grow accustomed to this and then added z and x as Create and Close, next to c and v as Connections and Delete Connections. Of course I hadn’t considered what would happen when you typed a Capital in the note editor panel, so we did a bit of testing with the rule to not use capitals, if you did use a capital the system would try to perform said shortcuts which would usually close the editor. I also tried a new approach as I wanted to have a universal approach with a modifier key and swapped to Ctrl + 1 /2/3/4 again not considering on Windows this switches tabs in a browser. I then moved to the Option or Alt key. Adding Option plus and minus to zoom in was rather satisfying as it helped resolved the boundaries issue where you could drag something off the edge and quickly added the infinite canvas function I wanted, small win which I hadn’t even considered, this involved a little SVG canvas research.

https://keycode.info/

I might revisit META + Enter to close the window however I would need to work out how to target windows with another shortcut and this would mean moving between OS would have different actions where as in fact sticking to a universal action Option + Return could make this more useful not only for the people using nodenogg.in but also in explaining how to use nodenogg.in

Main take aways

• Sometimes things you think are simple take time.
• Keep up on the blog (more than you think) !
• Try and keep notes on even small changes as recalling exact details was hard
• Git versioning in gitlab can show progress (obviously) maybe something to visualise for PhD write up too.