When designing UIs for specialized, non-standard displays like HMI panels with fixed resolutions and diagonals, it can be challenging to judge the appropriate scale of the user interface. The perceived size of elements in Figma or similar design tools at the big designer’s display often differs significantly from the real-world experience on the actual device or screen.
As a result, what might seem like a reasonable default font size for labels, button heights, input fields, and icon dimensions on a computer screen can end up being too small and difficult to interact with on the physical display. Conversely, while it is generally a good idea to make interactive elements large enough to touch easily, this can sometimes lead to overly bulky designs that require excessive scrolling or result in fragmented workflows, especially in engineering and other complex systems where higher information density is often preferred.
Adding to this challenge, it is not always possible to test the UI on the actual target hardware. The screens may not yet be purchased, or the process of exporting full-screen mockups to the hardware can be non-trivial.
Solution: Real-Size Printing
A practical way to address this issue is to print the UIs on paper, much like traditional paper prototyping. This approach allows you to quickly and inexpensively assess the readability of text, the clarity of icons, and the usability of interactive elements like buttons, inputs, lists, and tables.
The basic process involves creating a PDF that contains the mockups at the real-world scale of the target screen. Once printed, you can evaluate the dimensions yourself or gather feedback from potential users, making adjustments as needed. This iterative process continues until the design reaches a satisfactory level of usability.
Process
To ensure accurate results, I follow a structured process:
- Determine the Physical Dimensions — Start by calculating the physical width and height of the display based on its resolution and diagonal size. This can be done using a simple formula or with tools like my Skalk tool. Keep in mind that some HMI panels may have non-square pixels, which can complicate these calculations.
- Prepare the Mockup — Import the UI mockup into a document editing application. I typically use Adobe Illustrator, but tools like Microsoft Word, Apple Pages, or any other software that allows precise picture scaling can also work. Set the dimensions according to your calculations to ensure a true-to-life print.
- Print and Evaluate — Once the mockup is printed, assess the size and spacing of elements, considering expected viewing distances, hand positioning, and the broader context of physical interaction. While this article does not cover physical prototyping in detail, these factors are critical for a realistic assessment.
Tips for Efficient Testing
To optimize this process, I usually take a few additional steps before printing:
- Simplify the Color Scheme — To save toner or ink, I often strip out background colors, set all text to black, and add outlines to buttons and table cells. This keeps the focus on size and layout rather than color.
- Include Typographic Styles — I also print a separate sheet with all the type styles used in the design, along with any alternatives I might be considering. This makes it easier to evaluate text readability and spacing in a more abstract context.
- Test Button and Input Sizes — It can be helpful to include a series of buttons or input fields with varying heights and spacing (e.g., 8mm, 9mm, 12mm) to quickly gauge the best fit for different touch targets and usage contexts.
- Work Around Printer Size Limitations — If the UI is too large for standard paper sizes, I split the mockup across multiple pages with slight overlaps (often referred to as ‘Poster Printing’ or ‘Tile Printing’) and then tape or glue them together to form a full-size sheet.
Finally, this approach is also effective when working with remote teams or conducting remote user interviews, where physical prototypes are not practical but feedback on element sizing is still crucial.