I am a software developer and basically only use the browser and a text editor and pretty much no other apps (well, the terminal, google calendar, email, slack, etc., but pretty much focus on the text editor).

I don't really use complex editors like Figma, Photoshop, Sketch (graphics), Audacity, Protools (audio), After Effects, Final Cut Pro (video/animation), Maya, Blender (3D), etc.. So I don't know what is a good workflow for using the keyboard to navigate and sculpt or change variable values, and am looking for conventions or best-practices when it comes to keyboard shortcuts, in a particular regard.

For my particular situation, I am thinking of making tools which edit 2 to 20 properties let's say, which can be simple x/y values, colors, widths/heights, select boxes with many options, toggle switches, etc.. Basically:

  • Integer inputs
  • Float inputs
  • Range inputs
  • Switch/checkbox/toggle inputs
  • Select inputs
  • Autocomplete inputs
  • Simple text inputs
  • Text editor (like a code editor) inputs

Trying to keep it somewhat simple and just have these basic data types.

You are editing these values to preview something (like build a CSS box-shadow) or make a final thing happen (like create a file export).

What are some resources I can look into, or ways I can approach building the keyboard into the workflow for such an editing experience?

I am imagining Photoshop (with my limited usage of it in the past). I don't know if this is how it works, but go with me for a moment:

  • You press CMD+SHIFT+P to enter "command mode"
  • You press "x" to start editing the "x" position variable.
  • You then press a number, or can hold CMD and drag the mouse up or down to change its value.

Or this:

  • You press A then S to enter command mode
  • You press w then h to bind width / height to the editing mode
  • You type a number again and it press enter to set the width and height.

Main questions:

  1. Are there any examples of such things out in the wild I should look carefully at?
  2. What are the conventions for the different modes you can enter into to change what pressing a key means (command mode, edit mode, etc.)?
  3. How can you quickly get good at jumping around properties with the keyboard and changing their values?

For my particular case, I don't expect to create a product as powerful as Figma or Maya, which needs highly configurable keyboard shortcuts. Instead, I would like to have a simple set of keyboards for editing form values on different simple editors, nothing which is customizable.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.