What’s wrong with SCADA-systems interfaces?

Hello everybody, my name’s Evgeny, I’ve been doing automation and BMS of engineering systems for over 10 years and I also have been managing my own small team.

The focus of my work — is the development of complex BMS systems of engineering and technical communications. To put it simply, it’s building a smart house but in the scope of a big warehouse or, for example, of a shopping mall.

Let’s go over the example with the shopping mall for demonstration. To attract as many visitors as possible, the shopping mall management tries to do their shopping convenient to the max, and, consequently, the shopping mall is equipped with dozens of complex systems: lighting, ventilation, air conditioning, heat supply, water disposal and many others, concealed from the visitors’ eyes.

The disruption of any of these systems’ operation is unacceptable. However, while a smart house, as a rule, is done per host’s requirements, SCADA-system (in our case BMS is more appropriate) is developed for maximally quick informational output for the maintenance staff. That’s what I’d like to tell you about.

As a rule, inside each system there are own sets of default libraries, aimed at simplifying and speeding up the programmer’s work, and most often these libraries aren’t outstanding in their quality.

Processing img puwhes7o1wlb1...

An example of BMS interface for a heating supply unit

Here are some more examples of BMS interfaces of ventilation systems, made in different programs. With a rare exception, the interface isn’t worked out properly, and looks stuck in the beginning of 2000s.

https://preview.redd.it/kmzzzvi12wlb1.jpg?width=939&format=pjpg&auto=webp&s=5c2eccbd5a2c7865afe482b599d9eb40f9264160

https://preview.redd.it/ljn6tin72wlb1.png?width=662&format=png&auto=webp&s=7a7fd17e1c74f0f09157c3a762e72d80fade2057

https://preview.redd.it/1fo1cd4g2wlb1.jpg?width=900&format=pjpg&auto=webp&s=32ecda668256ec93f3a66755287e73e6521215e6

The quality of these ready-made solutions can be various, but the majority of them are very similar to the examples above. And, as the situation hasn’t changed for over 10 years, let’s try to figure out why it happens.

For a start, let’s see what interfaces our colleagues do for smart houses:

Interface example from the website iridi.com

Things are better in this field — as, while ordering high-tech and high-priced equipment for a house or an apartment, a client demands quality in detail, sophistication and attention.

Smart houses interfaces are diverse: they can be liked or disliked, can become old-fashioned in a couple of years or remain relevant for years, can be designed for iOS or Android, can be convenient or inconvenient, but, regardless, they are often worked out, and resources and time are spent on them.

There’s similar situation with production equipment. Manufacturers spend money and time on developing and improving their products, taking into consideration the operational experience.

Electric power quality analyzer

At the same time, in the development of BMS system interfaces the case is different, it’s rare when contractors spend time and effort on interfaces beyond standard libraries. Our work has its own peculiarities which explain the raised problem.

Firstly, the facility always has pressing deadlines. Always. There’s no building process which is completed in due time or ahead. BMS system – is the last stage of the object, it’s developed after all engineering systems have gone through installation and adjustment works.

The company needs to present the results maximally fast and sign the acts to get the money – it means the fan should be spinning, and a green light should be on. It’s not the matter of beauty because there’s no time for it, no contractor would disrupt deadlines to make a lamp more beautiful.

Secondly, a programmer usually does BMS. He or she needs to unite various interfaces, protocols, check all connections, setup servers, databases, configure much of different third-party OPC equipment, create several thousands of tags, create schedules, create and test scripts and, finally, drag and bind several thousands of variables to mnemoschemes.

When we were developing BMS for the shopping mall, we had more than 12,000 variables, around 10 working days were spent only to bind them to the interface elements. A programmer has plenty of work at the facility and there are many hidden dangers that can pop up from anywhere. There’s just no time to draw pictures and adjust them by pixels in such environment, and nobody would keep a separate designer on payroll for such tasks.

Thirdly, there’s a common opinion: we do scada for the technician, and he or she needs a big green button and a big red lamp, there’s no point in pretty pictures.

Indeed, an engineer needs a simple and convenient interface with quick-read information. Overabundance of pretty or unpretty pictures isn’t needed, one shouldn’t disrespect the future maintenance team, as an engineer or a technician – is able and knows what a pump or a valve is, it isn’t necessary to pass to him or her a huge picture of low quality once more, also in 3D.

I see interfaces with big number of static pictures quite often, for example, for a heat exchanger, which carries no useful information at all, and next to it is a yellow variable value on the grey background, simply unreadable.

In the end, everybody has mobile phones on-hand now, with a modern operating system and apps – people have got used to good high-quality interfaces since long ago, and we make them get back to the times of Windows ’98.

Recap

We work in a highly-specialized field of engineering systems BMS of buildings and facilities, there’s really a lot of work, it’s complicated, requires preparation, experience and well-coordinated work of programmers, designer engineers and technical engineers, yet not enough attention is paid to user interfaces in this field, because there isn’t staff, time or reason for it.

Nevertheless, taking into account my experience with operating organizations and people, especially commercial organizations, I can say that people need not only monitoring and management, but also a good, high-quality and convenient user interface.

What are we going to do?

In 2017, I signed a contract with one very large European company for logistic center BMS, the total area was 120,000 m2. For me it was a serious problem, as I wanted to complete everything at a very high level, including a high-quality interface for the maintenance team guys. I had already had experience in interface development by that time, but it, surely, wasn’t enough to implement my ideas.

One of the facilities from 2016. The panel for the operator of the water treatment station. Many extra and horrible pictures, the variables are non-evident and disappear in the blue outlines, the lamps taken exactly from the standard library.

Through freelance boards, I found a designer whose works I had liked, and we completed a nice interface for the operator panel within 2 weeks. This panel became the basis for all other further interfaces, which each new site we refine and improve, yet the concept remains the same.

Operator panel for combined extract-and-input ventilation, 2017. 7 inches, screen resolution 800x480

https://preview.redd.it/3f6pobkf4wlb1.jpg?width=2714&format=pjpg&auto=webp&s=608a7d1778644f7621e78ea31227a86f57dbdc58

https://preview.redd.it/2ai4hlkg4wlb1.jpg?width=2728&format=pjpg&auto=webp&s=699a075ab079f58dd2a0b01445c73fc458e698a0

We chose the colors from the scheme named material design, re-drew all the icons anew, made even and divisible indentations, picked out a font and its size. Back then, we still used 3D pictures and animation.

The important point: the designer did all the work in Photoshop, after which we cut out all the elements separately and started gathering them in the framework of the operator panel. It happened to be inconvenient: some elements started floating, and the indentations were ruined.

Now we do it differently, all static visual elements are created in Photoshop and uploaded as a whole picture, over which all variable and dynamic objects are displayed. Thus, we can do a layout evenly and decrease the system load, as the panel would upload one file rather than a dozen of pictures.

This year we have reworked the panel interface, have fully stepped away from 3D, have changed the color scheme, yet the whole idea – to decrease the number of secondary and unnecessary information and highlight the required parameters more – has remained unchanged.

https://preview.redd.it/l0e6qqcd5wlb1.png?width=1170&format=png&auto=webp&s=15af8b693488ad4b78aef064056937e69712f545

And this is what a BMS mnemoscheme looks like. In the general plan of the building, all engineering systems are located: administrative blocks ventilation, warehouse ventilation, lead-in distributors, power factor corrections, a boiler room, temperature mapping, septic tanks and electricity and capacity metering.

We did such a card interface with systems setting per location. Each card contains most important information, status, alarms and necessary parameters. It’s possible to get all the necessary information on engineering systems performance for the logistics center without quitting the main window. By clicking a card, we go to the system window with advanced parameters and configuration.

An engineer station, 27-inch display, screen resolution 1920x1080

Here BMS is carried out on the basis of the Russian manufacturer Simple-Scada.

More on the creation of BMS interface

One more significant project for me we implemented in 2018 — it was a major shopping mall in Moscow Region. Using this project as an example, I’m going to share my experience and knowledge, and I hope it may come in handy for somebody.

https://preview.redd.it/nezwjo0j6wlb1.png?width=1920&format=png&auto=webp&s=af25bd70c4f171e1db1931359846f8316e302855

The shopping mall had a huge number of various engineering systems, it would take long to mention all of them, moreover, they have a lot in common, that’s why I’m going to talk about 96 ventilation machines, stationed on the roof and distributed in 15 ventilation rooms.

Topology

The main ventilation window contains the shopping mall plan, the top view, the sections’ names and the stationed HVACs, binded to the ventilation rooms and their real positions. As there’s lots of data, we need to output only the necessary info to the main window.

We decided that the most convenient would be to create a text name of the system and color it into the necessary color: white − standby, green – operating in normal mode, yellow – alerts but the system is operating, red – alarm, grey – out of service.

We couldn’t place all the temperatures, modes etc. on one screen as we simply didn’t have space, that’s why we made it that way not to create a mess. When coming up to the display, the engineer got all the necessary data with a quick glance, if everything was green and there was no red – good.

By clicking a ventilation room, a window opens, containing advanced configuration for installations belonging to that particular ventilation room. In this window one can see modes, temperatures and set points, or can get the overall performance assessment of the system.

https://preview.redd.it/2xa16snr6wlb1.png?width=1920&format=png&auto=webp&s=74d9804872a9e163cecba6560003a5ab3859bac0

By clicking a particular ventilation system, we get to the configuration window, where all the parameters and configuration of the installation are displayed. In this window, we get all the necessary operational information, we can make changes and keep track of them.

https://preview.redd.it/zuvvftdw6wlb1.png?width=1924&format=png&auto=webp&s=51289c47031690884d6c12177e786739acc18176

Colors and theme

We almost often use a dark theme. The reason isn’t that it’s trendy and modern, but because control rooms are 24-hour, people are constantly there, at night, as a rule, the room’s dark, shift change is possible, someone may be sleeping, and having a white screen light on in the room isn’t a good idea – a shift engineer won’t be thankful for that.

Overall, a dark theme is easier to look at and gives less stress to the eyes, more so during a longer use, particularly in dark spaces.

In the project, we use only 9 colors, it’s the maximum, it’s not possible to make less colors, while it can be too fancy if there are more. Three dark colors are used for the background, navigation and other static elements. Grey color is applied to all static text captions and headlines. White color is used for variables, all whites – are the information necessary for mnemoschemes.

Blue elements – are buttons and tumbler switches, which are for the user to interact. Hence, there are 3 status colors, green – normal operation, orange – alert, red – alarm. The aim of this color setup – is to have an intuitive interface to the max, so that, while jumping from window to window, the user doesn’t get lost and understand immediately what’s needed to be done.

Font and indentations

Here it’s simpler, we use GothamPro of only 2 sizes: for captions and static visuals 14рх Medium, whereas 18рх Bold is for variables.

We make all indentations similar and try to keep divisibility. A lot depends on indentations, if they aren’t made similar, everything becomes one big mess, and, on the contrary, even in a poor interface, made quick and dirty, it’s enough to even out the objects across the grid to create order, and the interface would look quite the opposite.

Conclusion

In the end, I’d like to say that I’m no designer and I haven’t got such a degree, my team doesn’t have designers as well, we’re good technical engineers, programmers and design engineers, we know how systems should work and how they’re needed to be operated. Using it all as our basis, we want to make a maximally convenient user interface.

I’d be very happy if you leave your comments, suggest improvements or voice some of your concerns, in order for us to grow and not come to a standstill. I hope you like the article and find it useful somewhat, please leave your comments.