Front Panel UI Design

[Mads]

Personally I think different colors for each tab breaks with what most applications do and looks messy/home-grown. The coloring dominates the interface with little information content. You still have to remember which color is which, when you might as well just remember what you chose or look at the page title.

Instead I would add text header on the graph to make the chosen display more visible, and/or put the unit on the Y axis to show that you are now e.g. looking at the displacement.

Using tabs, a listbox or radio buttons e.g. to choose what to plot has the advantage over a drop-down menu e.g. that they constantly display all the available choices; you do not need to activate the menu to see them. This makes it more user friendly and intuitive. However, in this case using tabs has the disadvantage of requiring separate indicators for each page when you could manage with having one graph indicator. In such cases, if you still want it to appear as separate pages in a tab control a solution is to just show the top of the tab control on a pane and then let the selected page decide what to display in the graph.

[Mads]

One comment to the original post apart from the font and coloring that has already been covered is that unless there is a special reason for it it looks better to stick with the default control sizes. System controls will also make it look more consistent with what users are accustomed to.

One of my colleagues made a similar application for us (we manufacture sensors with accelerometers used to measure the conditions on subsea flow lines e.g. and offer this as a viewer for our customers), it looks like this:

[Jay14159265]

---

@paul_a_cardinale wrote:

I like to make my tab pages different colors so you know at a glance which page you are on.  E.g:

---

This is great! At some point it would seem we dropped color from our toolset of UI design. It's good to see not all is lost to bland flat UI design.  For all the people that don't like colorful UIs I hope that when one looks at your block diagram they will find that you have changed all the wire and VI colors to black, and if you write text base code the syntax highlighting should be OFF ; ) 

[Mads]

"For all the people that don't like colorful UIs I hope that when one looks at your block diagram they will find that you have changed all the wire and VI colors to black, and if you write text base code the syntax highlighting should be OFF ; ) "

Like in many aspects of life moderation is the key here. Using some carefully selected colors can help the users (like in the cases you mention). Too many or the wrong colors on the other hand..🤕 If you really want to challenge yourself you run the GUI through a color blind simulator as well😉 One partial solution for that though is to offer customization. Some prefer the high constrast of graphs with black backrounds with bright plot colors e.g, others hate it. If you allow customization your personal choice of default colors will be less crucial. Without it though it is better to be safe and boring.

Joel Spolsky had a nice piece on this: https://www.joelonsoftware.com/2001/10/24/user-interface-design-for-programmers/