User-friendly Keyboard Shortcuts

December 17, 2020 ·  Thomas Yip

Shortcut keys are designed to assist users to achieve operations conveniently and effectively. Lots of complicated steps have been simplified to keep users efficient and productive.

However, with so many existing software that comes with various shortcut keys, it's frustrating. Often times users get confused with the hotkeys and their corresponding operations. For some, the bad design of shortcut keys leads to difficulty in finding the right combo, and it's worse when the keys are far from each other.

Which has contradicted the whole intention of having shortcut keys. We definitely understand the pain. By putting ourselves in your shoes, we've reviewed our own shortcut keys and came out with an improved and enhanced version of keyboard shortcuts that are way more systematic and user-friendly.

The concept behind the keyboard shortcuts' design

Explaining the whys and whats are we changing:

A. Single key for operations with multiple shapes selected

To keep things simple, say goodbye to selecting multiple keys. For operations that involve multiple shapes selected now required only 1 shortcut key. For grouping that involves 2 and more shapes, instead of selecting both Ctrl/Cmd + G at the same time, all you need to do is just highlight the shapes you wanted to group and press the single key of G.

The same goes to joining 2 and more shapes, a single key of J is enough to trigger the operations.

Shortcut key for group operation
Shortcut key for group operation

B. Powerful Alt key for drawing tool operation and shape operations

Alt key comes in handy, especially for drawing tool and shape operations. So why not make use of the powerful Alt key? When it comes to drawing tool/shape operations, think Alt first.

  1. Alt + [number] - To switch/cycle between drawing tools. For example, select Alt/Option + 1 to cycle between the pointer and pan tools:
Shortcut key for cycling pointer and pan tool
Shortcut key for cycling pointer and pan tool
  1. Alt + [alphabet] - For shapes operations. For example, Alt/Option + F performs fragmentation on the shape:
Shortcut key for fragmentation operation
Shortcut key for fragmentation operation
  1. Alt key to reverse the group and join operations. For example, with Alt/Option + G, it will ungroup the grouped shapes:
Shortcut key for ungroup operation
Shortcut key for ungroup operation

C. First character of the operation name is used to be shortcut keys for all shape operations

We've decided to simplify it by taking the first character of the operation names as the hotkey. By doing so, it is more intuitive and easier to remember.

For example, the keys of Alt/Option + U is for Union of the shapes:

Shortcut key for union operation
Shortcut key for union operation

D. Shift key in shape arrangement

Instead of going through multiple steps, a shift key is thrown in the mix to arrange a shape to the front (topmost) or to the back (bottommost) easily.

Simply select Ctrl/Cmd + ], the selected shape will be brought forward. While you select Ctrl/Cmd + Shift + ], it brings the shape to the front (topmost):

Shortcut key for bring to front
Shortcut key for bring to front

E. Various type of shape resizing

  1. By pressing the Ctrl key and dragging on the handle, the shape will be resized proportionately.
Proportional resizing
Proportional resizing
  1. By pressing the Alt key and dragging on the handle, the shape will be resized from the center instead.
Resizing from shape's center
Resizing from shape's center
  1. By pressing Shift while dragging the path's handle, it'll perform offset function on the path.
Offset the path evenly
Offset the path evenly
  1. By pressing both Ctrl and Alt while dragging the shape's handle, it'll perform a combined effect - in which the shape will be resized proportionately from the center of the shape.
Proportionally resizing from shape's center
Proportionally resizing from shape's center

In short, we've enhanced the keyboard shortcuts to be much more user-friendly, far more intuitive, logical, and systematic. It may not be the most important aspect of our product but we're always looking to provide improvement day by day to ensure our users the smoothest working experience with Electra. For a full list of keyboard shortcuts, please refer to this help article.

We hope that with this improvement, you would have the smoothest working experience when using Electra. Thanks for reading.

AUTHOR

Thomas Yip

Founder at vecta.io, created Electra, engineering nerd.

Keep yourself updated with the latest development on SVG, Web development, CSS and Javascript.

vecta.io BETA