Interface design for industrial controller

Hello! My name is George, I'm a designer.

While we all go home, I decided to share my experience in developing interface design for industrial automation. It so happened that a large number of professionals are involved in application design and website design. But there are not so many good specialized interfaces designed for managing engineering systems.

For some reason, it is generally accepted that design is not needed in this industry, and if an engineer cannot understand the system, then it rather indicates his qualifications, and not that the interface can be poorly thought out, the information is presented in a chaotic set, in which it is impossible to quickly navigate, which, in turn, leads to overwork and user errors.

First, I’ll tell you how I made the interface of the ventilation system control panel for Segnetics software. We started the project by studying the user and the operating environment. We studied and modeled in detail how and where our panel will be used. Often these are semi-dark technical rooms, an arrangement on boards or installations. Realizing this, they began to look for analogues and ways to solve similar problems. We went over many interfaces: medical devices, automobiles, production systems management, etc. We decided that we like the interface style of modern aircraft instruments, the main advantage of which is that the pilot should as quickly as possible read only important information cleared of visual noise. This principle we laid the foundation for the entire future interface and moved on to prototyping.







At the initial stage, we sketched out the main blocks in the natural size of the screen and poured the program into the controller to check the areas where the elements were pressed, the transition logic.
Having approved the layout, we switched to sketch search. We went through a large number of options for sketches and styles. They approximately understood what we wanted, decided to try a more detailed study, but a small fragment. Flat? Skeuomorphism? Maybe take the style of drawing graphics?







Gradually we find the image that suits us and begin to study. The main screen with which the operator will interact is the mimic diagram. It should display the important parameters of the inflow and exhaust, the status and status of devices in the system. We look at some tricks in aircraft, collect a mnemonic diagram, watch it at maximum load, and how it will look 90% of the time.











We approve the general style and move on to the development of the remaining screens. The most interesting is the setup task screen. We went over several options - a mobile phone picker, entering a number from the keyboard, etc. And they decided that it’s cool to make a touch dimmer for rough setting of a number, and the + \ - buttons for a more accurate one. Here I would like to say a big thank you to the Segnetics programmers, who made the tuning wheel spin smoothly and play nicely during its stop. True, it turned out very high.

We work through all the screens and animate devices, states. Accidents, freezing, breaks in the belt, how the filter bra is inflated and deflated during the start and stop of the system. How progress bars are filled.









In the next step, we adapted the control panel interface for use in another controller. We added the function of creating a schedule, changed the main screen, since this controller can only control a specific installation, while the panel supports the management of several systems.







The customer of the next project was the Moscow Cooga self-service car wash network.

I have a friend programmer who leads excellent programming courses for engineers right here (plc-edu.pro), he asked me a question. “Gog, I'm doing a self-service car wash program here. The customer wants everything to look professional and cool. Can you help us with this? ”

As a designer, I had to formulate the logic of interaction between users of different levels with the interface. Understand what data all users should see, and what access is needed only through a password. How to build the logic of the settings task so that it is intuitive and does not require a multi-page manual?

To start, I made a list of roles and the steps that are important to them. What needs to be done to implement this or that scenario.



As a result, we got an interactive prototype in Fig, which displayed all the basic functions and actions. On this prototype, I conducted several tests to test the design hypothesis and logic.



What the interface looks like in the end, it is no less important (although many people think differently) than how the service works. Appearance forms the impression of the service. It creates a mood. Builds an emotional connection between a person’s device. It is the design that makes the use of the service fun. If you want to build a long relationship with your client, pay attention to this. Having drawn all the icons, buttons and their states, we proceed to programming.







Here I want to talk separately about how Figma makes life easier. I drew my first ventilation interface in Illustrator. I had to cut hundreds of elements and their states in PNG, save many folders. Make pixel-by-pixel markup of the position of elements on the screen. Fortunately, today all this is not necessary. We add the programmer to the working file of the Figures and he can already see at the prototype stage which mechanics will be used and give his own assessment of the possibility.

Another small project is the exhibition interface for emulating the operation of a heat pump controller for Thermex.

I will not repeat myself, the way is the same - from the goals of use and the prototype to the final guidance of beauty. The project was completed 2 weeks from the signing of the contract to the final OK from the client.











In parallel with automation projects, I worked on medical system interfaces. An application for doctors of the admission department, an application for district doctors who go home. Registry interface and drug prescription system design. If interested, I'll tell you next time.

Open for cooperation and I will be grateful for constructive criticism!