Align Icons in Buttons with Text

[nathan-murphy]

When stacking buttons vertically, I noticed that the icons in the buttons are not aligned. I noticed this when comparing it to a similar menu in a built-in windows application. The icons are generally aligned with each other, and the text is all aligned to the left as well. It would be nice if there was either another set of buttons for left-align menus. In fact, it looks like I'm not the only one who thinks this:

 

Flyout menu from the Design palette:

 

Buttons as dropped on my Front Panel from the Design Palette:

[Jim Kring]

That's a great observation, Nathan!  Yes, there are two primary layout use cases for the buttons: Laid Out Horizontally and Stacked Up Vertically. 

When laid out horizontally, having the icons and text balanced in the center of each button looks really nice. Sometimes the distances/padding are event tweaked by hand to be more visually balanced than geometrically balanced (e.g. to off-site for any "optical illusions"). 

However, when stacked up vertically (as you've described), it does look better to have the icons line up with each other and all the text all line up with each other (respectively), just as the Design Palette drop-down menu does (which you also highlighted).

 

I'll make a note of your feedback. I agree it would be nice if there were a set for vertical alignment, as well as horizontal

CC: @Eric Welden

 

[nathan-murphy]

8 minutes ago, Jim Kring said:

Sometimes the distances/padding are event tweaked by hand to be more visually balanced than geometrically balanced (e.g. to off-site for any "optical illusions").

Story of my life when dealing with LabVIEW UI elements... 

 

Thanks for the explanation - I'll keep that in mind when placing buttons on my UI. I tend to put icon-only buttons in the horizontal mode for space saving, or I'll put the text underneath an icon similar to the ribbon in Microsoft Applications, or the left-bar in their newer applications (Teams).

Combination of icon and text center aligned in a Laid Out Horizontally layout, and stacked vertically in the same space:

Icons and Text all center aligned:

 

Of course, this all heavily depends on how the user plans on interacting with the UI. In my case, the applications I'm working on a very document centric and have lots of configurations and menus, similar to Office applications. To keep the layout familiar to the user, I mimicked the Ribbon and File Menu ideas.

Thanks for being so receptive to the feedback. I can tell just how much painstaking pixel pushing work went into these UI elements and am really loving the look and feel (and built-in color customization!) of the new controls. 

[Jim Kring]

You're welcome and thanks for the add'l explanation about your applications and design approaches. I've been chatting a lot with @Eric Welden about all the great feedback we've been getting lately and one take-away for me has been that there are almost always some exceptions and creating a nice looking UI will most certainly involve a lot of customizations to a basic theme. So, the Flat UI Controls 2.0 will get you much of the way there (since it's a great baseline).  *And*, to create a mind-blowing UI, you'll definitely want to have a designer tweak stuff and create some customized elements 🙂