Prototyping Human-Machine Interfaces: A Guide for Product Designers
--
In the race to innovate, forward-thinking companies are creating new hybrid physical and digital experiences that are resulting in new interaction paradigms, paradigms that Figma, Adobe Xd, and Sketch are not quite built to fully realize.
Prototyping iOS/Android apps and webapps is fairly straightforward. But have you ever wondered about hardware-based prototypes? Or how a company like Apple or Lucid prototypes hardware products with new human-machine interfaces?
If so, then this multi-part series, which is designed to help UX and product designers become familiar with hardware-based prototyping, is for you.
In this 4-part series, I’ll walk through:
- The programs, hardware, and steps needed to get up and running. (This article)
- How to use a mini-button with an Arduino Uno to interface with Figma.
- How you can use ProtoPie to do more advanced prototyping.
- How to build a custom PCB board with multiple buttons to perform complex actions.
Going Beyond the Usual Toolset
In the case of Apple, prototyping the UI experience for an AppleTV app seems easy enough at the onset, but it can quickly get complicated when you factor in a physical remote control as input. For Lucid, bringing new and highly usable modalities of interaction to life was only possible with unconventional tooling.
Designing complex digital products with hardware interfaces requires tooling and prototyping beyond what traditional design tools like Figma, Adobe Xd, and Sketch can provide. While you can certainly simulate hardware controls and outputs as 2D representations, prototyping usable experiences with these tools almost always fall short of intended expectations in user testing.
Fortunately, a solution exists, albeit a creative one that takes some experimentation and courage. Pairing Blockdots and Arudino, two powerful hardware/software prototyping platforms, with high-fidelity prototyping tool Protopie allows you to easily build hardware prototypes with little-to-no coding knowledge at all.
Value: Hardware Prototypes vs. Static Prototypes
You might be wondering if it would be easier to simply create visual representations of the hardware input or output controls you’re trying to emulate within Figma or Sketch.
While it certainly would be, creating a hardware-based prototype is still the way to go, because it results in a higher-value prototype that allows you to test within specific contexts and constraints, and is much closer to a user’s reality.
If your goal is to test physical button arrangements, as well as their intent and actions, then a traditional screen-based prototype might alter or skew the test results. Furthermore, if you’re designing a UI for small screens with custom button arrangements, a ProtoPie-powered prototype makes more sense.
However, if you’re testing micro-animations or touch-screen interactions, it’s best to stick to Figma and possibly simulate hardware interactions.
Why ProtoPie and Not Figma?
Figma is a powerful design tool that allows you to create user interfaces and prototypes. Its collaborative features make it easy to work with a team and iterate on designs quickly. However, it falls very short when it comes to being able to control hardware instances via Blokdots.
Due to a limited API, you’re only able to manipulate a subset of elements within Figma such as rotation, setting text, color, opacity, or changing position and size. Furthermore, these actions are only able to be performed in Figma’s edit mode and cannot be run as a Prototype. The actions performed via hardware components will manipulate the current condition of objects on your canvas and thus are destructive in nature.
While Figma isn’t the best design tool to interface with hardware components, it does serve as a great exercise to become familiar with the apps, tools, and concepts involved. (In the next article, I’ll show you how to quickly build a Figma prototype to help bridge the gap between UI and hardware components.)
A Better Time Investment
With these sorts of hardware-based prototypes, you can easily identify and understand the behavioral and situational contexts that lead to poor usability.
As designers, we often create rich and detailed screen prototypes for early tests, but if the modality context is off, the time investment in detailed UI doesn’t pay off.
Increasing the fidelity of a prototype through design certainly leads to better quality results when you test against your hypotheses. However, this eventually reaches a point of diminishing returns. It’s possible for the prototype to be too polished conceptually, while still not working in reality, meaning it won’t yield a meaningful return on your time investment.
At the heart of any hardware-based prototype are 3 core ingredients.
- Arduino — Arduino is a popular open-source hardware and software platform perfect for creating interactive projects. An Arduino takes electrical inputs from a range of controls, sensors, and outputs and sends the signal over USB to your PC.
- Blokdots Pro — Blokdots is a hardware prototyping platform that allows you to build electronic circuits without any coding or soldering. It’s the bridge between your Arduino and UI design.
- ProtoPie — Professionals will gravitate toward the flexibility and robustness of ProtoPie Pro. The software suite allows for a range of interaction types and has the ability to host files in the cloud.
Arduino
Arduino is an open-source electronics platform based on easy-to-use hardware and software. Think of it as a mini-computer and a development environment that allows you to write, upload, and run code on the board.
The Arduino used in these demos receives signals from buttons, LEDs, and a number of other available sensors, and then using Blokdots, it renders them into something a traditional PC understands.
For prototyping with Blokdots and ProtoPie, any of these boards will work well, as long as the Arduino unit has headers built in.
You’ll also need to ensure your Arduino ships with a power supply as most don’t. You can always purchase one separately as well. To make a connection to your PC, you’ll need the appropriate USB cable.
I recommend the following, but you can also purchase a bundle of these components.
- Arduino Uno Rev 3
- 2.5A Power supply
- USB A to B cable
Switches, LED’s and Arduino Components
Once you have your Arduino, you’ll need some hardware input and/or output components. Hardware inputs, also referred to as sensors, allow you to send hardware signals to your UI elements. Conversely, output components allow you send UI or touchscreen inputs to your hardware elements.
Input Components:
Output Components:
The best option for beginners, and something I use regularly, is the Grove Beginner Kit for Arduino. Grove is a system of components created by Seeed Studio. The system removes the need for soldering and wiring your own components. The kit ships with 10 output/input components, cables, and is arranged on a PCB board that can interface directly with Arduino.
The Grove board connects directly to the bottom of an Arduino (Uno Compliant). To connect both, line up the header pins of the Grove board with the Arduno headers on the bottom of the board and firmly push together.
There are hundreds of components that currently support the Grove system which allows for future expandability and growth of your hardware. Before buying additional hardware-components, check if the component is supported by Blokdots.
Blokdots Pro
Blokdots Pro is the app that helps connect the signals from your Arduino and Grove board to your design environment. It does this through integration. If you’re familiar with event triggers and if/then statements, then using Blokdots will be a breeze.
The fundamental premise is to create objects in Protopie (or Figma) and assign them if/then statements in Blokdots, while also assigning if/then statements to hardware components as a way of manipulating UI elements.
Pricing could be a turnoff for many at 99€/year or 15€/month for the Pro version ($107.88 and $16.35 USD at the time of writing).
Setting up Blokdots is straightforward with a MacOS and Windows binary. Both are downloadable here. Once you have it installed, run the program. Depending on your Arduino and components, you might need to install additional helper software.
The Blokdots workspace is defined by “projects.” For every Figma x Blokdots prototype, you’ll want to create a new Blokdots project.
Protopie
ProtoPie is primarily a no-code, hi-fi prototyping tool for mobile, web, dashboard, and digital screens. The app works using an if/then premise similar to Blokdots, which it calls “triggers and responses.” Protopie Pro and enterprise plans include ProtoPie Connect, an extension app that allows for even more real-world scenario based prototyping.
These are the three main components of ProtoPie to become familiar with:
- ProtoPie Studio — for creating interactions.
- ProtoPie Player — for running prototypes on smart devices.
Prototyping with hardware can seem daunting, but with the right tools and steps, it can be a breeze. Blokdots, Arduino, and ProtoPie make a great team for quick and easy work. Try them out on your next hardware project and see how they can help you bring your ideas to life.
In part 2, I’ll walk through how to setup Blokdots with a ProtoPie prototype.
Originally published at https://medium.com on April 6, 2023.
