Design Like A Pro: Optimizing Your HMI

58 min video  /  56 minute read

About this Webinar

For operators, the Human-Machine Interface (HMI) provides a virtual window into the manufacturing process. The HMI should help operators keep their facilities running safely, securely, and efficiently, but HMI screens that convey too much information with too little context make it difficult for them to do their jobs.

In this webinar, an HMI/SCADA expert from Inductive Automation explains how to make your HMI into a better tool for the operator. With the tips and techniques you'll learn here, you can design an HMI that more effectively turns data into useful information and draws attention to the information that matters most.

What you will learn:

  • How to reduce visual clutter and distractions
  • How to display data in context so the operator can assess situations at a glance
  • Using color, position, size, and isolation to emphasize important data
  • Setting up a consistent hierarchy for navigation
  • How to make HMIs more effective by using trends
  • And more

Webinar Transcript

Don Pearson: Well, good morning, everyone. Welcome to today's webinar, Design Like A Pro: Optimizing Your HMI. I'm Don Pearson, Chief Strategy Officer with Inductive Automation, I'll serve as the moderator for today's webinar. I'll start off by briefly introducing our company, a little bit about our software Ignition, and of course, our guest speaker. The agenda for today's webinar, we're gonna talk about some principles and practices for optimizing your HMI, go over some challenges, look at the analog displays, trans, what should the emphasis be on, some navigation information and tips and ideas, Q&A period at the end. Little about Inductive Automation, we were founded in 2003 and actually have gone extremely quickly since that time. I think it is very safe to say that we are the fastest growing HMI, SCADA and MES software company in the world, and from the very start of the company, it really has been our goal to fundamentally change the industrial software market. Today, our software, the Ignition Platform by Inductive Automation, has been installed in enterprises in more than 85 countries, and really Ignition has been used in virtually every industry you can think of, energy, oil and gas, water and wastewater, food and beverage, government, transportation, packaging, databases, the list goes on, many, many other industries.

DP: It's supported by a network of over 1250 integrators around the world. It's really become trusted by major companies. We've got over 30% of Fortune 100 Companies, and I think just plus 20% of Fortune 500 are using Ignition to build HMI, SCADA, and MES systems for their organizations. When asked to explain Ignition briefly, we like to describe it as the new SCADA. Ignition really is built on four pillars that distinguish it most definitely from old SCADA. Those are new technology, a new licensing model, a new business model and a new ethical model. And when you look at the new SCADA technology-wise, you see there are six fundamental reasons why they're superior to old SCADA technology versus web-based deployment. Clients can be instantly launched from the central server to any machine or device with the web browser. Unlimited licensing, Ignition is sold by the server not by the seat, so you can add an unlimited number of clients, screens, tags, connections, devices, and you can do that without any extra cost. Security and stability, spell industrial grade security technology with the unified architecture and built-in redundancy, real-time control and monitoring, connect all your systems to a centralized location and quickly see and analyze the status of your facility.

DP: Rapid development, its objective of doing a rapid development environment lets you quickly create powerful SCADA projects and easy expandability. Its modular architecture makes it extremely scalable to fit your precise HMI, SCADA and MES requirements. But I mentioned four pillars, in addition to the new technology. The new licensing model, business model and ethical model are really crucial components to the new SCADA and the success of Inductive Automation. New licensing model I mentioned before because instead of limiting your system, it's unlimited, server-based licensing, which scales with your company and allows you to reap the full benefits to the software. New business model, the new SCADA is more than software, it's an entire organization here, all focused on empowering your success. We support the Ignition community with a strong innovative programming with industrials, being this industry-leading training and support here. And I think very important also is a new ethical model. We're driven here by a culture that has a sense of responsibility to create the best possible industrial automation software and user experience and really contribute overall to a much more prosperous industry.

DP: I think it's also important to point out that when we talk about the power of the new SCADA, it's kind of like you might even say it's SCADA also because it's so much more than SCADA. You don't have to be limited to just developing your SCADA systems. You can build any kind of industrial automation project you want with the Ignition full feature designer. You can build practically any kind of industrial software application. Ignition server-centric web deployment model is flexible enough for any architecture and scalable enough for companies really of any size. Thousands of enterprises around the globe, and as I mentioned, almost every industry is making the Ignition their industrial software tool of choice. So with that, is a brief introduction to Inductive Automation and the Ignition Platform. Today's webinar, it's really the latest installment in our Design Like A Pro Series we've been running for a couple of years now. The series is dedicated to conveying fundamental ideas, tips and practices to help you build the best HMI/SCADA projects with Ignition. Part one was about laying the foundation, part two was about developing the speed and precision, part three was about launching projects, and part four was about SCADA alarming. And you'll see from this slide here that the first three of those are supported by white papers.

DP: Any of you that didn't have a chance to attend those, they are available in the archive also. Today's webinar is about making sure that your HMI is performing at its best. Just think about it for a second, manufacturers invest millions or billions of dollars into their facilities. The operator is the person responsible for ensuring optimum returns by operating the facility safely, securely and efficiently, and the human machine interface is the operator's window for viewing that process. So that's the topic of today. At this point, I'll introduce today's guest speaker Travis Cox. Travis is the Director of Training and Sales Engineering here at Inductive Automation. He's been with the company since 2003, so Travis, as I turn over to you, I'd also like you to tell us a little bit about... Many people here know you. We have a large attendance today. You've worked with the company for a long time, tell me about your responsibilities, and what you do here as you move into today's topic?

Travis Cox: Alright, thank you, Don. Like Don says, my name is Travis Cox, I'm the Director of Training and Sales Engineering here for Inductive Automation. I've been with Inductive Automation since the beginning, since 2003, and I have trained thousands of people on our product Ignition. I've also been instrumental in a lot of design projects for integrators and end users out there, and we see of course, a big need for HMI optimizations especially today, and I have helped a lot of customers achieve, make that a reality for their systems. So today, we're here to look at some of the challenges of setting up and maintaining high performance HMIs. And really to see how we can achieve that, we're gonna look at how it can be done in Ignition today, and as we go throughout the rest of the presentation, if anybody has any questions as they go through, please feel free to like Don said, enter that into the question area, and we'll try to get to them hopefully during, if not after in the Q&A section. Before I continue though, I'd like to acknowledge at the outset that many of the principles and tips we're gonna discuss today are from "The High Performance HMI Handbook". The handbook was written by Bill Hollifield, Dana Oliver, Ian Nimmo, and Eddie Habibi.

TC: It can be found on Amazon if you wanna look more into it. But really, according to the book, in many cases, the HMI impedes, rather than assists an operator in handling a process upset or abnormal condition. And so the goal of this is to remove that impediment, with the techniques we're gonna show you today is to make it so that they can really understand the process quickly and make the reaction time much faster. So when you look at this, what is causing HMIs to be an impediment rather than a solution? And there really are several different problems. The first is cluttered screens that don't communicate enough useful information to the operator, and a lot of you here probably have done this, have made screens, I myself have made cluttered screens, it's very easy to start slapping in more information onto a screen and putting just more detail and more analog values and more graphics and make that screen big in detail as possible, but what we're actually doing is causing that impediment when we do that.

TC: And also, of course, problem number two is excessive and distracting detail, and that certainly is another thing that even myself I have been, I've fallen prey to that by putting pretty cool animation onto the screen, you have a furnace and you wanna see fire and you see flames going up and you really think that's gonna look really cool in the application, but what that does is distract the operator from what they really should be looking at on the screen, which is of course any problems that could be happening at that facility, and the last one here is lack of analog displays, and we're gonna talk more about what we mean by analog displays here. So let me show you a few examples of what I'm talking about here with HMI's being an impediment. So here's an example of a cluttered screen, and a lot of y'all are pretty familiar to a lot of applications you'd probably seen out there, but here's a lot of use of different colors, we don't really know what the colors represent. There could be animation on this, there's a lot of detail in here. Long objects are grouped together, and the operator really needs a high-level training to know if this process here is in spec or out of spec, and they need to be knowing what to look for on the screen in particular.

TC: And with the colors like red and green, red could mean if the machines are off, it can also mean that there's a particular problem, so by having this color scheme, it's kind of also difficult to understand it unless you had training on the process. Another example of a cluttered screen would be this one here. It's not as cluttered as the previous one, but the big issue here is there's a lot of color with this, a lot of nice graphics, a lot of pretty graphics there, and the real one here, there's an animation, those right next to the pump. That little graphic there actually rotates when it's running there, there's a lot of analog values, but really the operator doesn't know, with these analog values what the actual ranges are very quickly, if it's in spec, out of spec, there's a lot more information that we can grab out of this, but again, operator needs more training and it's sort of hard to tell if there are problems out there. So, with these last two screens, when a problem does occur, what is the reaction time to that? Is it quick, or does it take several hours, or does a problem just simply go unnoticed? And the focus of the handbook is to bring these problems to focus very quickly, and that's how we can avoid these cluttered HMIs. So by staying focused and making it the best possible tool for the operator, they could really get the most out of it.

TC: So there's two big goals that we wanna keep in mind, and the first goal of an HMI is to turn data into information, and we're gonna show you how to do that today, and with some really good techniques. The second goal is to highlight or draw the operator's attention to the most important information on the screen, and that can be sometimes difficult to do, but we'll look at some techniques to make that happen. And so what we're really trying to do is, again, reduce the operator's reaction time, and we're gonna show you some visual techniques to really achieve all of this today. So let's first start with some of the graphics, the graphics of an HMI project are very important to the goals we just mentioned. The point of the HMI graphics is not to make the HMI aesthetically pleasing or visually interesting per se, but it is to make it more effective for the operator. If we get too focused on making the screens look cool, the HMI will actually be less effective, so there are a lot of organizational benefits that make it worthwhile to optimize your HMI. We can get increased safety, poor HMIs have caused major industrial accidents. Good HMIs help operators see and react to problems more quickly.

TC: We can get improved production and profits if the operator does a better job, the whole plant will perform better, we can get reduced training, simpler screens are easier to learn and help the operator to identify problems more quickly and of course, we get proven results. A study by the ASM consortium and NOVA Chemicals found that high performance HMIs were 38% more effective for detecting problems early than traditional HMIs. So let's look at some of the best practices that we can put in place for optimizing our HMIs, and the first concept is that of analog versus digital displays, it's basically the lack of analog displays on screens. We're gonna talk about how we can do more to show more information, and these displays are often more effective because they put data into practical context, and we'll see what that means here. So a good example of this would be an analog versus digital watch. The digital watch shows you numbers that tell you exactly what time it is. The analog watch shows you the time as well, but at a glance, you can also see how much time you have until your next meeting, for example. It requires more mental effort to do that with a digital watch, as you gotta think. Well, if it's 3:30, now, of course, if my meeting is at 4 o'clock, I got a half an hour.

TC: So I gotta do that math here, whereas I can look at an analog watch and see very quickly without doing any math at all that I'm getting closer to that time. So imagine having to do that on your HMI without dozens of numbers cramped on to a screen, let me give an example of what I mean about what we can do. And so it's here, for example, we have a blood pressure reading, so you go to the doctor, you get your blood pressure and they give you the result here on the left. The result on the left just basically says, Here's your numbers, but you don't really know if those numbers are good, bad, I mean I'm not a doctor. I don't know if that's high or low, and I have an idea, but I've gotta do some thinking, I've gotta look to see if that is valid. On the right hand side, this one's a lot more informative, it shows you that the reading is high compared to the norm, and where it falls in the spectrum of blood pressure readings, so clearly I can see if I'm normal, if I'm not normal, and I get colors here, let me know that, Hey, I'm in that particular stage. So I'm looking at the two, I certainly want the one on the right, because at a glance, I can see information and know exactly what's happening without having to look it up or to think more about that or to be trained on what that number really represents.

TC: And we can do that in HMIs using a moving analog indicator. Building analog indicators are another way to show the operator status at a glance, you can see if the indicators are operating inside of the normal range or outside of it, and in this example here on the right hand side, there are five moving analog indicators on the right, that you can plainly see if the value is in the normal range because of its position there, and if you know the position of and relation to that color, and if you see color like the yellow there on that fourth one, that lets me know there's actually some problem, and we're gonna talk more about what that represents there. But moving analog indicator is a perfect way to see if we're in that range, so at a glance, so I can see the number, I can see if it's in the expected range, and I also get a notion of how far we are away from high or low alarms potentially. So what I'd like to do is show you a demonstration of how you can use a component like this in Ignition, and sort of how it gets configured, that way you get a really good picture of the possibility of the analog indicator.

TC: I'm gonna go into... This is the Ignition designer here, and in Ignition, we have a lot of components for HMI optimization built-in and one of these components for the analog indicators under our display, our component palate on the right hand side. So for example, if I bring in the moving analog indicator, it looks just like the one you saw on that slide previously, but here I can actually go and configure all the properties of the indicator, and first and foremost what we typically do is take a tag and we link it to that component, so we want to drag the tag down to the process value. The process value is the actual current value of the value we're looking at. And right now, you can see that is at the bottom, but the problem is I haven't configured the ranges correctly, so now the arrow went off the screen, it's just because my overall range, the low and high isn't what my expected potential range is for that value, so I wanna set my range low to minus 100, so minus 100 up to 100, and that's just the first part. Then down below, I have the desired low and high for that blue box you see in the middle, that is the range that I expect it to be in most of the time, so let's say my range is from minus 20 up to positive 20, that's where I want that blue to be. So now I can see that that arrow is inside of that blue range right now.

TC: Then I have the potential of doing low alarms, low-low alarms, I have high alarms and high-high alarms, and it really depends on your process values and what makes sense here. So my high alarm's gonna be when it's over 90. My low alarm is gonna be when it's below minus 90, so now I can see these little gray box in the top and bottom of the indicator, let me know for that low in the high alarm, I can also do a high-high, let's say it was 95 here, for example, on the high-high. So here on the high-high, 95, and then on the Low-low, I'll go minus 95. And so now I have, you see just a small little, not a smaller box there, let me know if I'm in that particular condition. So here I can really set up all of my desired ranges and my alarm ranges, there's also a high interlock and a low interlock that we can put in place, but as my value changes here, I'll see it, and if it's in spec or out of spec very quickly, of course, you also may wanna show the value here, so you can see the value left hand side here near the indicator.

TC: And if I remove the tag just for a minute, right now, if my value is almost 12, so you can see it's in the expected range, if I put my value to say up to 92, then you can see that is in the high alarm, and that's where it becomes colored, you see the yellow show up, the yellow, there color is coming through when we have an actual issue, and so if my value then goes above 95, let's say it goes up to 99, it's gonna be both yellow and red because I'm in a low, or high and a high-high alarm at the same time, so very common, we would put a lot of analog indicators on screens, rather than showing just the simple value, we can put the indicator so we can see the ranges and we can specify what the indicator is really about. So it's one really good technique you can apply that can turn data into information. Another technique that we can use for analog displays is a radar chart. And radar charts, some call it a spider chart or spider plots, are useful for showing several display values at a glance. You're seeing the chart here, the big one on the left hand side. Each value is plotted on a separate axis. The chart draws a line between the different values which create a shape that changes as those values change.

TC: So, inside the chart is a circle that represents what the chart would look like if all of its values were in the ideal range, and the chart will then quickly let you see if the process is in spec or out of spec. So we look at this radar chart, there, in this case, are eight different process values and represents a different spoke of that wheel, if you look at it that way. So feed A, feed B, feed C and feed D, those are all different process values. And in the middle, there's two different shapes. There's the white shape, which basically is the ideal. If all of our process values were in the normal range, or at the ideal set point, that would be the shape that'd be drawn. The shape that's on top, the blue one, is the actual current values right now, and so if all the current values were close to the setpoint or at the setpoint that it was supposed to be, it would draw almost that perfect circle. And then when we see a value that's outside that set point, like the V-tent there that's clearly outside of that set point, it is easy for us to see that it is deviating from that normal.

TC: Imagine if you had a lot of analog values, rather than putting a bunch of different moving analog indicators on the screen, we can put them all inside this one radar chart and quickly to see if something is going awry, and you definitely wanna label the values around it like that, and possibly put the current value there as well. Let me show you how to actually achieve this in Ignition using our component that's built-in. Just like you're moving analog indicator, we have a component that you can bring onto a screen for the radar chart. I go down here to my charts, then I see the radar chart, I can drag it onto the screen, make it as big or as small as I want. Now, certainly what we wanna do is go around and put labels around all the spokes so we can know what each of those represent. Before I do that, I gotta define all the process values that we're gonna put in there, and so for Ignition, here's all my process values. I have one all the way down to eight. I can take all of these eight tags left hand side and I can just simply drag it onto the radar chart, and it's gonna say, hey, do you want to bind it to this? Go ahead and continue. I say yes, and what it does is it automatically configures all the setpoints for us, and it just shows the current values.

TC: Now it configures the setpoints for us to draw this perfect circle. Imagine all these values, these different analogue values have different ranges. Some can be between zero and 100, some can be between zero and 10. It really depends on what that value is, so each value that we have, if I look at process value one, I can go into that tag and go to the metadata and I can configure its engineering limits, so process value one is between zero and 100. In this case, the value that's in the middle is gonna be 50, so that is gonna be my set point. And so what we typically wanna do is set our engineering limits up, that's a plus or a minus a certain amount from the setpoint that we expect. So, if we want setpoint to be 50, I put the engineering limits according to that. If I want the setpoint to be 85, again, I go plus or minus a certain value from 85 so that I can get the value to be drawn right in the middle of that spoke. I did the same thing for all of my other process values, and now I can clearly see that really, a couple of them, this one here at the bottom right is definitely out of spec, and I have a couple in there just deviating a little bit, but may not be a big deal.

TC: If that one that's clearly way out of spec, if I can get it closer, let's say I put this value over here to 52, then you can see that the shape now is a lot closer to that circle that we're looking for. So radar charts are a really good way of showing a lot of analog values on the screen, just to see if our current values are according to what they should be. Let's look at another discussion point here, which is trends and why they can make your HMI a lot more effective. When an operator looks at a display of the current data, he's only seeing the conditions that there are now. We'll look at an actual HMI. The ones I've shown you earlier, we set all the process values. We can see what's happening right now, but to manage the operation more effectively, we need to have some context. By using trends, you can see what the conditions have been, where they are now, and where they're likely heading next. That's a really important thing for an operator to know, because one thing that's really common is an operator goes and looks at the HMI screen, and they see the current conditions. They see, okay, I think everything's looking good, they walk away and they come back, say an hour later, values still look like they're in a certain range, but we really don't know how those values are trending.

TC: What if something is trending up and potentially could have a problem that's coming later on? It'd be nice for an operator to get that before the actual problem happens, and so we can do that by trending on the fly, or we call those embedded trends. The HMI handbook recommends that you have embedded trends for important information and KPIs or key performance indicators. So we're gonna talk more about different levels of navigation in just a bit, but levels one and two in your hierarchy, there should be embedded trends for the important values associated with these operations. Let me show you an example of an embedded trend here in Ignition and sort of where this comes into play. So yeah, I'm gonna come back to the designer here and an embedded trend, we call that trend in Ignition, a sparkline chart. If I bring this chart here onto the window, there's no axes on it, you don't see any lows and highs or any lines there. It's just a simple line of that trend, so we can get an idea of if a process value is trending up or trending down. The idea is to keep it very simple so that we can put potentially a lot of these on a screen.

TC: Now what we mean is, let's say you take a tank temperature and I put it onto a screen as a tank. Okay, so the operator goes and looks at that tank and sees what the current value is. Now, mine's changing quite often, but they look at the value and say, okay, I see what the value is now, they walk away, they come back, maybe it's a little bit higher, but they see it as being okay. Well, what if it's just been trending up the entire time? By putting a sparkline chart or an embedded trend onto the window, let me go ahead and remove that value there on this trend. I can put the sparkline chart here, right on top of this trend or this tank, and I would show the actual last hour, last couple of hours, last 10 minutes of that value, so then I can clearly see if it's trending up or trending down. So the way that we configure the sparkline chart is, first, we go here to our data property and we would link this to history for one of our tags. So in my case, I wanna link it to this tank temperature. I'm gonna link that to my tag history. I'm gonna go and select our tank temperature. I'm gonna do the most recent. Typically, of course, this trend is the most recent. Because there is no X-axis there, you can't see what the time periods are. You're typically at the last two hours or some time period.

TC: So let's say I look at the last 10 minutes of data and I want to, at the bottom, pull it, let's say, every 30 seconds, so that way it is refreshing but not really quickly 'cause we don't want too many queries and things going on to the historian. So I'm gonna just, every 30 seconds, get the last 10 minutes of data for that trend. So I'm gonna press 'Okay'. So here, I can see that... Now, mine's a random value here, just a simulator, but at least I can see that trend. Now what's important is it looks like, right away, that my trend has dipped and went down to zero 'cause typically, that would be a zero right here in the middle. It actually hasn't gone down to zero in this case and that is just because, first, when we use the sparkline chart, by default, it's autoranged and it's autoranged to... We can't see the Y-axis, we don't know what that range is, so we have to go over here and specify what that range low and high is. Same idea you deal with the moving analog indicator, you gotta know what that range is. So let's say I go over here and set my range low to zero or to minus 100 and I set the range high to 100.

TC: So then now, I can see that that little dip here wasn't actually down to the... It was zero but it wasn't down to the lowest possible value that we have. It's just right in the middle. So we get a clear picture of that trend and where it's been with that tank or with, really, whatever it happens to be. In the right hand side, the little red dot, it'd be the current value. Now, there's also a desired low and high, like the moving analog indicator, it's nice to know if the value is in the expected ranges. So here, I can specify, let's say, the minus 20 to plus 20 and I can see this little blue bar here to let me know that is where the values that I want to be, that's the range I want to be in, so I can see clearly when it goes out of that range. And in my case, maybe I need to expand it up a little bit because my simulation dice are a little bit too tight there. So when we go plus 50, minus 50, that's kind of what the idea is, you can see that that trend is really in that range we're looking at. And the colors here, and you could change colors and the markers if you want to, but we're gonna talk more about colors here in just a bit, but it is important to keep your screens as grayscale as possible.

TC: So it's really easy to use all three of these techniques. The moving analog indicator, the radar chart, and the sparkline chart can provide a lot more information on the screen and you can use them together. I see a lot of people take a sparkline chart and they'll put it just to the... Make it a lot smaller here. I'll put it to the top of an indicator or the bottom, or to the right. And they may have a lot of these, so that way, they can not just see the current value and see if it's in spec, but again, they can go back in time and see how it's trending. So imagine if you had rather than just a bunch of LED displays on the screens that shows you all these analog values, we can use these different components. At a glance, the operator can see a lot of information.

DP: Travis, let me throw in a couple of questions before you go on 'cause I think there's a couple you might wanna... You may have covered them but they're... Peter has a couple of questions here. One is, can the range on the moving analog indicator be linked against PLC tags, same with alarms?

TC: Yeah, that's a good question. So certainly, with Ignition, all these properties on moving analog indicators, they are all bindable, so we can definitely link them to other tags, we can link them to maybe parts of the low and high of a given tag already, but they could be linked to anything. They could be linked to expressions, they could be linked to database queries or tags, so certainly, they can be dynamic versus what I've done here, which is pretty static.

DP: Cool. And one more thing before you move on to putting the next thing together is, the range of high, low, high-high, high-low and low-low alarms coming from a tag rather than being a property editor pane?

TC: I think that's the same question. Certainly, all of that can come from tags, especially if you actually configure the alarm on the tag in Ignition. Certainly, all of those ranges can be dynamic and you can specify exactly where you want those values to come from.

DP: And one more question is, how do you determine the trend? Mohammad has that question.

TC: As far as the trend here, the value that's coming through for the trend, we're using the historian that's built to Ignition to log the data and we're bringing it back. We could also be logged in to Ignition to a SQL database of your choosing and it's not in proprietary format, so we could bring it back and display our trend very simply by just using the built-in tools there.

DP: So one more and then we'll... I wanna encourage our audience, you're doing it, keep putting in the questions. We're gonna have a Q&A, we'll get to that, but one more thing that I think may apply here is, how about moving averages, will the system support the calculation?

TC: Yeah. So it does support moving averages data. You can have an actual... We don't do it on the sparkline chart 'cause it doesn't make too much sense but we do it on our regular graph component we call Easy Chart. You can do a moving average of your process values. So let's get back here to some more techniques here for optimizing HMIs. Certainly, the next section is gonna be on emphasis and this is some general design principles that emphasize the most important piece of information on your screen. So we can use emphasis to draw the operator's attention to the objects, to components or data points that are most important in helping them do their job effectively. Emphasis, when used properly, helps operators to more efficiently find and resolve problems quickly. There are many ways to emphasize one element over others. We're gonna go over four of the simplest and most powerful ways to do this. We're gonna emphasize using size, color, position and isolation. Let's look at the first one here, color. Color is really powerful. Did you know that humans can perceive differences in color without conscious brain power? So the more a color contrast with the surrounding, the more emphasis it has.

TC: As a general rule, the background of your HMI screen should be gray and maso, and we should use actually grayscale colors all the way through, we're gonna talk more about that, so that the colors can pop out and get attention, this makes it easier for operators to look at, so that way they can see if a color happens to show up that that is something that should grab their attention and the potentially like a fault, and the analog indicator does this very well. It really alerts you here when, for example, when that process value goes into a higher, high-high state, so we don't wanna use really bright colors for normal conditions, the idea is to emphasize these abnormal conditions. Typically red means stop, green means running, yellow indicates a problem, but we don't really wanna use those colors just to show the state, we wanna use colors to show these bad abnormal conditions that are out there. The indicator is one way of doing that, and on HMI, which we're gonna see pretty soon, an example, the state of the machine, like if a valve or a motor is on or off, typically we wanna use grayscale colors, like a white would represent that the machine is on and a darker gray would represent that the machine may be off or in a different state.

TC: The next is to emphasize, using size. Size is another simple way to make an element stand out. Our eyes are wired in such a way that anything that breaks a pattern immediately draws our attention, so the larger an element is relative to the other elements on the screen, the more attention that it will get or it will stand out. That's a pretty simple one, and it's one that doesn't get a lot of attention, so the things that are really more important should be a little bit larger on the screen to draw your attention to it, and if that's what the operator needs to be looking at. The last here is to emphasize using position. By putting it somewhere on, putting it on a position on the screen. In western cultures, people read from top to bottom and left to right, so therefore you should place objects of high importance in the top left of the screen, because that's the first place our eyes will travel, the bottom right quadrant is less traveled, so that's where you should put less important information.

TC: And this is kind of a hard thing to do with various P&ID diagrams, but the main idea is if in the top left, you wanna put things like moving analog indicators, or you wanna put radar charts, things up there, so that that would be the first thing that potentially an operator sees in the screen and maybe more less important things on the right hand side of the screen. Another thing is emphasis using isolation. Objects will stand out when they're isolated from other elements. The more empty space you see around an object, the more emphasis that it will have. For isolation to be effective in an HMI project, you need to make sure your HMI screen isn't cluttered. The more information that HMI screen has, the more difficult it is to draw attention to a specific area of that. Keep your screen simple, and it'll be easier for operators to focus on what is important. Again, one of the big keys here is keeping your screens simple, the more cluttered you make it, the harder it is for the operator to see what's going on. I wanna talk about one more technique that it's kind of one that you should be using regardless for a lot of your HMIs, and that is, rather than using any one of the techniques that we talked about previously, you can get a greater emphasis by combining all these techniques together, and this is called redundant coding.

TC: So using multiple techniques to create a hierarchy of importance for each element on the screen, you can experiment with different combinations to create compelling screens that optimize operator efficiency. And I'll show you some examples of that. The last thing here I wanna talk about animation, it's one of those things that it's very appealing for everybody to go and put a lot of animation on rotation or things moving around the screen, but animation, it can be used for emphasis, but it shouldn't be used gratuitously. The rule for bright colors also applies to animation, you shouldn't use it to illustrate a normal situation or process, no spinning pumps, no moving conveyors, no splashing liquids, etcetera. So only use limited animation to highlight abnormal situations, and an animation should not be in the background, it should be used to get somebody's attention. So all these techniques that I talked about previously, certainly it makes your HMI look less appealing or aesthetically pleasing, and that's by design, the design is to have the operators, get the operators the most information on a screen that they could use to reduce their reaction time and to be able to run that process more effectively.

TC: So let's look at a before and after demonstrations, so you can see we apply these techniques that I talked about before, what you would see a traditional HMI look like and what you would see a HMI that looks like after we apply all these different techniques. So here is a more traditional HMI screen, and this is where I can see, I have some tanks out of the P&ID diagram, I have some pumps and motors and various process values on the screen. Also in the bottom right, I can see alarm displays. Let me know if there's any alarms that are happening, so we have a lot of those blinking states here, like this pump over here is blinking for the state that it's in, but what's going on here is the use of colors, again, the operator has to be trained in what those colors represent, and also the operator has to be trained on what the actual ranges are for these different process values, like the temperatures, those gallons per min on the flow meter, various things like that. And so when an alarm happens, if the alarm only shows up in the banner down the bottom right, they have to then think about what that alarm really indicates. You can put other indicators on the screen that people have done, but this is kind of the tradition that people work with.

TC: Now, if we apply those techniques that I talked about here, this is the sort of screen that we'd be getting to, definitely a more grayscale screen. The background is very much grayscale, and here we only emphasize colors when there is a potential issue, like you can see on the indicator down here in the bottom, it being the red, certainly that is a low-low alarm on this particular pump. On the tank here I can see indicate or pop up from time to time, that is like a triangle that faces down, that's actually called the alarm indicator that the handbook also talks about, and it has redundant coding built into it, as you see here, this red square is, let me know it's a high critical alarm and the value one also means it's a critical alarm, so we get three things, we get a square, we get the red color and we get the number one, let me know that there is a potential issue. And so redundant coding can work for a lot of things, and especially there's indicators here, we have the ranges, you can also put a sparkline chart to show more information about where it's trending to get more information about it.

TC: So you see the sparkline chart here being used on all the tanks, so I can see the trend of it, these are all simulation values, so they're not real process values, but you can get an idea what's happening. The radar chart over here in the top right? It gives me various process values. I can see if things are, you know, how things are working if they're in spec or out of spec. Actually something it's there. And lastly would be the actual color of the pumps and the motors and things, you see, all of my graphics are flattened, that's really important. You flatten the graphics and the colors represent the different states, so you can see a graphic like this one right here, that's right above the pumps, this graphic is blended with the background, you see the outline, but it blends with the background, whenever you have a color that blends in the background, it means that there's no state to it, it just means that it's used for just to kinda finish out the diagram on the screen. The ones down below, like the white ones, means that they're on, and the darker gray here means that they're off. The same thing with the pump and the valves, the white means that they're on, and the darker gray means that it's off.

TC: So if we apply this techniques, you can see that if we look at the screen, this is certainly more pleasing to look at and makes managers and people who are gonna pay the checks, they like the type of screen, it's good for how it's made and various things like that, where they look at these displays, but this technique certainly allows operators to get the most out of that screen, to really understand how the process is running, see how it's trending to get there redundant coding, and to really understand if problems happen. And the idea of these techniques is also that we can hire new people and that there's really hardly any training, so we can get them up to speed on how to use this application much, much faster. So they get a good picture of looking at the before and after, how you can utilize these various techniques. I do wanna talk about one more thing that often doesn't get much attention, we look at HMIs. I just showed you a single screen there before, and HMIs have several different screens, like there's navigation to go between different areas, and navigation is just really important, and here, let's look at how we can create a consistent hierarchy, and the HMI performance handbook recommends that using this hierarchy gives you a progressive exposure of process detail.

TC: So that way, you don't have this one massive cluttered screen, you start with high level things and you drill down and get progressively more detail at each of the levels as you go through. So it starts at level one, and this is the area overview, this is the level for situation awareness. Really, think of this as a 30,000-foot view of the process under the control of one operator or a group, so the screen should instantly show whether everything is running well or if something is wrong. And so that it would just be it for a very, very high level view of what's happening. Then from there, you click on various pieces to drill into level two, which would be the unit control, ongoing process manipulation, this is a level where all the operator actions are going to occur. So typically that screen I had before, this would be in this category here. Level three would be the unit detail, close detailed examination. And so this would typically be a pop-up window that you click on various motors or a tank or whatever at various units, you click on that brings a pop-up window for a detailed examination of what's going on.

TC: So you may get more information related to that, that you can't put on to manage my screen because you don't wanna make it too cluttered, so this does create a little bit of more work sometimes, but if you architect it correctly, you can really make it very effective. The last level is, which not many customers do this level, and I think it really does work well for troubleshooting, it's really supportive diagnostics, it's troubleshooting all the way, this is where you'd have standard operating procedures for potential scenarios, diagnostic info logs, event histories and things of that nature. So user manuals of documentation, machines, SOPs that companies design, that can be documents you want to get to procedures for what to do if a particular problem happens, all these things need to be in the player, and the more you do this, the easier is for an operator to then understand what to do if a particular scenario was found from the HMI screen that they have. So the important thing here with navigation is that you need to find hierarchy that fits your SCADA system, but this really does sound like it's simple and easy to do, it's pretty obvious to have this navigation, but really good HMIs when they follow this, the structure here as well as how they build the actual HMI screens.

TC: You can make an application that is just very easy for operators to use and to understand. So to summarize what we've talked about here today, the key goals and the big picture are to turn data into information and to draw attention to the most important information on the screen. Using analog displays, we can put data into context so the operator can assess situations at a glance. We can use emphasize well, to highlight the most important data, whether that be size, position, or that kind of information, and for emphasis, use the recommended hierarchy that reveals progressive levels of detail, so that navigation of it, and the trend, the sparkline charts, the embedded trends can make it much more effective for managing a process so people know how things are trending and where it's came from and where it's heading. So if you try these techniques you're going to achieve a much better system. With Ignition, we put a lot of these in place, so you could simply bring them onto a screen and utilize them. We also have created some templates in our cloud templates repository that people can get at too for HMI optimization.

TC: And we hope that more customers adopt this policy and as they do, they could share their templates that they've built with the community, so that you guys could go there and find those rather than having to build everything here from scratch. So with that, I thank you and we're gonna go into the Q&A section, but I'm gonna hand it back over to Don.

DP: Travis that sounds great. Thanks very much. I know we covered a tremendous amount about building an effective HMI screen, lots of tips, lots of practice. We also have an amazingly long queue of questions here, so that's good. So I'm not gonna evaluate 'em. You may be able to answer all 'em now. It may take longer, but if you want to, I'm just gonna grab 'em, read one and take it from there and then you can let me know what you think about that. Okay? So, first one is, "A high performance HMI handbook also shares using simplified graphics. Simple lines, no 3D, etcetera. Most images that come with Ignition are fairly complex. Any plans to change these?"

TC: That's a good question there. So you are right that there are a lot of graphics that come with Ignition, a lot of these simple factory SVG graphics so you can bring on to Windows. So for example, I go here to, I don't know, let's say to go to a pump, and I put those pumps, kind of boring, but if I go up here to my motors. Let me take a motor here that I know, this one. This first one here looks... That's what that motor looks like, and it definitely looks more defined, more 3D, it's not flat. And with this, well, the techniques that you'd use in Ignition to flatten that object are just brought on to your screen, go up here to shape, and your union. And by unioning it, you flatten the object. It's just now one object that you could then change the color. And again, that grayscale, we can change the grayscale there to represent the state of the machine, and we can of course link that to various tags. So with that, all the HMI optimization components are pretty... They're very simple lines, they're not 3D. There are maybe some components that utilize that, but you'd probably wouldn't be using those components.

TC: You may not be using the earlier used explained screen, because by nature it has colors and various things like that. So typically what you do is take our graphics, SVGs, or even draw your own graphics and you flatten them to be more of an outline so you don't have these 3D graphics on the screen.

DP: Great, thanks Travis. Dayo has a question here. "You mentioned one of the importances of optimization. To hire new guys and put them right into the job. They can go faster at the job. Is it important to have a key legend on the modern HMI?"

TC: Yeah, absolutely. The handbook definitely suggests having a legend so that they understand what various numbers and things mean. Like the analog indicators, having a legend for that. The alarm indicators, having a legend for that could be important. So legends have its place, just doing it in a way that doesn't distract the operators from the attention they need. Typically put that in the bottom right of your display in that fourth quadrant where people aren't gonna be looking at it too much, but it is something that gets overlooked quite a bit. But you should be doing that, and it could also be there for the color of states of machines. So they do help operators for training purposes.

DP: Before grabbing the next question, I'll answer one that several people ask. Do we have a recording of the webinar? Yes, we do have a recording of the webinar. It'll be archived. I think by the end of day usually it's archived. Certainly by tomorrow. And should you go to our website, in the video library, most recent and you'll be able to under video library most recent. You'll be able to see the entire archive of that. And then the next question is, "Can we have a copy of this project?"

TC: So, what he's talking about there is probably this project here where you see the screen that utilizes these techniques. This before and after, the screen is available. This entire demo project that I'm actually showing here is available. You can download and see how it was built. And you can see some of the techniques that are applied. The ones I showed you earlier, that wasn't a designer. That's just I built up from scratch. There's components built into Ignition to make this happen. But if you want the actual demo project, you can go to our website. And you can go to, and they're under the download section. There's demo project files, and the demo project, you can download. It's a ZIP file. It's on the pack for Ignition and you can load it into your Ignition server and you can play around with those techniques. You could of course go and download the software. Comes in a two-hour trial period, and if you just install it, and on your machine, open a designer, you can then go in to the designer like I was doing and play with these various techniques and really get the most of it.

DP: Great, thanks. Next question from James is "Is it possible to get the GUI to run from historical tags, I.e., show what it would have looked like from a previous point in time?"

TC: Oh, so yeah, that's definitely possible. It's a question a lot of people have as far as, "Can I replay a particular scenario on a screen?" and you can do that in Ignition. There's just a little bit of development there, but the idea is that rather than showing just the current values, you can have a kind of a switch that would look at current values, to look at historical values. You would bring back, say, three hours of data, hold it on the screen, and then we simply just kind of run through it. It has a timer on the window that kind of at a particular time runs through that data, and it would show that on the actual HMI so they can replay it from a particular situation. That's a pretty common thing that you can definitely accomplish with Ignition.

DP: Great, I just wanna say also since there's so many questions here, we are gonna get a chance to answer some of these after, so we'll get to all of 'em. So Travis is gonna just grab a little bit so we can get a few more in with the time we have. Approximately, how many levels are acceptable?

TC: So, certainly I think if you can go to three levels for navigation it is really good. What we mean is having a really big overview screen of the process, that is the 30,000-foot view, where we can quickly identify if there's any alarms happening in any of those areas. And then the idea is that from there, you click on one of those areas and you drill into that level two, which is that HMI screen, those screens that I was showing you there before. But again, you wanna keep those screens simple, you want to utilize the emphasis, utilize those techniques, so that it's easier for them to understand. And if you ever get in a situation where you get a cluttered screen, it's really simple on level two just to have a little button on the right hand side that goes to the next one, and goes to the next one rather than putting it on to the same screen. Then from those screens, the third level would be clicking on a particular area and having a pop-up window that opens on top for more detail. Level four can be a little bit tricky as far as troubleshooting and the diagnostics but if you could do that as well, it really leads well.

TC: A lot of people do this already but they tend to forget that first level, in that they just try to make screens for various areas of the plant that are really detailed, really cluttered, and it's really hard to go back and forth and to see where a particular problem exists and what larger area. So that's what level one's really about.

DP: Travis, this question just asks for your opinion on this. It says, "There are a few standards for HMI construction, like ISA, do you have an opinion about what you think is the best or any just thoughts on that?"

TC: Yeah, ISA has quite a few standards out there, standards on design principles and colors. They all have its place. I've personally gotten the most out of the High Performance HMI Handbook, that gives you a lot of information about use of colors, about layout and about new different techniques that are there. It's definitely more for the petrochemical energy but you can still apply these techniques to really any industry that's out there. ISA does have a lot of good standards as well, but a lot of them are a little bit more specific to particular types.

DP: You mentioned something that the color screen looks really nice for managers and stuff but it's not necessarily the most functional for operators. Here's a question from Jason Grey about selling it. He says, "I've used this standard on my last project but met with some resistance in-house with the client because it's so different. How many projects have you done using the standard and how do you sell it? How do you position it with your customer?

TC: Well, we don't sell it.

DP: Yeah, we don't do it. We sell the software.

TC: We sell the software. We recommend it very, very highly. As far as a lot of our top end users who are using it, it's hard for them to adopt these principles, so it really has to come within to show how the... It's really gonna come down to the operators and say, "Hey, which of these would make your job easier?" And that's where selling within usually happens, but we're getting a lot more people who were just... The buzzwords are out there, people want to adopt these principles and people are actually going back and redoing their HMI screens using these, and we help out any of our customers that need to do that. We have design services here that can help you with it. We have very qualified integrators that have done this several times for their end users. It's a hard thing to sell. You really have to show the benefit and putting somebody who's looking at a really nice HMI with graphics and animation to say, "Hey, if you were running that line, if you were actually down there with running it," if you put in that perspective, and sometimes they get the picture, but it's a tough thing to sell. It really is.

DP: I think the approach you have to do is, just like you said, it has to be, what's best for the operator is gonna be best for the organization 'cause they're most effective, most efficient, most productive.

TC: I'll tell you, one thing that customers have done, [chuckle] and it's pretty funny, is they'll make one screen that looks really super pretty and they don't put a lot of effort into it, they make one that's really nice. That's the screen that they show to those managers and then the screen that's actually open plan for the operators is this optimized one. So if you can't really sell it that much, there's another way around it.

DP: There's another option for you. So listen, we have more questions. We'll be able to get to more of them but I think I'm gonna move back to the PowerPoint and then do some concluding, just concluding comments 'cause we're coming to the end of our time here. We try to keep it as close to an hour as we can, but amazing response, so we are gonna get to your questions from here. Just a couple of things I wanna say is, first off, if you're ready to try Ignition for yourself, go ahead, just go to our website. You can download a full version of it. Just go to You'll be up and running in three minutes. You can install and build your own system before you even purchase it. Just try it and see what you think. Secondly, I wanna mention the university. You can learn more about Ignition in Inductive University. It's a new online training service. It offers Ignition courses, all for free, one to five-minute videos, hundreds and hundreds. There's 550, I think, plus videos. They test your knowledge with challenges and your earning Ignition credentials. You can do it all at your own pace in your own time.

DP: Frankly, we launched just with our Ignition Community Conference last September. We've already had more than 1400 users and have watched close to 140,000 training videos, so it's really there to help you, guys. It's really never been easier to learn Ignition. We've been really working on knowledge transfer so we can reach this global Ignition community more effectively. I wanna thank our speaker again, Travis Cox. I also mentioned that we'll get back to the other questions. Here on the screen, you have account executives, many of you have them. A lot of people here are new. If you want to, you can call the account services manager. The numbers right there. There's extensions for account executives if you want an online demo. Please, take advantage of seeing how Ignition as a platform can assist you with your projects. Today, it was just on HMI screen optimization, and with that I ran through that quickly 'cause we took as much time as we could for the presentation and questions. That concludes our presentation for today.

Posted on January 15, 2015