Jump to content
nathan-murphy

Align Icons in Buttons with Text

Recommended Posts

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:

image.png.d02c8a62d40bfd7c06ad1cb4587f41ca.png

 

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

image.png.cb1222e3d48d6bbbe4bf50acaac95394.png

Share this post


Link to post
Share on other sites

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

image.png

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

image.png 

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

 

Share this post


Link to post
Share on other sites
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:

image.png.5f362b308fd61d81631a96cd38d59bd0.png

Icons and Text all center aligned:

image.png.9ce3754eb80c72cfb27d442f46f70bb3.png

 

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. 

  • Like 1

Share this post


Link to post
Share on other sites

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 🙂

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.