HMI: How to Design UX and UI for Physical Products

Nowadays, each of us comes into contact with dozens of screens every day. It is not just our smartphone or computer; smartwatches, ticketing kiosks for public transport, digital dashboards in modern cars, and even some refrigerator models are just a few examples of physical devices we interact with through a screen.

Designing for non-conventional screens requires a careful evaluation of the usage context and the specific characteristics of the device. What needs to change in a digital product when the user interacts with it while standing, wearing gloves, in the dark, or with a line of people waiting behind them?

Human Machine Interface: what changes compared to designing a simple application?

We are used to taking the device we use to interact with applications for granted. Whether it is a phone or a PC, we are familiar with the device and know exactly where to expect options, available actions, and features.

When we are faced with a less familiar device, however, we truly realize how the physical interface acts as a bridge between humans and technology, with its own unique characteristics that must be taken into account.

When designing UX and UI for these products, all three actors of the interaction must be considered: the person in front of the screen, the screen itself, with the information displayed and the actions required and, just as importantly, the surrounding environment. Only by considering all three can we achieve truly ergonomic design for a physical product.

How the user of a physical product differs

A user interacting with a physical product is different from a user of an application or website, because the situation in which they operate is different.

First of all, the use of the product is often mandatory, driven by a need that must be fulfilled. For example, when paying for parking at a machine, users usually cannot choose a different one with better design or usability.

The user’s emotional state is also different. Consider someone interacting with a postal service kiosk to get a queue number. This user is likely stressed, in a hurry, and wants to complete the task as quickly as possible, possibly feeling the pressure of people waiting behind them.

By nature, physical products are often used in situations where attention is fragmented and the available time is very limited. In some cases, incorrect usage can even lead to costly damage, as with industrial machinery.

Designers must take into account the psychological characteristics of users and anticipate their needs, making the interface intuitive and accessible.

The importance of the surrounding context in physical product design

The environment surrounding a user while interacting with a digital product is often underestimated. When thinking about phones or computers, we rarely imagine anything interfering with the interaction, except in specific cases such as sports-related applications.

For applications designed for physical devices, however, external factors that influence product usage become crucial.

Consider a ticket-purchasing kiosk at a bus stop. Since it is located outdoors, there will likely be traffic noise or conversations from other people waiting, making audio feedback difficult to hear.

Weather conditions must also be considered. The kiosk may be used under direct sunlight, reducing screen visibility, or at night, which affects visual perception in a different way.

There is also a physical aspect to consider. The device may be bulky, or the available space may be narrow. Users may interact with the product under suboptimal conditions, such as having their hands occupied, for example at payment kiosks in stores where they may also be holding a wallet or shopping bags.

In short, knowing where and how a product will be used allows designers to adapt it accordingly and prevent errors and frustration.

Adapting UX and UI to physical devices: a practical guide

Physical devices require UX and UI to be tailored to their intended use. Usage contexts vary widely, considering the many types of physical devices available. Some examples include:

• Payment terminals and self-checkout machines
• Smartwatches and fitness trackers
• Kiosks in museums, parking areas, hospitals, post offices, and more
• Digital dashboards
• Parcel pickup lockers
• Smart vending machines for cigarettes, beverages, and other goods
  

Each product is unique, but there are general guidelines that apply across most scenarios.

How to design effective HMIs

The first step is always to consider the usage context and its specific characteristics. In general, designers should be able to answer the following questions:

• Who will use the product? (e.g. elderly users, children, emergency or high-stress situations)
• Where will it be used? (e.g. noise, lighting conditions, crowd movement)
• How will it be used? (e.g. hands occupied, standing in line, wearing gloves, logistical constraints)

In noisy or distracting environments, it is essential to design simple flows that reduce processes to the bare minimum: few intuitive steps and no unnecessary elements.

Immediate feedback should be provided, ideally through multiple channels, to increase accessibility in conditions of poor visibility or high confusion. Feedback does not have to be textual; it can also include vibrations, sounds, or other signals.

The UI must be adapted to be easy to use in the specific situation: text should have strong contrast and be concise, supported by meaningful colors and easily recognizable icons.

Providing redundant interaction options can also be helpful, such as allowing confirmation both verbally and via touchscreen, or offering physical buttons in addition to digital ones.

Common mistakes to avoid when designing physical products

Who has never felt frustrated in front of an extremely slow kiosk, to the point of wondering whether it was broken, or wasted time trying to understand unclear instructions on a parking meter?

To prevent your users from experiencing the same frustration, avoid these common mistakes:

Mistakes are inevitable. The best way to prevent them from affecting users is to test the product thoroughly, especially under real-world usage conditions.

Mabiloft case studies

At Mabiloft, we often work with physical devices, primarily smartwatches but also very different types of hardware. Here are two case studies involving less conventional devices.

A kiosk for resort guests

The challenge. The kiosk was designed to allow guests to perform various actions within a resort, both indoors and outdoors. Potential users included children and people of shorter stature.

The solution. We started by studying kiosk-specific standards. It quickly became clear that we needed to carefully balance element size to ensure both readability and visual cleanliness. We also optimized the layout for standing posture and typical viewing distance.

To accommodate differences in height, we rethought traditional navigation patterns. Instead of placing the back button at the top, we integrated it into the lower part of the screen, making it accessible even to shorter users.

Designing for the tiny screen of a POS terminal

The challenge. Designing for a payment terminal is inherently complex. Maximum precision is required, as errors can have direct financial consequences, and interactions must be extremely fast to avoid delaying other customers.

Additionally, POS screens are extremely small and cannot accommodate many elements.

The solution. To avoid distraction and confusion, we minimized on-screen content and used large, well-spaced buttons.

In addition to simplifying flows, we removed scrolling altogether, recognizing that it would reduce the immediacy and clarity of interaction.

Are you thinking about developing an application for a physical product? If you are looking for advice, support, or simply a conversation with people who have already been there, feel free to reach out. We are curious to learn about your next product.