Awesome GUI Design Examples

[Lipko]

Hi all!

Do you know/have some nice GUI designs or examples?
In google search, awesome or clean equals cluttered. I guess tab control means unawesomeness...

I'd love to see nice stuff.

L.

[ShaunR]

I vaguely remember some beautiful UI's. It might have been a coding challenge since there were quite a few - can't really remember now. I just remember thinking "wow, I'd never have the patience for that, but that is awesome". Mine tend to be very utilitarian with the occasional lip-service to aesethics.

[JKSH]

10 hours ago, Lipko said:

Do you know/have some nice GUI designs or examples?

What's the context?

Traditionally, I've treated good desktop app design as different from good industrial HMI design as different from good web app design, etc. But, contemporary designers are moving towards a unified approach.

What are your thoughts on Google's Material Design, Microsoft's Fluent Design, or Apple's Human Interface Guidelines?

• https://material.io/design
• https://www.microsoft.com/design/fluent/
• https://developer.apple.com/design/

[Lipko]

3 hours ago, JKSH said:

What's the context?

Traditionally, I've treated good desktop app design as different from good industrial HMI design as different from good web app design, etc. But, contemporary designers are moving towards a unified approach.

What are your thoughts on Google's Material Design, Microsoft's Fluent Design, or Apple's Human Interface Guidelines?

• https://material.io/design
• https://www.microsoft.com/design/fluent/
• https://developer.apple.com/design/

The context is Labview. I haven't seen much (any?) good looking Labview GUI examples. I know Labview means industrial HMI most of the times, but it's also good for some other related things too.

But this is just a Lounge topic, I'm not gathering resources in general, I believe my GUIs are more on the good side of the UX scale. Maybe I should tweak the topic a bit, and ask:

Do you guys also see that Labview GUIs in general tend to be quite ugly? Cluttered, full with unimportant info, not responsive (window resize, pane resize) even if seemingly made for desktop? And full of not user friendly solutions (like no Cancel, choosing save paths before starting a test and perhaps always defaulting to some folder, punishing user for its mistakes, no saving of GUI values, etc.).
Or can you share some better designs (your own or what you found over the web). Google doesn't have so nice hits. I'll try industrial HMI in general, maybe it'll have better results. but I', also curious about other usages of Labview, like data visualization or whatever.

If there is a tendency that LV GUIs suck, what could be the reason?

Just for fun.

[ShaunR]

2 hours ago, Lipko said:

If there is a tendency that LV GUIs suck, what could be the reason?

The glib answer is that LabVIEW is a tool for engineers who generally prefer function over form.

The actual reason is that the LabVIEW UI is limited, difficult and clunky to modify from the defaults. Just pop up a menu for example (no icons, can't change the background etc). The ability to create our own controls is also fraught with issues and extremely time consuming. The the only real option is XControls - which are a bit hit-and-miss. Give on-the-fly theme changing a go and you will quickly run into trouble with many controls. Making a pretty UI can double or triple the project time in some cases.

There is also the subjective nature of "good looking". I hate the flat, monochrome icons that are all the rage, for example. What I may think is "cool", you may think is ugly.

Edited October 21, 2021 by ShaunR

[Mads]

Awesome as in unusual but cool / exploring new concepts in user interface design (often irritating the user in the long run though...) - or as in user friendly and nice (non-LabVIEW-typical?) looking? I too would love to see examples of what others have made.

I can share some of the designs I have made myself or have influenced, that I think at least fit the user friendly but not typically LabVIEW-looking bill:

We make monitoring systems and use LabVIEW to develop everything that runs on PCs and PACs. I have always put a lot of effort into making the user interfaces as nice, intuitive and recognizable as regular Windows applications (helps with the intuitiveness) as possible in G...The system typically consists of a headless service/embedded server (sbRIO inside a subsea device e.g.) gathering, analyzing and logging data from sensors, and exposing it to control systems or data historians through Modbus, OPC or CANOpen. Users can connect remotely to configure the server and view and analyze the results using application specific clients (through TCP, serial or CANOpen (Cia309.3 transparent links)).

Here is a screenshot of the main window of one of the clients (this one is used for corrosion-erosion monitoring):

 

We also make many of the tools we need to do tests and troubleshooting on these sensors and systems, and some of them we have chosen to release as shareware (CAN Monitor on the NI Tools Network e.g.). Here is an example of the Modbus Test Master:

 

 

We do not earn much from the shareware, but since we want these tools ourselves anyway, and need to maintain them, having them out there at least do not cost us much. It also puts a bit of extra pressure on us to make even (some of) the internal tools look and work well.

Edited October 21, 2021 by Mads

[Lipko]

24 minutes ago, ShaunR said:

The glib answer is that LabVIEW is a tool for engineers who generally prefer function over form.

The actual reason is that the LabVIEW UI is limited, difficult and clunky to modify from the defaults. Just pop up a menu for example (no icons, can't change the background etc). The ability to create our own controls is also fraught with issues and extremely time consuming. The the only real option is XControls - which are a bit hit-and-miss. Give on-the-fly theme changing a go and you will quickly run into trouble with many controls. Making a pretty UI can double or triple the project time in some cases.

There is also the subjective nature of "good looking". I hate the flat, monochrome icons that are all the rage, for example. What I may think is "cool", you may think is ugly.

That's true but by good looking I don't only mean the actual looks of the widgets (for example the silver theme looks good enough for me. Or there are some 1px border cluster hacks that someone already did so you don't have to do it yourself and greatly improves the look), but the way the widgets are arranged, grouped, or hidden. Even for an industrial HMI, most of the time you just need to load some test sequence, some parameters from a file that (hopefully) doesn't change without documentation, and some status of the test. Yet, in many occasions, every crap is on screen. I guess the reason is that during development it's good to see everything at one place, but in a shipped product? It's not so great effort to arrange stuff into tabs.

One major obsatcle for better GUI design is in Labview itself, the lack of proper widget anchoring. You either have to make ugly hacks on the front panel (that may just fail for whatever reason) or implement every positioning in code. That's a huge issue.

Edited October 21, 2021 by Lipko

[Lipko]

6 minutes ago, Mads said:

Awesome as in unusual but cool / exploring new concepts in user interface design (often irritating the user in the long run though...) - or as in user friendly and nice (non-LabVIEW-typical?) looking? I too would love to see examples of what others have made.

I can share some of the designs I have made myself or have influenced, that I think at least fit the user friendly but not typically LabVIEW-looking bill:

We make monitoring systems and use LabVIEW to develop everything that runs on PCs and PACs. I have always put a lot of effort into making the user interfaces as nice, intuitive and recognizable as regular Windows applications (helps with the intuitiveness) as possible in G...The system typically consists of a headless service/embedded server (sbRIO inside a subsea device e.g.) gathering, analyzing and logging data from sensors, and exposing it to control systems or data historians through Modbus, OPC or CANOpen. Users can connect remotely to configure the server and view and analyze the results using application specific clients (through TCP, serial or CANOpen (Cia309.3 transparent links)).

Here is a screenshot of the main window of one of the clients (this one is used for corrosion-erosion monitoring):

 

We also make many of the tools we need to do tests and troubleshooting on these sensors and systems, and some of them we have chosen to release as shareware (CAN Monitor on the NI Tools Network e.g.). Here is an example of the Modbus Test Master:

 

 

We do not earn much from the shareware, but since we want these tools ourselves anyway, and need to maintain them, having them out there at least do not cost us much. It also puts a bit of extra pressure on us to make even (some of) the internal tools look and work well.

Yes, I was thinking about something like those!

I'm thinking about what I could share, but most of my GUIs fail or may be confidential to show.

[ShaunR]

37 minutes ago, Lipko said:

One major obsatcle for better GUI design is in Labview itself, the lack of proper widget anchoring.

Splitters are your friend.

This is one app that I've had for a while.

Splitters are used to segregate the different sections and most controls are just default ones. There are no issues with maximising etc.

The hard part is the button bars and Tab Bar which are actually xControls.

(this is the example for the buttons bars xContol)

(This is the example for the tab xContol)

The most annoying for me is the things you said you don't care about. lol.

[Lipko]

I use splitters all the time, but making a tab control responsive, I failed miserably with that. Positioning and grouping of widgets on one page screws widgets on another one... Especially if there are graphs which are clumps of widgets by themselves.

A test sequence editor (this has no problems with responsivity) which has a ribbon bar and some other splitters.
The comment of some selected sectios are being edited at the moment (double click on the time line invokes a positioned text control)

[ShaunR]

3 hours ago, Lipko said:

I use splitters all the time, but making a tab control responsive, I failed miserably with that. Positioning and grouping of widgets on one page screws widgets on another one... Especially if there are graphs which are clumps of widgets by themselves.

A test sequence editor (this has no problems with responsivity) which has a ribbon bar and some other splitters.
The comment of some selected sectios are being edited at the moment (double click on the time line invokes a positioned text control)

It seems the biggest problem you have is the axis grid colours. Try a dark grey!

Splitters can't be placed on native tab controls-just one of the reasons we don't tend to use them. The other main reason is they make a mess of your main VI trying to control them. The tab xControl above uses VI panels (the tab panel is a subPanel which loads a VI when you click a tab) so you can use splitters on the pages and also means each page is self contained and doesn't pollute the main VI's event structure.

It's things like you are highlighting which are the limitations of the LabVIEW UI. It's fairly easy to have nice graphics that make your Application look nice but as soon as you try to use it, the aesthetics generally falls to pieces. A lot of the time it's like in Windows 10 when you suddenly get a Windows XP dialogue when you've spent ages creating a theme... but worse. Really worry when your manager insists on all file dialogues being the same as the Windows 10 ones  

Edited October 21, 2021 by ShaunR

[bjustice]

My goal is always to produce a user interfaces that users won't recognize as being written in LabVIEW unless you told them.

2 examples of this that I've seen online come to mind:

• VIPM (VI Package Manager.  This received a major UI overhaul in 2020.)
• Scout TDMS viewer (From Signal.X)

[hooovahh]

I have a few UIs and UXs that I'm proud of, but I don't know of many that I can share readily.  Tabs are fine, but don't scale well.  Often times when I want a tab I will end up replacing it with something else.  An easy change that scales better is a single column listbox which inserts a VI into a subpanel instead.  The listbox and subpanel can be in their own pane, and set to fit to the pane, and scale with it.  I posted a few UI tools over the years like the Ribbon Interface toolkit, that can contribute to a nice UI.  I have a sequence editor with drag and drop, looping, conditionals, go to's, that works pretty well.  And I have used a set of images at the bottom as a tab replacement that shows icons along a process of setting things up.  There is a back and forward button on the bottom that goes to the next step, or you can click on the icons at the bottom and it goes to that step in the process.  This is a 2D picture control that can be updated easily with a new VI to be inserted in the subpanel.

This sequence runs on real-time so no TestStand, and has other normal shortcut features like copy, paste, delete, save, and select all.  It also has file extensions so double clicking on a file opens it in the editor, and dragging and dropping a file to this window will work, prompting for unsaved changes if there are any.

[ShaunR]

There's a UI User group over on the Dark Side. If you hunt through it there are a few UI's like Star Trek, Media Interfaces and iPhone simulations.

[hooovahh]

Oh a couple of others I forgot about.  Here is a Circular Graph Demo which allowed for selecting signals from a list, allowed for different scales, multiple windows, coloring, current value, pause, resume and a few other random features.

And over on Reddit someone asked for an Android like interface with sliding menus.

[Mads]

3 hours ago, hooovahh said:

Tabs are fine, but don't scale well.  Often times when I want a tab I will end up replacing it with something else. 

In the example I posted earlier there is a tab at the bottom which (seemingly) scales nicely. It is a trick though...I described it a long time ago here.

Maybe someday we get this implemented.... Or better yet, anchoring.

Edited October 21, 2021 by Mads

[G-CODE]

What about this...

https://www.jki.net/profusa?hsLang=en

or this...

https://www.jki.net/radx?hsLang=en

or this...

https://resources.jki.net/smarter_sorting

or this...

https://resources.jki.net/femtometrix-case-study

or this...

https://www.jki.net/apollo-fusion?hsLang=en

or this...

https://www.jki.net/kairos-power

[Antoine Chalons]

I use to work at qmt (Qualimatest), a lot of effort was spent on UI/UX

[Antoine Chalons]

Also these custom graphs, 100% 2D picture control. The lad who did that is a ninja!

[Lipko]

51 minutes ago, Antoine Chalons said:

Also these custom graphs, 100% 2D picture control. The lad who did that is a ninja!

 

Graphs + plotimages of graphs also has pretty good contomization potential.
Horizontal fill:

 

A failed project with some flat controls, all my design, though I don't quite like it, I'm not good at visual design. Note, that it's meant to be a tablet application, but it has no exit button
The room is a 2D picture and slots can be selected by clicking.

[hooovahh]

Yeah I like getting crafty with a 2D picture control.  The demo I showed earlier has 4.  One at the bottom for the progress of editing, one for the arrows that are representing the go to statements, and one for each column of the green or red checks.  The columns can be click with one column toggling, and the other slides over another window for editing the step limits.  The go to arrow representation has the ability to drag and drop to move around where it will go to.  Clicking a step highlights it with a different color, and there can be all kinds of nested arrows which all get assigned unique colors, and does its best to not over lap while becoming larger if needed.

[ShaunR]

7 hours ago, Antoine Chalons said:

I use to work at qmt (Qualimatest), a lot of effort was spent on UI/UX

 

On 10/21/2021 at 8:43 AM, ShaunR said:

I hate the flat, monochrome icons that are all the rage,

[drjdpowell]

I remember CognoscentUI being quite impressive:

https://forums.ni.com/t5/Example-Code/CognoscentUI-XControl-LVOOP-Animation-Unicode-and-Image/ta-p/3495160

[Antoine Chalons]

3 hours ago, ShaunR said:

 

I do too... choice was not mine.

We got mixed feelings from the customers but the "product owner" loved it.