Native GUI is a contentious topic in discussion groups, such as Reddit & Hacker News, yet I feel both sides are talking past each other. I believe a large part of the problem is that those who advocate native GUI are failing to articulate why native GUI matters. while those who don’t care are often not aware of the subtle usability issues that native users care about. Arguments then usually devolve around aestethics, but that is not at all at the heart of the problem of why it matters.
So I want to clearly express why Native GUI Matters. This is an excerpt from another talk, IUP Next. IUP is an open source cross-platform library for native UI. As part of the talk, I justify “Why Native GUI Matters”.
Since this topic seems to come up over-and-over again in discussion forums, I wanted to provide a good single resource people can point to that explains “why”, so I have extracted that section from my talk. This is not meant to be an exhaustive list, but sufficient enough to convey the reasons.
I recommend watching the YouTube video because it contains video and image demonstrations, but this transcript is also provided as a convenience.
Since I support developing on multiple platforms, I didn't want really to write different GUIs for each platform. I've been in cross-platform for a long time, so I've also used a lot of different toolkits. wxWidgets, Qt, Java, Tk, NodeWebKit, and so forth.
I dislike all of them. For time, I'm not going to go into details about all these, but this time around I decided to go with Qt Quick. While I've done some old Qt before, Qt Quick is a relatively new feature-slash-rewrite that the Qt community has been pushing developers to use, so I decided to finally give it a try.
In the end, I was very unhappy. But I did get something that eventually worked.
But as somebody who spends a lot of time on Mac, I hated the user-experience of my own program. My program is in the grand-scheme of things, very simple…not much more complicated than a hello world or calculator.
But why does my app eat up so much more RAM? Depending on platform and how you measure it, it can be like 4x.
Similar result on Linux.
Why does my app take so long to launch?
Watch how many times the icon bounces in the Dock.
(Video shows about a 7 second launch time, plus a slight stall when pressing a button.)
Compare this with native.
(Video shows a sub-1-second launch time.)
And the GUI experience wasn't truly native. For those who don't know, Qt, isn't fully native. They reimplement their own widgets, but happen to have really good skin artwork. But Mac users like me quickly feel where everything is wrong because there is a lot of subtle behavior that Qt does not reproduce.
And I don't want to pick on Qt too much here because most of the other toolkits are far worse.
Because I really hammer the native UI thing, I need to demonstrate why native UI matters.
I already mentioned RAM and performance. But usability conventions are important to.
Each platform has their set of conventions and features that users come to expect. And if your app doesn't behave like every other app on the platform, people notice and become unhappy like me. If I wanted my Mac to behave like Linux or Windows, I wouldn't use a Mac, and vice-versa.
So let me quickly show you some interesting Mac features that non-native cross-platform GUI libraries frequently miss.
All Cocoa TextViews have the ability to select discontinuous blocks of text, even vertically.
<start video>
First, I select all the vertical numbers and cut-and-paste them.
Then I select discontinuous words and cut-and-paste them.
This is a feature I use heavily on Mac for all Text Views so when apps screw this up, it irritates me to no end. Cmd-E will put the currently highlighted text into the Find buffer. Then Cmd-G will then find next occurrence of the word in the current focused view.
In this example, Native Cocoa is at the top, Java based Android Studio is on the bottom.
I want to find all occurrences of the word malloc in the file.
<start video>
So I highlight the first malloc I see, and hit Cmd-E. I then hit Cmd-G multiple times until I wrap around the document.
But when I use the non-native app, Cmd-E does the completely wrong thing and pulls up a Recent Files dialog, and Cmd-G does absolutely nothing.
Macs have a ton of features packed into the menus. And Apple's built-in behaviors and UI guidelines result in apps sporting the same features in every app. They also have something called services which can talk to other apps.
Here, I want to capitalize my words. Notice the native-app on the left has a conventionally packed menu, while the app on the right is missing most things.
<start video>
You can bring up a dictionary service for any native Cocoa text. Notice again how it fails to work on the right.
Because of some of my past work in audio, I have been contacted by people with impaired vision. I always feel a tremendous amount of guilt because the projects I worked on never spent resources on this. The video game industry is the absolute worst at being accessible.
But if I at least use native UI, those users have a fighting chance because the big platform vendors spend a lot of resources to make their platforms accessible and apply automatic behaviors to any apps that use their native widgets.
So here are two very simple examples.
There are built-in options for people with impaired vision which can change how widgets look.
In this screen, the native apps are at the Top-left and top-center. Qt is at the top-right. The Java based Android Studio is bottom-left. And the Electron based Slack is bottom-right.
<start video>
Notice as I toggle the high-contrast option, the native rendering changes, but nothing happens with the non-natives.
It is worth noting that on iOS when they moved to “flat design”, the buttons started looking like labels. If you turn on accessibility features, those buttons will actually be drawn differently so you can clearly see they are buttons.
Here, I want to use speech recognition for the text entry.
Native is on the left, qt is on the right.
<start video>
See the full talk here:
IUP Next: New Modern Backends for the Cross-Platform Native GUI Library