Shocutz
A shortcut keyboard for designers
Designers use many shortcuts to maximize productivity, whether it's coding or using design tools such as Sketch or Illustrator. It's impossible to remember them all. Interestingly, there are shortcut keyboards created specifically for gaming or media production, but none for designers.
It seems as there is a niche for a custom micro-keyboard built to support the work of designers. Adobe Illustrator for example has over 100 shortcuts. What if there was a way to streamline access to these shortcuts? Would a device with quick shortcut keys be desirable and usable by designers? If so, what shape and features might the device contain?
This is an ongoing collaborative project. I work along with my colleague Brent Gruenke with the goal of open-sourcing the keyboard designs and accompanying code. So far, we finished the proof-of-concept stage with promising results. We are now perfecting the product and creating an interface to manage the keyboard settings. Read more about our progress below.
It seems as there is a niche for a custom micro-keyboard built to support the work of designers. Adobe Illustrator for example has over 100 shortcuts. What if there was a way to streamline access to these shortcuts? Would a device with quick shortcut keys be desirable and usable by designers? If so, what shape and features might the device contain?
This is an ongoing collaborative project. I work along with my colleague Brent Gruenke with the goal of open-sourcing the keyboard designs and accompanying code. So far, we finished the proof-of-concept stage with promising results. We are now perfecting the product and creating an interface to manage the keyboard settings. Read more about our progress below.
Process
We pursued a straightforward UCD process guided by the following questions.
- Does a shortcut keyboard increase designers’ efficiency in using Adobe Illustrator?
- Would designers want to use the shortcut keyboard in their day-to-day work tasks?
Technology choices
We researched ways to make an Arduino work as a USB keyboard. We discovered that the Micro Pro and Leonardo are best suited for programming a Human Interface Device (HID) because of the Keyboard.h library.
Unfortunately, we did not have access to either of those microcontrollers. Being the cheap students that we are, and too impatient to wait for shipping, we decided to carry on and make it work with an Arduino Uno.
Unfortunately, we did not have access to either of those microcontrollers. Being the cheap students that we are, and too impatient to wait for shipping, we decided to carry on and make it work with an Arduino Uno.
For the Arduino Uno to work as a USB device, its USB protocol has to be updated with something called Device Firmware Update (DFU). This process flashes new firmware to the unit. We used this tutorial and this GitHub repository as a reference.
Step-by-step for programming the Arduino
- Upload sketch in Arduino
- While plugged in, short the Arduino
- Use Atmel Flip (or DFU terminal commands on Mac or Linux) to upload Arduino-keyboard-0.3.hex
- Power cycle the Arduino
- Test buttons and uploaded sketch
- Short the Arduino again
- Upload Arduino-usbserial-uno.hex with Flip
- Power cycle the Arduino
- See that the com port detected the Arduino
- Rinse and repeat until the desired shortcuts are uploaded
We also had to decide on which buttons to have the keyboard. Since we were testing usability, we decided to have a combination of commonly used keys and some more specialized keys. After surveying many colleagues who use Illustrator frequently, we settled on:
It took a while to figure out which hexadecimal keys were for which keyboard keys. We found some excellent documentation on it.
![]()
Click on the image above to see the full code
Click on the image above to see the full code
With the programming mostly finished, we started envisioning the enclosure and keyboard.
Below are some iterations of the prototype. We started with using cardboard to model possible layouts. I also used an Arduino plastic mounting bracket to organize the breadboard and Arduino. I finally laser cut labels and a case out of mat-board to hide the Uno as seen in my Evaluation of the prototype.
Evaluation
We recruited 10 design students and asked them to complete five tasks without the shortcut keyboard that we designed. Then, they performed the same five tasks with the shortcut keyboard.
Task 1 On one layer, create 3 different colored rectangles on the artboard
Task 2 Color all the rectangles the same color
Task 3 Lock 1 rectangle, keeping it from being altered.
Task 4 Cut 2 of the shapes and paste them on a new layer
Task 5 Save your artwork for the web
Task 2 Color all the rectangles the same color
Task 3 Lock 1 rectangle, keeping it from being altered.
Task 4 Cut 2 of the shapes and paste them on a new layer
Task 5 Save your artwork for the web
We also asked participants:
- How satisfied were you in completing those tasks using the device?
- Was there anything that could be changed to improve the device?
- Would you use this device in the future? How?
Participants reacted positively to the functionality of the prototype. The general sentiment was that the keyboard would help them with using complicated software more quickly.
However, we could do better with the enclosure. The mat-board had more give than people expected, and some people did not push the buttons down all the way. Therefore, we will experiment with different button types.Additionally, the angle of the keyboard did not work very well, especially when participants prefered to work standing up. We plan to use a much shallower angle, making the keyboard more ergonomic by having a slightly angled interface.
However, we could do better with the enclosure. The mat-board had more give than people expected, and some people did not push the buttons down all the way. Therefore, we will experiment with different button types.Additionally, the angle of the keyboard did not work very well, especially when participants prefered to work standing up. We plan to use a much shallower angle, making the keyboard more ergonomic by having a slightly angled interface.
Shocutz v2
After seeing the excitement of our participants with the prototype, we decided to take the project further. Our goal is to make it available to designers as an open-source the project. We are now busy designing a new keyboard and enclosure artifact, as well as a desktop application to control keyboard settings.
We decided to redesign the entire device. We are currently sketching and rendering alternative designs, based on our user testing, as well as referencing existing products.
A mood board with the coolest references that we gathered for the design of an enclosure.
Desktop app
We are now in the process of developing a desktop interface to control the shortcuts keyboard. Early mockups below:
Next steps
As mentioned above, we are currently working on designs for the enclosure and desktop application. The next step will be a round of user testing with many more participants than we did previously, and market research.
A commercialization alternative would be to fabricate parts of the enclosure and components, and send it to people as a low-cost DIY kits.
A commercialization alternative would be to fabricate parts of the enclosure and components, and send it to people as a low-cost DIY kits.