Design Like a Pro: Graphic Design Tips for Better HMIs

About this Webinar

Download the Project Files

Good Human-Machine Interface (HMI) design makes operators more efficient, more connected, and more in control of the processes they’re overseeing. Bad HMI design can have the exact opposite effect. The difference between good and bad HMI design is often a matter of correctly applying some simple yet powerful graphic design principles to create a better HMI user experience.

In this "Design Like a Pro" webinar, learn how to correctly apply basic graphic design principles to create efficient and beautiful HMI designs that operators will love.

User interface design expert Steve Fong and expert HMI/SCADA project developer Travis Cox of Inductive Automation explain and demonstrate simple ways to apply graphic design principles to improve your HMI designs including:

• Improving HMI operators performance by removing clutter
• Creating better screens through the use of grids
• Understanding how to use type to improve readability
• Emphasizing important information using color and contrast
• Quickly building and customizing HMI components

Webinar Transcript

00:00
Don: So good morning, everyone, and welcome to today's webinar, Design Like a Pro: Graphic Design Tips for Better HMIs. Really glad you could join us today. We have a really good group and I think it's a really good program for today. Just to introduce myself just briefly, my name is Don Pearson. I'm the Chief Strategy Officer here in Inductive Automation, and I'll be just moderating today's webinar. We also have other speakers on the webinar with us today, whom I will be introducing shortly. Quick look at the overview for today's webinar. I'll give a brief introduction to Inductive Automation and our software platform, Ignition. Our guest speaker will go over some important visual design principles and actionable tips that you can use to make your interfaces not only better-looking but also more effective.

00:48
Don: Brief background on our company, Inductive Automation, founded in 2003. We're extremely pleased with the response we've had to our software, Ignition, from you as integrators and you as the industrial organizations that many of you represent. Very pleased to have Ignition serving HMI, SCADA and MES software needs of basically enterprises all around the world. To date, somewhere north of 90 countries, our Integrator Program has in excess of 1,400 integrators and it's growing. And Ignition's being used in virtually every industry, from oil and gas, and water, wastewater, food and beverage, government, transportation, packaging, data centers, the list just goes on and on and on and on. It's used and actually trusted by thousands of companies around the world, 38% of Fortune 100, and we're currently serving 55% of the top 100 manufacturing companies that are based in the US. Here, you take a look at just a few of the major companies that are using us and depending on our software to build their flexible, innovative HMI, SCADA and MES systems for their organizations. For those of you on here who happen to be new to Ignition, certainly we'd be proud to have the opportunity to serve some of your needs also.

02:09
Don: Just a quick look at maybe six key bullet points or pillars as to why Ignition is different from maybe more traditional SCADA packages, and why it's been used as, really, the industrial application platform for building almost anything you could want to for your organization. One is its web-based deployment. With Ignition, you can instantly launch clients from a central server to any individual machine equipped with a web browser. Two, unlimited licensing. Ignition is unlimited, so you have the freedom to add an unlimited number of whatever, clients, screens, tags, connections, devices, unlimited concurrent designers at no extra cost to you. The third bullet would be security and stability. Ignition is built upon industrial-grade security technology with a solid unified architecture and built-in redundancy. Fourth, easy expandability. Ignition's modular architecture is extremely flexible and scalable to perfectly fit your company's HMI, SCADA and MES requirements. Five, its rapid development and rapid deployment. Ignition's object-oriented rapid development environment allows you to quickly create powerful, dynamic HMI, SCADA projects and do it easily. And six, real-time control and monitoring. Ignition's real-time status controls and analysis tools give you the power to quickly analyze and of course, easily display the status of your facility. I guess the whole point is Ignition can grow with you so it can fit your company's needs, both today and tomorrow.

03:49
Don: So let's get started. Today's presenter is Steven Fong. He's the Website and Technology Manager at Inductive Automation. So Steven, tell us a little bit about yourself and your role here.

04:01
Steven: Sure thing, Don. Thanks for the intro. Like Don said, my name is Steven Fong, and I'm the Web and Technology Manager at Inductive Automation. I work with a great group of developers and designers to build awesome customer-facing web products, like Inductive University, the new About Us section, and the new pricing page. And I'm really glad to be here.

04:21
Don: Thanks, Steven. I was gonna say a side note as we get going here, about Steven, we were going through the practice session yesterday, and I went, "Oh, my gosh! This is a lot of material." He just anecdotally pointed out that it's probably a semester's work of a three-unit course in design. So I think we're gonna be very full for the next hour, busy, and give you some really valuable tips, and very, very pleased to be able to do that. Also with us today is Travis Cox, Co-Director of Sales Engineering with Inductive Automation. A lot of people know you, Travis, but please, a little introduction.

04:54
Travis: Well, thank you, Don. As Don said, I'm the Co-Director of Sales Engineering. I've been with the company since the beginning, and I'm an expert on Ignition platform. I've trained thousands of people on how to use it and done lots of projects. And today, I'm gonna basically show some techniques in Ignition from what Steven's gonna present.

05:12
Don: That sounds great. So with that, that's the line-up we have. I'm going to turn it over to Steven.

05:19
Steven: Thanks, Don. So we all know that having a simple, clean and easy-to-use HMI is important, but actually making one can be a bit of a mystery. In today's webinar, we'll be talking about how we can use graphic design principles to design better HMIs. Keep in mind, too, that these principles extend beyond HMI design and can apply to any interface, so website, phone app, anything like that. We'll start off by talking about our goals when designing UIs and what happens when UIs are poorly designed. And then we'll jump into eight important design principles that we've divided into two major themes: Cognitive load and visual hierarchy. Along the way, we'll work from an example HMI and use the principles we'll learn to improve it step-by-step. The end result should be something that's better-looking and a lot more effective. And as Don mentioned, there's a lot of content to cover, so we'll just get started right now.

06:16
Don: Sounds great.

06:19
Steven: So what is our goal when we design HMIs? Well, the ultimate goal is clarity. We want to enable people to interact with your system by communicating meaning and function.

06:34
Steven: When an interface is poorly designed, they aren't just unpleasant to use, they're harder to master, they're less efficient, and they make their operators prone to mistakes. So let me show you an example of a poorly designed interface. So here we have an example of your typical just bad interface. It's kind of ugly, there's a lot going on, and there's some distracting elements there. There's an alarm state that's kind of difficult to read as well. And what we're gonna do is we're gonna improve this HMI today, and we'll do that by taking a two-pronged approach. First, we'll reduce the cognitive load of the interface by removing visual distractions and organizing things a little bit better. And we'll do that by moving visual clutter, by using alignment and grids, by using text more efficiently, and making the entire layout a little bit more consistent. Then we'll improve the visual hierarchy and bring more focus to our most important information using the rest of our principles, which are contrast, size and proximity, whitespace and color.

07:45
Steven: So the first major theme that we'll look at today is cognitive load, and that cognitive load describes the effort required to create a mental map of how a system works. So imagine your interface viewed from your user, and they're wondering, "What is the overall status of the system? Is everything okay? What is important for me to look at right now? How can I interact with the system? What am I supposed to do next?" These questions contribute to the overall cognitive load that your user faces every time they use your UI, and our brains are a lot like computers in a lot of ways, and one way is that we can only process so much information. So every little bit of extraneous information that's on that screen will add to the mental overhead experienced by your user. So our job as designers is to do whatever we can to build that clear mental map of how everything should work, and reduce that cognitive load.

08:46
Steven: So one way to reduce cognitive load is to remove visual clutter. As I mentioned earlier, every visual element on the interface adds to the overall cognitive load, so try to remove any extraneous information that doesn't actually help the user understand that data that's being presented to them. So going back to our example HMI, we can see that there are some issues with visual clutter; there's a distracting animation that doesn't really provide a whole lot of information in return. In this scenario, we have some extraneous elements that aren't critical to this view, so maybe we can save them for a different view. And there are some other kind of distracting graphic choices, like the cutaway effect on the tanks, the way that the equipment is drawn, and the grading effect on the pipes. So here's our first revision of that layout, and you'll see that we've removed the animation and a number of the elements that weren't critical for the operator to view. We've simplified the graphics and gotten rid of distracting elements, like the shading and the cutaway effects. The result is something that is a lot simpler, easier to read, and a lot more iconic.

10:01
Steven: So our next principal's a pair, which is alignment and grids. Alignment makes different elements appear related to each other. So you see here that we have some dots, and even though they're color coded, the dots on the left aren't really seen as two groups. It isn't until they're brought into alignment that our brains perceive them as being related. Grids add rhythm and order. They create a set of visual rules that form the backbone of your interface. Most people have become familiar with grid systems through newspapers and magazines, though they've been used in some form for hundreds of years. And they're useful because they serve as the backbone of your layout. They introduce your user to uniformity and familiarity with your interface, so even if they haven't seen a certain screen before, they'll know the visual rules and be able to anticipate where to find navigation, data, and imagery. These grids usually are divided into different columns, and columns of two, three, four, eight, and 12 are most common.

11:25
Steven: So you can see here that this magazine uses 10 columns that have been divided into two major text areas plus an extra area for a caption. The BBC uses a common 12 column grid. Designers like 12 column grids because of their flexibility. They can be usually broken up into two, three, four or six column spans, and you can see here at the bottom that the featured content at the very bottom are actually composed of four columns each. And if you're building for the web, you can speed up your development process with web frameworks like Foundation or Bootstrap that make it easier to develop web layouts using grids since they have all the grid behavior baked into the framework. At Inductive Automation, we used the Foundation framework. So back to our example screen. We've gone with a 12 column grid. As we mentioned earlier, there's a lot of room to experiment with your column groupings. Here, we've gone with a three-column grouping, so they create homes for our information to live. When we apply our layout to the grid, we can see that the columns of the grouping on the left have become our home for our navigation. In the middle, that has become the home for our primary information, and our secondary information lives on the right.

13:00
Steven: If we were to take this grid and apply it to the entire project, the user would be able to anticipate the visual rules that we've set up, and know that the left is always for navigation, that the middle is always for our primary information. So even if they were to go to a new screen that they've never seen before, they'll be able to anticipate how to use it. We've also taken the time to realign some of the elements on the screen. So on the navigation, it's all lined up and it's now seen as one group, and by carefully realigning some of the equipment elements, we've created these visual swim lanes where the user's eye can travel down more easily and find related information.

13:45
Steven: So our third principle is text, and we have a lot of tips around text. Mainly, you wanna optimize for scalability. As you can see with the graphic to the right, we don't actually read a whole lot. We scan. Our eyes jump around from element to element, looking for the right information, so when you're trying to optimize for this behavior, you wanna do a couple of things: You want to make sure that your information is organized left to right, top to bottom. Try and use short phrases, bullet points, and wrap up your data under a meaningful sub-headline, kind of like what we have right here. Try and limit your text to two or three fonts or font variations. A variation would be a color change, making something bold or italic. When you have too many variations, things just feel distracting, they're disjointed and they're just harder to design for. When you limit your variations, you have an interface that feels more cohesive, there's more rhythm, and you can still have impact.

14:57
Steven: You can also consider pairing icons with your text, and that will help with recognition. They act as a visual break, and they're just kind of cool to look at. But if you do so, just be careful, you wanna make sure that your icons are simple and easy to read, and that you always pair them with text because different people can interpret icons differently. Also, make sure to consider cultural differences with your icon selection. For example, if you were to create a button that sends out an email, you might wanna avoid using a mailbox icon because mailboxes in the US might look different from mailboxes in Europe or Asia. Consider maybe using an envelope instead, which is something that's a lot more universally recognized. Try and provide descriptive errors where possible. So consider a new user who might see this arcane error for the first time. They might not know what to do with it, or even what the issue is, so if you were to provide an alert that uses natural language, that could be far more useful to the operator. So ideally you'd show what the issue was, what it affects, and what the operator can do to address the issue.

16:22
Steven: If you have a lot of text, try to avoid center and right aligning it. Left aligned text kinda creates a nice rhythm for our eye and makes it easier for us to jump from one line to the next. You have this consistent baseline to the left, and this kind of shifting edge to the right, and it's called the rag. The cool thing about that is that the rag gives a kind of a visual placeholder for your eye as to which line it's leaving, and then which line it should be entering next. When you center and right align your text, you remove all those hints, making it much harder to read. Also, try to avoid justifying text. When you justify text, the computer tries to make both sides even, and it does so by squishing and expanding the spaces between your letters. And while it may look more neat and orderly, it can make it very difficult to read. You don't have the benefit of the rag and you get all these weird, awkward spaces between your letters. So if we were to apply our text changes to our HMI, we've done a couple of things. We've added icons to our buttons to make them a little bit easier to recognize, we've shortened similar names, we've reduced our font variations, and our error now uses natural language to describe the problem.

17:57
Steven: The fourth item we'll be talking about is being consistent. Consistent UIs match user expectations, this makes it easier for them to interact faster and more accurately. So, for example, if you pull your icons from an icon library, make sure that you pull new icons from that same library, or at least make sure that they look similar. We talked about this idea of creating visual rules, so whenever you bring in a new element, you're either reinforcing or you're weakening those rules, so don't leave any room for doubt. Make sure that your imagery looks like it belongs together. You'll get an interface that works better and looks better too. Make sure that your number types are consistent. So common ones are phone numbers, socials and dates. Dates are especially bad because everyone seems to have their own style. There are also international considerations as well, because in other countries, the month and dates are flips. And if two buttons have the same action, try and use the same terminology. Having different words for the same action can be very confusing to your user. Abbreviations are an issue too, especially for days of the month or days of the week, which tend to have a multitude of different ways to abbreviate.

19:31
Steven: Again, don't ignore the visual rules that you've created for your layout. Re-use them. It'll make your life easier and it'll make it easier for your users as well. So, back to our example. We've made another pass and made the layout a little bit more consistent. We've applied labels to all of the machinery, all the values have units now, and the tables share the same formatting. This kind of wraps up our first major theme: Cognitive load.

20:08
Steven: The next major theme that we'll talk about is visual hierarchy. And visual hierarchy is what allows us to direct the user's gaze from element to element. Strong hierarchies pull your eye along a design path to your most important information. Here's an example from Inductive University. The homepage is a marketing page aimed at getting people to understand what it is, what they can do there, to see if it's worth their time, and to understand how to sign up, all in a particular order. You can see here how the elements are designed to draw your eye down the page to our end goal. Weak visual hierarchy feels confusing and cluttered. The user has no idea what to look at first. So, from this example, you can see that your eye is drawn to the middle of the page, probably because it has the most contrast, then it naturally scans to the right, and then after that, who knows?

21:11
Steven: In this next section, we'll be talking about some ways to control visual hierarchy. So one way to do so is contrast, and contrast creates distinction between elements. High-contrast elements are perceived first and perceived as more important. And to control contrast, you can use color, you can use size, and weight to create contrast between your elements. And this applies to text, as well. When used appropriately, you can use contrast to highlight important and preferred actions. On inductiveautomation.com, we use high-contrast buttons to direct visitors to our primary actions. We call them calls to action. If there are multiple actions possible, we'll provide a secondary button with lower contrast, and this helps us to provide a hint to our users as to which action they should take. In this example, Positionly uses contrast really effectively to control the balance between more important and less important information. Less important information is grayer and has lower contrast, and it falls into the background. Whereas more important information, it has color, has more contrast, and jumps into the foreground.

22:44
Steven: So back to our example HMI, we have made some changes to adjust contrast. We have toned down the background, we've toned down the equipment a bit, and knocked back the pipes. These are all elements that were deemed less important. And then for the more important information like our data values and the alarm and the tables, we've added more contrast to make them pop up towards the foreground. So here's a good look at the progress that we've made so far. If you wanna check your work, there's a great way to do so, which is to blur the image or to squint your eyes. So when you blur out the details, you kind of see that there have been some improvements, that the equipment is less pronounced. And the navigation is more obvious, the data read-outs stand out more, the tables stand out, and there's just a stronger grouping of information.

23:49
Steven: The next set of principles are another pair, and they're size and proximity. So larger elements are perceived first and are interpreted as being more important. Objects that are near one another are perceived as belonging together. So, for example, instead of seeing this as seven circles, we're more likely to perceive them as two groups of circles. A helpful way to use proximity is with chunking; instead of just laying out a long list of data, you might consider grouping your information so that it's easier to scan and interpret.

24:32
Steven: So we're gonna skip our example HMI for just this screen, and I wanna talk about white space a little bit first. It's closely related to size and proximity. It can be hard to talk about because when we're referring to white space, we're talking about the part that isn't there. It's a space that flows between and around elements. So white space makes reading and scanning easier. It creates breathing room for the eye by breaking up the page. It helps your interface from feeling cramped and overwhelming. It helps bring prominence to other elements it interacts with, it guides the user through the interface, and it doesn't have to be white. The term white space is a carry-over from print days where most everything was printed on white paper. White space is used to give your layout more breathing room, and it makes the individual elements on the page more interesting to look at. It also makes taking in a lot of information, like text, more comfortable. So a classic example is Google's homepage, which very effectively uses this idea of breathing room.

25:43
Steven: The other way to use white space is to bring prominence to a certain element. So this is a classic VW ad, and it's famous for its use of white space. Rather than just being wasted space, it's actually an active element that forces your eye to that car to figure out what's going on there, and then brings your eye down to the message. Google's Material Design language makes great use of this concept as well. The primary action button is located on the bottom right, and it's pulled away from all the data-heavy regions on the top and left side of the interface.

26:24
Steven: So back to our example HMI. We've used proximity to split the navigation into two separate groups, navigation and equipment details. And we've brought the equipment labels down with the read-outs to make a stronger connection between those bits of information. And we've also resized the equipment graphics a bit too, downplaying their importance and giving the entire layout just more white space or breathing room.

26:52
Steven: Our final design principle is color. Color is a powerful design tool, so it has to be used carefully. You should be strategic with your use of color. It's very easy to draw focus to an element, but it's just as easy to create distraction. Keep in mind that color carries strong emotional connotations. So red, yellow and orange are often seen as warning colors, so try and reserve them for that use. Green is commonly used as a go state and could also be viewed as calm. Light blue is seen as friendly and inviting. Whereas, darker blue can be seen as calm and stable. And so you get the idea.

27:37
Steven: An easier way to build a color scheme to start is to start with a monochromatic palette. And a monochromatic palette is built out of just one color and variations of that color. So you might choose, go to a color wheel and choose your base color. In this case, we've chosen light blue. And you can add variation by choosing darker and lighter versions of a color, maybe throwing in a black and gray; you've got your palette. If you wanna add some interest, say you wanna add a button to your layout, you can try an analogous color palette. And you can do so by just going one color over on the color wheel. So here, we've chosen green as our accent color. If you wanna add even more interest, like our usage of the call-to-action, you might consider using a complementary color, which is usually two or three spots over on the color wheel. And for even more interest, you can check out complementary colors which sit on the opposite end of the color wheel from your primary color.

28:51
Steven: Sometimes, using two strong hued colors near each other can cause issues with contrast. You can fix that by making your background color lighter and more subdued by maybe adding some white to it. This will help your foreground elements stand out some more. If your foreground element is bright, like a yellow, you can try and go the opposite direction with a darker color in the background and by adding some black to it. You can pick more neutral colors by charting colors closer to the center of your color wheel.

29:28
Steven: So some more tips on color. Don't rely on color to relay information. People perceive color differently based on shifting light conditions. There are cultural views of color may be different in different regions. And as many as 8% of males are colorblind. To start designing for color, actually start with black and white first. If your interface doesn't work in black and white, it won't work in color. And it's a good place to check for contrast. Actually, most of the web teams' projects start as low-fidelity, black and white wireframes. And then we built on top of that once we were happy with the design. Once your layout is starting to feel good, then you can start adding color back in carefully, starting with the most important elements first. You might find that adding just one or two colors is all you need. If you wanna learn more about color or to get some inspiration, I've got two great sites for you to check out. The first is Adobe Color. It has tons of user-generated color palettes for you to play with and has cool tools, too. You can upload your color and then it will help you build that monochromatic or the analogous sort of split complementary palette for you. Another cool site is dribbble.com. It's D-R-I-B-B-B-L-E dot com. It's a really cool resource where people post screenshots of some of the cool interfaces that they're working on.

31:06
Steven: So here's our final screen. We've used color to tone down some of the non-critical data elements. We've reserved red for alarm states, but we've made sure to pair it with secondary indicators. And we've made the foreground elements stand out more by toning down the background and making it grayer and more neutral. So we've covered a lot of material today. So I just wanted to take a moment to review the progress that we've made on our HMI over the course of the webinar. So we started off with an HMI that was cluttered and ugly. And then reduced the cognitive load by removing visual clutter and simplifying the graphics. Then we applied a grid and aligned our elements. And then we added icons to our text, labelled our equipment, and introduced an alarm that used plain English. And then made everything more consistent. Then we started working on the visual hierarchy by improving contrast. And then we adjusted our size, proximity and white space. And then finally, we finished up by using color to better define our important and less important elements. So that basically wraps up my presentation. We've talked a lot about all these different design techniques. And now, I have to turn the webinar over to Travis to talk about how we can implement some of that in Ignition.

32:47
Travis: Alright, thank you, Steven. So, all these techniques we... Basically, we have to be able to build the application out in Ignition and to be able to apply these techniques. And so, I wanna show you a couple of just some cool, basically, tips and tricks, if you will, that you can do with Ignition to apply these different techniques here. So let me open up my Designer here. I actually have this window, the fixed HMI that Steven just talked about here, I actually have it completed in Ignition. So we're actually gonna make this available so people can download this doc project file and play around with it some more. And as well, we're gonna come back to talk a little bit more about all the techniques that we're using here, but if I look at here is the fixed window and of course the navigation window here that we've developed.

33:37
Travis: Now, to do what he was talking about here, one of the first techniques that I wanna show you in Ignition is being able to use a grid. He talks about a 12-column format, and to really be able to apply that, you wanna be aligning things up correctly and know where things are. And so, inside of Ignition, when you're developing screens, you can actually turn on a grid. So, if you go up here to View, I can show the grid, and I can specify the grid size if I want it to be smaller or larger. So, here I have a grid size of 10, which allows me to... More or less, you can use those as columns, but you can kinda see things according to the grid, and we can snap to the grid. So, when I have components on the window, it's very easy for me to snap 'em to see where they are, and I can work with it more. So that's one technique that is really important. Another is being able to align things. It's very easy when you drag a bunch of stuff onto a screen. So, here I have a bunch of LEDs... They could be all different sizes. You're not really paying much attention to the order of all of this, but you wanna be able to use the drag and drop piece of Ignition, so you can drag tags.

34:50
Travis: So over here, I can take a ramp valve, drag it on here as an LED display or a different component, and then later on, I wanna go and align these things. So, we can actually select multiple components on a window, and up here at the top, there are quite a few different alignment tools. These two right here are really the most important. This allows you to align two or more components in a row or in a stack. And so, let's say I wanna do it in a stack here, so I actually align the stack and I can select the normalize. And normalize, what it's gonna allow us to do is actually keep everything being the same consistent size. I can then specify the padding between. So, if I'm doing a stack, it'll be from top to bottom, so it'll be vertical, I'll put a five pixel padding between them, now I have all my LEDs lined up perfectly with a five pixel padding, and we normalized all of the sizes. So, it really allows us to come back later to align them, and then potentially you can right-click and you can group them together, so now you have this group that you can move around. And again, working with the grid, you know where things are on the screen.

35:52
Travis: As far as alignment, another technique that's really important, let's say you have two completely different components. So, say I have my tank here and I have a button, and I want to essentially align these things either to the top or to the bottom. They're not the same size, but I want to be able to align them. I want this to be perfectly centered on this tank, but I don't know where that center is. What you can do is actually slide both these components, and up here you can actually align the left edge, the right edge, the top edge, if I go to top or bottom, I can do that. Or I can go center, which will align them perfectly center, and then I can move them around together on the screen. So, these alignment tools are really powerful here that you have in Ignition.

36:35
Travis: Another technique that we're gonna talk about here is being able to apply, of course, a style; the colors and the fonts and all of that that he was talking about. So, what I suggest that everybody does when they are doing a project for the first time is to first build a little style guide you're gonna use for Ignition, and I'm bringing one up here so you can see what I'm referring to. Alright, so here is a little preliminary style guide that I like to start with. Essentially, I like to identify the fonts that I'm using in Ignition, you know, primary and secondary. I typically use Arial and Dialogue. Those two fonts are pretty much consistent across all operating systems and all machines that are out there. You don't wanna use crazy fonts because not every machine's gonna have it and it's gonna default to something else, and you may get cut off or it just may not look good. So, to keep that consistent, go with things that are really well-known.

37:32
Travis: Then you can identify some simple font sizes so this way you can be consistent with your project. Maybe your captions, the small text you have, then the normal window text that is 12 points, and then I have a section header, and then the actual header for the window. You can identify those, and we're gonna show how we can make templates off of these so we can continue to be consistent. Also identifying the colors that we like to use in the applications, so that people that are... If you have multiple developers on a project, they are using the same consistent colors for red and for green. It's really, really important to do so. And then I also like to put in the iconography, so they at least see the style that you're using. The flat style that here we're using in this case. So, if you're creating new, if you need new types of images or icons that you're consistent with the rest of them, so you're not going off here. And that's one thing I like to do, and then I like to apply that style in Ignition.

38:29
Travis: So, if we go back to the Designer, what I've done over here is I've created templates, and templates are a really important thing because they allow you to design something in one place and you can use it throughout your entire project. So, you'll see here that I've made one called Caption Text, and this basically has built into it the font and the size and the color that is ready to go. So, if I can put this on any window I want. So, here is my caption, I just put the value for the text I want, put it on the window, and if I need to later go and change the font or change the style or something about that, I can go and do it in one place. And so I've done that for the caption, for the regular window text, for... And you can, of course, make, we can make these things bigger. And the section header text, as well as of course the overall header for the window. So, that's one thing I like to do is use templates a lot. The same thing goes for... We look at the HMI that we're looking at here. When it comes to the fans or the pumps or the tanks for the valves or even the labels here that where they have the style on them, these should all be created in one place.

39:38
Travis: And that's what we've done here. So if I look, I'll see that I have the valve. And I've made it, the style is in there, the color is appropriate. So of course now, I can go and find the tag. Let's say I wanna look at rideable integer two, and we've made the drag-and-drop with existing templates very easy. So you can drag this drive under two, and I can select the valve template, and you can see that it's showing the open and it's showing the closed based on the values that we have there. So that way, again, I can go into one place and design it.

40:09
Travis: The last thing I wanna talk about here is one thing that can really help, I think, save a lot of time when it comes to color. We talked about that little style guide where we specify the colors we wanna use, but now that it comes to actually designing, you may have all these different windows and different places you wanna use these colors. And if you go and separately develop them everywhere, you wanna change that color tomorrow, you've gotta go to every window, every component, search, replace, and it could be a little bit difficult. What I suggest, a little cool technique, is to create these things called client tags. So client tags in Ignition are basically variables that you could have within the client. And I have created this whole style folder with various just simple memory values that are all strings that are all the colors that we want to use throughout the application. And in my templates, I have the foreground color and the background colors and these things already linked to these colors here.

41:08
Travis: So let me show you what I mean. If I put a label here and I want the label of that, the foreground here, to be, take the text foreground, I drag it down to the foreground color. Now, of course, it's gonna change that one. Now, if I go and change the foreground color to something else, let's say I make it this light blue instead, then you can see that everywhere, all of these texts, all the light blues have changed, or the foreground colors have changed to that one single color. You can change it back to 4D, now everywhere that's being used. So by identifying the style in these client tags, we could have one place to go to change that and to really work with it. You can even go further and make your application themed, but I don't think theming is that important. It's just a way of being able to design it very, very easily and rapidly.

42:02
Travis: So using these techniques, it could really help you with what Steven has shown here today. When it comes down to it, it's about when you have lots of developers, just being consistent, doing the same things, being aware of what you're building, and not trying to duplicate effort. So the more you can put into one place, the better you're gonna be off in your application. And I also will say to use SVGs. Icons on buttons and labels, it's okay to use images, but everywhere else in the application, you should use vector graphics 'cause they scale very nicely. You won't have any pixelation that happens when the client gets so large out there. So the more you can use SVGs, the better. A good resource, since we were talking about resources earlier, is openclipart.org. They have great SVGs that you could bring into your application. Alright, with that, back over to you, Don, for Q&A.

42:54
Don: Great. Thanks, Travis. Thanks, Steven. Well, I guess everybody can see we've covered a tremendous amount of material here. So if we can just go into our Q&A, that's gonna give us an opportunity to take a look. I got a question grid here, and so I'm just gonna maybe... You guys can look at it with me. We'll sort of look through and throw the questions over to you as they become relevant. I do realize we've got quite a big queue of questions here. So we're gonna get to as many as we possibly can. And I'll just start with one. I'll read it, and then Steven, you can chime in, or Travis. So this is Jessie Bailey. I'm going to listen and we'll ask questions via text message. So Jessie, thanks for telling us what you're doing, that's great. You don't have a speaker phone, but you can type something in if you want to.

43:39
Don: Will there be an archived copy of the webinar? The answer is yes. We will archive, and I'd say, David, by tomorrow, people would have access to it. And I think we sent out an email with the link to it to all those who attended and those who weren't able to make it on for the live presentation. And I'm told we could... This one. Oh, here we go. Would be nice to have a list of the end of the talk of good resources, whether books, websites, whatever. I know we gave a couple, David, we gave a couple of those, but if you need more or want more, we got something from your recommendations, Steven. So if you wanna add anything to that, fine. If not, we can respond to you, David, if you have more questions from what was given to you 'cause that was at the beginning of the webinar when you asked that.

44:24
Don: This one says, "I am new to Ignition. Looking for an alternative to our existing SCADA platform. I appreciated the presentation as it related to ISA 101. My question: What is the largest system Ignition is deployed in, in terms of PLCs, connections, tag count, number of operator screens, etcetera? I realize the software is modular-based, not tag-based, but I'm trying to discover how well Ignition can scale. We are in the water/wastewater industry and have reviewed the Helix Water District video." Well, I said it was scalable at the beginning. So Travis, can you make a comment on the largest system according to some of those metrics?

45:01
Travis: Yeah, the largest system that I know of is a system with around 100 PLCs, 1.3 million tags, and has about 150 concurrent clients opened. And that is all on a pretty beefy server. They have a redundant architecture, just one central set of servers that could run that. So it is... With better hardware, you can do quite a bit with Ignition. So the idea is it's unlimited by licensing, but of course, limited by hardware, and so, yeah.

45:29
Don: That's a good answer. Okay, good. So the point is it's scalable, and hopefully, if you... And also, John, to your question, since you are new to Ignition, I think I wanna advance the slides to our Q&A slide here so you can also see that we have account executives here, not only our Director of Sales. If you wanna dig deeper, and Travis is a Co-Director of Sales Engineering, if you want something a little bit deeper, then we can go deeper with you and give you a full personalized demo so you can really get an answer. Okay, and next question on the final screen: What is the reason for the different colors in the text? Should there be a key or legend of some kind to indicate their significance?

46:10
Steven: That's a good question, actually. The colors actually were supposed to, in our scenario, just tie in to... These are guide tanks, and so each color represented the color that was currently in a tank, but I totally agree that a legend should be provided for the operator so they don't have to make that connection on their own.

46:30
Don: Great, Steven, thanks. I'm just trying to go through as many as we can. This is Asher has this question: "Any recommended sites to get button icons? Monochrome, hopefully, SCADA related?"

46:41
Steven: Yeah, so actually internally, we use IcoMoon a lot. I-C-O-M-O-O-N. It's not free, but there are a set of really high quality icons, and they come in P and Gs, EPS, SVG, all the different formats. There are a number of other really high quality icon companies out there too. I'll see if I can find a way to get a list of them included with a follow-up email.

47:12
Don: That sounds great. So I think I'm gonna throw this in your direction, Travis. It says, "Is it possible to design a responsive fluid UI if our application needs to be displaying multiple displays with different resolutions?"

47:28
Travis: That's a very good question. Ignition is written in Java, so the clients are Swing applications. So right now, you have to build different applications for different types of devices, like a phone have different aspect ratio than a normal PC or a widescreen. So you'd kind of want things specifically to that. We're not building HTML pages. However, that's something that we are researching, so that we could have more of a fluid UI-type aspect, but right now, we deal with different resolutions by... There are different aspect ratios... By having some separate screens, separate projects for that.

48:02
Don: Great, okay. "So how do you deal with screen resolutions with different font sizes, small, medium, large?" Steve has that question for Travis or Steven. Travis?

48:11
Travis: So certainly, you should start out with, when you develop in Ignition, a particular resolution size. Pick out a size. With Ignition, you're not stuck to one resolution, you can use different. But go to one size, one of the ones you're gonna be the most common, and have your fonts, the size of the fonts being according to that particular size, is what I'd recommend. And then Ignition has the ability to scale those fonts up as the resolution gets bigger, so things will just relatively get bigger all over, which would make it look relatively the same, but just of course on a bigger display. I also recommend with some of those that you may turn on anti-alias with your labels because then when it gets really large, it can be nice and smooth and simple and it really looks good. All the labels and numeric text fields and all these things have the ability to have anti-alias turned on, which is just a smoothing effect that you have on your fonts. You wanna add to that?

49:04
Steven: No.

49:04
Don: I just wanna mention, just because I see a lot of new people here, and I'm gonna back up and just mention two things to those of you who are new and then we'll be scrolling through and get to many more questions. The first one is, if you're ready to try Ignition for yourself, please do. You can download it, full version of Ignition, it's free. It'll be up and running in three minutes, you got a two hour run time, you just repeat. And you never... The Designer never goes out, so you have an opportunity to actually design a complete project, and so to try before you buy. So that's one thing I wanna mention. The second thing I wanna mention is, I didn't mention Inductive University, and I think it's very important to mention.

49:41
Don: It's a great education tool, no matter where you are in the world. It's free, it's online, there's about 600 videos that cover all aspects you're trying... Or if you're just designing a project and you wanna know more about alarming, or more about the historical capabilities of the modules, or more about the reporting module, you can dig in, you could search by the topic, and you can also get fully credentialed in the HMI SCADA School or the MES school through Inductive University. So just to point out, for those of you who are new, please take advantage of 'em. Try it yourself, see what you can do with it, and then take it from there and go through the university and gain the skill sets. So back to the questions here: "Which program do you recommend to design new images, for example, AUTOCAD, Adobe Studio?"

50:26
Steven: Sure, yeah, so while Ignition does have very powerful drawing tools built into it, it is somewhat limited. Internally, what we do is we use Adobe Illustrator to build out our vector graphics. You have a lot more control over how those shapes are made and you can very easily export that shape as either a P and G or a GIF or an SVG, which Ignition can take in very easily.

51:00
Don: Good. So another question here. Thanks, Steven. So: "Have you looked at the ASM book, Effective Console Operator HMI Design?" So Mark has that question.

51:10
Steven: Well, yeah, we've talked a lot about High Performance HMI Design internally, and we think it's a great resource and it's a great direction for designers to look at. And what we wanted to achieve with this webinar is to kinda talk about some of the ideas behind what High Performance HMI is talking about, so trying to remove visual clutter that doesn't have to be there. What we've found though, is that sometimes there is a difference between, say, what the engineers are building and what say the executives wanna see on their fancy expensive screens. And so what we wanted to try and do is to show that you can still have a very effective HMI, but not give up maybe some of the beauty that you can have with a well-designed interface.

52:03
Don: I think that's a very good point. I also wanna mention... I didn't mention it earlier at the outset, but our Design Like a Pro series is an ongoing series where we take topics based on your feedback and your recommendations. This session was extremely popular at ICC, and we decided to bring it to you in a Design Like a Pro series. We did have an earlier one on HMI screen optimization, which is available in the archives, so all of those earlier Design Like a Pro series webinars are available in our archives for those of you who wanna go deeper or look at other topics.

52:34
Don: "We're an SI, is there a program for us, if so, can you briefly explain how it works?" Yes, Marcus, there is a program, I'll make sure we get a follow-up call to you too also Marcus, but in essence, we have very... We really are the go-to market through our system's integrated program. I mentioned we have 1400 integrators on our program, that's how we reach all geographies around the world. It's free to sign up for it. There are significant discounts attached to it based on level of certification, so you can register as an SI and begin to work with us and get discounts immediately, but as you certify and get Gold certified or MES certified, then you can elevate those. We also provide free tech support to our integrators, 'cause we consider them to be really critical to the overall success... You're our partners, you're our partners to reach the marketplace, both in skill and outreach to your customer sets. So I know that's a quick answer to that, but I think we'll follow up and make sure you get a more thorough answer, you can also go to our website under our integrators section and learn fully about the integrator program, and look forward to working with you on that. Next question is, what are the colors on the client?

53:43
Travis: Why are the colors.

53:44
Don: Excuse me I read... Why are the colors on the client?

53:46
Travis: So in the demonstration, I chose client tags for the colors on purpose, I could have easily put those tags in the global folder, which would mean that it would be one value for every client that's out there. So it would be one color for the entire system. Now, I put it in the client folder because right now, they were just kind of static, but it's possible that you may wanna change those colors based on different operators. For example, if an operator is color blind and you do know that, you could actually have those client tags know that when I'm... When the operator logs in, I can switch it based on that operator to a different color, so that for him or her, it's a certain set, for somebody else it's different, and that client scope tags can be different for every client versus the global where it is for everything. So that's kind of why I chose that in there, yeah.

54:36
Don: That's good, that allows you to allocate for idiosyncrasies of client needs, so that's... Okay good, next... We got time for just a couple more questions. You guys have been an incredible audience and very active, so I do want to acknowledge those of you who we haven't got to in the queue, and to please remind you, we will follow up and make sure your question could answer. A couple more for the day. "Have you done projects with Opto 22 POCs? If so, how do you interface with them? Do you need an OPC server, etcetera." So Bill's got that question.

55:06
Travis: Yes, so Ignition, we interface OPC, we have a built-in OPC server with various drivers, but we don't have an Opto driver, so you would have to use Opto 22s OPC server to connect to those devices, but we have lots of customers that are doing that successfully.

55:21
Don: So with that, I think... I know they're still in the queue, I said we will get to them, but sort of a last opportunity for anything that you wanted to comment on, Steven, in the end. And we'll throw one last question in here for you and then you can wrap up on that. Same question about the icons, but for graphics, "Are there any good sources for common graphics? I'm a power plant, so having a list of common items like pumps and fans, etcetera, would be handy."

55:51
Steven: Yeah, so certainly with ignition, there's a single factory library that single factory has over 4000 vector graphics inside of that, pretty kinda standard industrial graphics. There is openclipart.org that may have more industrial-type graphics there. There isn't just a great website resource that I know of that has for common graphics. Icons is one thing, there's tons of resources, but for these industrial graphics you are kind of limited. So one thing that you can do is certainly take anything you may have, anything that was modeled on like AUTOCAD or whatever, you could export that and then, of course, transition the color and styles to those. But unfortunately, there aren't too many great resources that I know of.

56:34
Don: Alright, I think we've sort of come to the end of our hour. Steven, Travis, you guys packed a lot in here, I hope everybody got their three units worth of university course in the last hour. But please, if you have any further questions, you know how to contact us. Thank you to Steven and Travis for putting on some really good solid content that will be useful to you and also please mark your calendar, Wednesday February 24th will be our next webinar. It's actually going to be about a really, I mean really exciting new product release so watch for more information coming soon on that. With that, we're wrapped up for today. Thank you all for attending, have a great day.