Operator interface graphics 101

Graphics on an operator interface can range from very simple to extremely complex, so when creating them there are a few tips you should keep in mind.


Most automation and process control projects provide an operator interface presenting the current state of the system. These can range from the very simple to the extremely complex. The one aspect that they exhibit—perceived or real—is a reflection of the total job quality. The quality of the graphics will certainly leave a lasting impression; after all they are in the operators view every day.

Developing a guide on how to create graphics would fill volumes. Add to that, some customers have standards on how graphics are to be done (adhere to these religiously, especially when you don’t agree with them). However, there are some design points that go a long way in making your graphical screens look polished.

To be honest, these are items that are also pet peeve’s when I review graphics.


Lines should be horizontal or vertical. Angled lines must appear intentional. Nothing looks worse than a line that has a slight ‘jog’ in it.

When lines are being used to represent process piping, lines meet to represent a ‘Tee’ as well as touch the equipment to indicate connection. Pipes in reality do not just hang in the air.

There are two basic choices when using lines: straight lines and poly-lines. The use of which has occasionally been a point of contention between designers. In the end, the only thing that really matters is consistency and construction. If you’re using line segments then once again, they must meet.


The color of screen items have meaning, this should be uniform throughout the system. Nothing is more disconcerting when the meaning of screen color changes when “Phase 2” is implemented for the same process element. For example, if water is blue on most of the graphics it should be blue on all of the graphics.


Valves are typically shown on process graphics as a “bowtie.” The bowtie needs to be centered on the pipe/line. The line representing the process piping is not to be visible behind the bowtie.


There are more “do’s” and “don’t’s” for text than can be listed. We’ll just hit some highlights.

First off, it must be accurate (sounds simple, doesn’t it?). After accuracy, the rest is aesthetic. Align text appropriately (don’t assume that center alignment is appropriate for all cases). Pick one or two fonts and stick with them. By all means, do not change font size by dragging the sizing handles; some systems treat text as a drawing object and yield uneven results. Change text size by adjusting the font point size.

3-D and animated items

These items look great in the brochure. However, the excessive use of these types of items is distracting or consumes needless screen space. When you throw in animated pipes, fans, motors, and other gizmos the screen can be a “flashy” place—and not in a good way.

Screens need to provide a quick reference of information. Flashing and moving items catch your eye. Therefore, keep them for important things, such as alarms.


To quote a realtor, “Location, Location, Location.” A screen needs to be developed around the center point. That doesn’t mean that the main equipment or device is in the center, but the screen is balanced around that point. Allowing the operator to focus their attention on the center allows for smoother screen to screen transitions.

While developing the focal point around the center of the screen there are elements that are consistent from screen to screen—such as menus and banners. It is extremely important that these are in the same location. Otherwise, screen to screen changes look like a bad 1920’s cartoon.


Like location, this is somewhat subjective, but needs to be considered. Similar or related elements need to be evenly spaced. Nothing looks worse than seeing valves and the associated tag name haphazardly spaced and scattered around a screen. Fields also need to be consistent so that they appear more grid-like.


The only thing to be said here is that the navigation must work and take the operator to the indicated. While seemingly self-evident a broken navigation pick is a major annoyance.

Plan for the future

It is important to leave graphics that are easily maintained. There are a couple of things that most systems provide, like Grid and Snap, which allow for rapid development and ease in modification. These also help with most of the points mentioned above. These are provided in so many systems for a reason. Use them. You might not be the developer who does the next phase or modifications, but then again you might.

In the end, none of these points will lead to a perfect system. Careful planning, layout, and execution will lead to a successful implementation. These points just make the system you deliver look professional and a cut above. Despite all of the wonderful, technical wizardry that you developed in the background, this is the lasting, visible impression you leave.

Final Note: For those who think that these items are just random points, think again. The author just spent several months cleaning up graphics and controls systems that are directly related to the points raised.

This post was written by Jeff Monforton. Jeff is a Senior Engineer at MAVERICK Technologies, a leading automation solutions provider offering industrial automation, strategic manufacturing, and enterprise integration services for the process industries. MAVERICK delivers expertise and consulting in a wide variety of areas including industrial automation controls, distributed control systems, manufacturing execution systems, operational strategy, business process optimization and more. 

Anonymous , 04/03/14 04:53 PM:

Well said! These are the things that also drive me crazy!
Francisco , NJ, United States, 05/01/14 05:19 PM:

How do you see the advent of other development environments, in particular Visual Studio .NET as a way to develop custom HMIs, SCADAS?
The Engineers' Choice Awards highlight some of the best new control, instrumentation and automation products as chosen by...
The System Integrator Giants program lists the top 100 system integrators among companies listed in CFE Media's Global System Integrator Database.
The Engineering Leaders Under 40 program identifies and gives recognition to young engineers who...
Learn how to increase device reliability in harsh environments and decrease unplanned system downtime.
This eGuide contains a series of articles and videos that considers theoretical and practical; immediate needs and a look into the future.
Learn how to create value with re-use; gain productivity with lean automation and connectivity, and optimize panel design and construction.
Machine design tips: Pneumatic or electric; Software upgrades; Ethernet advantages; Additive manufacturing; Engineering Leaders; Product exclusives: PLC, HMI, IO
Industrial wireless cyber security: More complex than black and white; IIoT at the I/O level; Process modeling; Cyber security research
Robotic advances: Software, form factors; System-based ROI; Embedded control; MES and information integration; SCADA and cyber security; Position sensor; Controller, I/O module
Learn how Industry 4.0 adds supply chain efficiency, optimizes pricing, improves quality, and more.

Find and connect with the most suitable service provider for your unique application. Start searching the Global System Integrator Database Now!

Drilling for Big Data: Managing the flow of information; Big data drilldown series: Challenge and opportunity; OT to IT: Creating a circle of improvement; Industry loses best workers, again
Pipeline vulnerabilities? Securing hydrocarbon transit; Predictive analytics hit the mainstream; Dirty pipelines decrease flow, production—pig your line; Ensuring pipeline physical and cyber security
Cyber security attack: The threat is real; Hacking O&G control systems: Understanding the cyber risk; The active cyber defense cycle