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 either commercializing it as a product, or 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.



Proof-of-concept



We pursued a straightforward UCD process, guided by the following questions.

  1. Does a shortcut keyboard increase designers’ efficiency in using Adobe Illustrator?
  2. 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.
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.




The workflow for programming the Arduino is:

  1. Upload Sketch in Arduino
  2. While plugged in, short the Arduino
  3. Use Atmel Flip (or DFU terminal commands on Mac or Linux) to upload Arduino-keyboard-0.3.hex
  4. Power cycle the Arduino
  5. Test buttons and uploaded sketch
  6. Short the Arduino again
  7. Upload Arduino-usbserial-uno.hex with Flip
  8. Power cycle the Arduino
  9. See that the com port detected the Arduino
  10. 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:

  • Copy
  • Paste
  • Cut
  • Eyedropper tool
  • Lock current layer
  • Save for Web
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






With the programming mostly finished, we started envisioning
possible designs for the enclosure and keyboard. See some of the first ideas on the right.




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

We also asked participants a few questions:
  • 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 were surprised and 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 more 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 via crowdfunding or open-sourcing the project. We are now busy designing a new keyboard and enclosure artifact, as well as a desktop application to control keyboard settings.


A mood board of the coolest references that we gathered for the design of an enclosure.
Keyboard and enclosure
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.





Desktop app
We are now in the process of developing a desktop interface to control the shortcuts keyboard.

We have been working on a constant exploration cycle, making use of low-fidelity and high-fidelity prototypes for 3 different scenarios, which will guide our next evaluation:








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.
Additionally, we are debating if this project should be put on kickstarter or if we should simply open-source the project. Another commercialization alternative would be to fabricate parts of the enclosure and components, and send it to people as a low-cost DIY kits.





More case studies