Making an Better Looking GUI

[Blessing_Star]

Hello,

I'm developing an tool with LabVIEW 8.5.1 where GUI is attached here; I'm trying my best to put together as nice GUI. Would you guys turn my GUI Skeleton to Better Looking GUI. Appreciate your help.

Thanks,

BlessingStar

[GerdW]

Hi Star,

I would suggest:

- using system controls for good looking GUIs. The user is used to them...

- use system colors for good looking GUIs. They adapt to Windows UI schemes.

- use system frames/lines for GUIs. They adapt to Windows UI schemes.

- when you already started to customize buttons ("Exit") you should do so for all buttons ("Send").

- Use captions of the FP elements. That way you can use descriptive labels for controls while still providing meaningful "names" to the user.

- I would prefer an enum or a ring to select a "set" instead of sliders or knobs.

[Blessing_Star]

Any other suggestions are welcome.

Thanks

[johnsold]

Unlike GerdW I am not a fan of the system controls.  I work across platforms too much.

Even within one OS you need to be careful about fonts and font sizes.  Try your GUI on every combination of OS version and screen size that you expect your users to have.  Then either make several GUIs and choose the appropriate one for the particular system or try to make a GUI that works reasonably well across the range of systems.

Also be cautious about colors.  Consider that some of your users may be color blind.  Red-green color blindness is quite common among white males.  Other forms of color blindness are much more rare.  If color is important to the operation of your program, find some color blind testers before you make the final choices.

Here is what your GUI looks like on my system.  Note the overlapping text.

Lynn

[DFGray]

<my2¢>

1. I agree with Gerd that rings are more appropriate for multi-selection than sliders or knobs.  I do not use enums on a front panel because you cannot change their text dynamically or localize them.  If neither of these things are issues to you, go for it.
2. I avoid knobs on my GUIs.  The mouse motion involved in using a knob is far more natural using a slider or selector (ring, listbox...).
3. Try to keep your visual elements consistent.  For example, the flat white background of your ring text does not fit well with the 3D look of the selector itself.
4. As has been said before, be aware that font sizes will change between platforms.  Simply porting from Windows XP to Windows 7 will do this.  Unfortunately, this is a fundamental GUI problem that no one has ever addressed well in a general fashion.  You can solve it "cleanly" by dynamically sizing your front panel and object positions based on font X and Y dimensions.  That's a lot of work (I have done this many times).  An easier way, is to make sure there is enough room around everything for a 50% increase in font size.

</my2¢>

[P@Anand]

Additionaly provide Tip Strip to all the Objects that you place in the GUI this helps the user to identify the use of each controls and indicators.

[SteveChandler]

One thing that may be confusing is the checkboxes that change the text depending on the setting. I look at the checked box that says "Stop Industry Mode". Is it stopped or do I need to uncheck it to stop? It may be better to just always leave the text "Industry Mode". It is more clear that it is in that mode when the checkmark is there. As for the "Start/Stop Tester" box, those seem to be commands and should probably be command buttons. Reserve checkboxes for settings. If you really want to use a checkbox here then make the text always say something like "Tester Running" and make it run when the box is checked. Maybe it's just me but if I were running the program I might have to think a little too hard and might only get it right if my caffene levels were correct.

[Blessing_Star]

Thanks for all the suggestions & inputs. Based on the inputs, I'm customizing most of the objects with Modern Controls.

As for the Start Industry Mode, i do have to trigger one event when it's true and another event for False. Also, our end users are more familiar with Checkbox object (especially for that specific function). Even i don't like the Dial, but, what object would you suggest to Mimic Car Steering Wheel (Off, ACC, Run, Crank)...?

Thanks

[DFGray]

That is an interesting question.  The common paradigm for a key switch is a circle, which would use a knob control (you can customize it to look like a key).  However, for ease of computer use, you would want to use a slider (small, set number of settings and visual position is important).  You could also use a listbox or ring, but you would use the visual positioning you get with a slider or knob.  A slider may be your best compromise, but be prepared for feedback that you should have used a knob.  This type of decision needs to be made based on the existing paradigms and how willing you are to break them.