Use Professional Icons to Enhance Your User Interface

[Matt_F]

(Guest post from Pascal Heinen of VI Technologies)

First impressions count! Therefore, a professional and interesting looking user interface can make all the difference in transforming a lead into a paying customer. Showing a potential customer an amazing looking mock-up UI, that only took a few hours to create, leaves a good impression and plays into the strength of LabVIEW being able to swiftly create front panel layouts.

Modern user interfaces on smart phones and tablets increasingly use well designed icons to navigate the user through their software. Using some clever control customization and some amazing icon resources on the web, we can leverage this new trend to our benefit.

First, let’s consider some of the icon resources I personally use:

• www.iconexperience.com
  • Industry icons, creation toolbox, multi-color, complete icon sets (paid)
• www.thenounproject.com
  • Very good, multi-color tool, pay per icon
• www.iconfinder.com
  • Large selection, free and purchasable icons
• https://material.io/icons/
  • Large selection, free, strange but of good quality

Although some are not free, I highly recommend considering them, because they will easily pay for themselves.

In this example, we will create a configuration button using a gear icon.   We will use this icon in blue and yellow to create a configuration button with hover over highlighting. To begin, we will search one of the linked sites above for a gear and once found, save it disk. 

With the introduction of Windows Vista and later versions, buttons gained a hover over highlighting functionality. Meaning that when the user hovers the mouse pointer over the button, the button changes color and highlights it. We will use this hover over feature by selecting and customizing the System OK Button (this will not work with the modern version).   Customize it by placing a System OK Button on the front panel, right click it and then select Advanced -> Customize…   From there, change from Edit Mode to Customize Mode.  You will now be able to easily replace each picture item with an icon of your choice.

(Picture 1: Modern OK Button has only 4 picture items, no hover over functionality)

(Picture 2: System OK Button with hover over functionality)

We will start by replacing all default Picture Items with our gear icons that we previously saved to disk. Right click the Picture Item you want to replace and selecting Import From File.  After selecting the correct image, you will repeat this process for all other Picture Items as seen in Picture 3.  Save the control and now you are ready to use your customized icon button for your project.

(Picture 3. Picture Items for System OK Button with hover over highlighting.)

Manually creating a customized icon control button can be done in just a few minutes. This enables us to create good looking UI’s with minimal effort (Example in Picture 4).  For those looking for an even faster solution, the Controls Generator for LabVIEW by Studio Bods on the LabVIEW Tools Network automates the process (Thanks to Fabiola for the tip). 

(Picture 4. Example of an UI with customized icon buttons)

Pascal Heinen at VI Technologies in the Netherlands is a CLA, CLED and a LabVIEW enthusiast since LabVIEW 7.1. He and his colleagues also host the Dutch LabVIEW User Group (DutLUG).

[drjdpowell]

There is also https://materialdesignicons.com for Google-style icons.

[WG-]

Also take a look at fontawesome, http://fontawesome.io, really huge collection of icons and nice thing is that they are encoded as a font.