Close this search box.
Get an exclusive look at Ignition's latest demos, remote energy management and more.
By Elian Zimmermann
20 November 2023

High-Performance HMI Techniques with Ignition



Gary Lowenstein
Customer Success Lead


Gary Lowenstein from Element8 shares the value of high-performance HMI design, the basic concepts to remember, real-world examples, and helpful resources to get started with this approach. 


Thank you very much for joining me. My name, for those of you who don’t know me, my name is Gary Lowenstein. I’m the customer success lead at element eight. What that entails is anything customer related. So if you need to get your project successfully implemented, you can talk to us. You need an architecture, we can help you with that. You need customer support or tech support. That’s all of my team’s responsibility. So this afternoon, I’m going to talk a little bit about high performance HMIs and some experiences I’ve had with high performance HMIs and how we can do this. Within ignition. We always say, if you don’t know where you’ve been, you can’t tell where you’re going to.


So in the past, when I was younger and I sled black hair, they said, just when Windows 95 came out, in fact, before that, Windows 3.1, they said, you can animate your skaters, you can put pictures on the screens. And were engineers, weren’t graphical designers. So they said, well, what pictures are you going to put on there? And we thought about, we said, you’re not really. We’ll just put a pnid down. And they said, just, do you know that there’s 64,000 colors you can use? We said, that’s fantastic. We’re going to use every single one of them. They said, oh, you can alarm as well. What are you going to alarm? We said, everything. Going to just alarm everything. And you can animate it. We said, great, we’ll have moving pictures, we’ll have all sorts of stuff.


And the bottom line is that all of these fancy things that we put in, and I did it, and I was very proud of them. It compromised safety, it compromised quality, it compromised profitability because of all of these weird and wonderful things that were doing. And I mean, I certainly know I did skaters like this, but I’m sure you did some as well. And were proud of them and they served a function. The bottom line was that all of these different things that we did had no standards for visualizing graphics. Some of us wanted to put on an LED display for numbers. Some of us just liked a text box because the LEDs weren’t readable. There was no standard for navigation. Some people put on a pop up and you navigated from a pop up.


Other people had a menu bar down at the bottom. Alarms were sometimes a banner at the top, sometimes a banner at the bottom, sometimes a flashing box. I remember years ago, I was involved in a study where something had gone pear shaped on a plant, and they wanted to know what had happened. Why wasn’t there an alarm? So went through this whole investigation and we found out that an alarm had, in fact, gone off about five minutes before things went pear shaped. And the operator hadn’t acknowledged that he hadn’t done anything about it. And when we started doing a further investigation, we found that at that time there were more than 60 active alarms. And, in fact, at any point in time, there were more than 60 active alarms. There were generally 80 active alarms at any point in time.


What had happened was the operators had become totally immune to these alarms. Some alarm went off and it was just like another thing that had happened. We had lots of animations. I love these ones where we had a boiler and the flames are going off underneath the boiler. It didn’t add any value, it just looked pretty. The bottom line was that operators couldn’t respond to these abnormal situations. I said timelessly, they couldn’t respond to these abnormal situations. So what is a high performance HMI? Well, first and foremost, it uses standards, so we have a common standard throughout. The navigation must be easy to use and it must be intuitive.


I did a project a while back where the project sponsor said to me, if the operator’s got to click more than four times to get to where he needs to get to, he’s not going to click those four times. We talk about productive graphics. The graphic must mean something to me. It mustn’t just be. Lenny spoke this morning about a number on the screen. It mustn’t just be a number on the screen. And I’ll talk more about that now. It must be smooth and stable. It must be based on the concept of visually contrasting critical and non critical states. And that’s really what you want to identify. What it means is that you can make the best decisions possible in the shortest amount of time. So what makes a good operator interface? Well, the first thing is it’s got to be simple.


So you have to be able to recognize what is being presented to you and understand it quickly, easily and quickly. You must be able to anticipate what’s going to happen. So we often talk about the value of a trend, and I said it right now, is that we don’t know where we’re going to unless we know where we came from. So have trending available to you so that you can anticipate what’s going to happen. It’s got to be seamless. Operators have to be able to complete their tasks. Their job is difficult enough as it is so they have to be able to complete their tasks and navigate seamlessly. I said, just now we had the one project where the project sponsor said, if I have to click more than four times, I don’t want to do that.


If he’s got a fully in a manual form, it must be easy to do. He mustn’t have to click in multiple places. And the last thing is, it’s got to be confident. The operator has to be confident in the system, that he knows it’s giving him the right information at the right time. I’ve heard all of these, and in fact, I think I was one of the people that, when they started talking about this high performance HMI and grayscale and stuff, I said, just a bunch of gray, boring screens. It can’t make me a better operator. I heard it the other day, in fact, where somebody said to me, I need to see real pictures of my screen. In fact, if it was 3d, it would be even better. My process is unique to me.


This cookie cutter stuff, this general thing is not going to work for my organization. It’s not going to make my operators better. And of course, the favorite for people of my generation is they say I’ve been doing this way for the last 20 years. Why should I change now? It’s not going to do anything for me. It’s not going to add any value. And you’re going to hear these. Let me tell you that a high performance HMI, if you’re not using it, you need to start introducing it to your clients. Now. It’s not just 50 shades of gray. There are other things that are important to a high performance HMI as well. It’s about shapes and styles. So shapes, if you’re using rounded corners on your text box, use rounded corners everywhere on your headings. Use rounded corners on everything. Use those rounded corners.


If you’re using an aerial font, use that aerial font throughout. You can change the size, great. You can add bold, but be consistent with that throughout your colors. I’m going to talk about colors now, but colors are important. Have a consistent color for the same thing throughout. Navigation. Must be easy. Really needs to be easy to do. Situational awareness. I think the best people that do situational awareness are motor car manufacturers. My motor car dashboard has got one thing in front of me, my speedo. That’s really all that matters. Then it’s got some other lights that come on when things are about to go wrong. So there’s another light that comes on when I’m running out of fuel. And it starts flashing when it gets lower, I’ve got another audible. I said a speed warning at 150.


So when I get to 150, it kind of warns me to tell me, listen, but you’re late already. You’re not going to make it. Probably one of the leaders. The dashboard of maquo is very mundane, very non exciting, but it tells me what I need to know, when I need to know it. Intelligent alarming. So I come from the mining environment. I spent a lot of time in mining. If a crusher stops, if a crusher trips, all the upstream conveyors trip, do I need to get all of those alarms or just the crusher alarm? These are things that we need to think about. And I’ve mentioned trending on a few occasions. You need to have trends available for your operators quickly and efficiently. So colors. Colors. We use colors to draw attention to things.


And if you start looking at color palettes, we have warm colors, we have neutral colors, and we have cool colors. Our eyes are naturally drawn to warm colors. So we use those warm colors for alarms, alerts, anything that’s critical that you want to draw attention to. So I was talking about a project that I did a number of years ago. It was an 80 meters video wall around a room, and the same project sponsor said, I want to be able to stand at the back of the room and easily identify where the faults are. I don’t care about the things that are running well. That’s not what’s important to me. The important things are where are things not working? Unneutral colors, we use those for contextual elements. Say if I want to put pipes in and that kind of stuff, labels, et cetera.


I use neutral colors. And my cool colors we use for our all clears our normal states. Everything is good, everything is happy. So high performance HMR, it’s typically simplistic. It’s got grayscale colors and the visual contrasts to depict the critical and not critical states. Pretty small picture, but can anybody see what’s wrong at a glance? Yes. No, I haven’t got socks, unfortunately. But yeah, the red things are what’s wrong. So it’s a small picture. We can already see that. So why do I need a high performance HMI? It’s all about efficiency and accuracy. Be able to do things efficiently and accurately. It’s about safety. I spoke about the safety incident a while ago. Standards are critical. It’s very important to have our standards. It must be simple to operate. And the thing that we always forget about is training.


I went on a site visit on Monday to a client. And theirs is a very simple process. They’re using grayscale, they’re using simple navigation. Their operators are coming from a completely manual process. And the biggest fear for them is how are we going to train these operators to use computers? They haven’t used computers before. And one way to do it is to have a simple process, logical to follow and easy to use. So we’ve looked at numbers before. What does that number tell me? Temperature. Well, it’s a temperature, yeah. What’s the set point? Is it close to any control limit or alarm limit or anything like that? What is this temperature level? What has it been doing? So something a little bit better. Something like that. I can see the value. We put things in numbers as well.


It just sometimes does help visually to put the number there as well. I can see where my alarm limits are, I can see my control limits, I can see where the set point is and I can even go and add things like a sparkline trend to it. Now everything I’m showing you now is all standard functionality within ignition. I haven’t done anything, I haven’t built anything separate. And at the top there you can also see that I’ve just stuck it into alarm. So it’s a visual on the alarms. How about a tank? Same thing. What is this? The cutout looks great, but what does it tell me about this tank of sitting at 60%? Same kinds of things. Is it in alarm? Is there an alarm level on it? What’s the history about it? What’s the actual value about it?


All of these things now they tell me about 8% or they don’t tell me. It’s a fact. 8% of people are colorblind, 8% of men. We also have hearing problems, but we’re not going to go down that road. Can everybody see the number within there? Yeah, we all hope it’s seven. And they’re different types of colorblinds. Some people are red and green, some people are. Can anybody see the number in there? Yeah, 13. So there’s nobody here that’s colorblind. But generally when you use a high performance HMI and we spoke about the contrasting colors, I like to use something like this to indicate a running state. So it’s a bright color, it indicates running stopped, it’s a dull color. It’s got the word behind it that says stopped and something like that for a fault. So that just indicates a fault.


Something’s gone wrong on the system. When I did this project that I spoke about, we had a UI developer from the US that was part of the project team and were discussing colors. I said to know, everybody talks about red and green and people being colorblind and what’s the best practice. He said to me, what does the customer want? And that’s the best practice really. But these are just some ideas, some things that we’ve worked out in the last couple of years. So a couple of things about ignition, and this is going to be a lot shorter than I thought it was going to be, but I’m going to do something a little bit everybody else has done live, so I better do some live. Wait, let’s just go back inside of ignition. We’ve got some themes. It’s got some built in themes.


They light, cool, light, warm, dark, cool and dark, warm. And there’s a color swatch for each of these. So that’s just a sample of it. If you go to the ignition manual, you can see more about themes and how they go and in fact you can see how they’re used. But I’m going to do a quick little demo for you on how these themes are used. So I’ve got a perspective app open here. If you go and look in your session properties, it’s got a thing there called themes. And if you select the drop down, you’ll see that it’s got all themes in there. And it’s even got a couple of custom created themes that I created. I’ve just bound those to a tag so that I can go and easily change it in my system. Then I went and did some cheating.


I went and said, well, I pre built a little window for myself here. Now this is a standard multilevel indicator from ignition. I’ve just dumped that down and I’ve linked it to a tag. I’ve got a standard motor, I’ve got a button. But if I go and put this into runtime, just the standard theme, standard multilevel tag, I haven’t changed anything on it at all. Everything is at its default. If I go and say, well, I want to change it to a dark theme, you’ll notice that the colors on the bars change quite significantly. And that’s changing according to that swatch that we looked at earlier on. I’m going to take this out of run mode and I’m just going to go to this, which is just, this is a standard graphic that I put on here.


All of those are left at the defaults. Once again, if I put it into runtime and I change it to light, you’ll see that changes according to the swatch. This one here, what I did with this one was I went and said I want to change the full style of that and the line style. So the full style is this VAR sequence minus one, which there it is, there. It will show up those colors there. And I can’t remember what did I use for on the line style? I said neutral minus neutral 100. So the neutral 100 is straight above it. It’ll go to black. So that’s how I put those themes in. Let’s have a look at creating our own theme.


So what you can do is if you go to this folder here and it is in the documentation, it’s program files, inductive automation. And there I’ve got all my themes in it. If I go to, for example the light theme and to common, I can see actually what is available. And in this case I’ve just said I’m just looking at the one for primary and it tells me all of the information about the primary button, all of the colors that it’s going to use. You’ll see that it uses bodies disabled for the color, it uses neutral -30 et cetera and so on and so forth. What I could do is I can go and create my own theme. And that’s exactly what I did here was I went and said I want to create one. And I just called it elevate.


I said use the light theme, import the light theme. But when I use this, I button primary change the color to this quality minus three. So quality minus three is that color scheme down there. So let’s go back to my application and I just put that little file into that folder. So once again, if we go back to runtime, I’ve just dragged the standard button onto the screen already. If I go into runtime and I select my elevate theme, it goes to that green that I wanted it to go to. So it’s real easy. A couple of other things that you can do or that are very nice with an ignition and I’m hoping you all use it, is the concept of styles. So I can go and create a style and this helps my standards.


So I can go and say, well, for my style title, let’s go and have a look at that one. It has got a whole lot of things that I can customize in that. So I’ve said I want a bottom border color. I want all of those things. What I can do with this is I take that element and I say I want it to be associated with a certain style. So I can go and say title. And you can see that it’ll change that to whatever I set it to. If I go and select a different one, I can go and say I want it to be a header and let’s take off that title. Take off the title. And if I put it at header, it changes it to the header theme. So these are all very useful things.


I can overwrite that at an instance level. So if I went down to this here and said I want to overwrite it, I could go and say, well, I want to go and say I want something else with it. I want to change the font color. I can do whatever I like at this instance level. Let’s go and see where we are in terms of this, not that one’s. So we had the swatches. So I just went through themes, how we use them, the colors, the custom themes, a little bit more information or some very useful tools that are available. If you go to inductive automation website, if you go and look on the exchange, on the inductive automation exchange, there are a couple of nice little utilities there. There’s one that uses, it’s got a nice perspective menu on it.


The other place to go and look is on the webinars that they’ve had. There are a whole lot of webinars on how to design like a pro. The one industry specific HMIS was a webinar that was done by inductive automation and three system integrators from the US. Corso systems was one, Vertec was the other. And I can’t remember the third one where they discussed projects that they’ve done using HMIs. The others that I found one very interesting was the mobile responsive HMIs that was discussing how to design HMIs for mobile. And it was pretty product agnostic in that it said these are the concepts that you should be using for that. So those are all available for us if we need to go and use them. And to wrap it up, I’m ahead of time.


Some good ideas use analog indicators with moving pointers and things, rather than just analog number. Trend data is critical, so if you’re not using a historian, it’s about time to start. Grayscale is much preferred over multiple colors. Text keep text consistent across your project. Your navigation must be simple. Spend time working out how you’re going to plan your navigation so that it’s easy to do. Bottom line is the HMI must be easy to use. Anybody got any questions? Cool. Thank you all very much.

You might also like