Actyx open-sources a React library for industrial user interfaces

July 12th 2020 by Simone Poggiali

Industrial UI is an open-source React toolkit features over 45 reusable components and is mostly meant for rapidly building Shop Floor Applications that can run on Rugged Industrial Tablets.

We started this project internally in 2017 driven by the need to maximize operators' user experience and productivity for our customers operating in industrial environments, now we are happy to make it available for everyone.

Industrial UI solved several issues we were facing when creating user interfaces that we could not solve by using existing libraries such as Material-UI or Bootstrap, below I will summarize a few aspects.

Out of shelf UI libraries are designed for general usage on mobile and desktop environments and do not fit well with operators on the shop floor, the usage environment in a factory is just different.

During our user interviews with different operators, we found out that on many occasions they had an issue with readability of text and the size of the hittable area for these components; for instance, Buttons were hard to tap under 65px height with gloves.

Industrial UI helps to solve some of these usability issues by having chosen carefully the dimensions of key components such as Buttons and Typography.

Button sizes comparison between Bootstrap, Material-UI, and Industrial-UI: Button sizes comparison between Bootstrap, Material-UI, and Industrial-UI

Typography comparison (smallest size) between Bootstrap, Material-UI, and Industrial-UI: Typography comparison (smallest size) between Bootstrap, Material-UI, and Industrial-UI:

Color and visual contrast also play a major role on the shop-floor, where the light condition could vary and where operators need to find the right elements to interact in the UI as fast as possible. Industrial UI has a revised color palette which emphasizes contrast still maintaining a well-balanced visual impact which facilitates readability.

Industrial-ui is super easy to learn and flawless integrates with React Pond and will help you to stay productive, give it a try at: https://github.com/Actyx/industrial-ui

Related articles: How to set up a new project and import Industrial UI

Latest posts