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..

Your car shows brake lights when it brakes. Some cool cars turn their lights on when you approach your car at night. Some really cool cars change the intensity of brake lights when they brake hard. 

My bike has a red light that turns on when you press a button. 

NOT FAIR. 

For my FedEx Day project (a day where our company lets us make anything for ‘next day delivery’), I brought my bike into the future with the help of a coworker and a local design firm called Altitude. My coworker helped with the Bluetooth programming, and Altitude designed+fabricated the 3D printed rear light mount and brake detection assembly. 

Check out the final result:

Rear Light

1. The user brakes, which completes a circuit on the Arduino.
2. The Arduino reads the acceleration value from the accelerometer and calculates a “braking power” number based on how fast you’re stopping.
3. The Arduino sets RGB values on the NeoPixel ring based on the braking power. Faster braking = brighter lights.

Front Light

1. The user pairs their phone one time with the front light via Bluetooth.
2. The Arduino periodically checks the Bluetooth module to see if a phone is connected.
3. If a phone is connected, the Arduino turns on a light.
4. The Arduino keeps the light on until no vibration has been detected by the accelerometer for over a minute and the phone is no longer paired.

Parts List

• Arduino Uno R3 Microcontroller 
• Adafruit Triple-Axis Accelerometer – 2/4/8g @ 14-bit – MMA8451
• Adafruit 12 RGB LED Neopixel Ring
• DSD TECH HC-05 Bluetooth Serial Pass-through Module Wireless Serial Communication with Button for Arduino
• 9V snap connector, and 8AA battery pack
• Triangle Saddle Bag 
• Wires to connect components
• Custom assembly on brake cable to complete circuit while braking
• Custom 3D printed housing for Adafruit 12 RGB LED Neopixel Ring

Open Items

• I only had 8 hours to get this all done, so the front light was pretty sketchy. I’d like to move the Bluetooth hardware onto the main Arduino in the bike bag, and run a wire to a better looking front bike light. 
• Although functional, the code that detects braking is pretty simple and could be made more robust to detect braking on hills. It could also flash the LED ring after quickly braking. 
• Eventually, I’d be nice to redo this on a smaller Arduino, like the Arduino Nano, and to move over to Lithium cells for the battery so I could mount everything on the rear seat post.
• Even further out: I’d love to shrink this all down into a custom board, have the front light wirelessly communicate with the rear light, and have the brake detection mechanical assembly be a little more robust which would basically turn this little hack into a real product.

Learn more about DMC’s company culture.

The post Boston FedEx Day Produces Smart Bike Lights 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..

1996 – 1998
This logo came from a business card software program, and it took about 2 minutes to select and design the card.  Note that we started off with company name “Dynamic Motion Control” because, when I started the company, I had an expertise in multi-axis motion control systems (and not much else)

1998 – 2003
By this time, we had broadened our horizons and “rebranded” ourselves to the, basically meaningless, DMC.  We added the tagline “Control Engineering Solutions” to define what we did.  We quickly got used to people, in their attempt at cleverness, asking if we ever thought about calling ourselves “Run DMC.”  I used to think the logo was reminiscent of Delorean Motor Company’s logo – in retrospect, not so much.

2003 – 2011
Our service offerings definitely had expanded by this point, and we had at least two different, equally generic, taglines during the “dots” era:

ENGINEERING + CONSULTING SERVICES FOR INDUSTRY
 

and

Expert Engineering & Software Services. 

Both taglines only meaningful for someone who already knows what we do, and, even then, only marginally so.

2011…
Our latest and greatest!  The biggest struggle we had was with our tagline.  We realized our offerings were broad enough that we either were going to have a tagline that said nothing about our solutions or that pigeon-holed us into one area of technology,  excluding 90%+ of everything else we do. 

So, we decided to focus on the defining characteristics that people use to describe us – Smart & Experts.  There seems to be a certain degree of profoundness to the simplicity, or maybe the other way around.  Anyhow, we were then looking for a logo that has a meaning aligned with our core values, works well with our tagline and also in a lot of different applications (who doesn’t want a branded DMC stress ball?). 

So, what’s the meaning?  Although admittedly a little abstract, here we go:

The logo represents an organized group of people (sitting in a circle), working and converging on a common goal (arrows pointed towards the center), who bring different expertise/perspectives to the problems they approach.

Or maybe it just looks cool.  We really like the results and hope you do as well.

The post DMC’s Logo Evolves appeared first on DMC, Inc..