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.

By Jeff Monforton March 18, 2014

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

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.

Colors

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

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.

Text

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.

Location

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.

Spacing

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.

Navigation

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.