Two of the most common controls, toggle switches and checkboxes, appear to accomplish the same task and often get their use cases confused as a result. However, there are very specific instances where you should use one or the other. This blog will explain the differences between checkboxes and toggle switches and identify when to use each in your user interfaces. 

Distinguishing Between Checkboxes and Toggle Switches

A checkbox control has two states: unselected and selected. Checkboxes should be utilized when a user can choose any number of listed options. Checkboxes will usually require buttons such as “Submit, OK, Next, Apply” after the boxes have been checked.

A toggle switch represents a physical switch and is an “either/or” control that allows users to turn things on or off, like a light switch. Similar to flipping a light switch, the effects of that switch are felt immediately. This same characteristic applies to UI toggle switches.

Switches can provide an added benefit to mobile users. Switches have a larger touchpoint to connect with and can provide more haptic feedback compared to checkboxes.

Tapping a toggle switch is a two-step action: selection and execution, whereas a checkbox is just selection of an option and the execution/saving action is usually required later on or is in a separate location.

Below are few use-cases to help you decide which control is right for your user interface.

When to Use a Toggle Switch

• An instant response is required without review or confirmation. 
• A setting requires an on/off or show/hide function.

When to Use Checkboxes

• Options need to be confirmed or reviewed by the user before they are submitted.
• The user has to perform additional steps for changes to become active.

• Multiple options are available, and the user has to select one or more options from them.

• A single yes/no choice is provided, or only one option can be selected, and its meaning is obvious.

• The user is toggling independent features or behaviors, and you want to offer two options for an on/off type of decision.

Conclusion

When deciding between a switch or checkbox, focus on context, not function. Ask yourself whether a setting should take immediate effect or not. Ask yourself whether users need to check their settings before they apply them.

Learn more about DMC's User Interface Design expertise.

The post User Interface Design Tips: Checkboxes vs Toggle Switches appeared first on DMC, Inc..

I relied on WinCC’s faceplate types to create generic controls that could be dragged and dropped as needed without additional overhead. I wanted this interface to feel comfortable for operators, so I opted for a design that mirrored interfaces with which users would feel more familiar.

In this post, I’ll discuss my custom toggle switch control.

When to Use a Toggle Switch

Toggle switches, like light switches, should be used to control binary operations that go into effect immediately (as opposed to a checkbox that is usually coupled with an Apply, Submit, or Next button). 

Functionally, toggle switches follow a standard across platforms; right and colored indicates a “powered” or “enabled” state, and left and grey means “off” or “disabled.” However, each company designs its control a little differently to give a unique feel.

Here are designs that some high-profile companies use:

Img 1: Microsoft Windows 10

Img 2: Google Android

Img 3: Apple iOS

How to use the ToggleSwitch in WinCC 7

I made two variations of my toggle switch. The regular fptToggleSwitch faceplate has properties for displaying text within the switch. Deprecated due to its ambiguity, this style does not follow best practices for some designers. 

The text could arguably indicate either state or action (if the switch says on, does that mean it is currently on? Or will pressing it cause it to turn on?). An alternative standard is to simply remove text, and let the fact that ‘right’ and ‘colored’ indicate ‘on’, while ‘left’ and ‘non-colored’ indicate ‘off’. To further reduce ambiguity, the fptToggleSwitch_OuterText faceplate might be more appropriate, which displays text on either side of the switch. This method solidifies the intended functionality.

I’ve attached the files for both types of switches. Feel free to use as-is or customize it to tailor it more to your application.

Files

ToggleSwitch Faceplates

• IsToggled: Tie this property to the tag corresponding to the status of the device or bit that the switch is toggling.
   
• OnText: For the regular faceplate, this is the text that is displayed when the switch is toggled on. For the outer text faceplate, this is the text that is shown on the right side of the switch.
   
• OffText: For the regular faceplate, this is the text that is displayed when the switch is toggled off. For the outer text faceplate, this is the text that is shown on the left side of the switch.
   
• OnColor – Color helps indicate the state of the switch to the operator. It is standard practice for the presence/absence of color to represent on/off, enabled/disabled, true/false, etc. The OnColor property defines the color of the switch when it is on. Choose a color that matches the color scheme of your project.

Don’t forget to set an event for when the control is pressed!

See the Switch in Action

Conclusion

Intuitive and user-friendly interfaces aren’t just for picky consumers; they can greatly improve the usefulness and effectiveness of a machine. Users who can better navigate and operate their machine are less likely to make mistakes that can cause unplanned downtime. 

Check out our HMI and SCADA programming and User Interface Design pages to see what DMC can do to improve your machine interface!

The post Flattening WinCC’s Skeuomorphism: The Toggle Switch appeared first on DMC, Inc..

 1. Left-align Text

Likewise, justifying text creates awkward gaps that interrupt the visual flow. If text is left-aligned, left-align the titles too. Never center-align a title over left-aligned text, or the title will look like it accidentally wandered off.
 

2. Right-align Number Columns

Align the titles with the columns; left for text, right for numbers. Specify the same number of decimal places for all columns so that the numbers line up for easy comparisons. If there’s more than one row of text in a cell, top-align to make reading across easier. Center alignment disorients, as seen below.

Left/right alignment creates strong column relationships.

3. Set Line Width at 50-60 Characters

When lines get very long, you can get lost in the line or have difficulty finding the beginning of the next line, especially if the paragraph is long. Keeping lines at 50-60 characters per line (including spaces) helps the reader keep their place. Readers will get lost if it’s too long, even if it’s just a single line.

Unfortunately, most programs’ defaults will not allow customization of line width. Microsoft Word defaults a line width of ~100 characters, OneNote defaults to ~120 characters. Use this simple tool or Microsoft Word’s built-in feature to measure characters per line. 

4. Keep Text Contrast High

The third example is much harder to read. A quick tip – squint your eyes and look at the text box. If you can still see that there’s text, then your color scheme has good contrast. If the text blends into the background, increase the contrast.

5. Make Your Text Big Enough

The default in most programs is size 11pt for sans serif fonts and size 12pt for serif fonts. These are appropriate sizes for most typical computer use. As soon as you stray from typical use (e.g., dim or bright environment, HMI at table/hip level, must read quickly, etc.), those font sizes are generally too small. Here’s a useful resource to help determine the minimum text size for a viewing distance. Try to stay a few sizes above minimum for comfortable reading.

6. Use Emphasis Sparingly

Thoughtful emphasis provides clarity and guidance. Too much emphasis (like this) is distracting. 

Bold draws the eye. Use it to make things stand out.

Italics is gentler and good for sub-titles and side-notes. Keep in mind that it’s harder to read than normal or bold text.

Underline is not appropriate for typed text and is usually distracting.

ALL CAPS are actually hard to read because the letters are more like each other than lower case letters. This also comes across as “screaming” and should generally be avoided. Likewise, you may find that Title Case Is Not As Easy To Read, while sentence case is easier. 

Use only one type of emphasis at a time. Not like this. This is too much.

7. Important Things Go in the Upper Left

Place important information from left to right, and top to bottom. English readers often view pages in an F-shaped pattern, as demonstrated in this Nielsen eye-tracking study:



The top-left area is read first, so it is appropriate for a title, starting instructions, and vital messages. The left edge is the strongest. The left edge is just as strong as the top row of text. Keep this in mind when placing HMI elements. The middle of the left edge may be perceived more strongly by the reader than the top right. The bottom right is the weakest. Don’t put vital status messages here. “Next” buttons are appropriate. Low-priority status messages work well in the bottom left.

8. Give it Room to Breathe

We all need a little room to breathe. Your content is no different. “White space” or “negative space” is the area around your content. It’s just as important as placement when it comes to guiding your reader around the screen.


Example courtesy of Sam Levin, DMC.

The example on the left is choked up and feels crowded, difficult to navigate. The example on the right has room to breathe and flow; it’s easier to focus on the content. 

Additional Resources

Still curious? Here are more resources: MRW Web Design, No Justification: Don’t Use Right, Center, and Full Justification on the Web, Ambrose Designs, Readability: Aligning Text

I hope these tips give you something to consider when designing your next HMI project! Questions? Examples? Agree to disagree? Tell us in the comments!

Learn more about DMC’s HMI and SCADA programming expertise.

The post 8 Readability Tips to Try on Your Next HMI Project appeared first on DMC, Inc..

Fortunately, there is a way to change the default LabVIEW controls!

While National Instruments and many other LabVIEW developers have documented this process before, for completeness, I will go through the basics with lots of screenshots before posting some of my tips for more advanced control customization techniques.

Customizing Controls

To customize any control, just right-click and then select Customize… in the Advanced menu.

The Control editing window will pop up with just the control you selected.

There is a decent amount to discuss in this view, but the most important thing is the Wrench button in the Toolbar.

You will notice that by clicking the Wrench, you can enter Customize Mode. Entering this mode exposes all the “parts” of the control so you can edit each individually. 

The wrench also changes to Tweezers, which symbolize how you can manipulate each individual part of the control. With the Tweezers, you have the power to customize just about anything to do with the Control or Indicator.

Once in this view, the easiest way to see all the different parts is to open the Parts Window, which is an option under the Window menu bar.

As you can see in the image below, the modern Numeric Control has 6 parts:

• Name Label
• Numeric Text
• Increment
• Decrement
• Radix
• Frame

You can do simple operations such as Resizing and Recoloring each part in this window, but the real customization comes from replacing individual parts.

Replacing Individual Parts

Let’s say I want to replace the 3D frame with a flat box for a more modern appearance. Luckily, a Flat Box decoration already exists in the Modern Decorations palette.

1. Drop a Flat Box onto the Control Editing Interface.
2. Size the Flat Box decoration to the same size as the frame. 
3. Copy the decoration.
4. Paste it over the frame. 

The decoration has now become the frame! 

Finish modernizing the frame by:

5. Make the Numeric Text part transparent.
6. Recolor the new frame to better colors. Remember, colors are very important to the overall look of a UI.

You will already notice how much nicer this control looks.

You can do the same thing with the other control parts, most notably the Increment and Decrement buttons. 

What you will notice when you right-click on the Increment or Decrement button is that it is really just a two-state Boolean. It has two picture images: one for the pressed state and one from the depressed state. You will also notice that in that popup menu, there is an option to import a picture from file. 

All you have to do to replace the default increment/decrement images is:

1. Select the picture item you want to change. 
2. Click the Import Picture from File… option in the popup menu.

You might also want to Import Picture from File at Same Size… if you are worried about resizing issues. Note that LabVIEW does not always scale your images the way you want, so it’s best to create the image to import at the proper size. For true Vector Image rescaling, we will have to wait for LabVIEW NextGen.

After importing the image that I created for the increment and decrement buttons, I have a new and improved Numeric Control! Compare the two and see how we were able to customize the original Numeric Control. 

It now looks modern, has a flat appearance, and the Increment and Decrement buttons are much more attractive than what we started with. Now, I’ll never have to customize that control again since I can always reuse this one!

The Numeric Control is just an example, but you can apply these customization and replacement techniques for all kinds of controls!

For more, explore our 6 Tips for LabVIEW UI and UX Design. 

Learn more about DMC’s LabVIEW programming expertise.

The post Basic LabVIEW UI Control Customization appeared first on DMC, Inc..

When V13 SP1 was first released, one of the features I was most excited about was the ability to multiplex arrays of custom UDTs on a PLC using a simple index tag on an HMI. This feature allowed me to use a single faceplate or screen to display or modify data from multiple objects by simply changing a single tag. I was so excited, I even wrote a blog post about it then! Unfortunately, it was a feature to be short lived and, due to some unexpected consequences, mysteriously disappeared with the release of Update 3.

Now that TIA Portal V14 has been released, the very first thing I did was look to see if it was back. And I'm in luck!

While I've gone into some detail in my previous blog, and all of the same information is relevant, here's a really quick demo to set up multiplexing of an array of UDTs from your HMI.

First, I've created a really simple project with a S7-1200 (FW v4.0) and a TP700 Comfort panel (Version 14.0.0.0). To make things simple, I've grabbed a UDT (udtHMI_VFD_Control) from the Siemens Open Library, and added it as a type to my Project Library (this will allow me to use it within a faceplate later), and then copied from my Project Library to my PLC (under PLC Data Types). Next, create a new data block on your PLC – I've called mine "dbDemo." Inside of my Data Block I've created a single array of VFD's.

Next, open up the Default Tag Table on the HMI. Add a new internal tag called "Index" of type "UINT." Now, in your project tree, select the DB you previously created, and from the details view, drag any one item from your array of VFDs into your tag table to create a new tag of type "udtHMI_VFD_Control" – you can use the blue 'tag' icon that shows up in the detail view to grab the tag. I've named mine "Indexed_VFD."

Note that as of right now, this tag is linked directly to a fixed item within your array – in my case, "dbDemo.VFD[1]." We want to modify this so that our "Index" tag will change which item in the array we want the tag to link to so we can multiplex this tag across multiple VFDs from our HMI. To do this, select the "Address" dropdown under the properties of the tag. For "Index Tag," change the selection to "HMI Tag" and choose the "Index" tag we created earlier.

Notice that in your tag table the address has changed to indicate the position in the array is defined by our"Index" tag.  And that's it! Now, we can change "Index," either through a script or by a control on the HMI, and our multiplexed tag will look at a different item in our array. In the screenshot below, note that our "Indexed_VFD" is now linked to any VFD in our array using the "Index" tag.

To take this a step further in your quest for object oriented programming, take another look at my previous blog. It will take you through linking your multiplexed tag to faceplates and popups – which is where this feature will really help you develop better, more powerful, HMIs.

One more helpful hint – you will find that your index on the HMI will be zero based, regardless of the way you define your array on the PLC. For example, if I defined my array (on the PLC) to be [1 .. 20], an "Index" of 0 will actually access the first element, [1], in my array.

Enjoy!

Learn more about DMC's PLC Programming services and contact us to get started on your next PLC Programming project.

The post Multiplexing Arrays of UDTs in TIA Portal V14 appeared first on DMC, Inc..

21st Century UI

On our projects, we usually spend a good amount of time manipulating the appearance of native LabVIEW controls and indicators to bring them into the 21st century. We know the standard modern, silver, classic, and system controls that ship with LabVIEW appear outdated in a world where everyone is used to beautiful UI designs from their latest smartphone applications.

Here’s a sample of the UI palette that DMC will now be using to develop LabVIEW applications.

In total, our engineers spent over 200 hours diligently updating all of the common controls and indicators. Special care has been taken to maintain customization and provide a flat UI appearance to almost every commonly used control and indicator.

Advantages of the DMC LabVIEW UI Palette

The use of picture backgrounds to create nice looking graphics is definitely a useful feature for LabVIEW controls, but it prevents the developer from having control over what theme color’s style they want to use.

With the DMC LabVIEW UI Suite, anything that you could normally change the color and size of from native LabVIEW controls is still customizable! This means that the controls that we created can be used on any project and customized to the particular style and theme of the application. 

With this new controls kit, we look forward to creating even more impressive UI's on all of our future LabVIEW applications!

Download this suite from VIPM here, 2024-10 update.

Learn more about DMC's LabVIEW programming expertise.

The post DMC LabVIEW UI Suite appeared first on DMC, Inc..

Our engineers created this overview of the product development process to demystify how to bring your product to market. 

Learn more about DMC's Custom Software and Hardware Development services.

The post The Product Development Process: How to Bring Your Product to Market appeared first on DMC, Inc..

I took a stroll around Google Images for color charts showing the RGB and Hex number values in them. To my surprise, there were not that many. The ones that existed were at low image quality and difficult to read. So I decided to design my own!

I created the attached chart for the DMC Team, and the feedback was very positive. Most engineers here find it very useful to know the exact colors and their code number in a handy cheat sheet at their desk. Plus, I included go-to color palettes to follow if you want a collection of 4-5 colors that go well together when designing.

Feel free to download this attached color chart PDF to utilize for your user interfaces, and keep designing!

The post Simplifying UI and UX Design with Color Cheat Sheet appeared first on DMC, Inc..

The post Design and User Interface Series Part 1 – A Brief Intro appeared first on DMC, Inc..