Wednesday, March 4, 2015

The (sorry) state of UI and some hope for the future

The user interface, the face we show to the users, our presentation card, nobody would argue that it is important right?
However, if we pay close attention to the state of it we can easily see lots of flaws, over time (in my case since the '80) many of us have even become blind to it's defects.

So, before I continue I should warn you: if you keep reading you may actually end up seeing (or I should rather say 'be more aware') many defects and imperfections in the software you use everyday, so don't blame me later if you feel displeased with your everyday interaction with your computer :)

And also, please keep in mind this applies mostly to Windows, Linux and to some extent Mac, ios and android suffers much less this issues.

Let's start our journey then, just open notepad, yes, you know what i'm talking about, everybody has it (or use gedit in linux), then resize let's say half the size of the screen should suffice.
Now, grab the top-left corner and resize it, moving it constantly to the top left corner of the screen and then to the bottom right corner, the purpose is to continuously resize the window and see how it is drawn, dont release the mouse button, just keep doing the movement and focus your view into the lower right corner of the notepad window.

If you're in windows, you can see the right scrollbar histerically jumping as we resize
If you're in linux (somewhat old versions of gnome) you'll see the same behavior, the drawing quite lagging and at a quite different possition from the mouse
If you're in linux latest gnome, it gets a bit better, yet you can easily see 'tearing' and lagging on the paint and mouse

Now this is not a notepad thing, it happens with all applications I've used, there are even worst offenders than the simple notepad, while one could argue that users are not all the time resizing their windows (or even doing it from the top left corner) it is an easy way to expose a drawing deficiency that affects in other more subtle ways.

If you do the same with the lower right corner you can see the same problem, but it is harder to see because your eyes have to track a moving target, in any case the problem is still there and still visible.

Another relatively easy flickering to spot: put some content in notepad (copy a somewhat long text into notepad), maximize notepad, then open the search dialog (ctrl + f) and close it with the escape key, do that repeatedly and you can see after a few tries that the text in notepad flashes (internally it clears the window and then paint the text back on top of it)

Another easy one? open system properties from control panel, then switch constantly between the tabs of the dialog, sometimes the painting produces a flickering.

More advanced ones? I tried yesterday with google chrome, resizing it from the lower left corner (just grab the lower left corner and bounce it around for a few seconds) and it was freezing the UI for a second or two (if there was some page loading or so)

Ok ok, there are many more presentation / drawing / transitioning glitches around but you get the idea right? so what?

Well one could argue that Mac are better at it, while they're better at UI and usability they still have their pile of UI glitches and they're bad at everything else, while Windows is better at many other things there's clearly a lot of user interface debt they have to pay, on the linux land... well, my experience has been quite bad and varied but there are tons of different windowing engines / managers / drivers and so all in different maturity, havent found yet one that does justice to today machine power capabilities

With all this I started my journey into what can be done about it, focusing mostly on windows I spent a horrible amount of time poking around ways to reduce this visual artifacts with mixed but all unsatisfactory degree of success, the problems in windows lies deep within the operating system, no matter what trick I tried.
Among other things I tried plain old win 32 apis, mfc, windows forms, WPF, java, even as far as to also use QT and GTK, none of them worked as I expected on this regard, it let me wonder why after all this years why Microsoft didn't-doesn't care / fixed (I checked this issues all the way back to windows 95, and yes, even checked it on windows 10)
After all, will you buy a car with the paint scratched or with some rust? or would you rather buy the car next to it with better / shinier paint free of rust? surely the power given by their dominance affect where they spent their efforts but man... I cannot praise or justify sloppy work on the 'presentation'.

Anyway after my long journey (countless hours of testing, prototyping and googling) I ended up going to the very basics: let's see how a modern windowing system could do this better, and did that.

My experiment consisted into relying only in a core, flat window and then do everything else by myself, effectively creating child windows, graphics primitives and all that within  my library, very similar to what Java did internally, it ended up performing like this: demo
Be warned, the quality of the filming is rather poor :)

So what was that? well, a basic windowing system that supports from the very core 32 bits per pixel alpha channel windows with flicker free and tear free drawing - effortlessly, meaning the developer doesn't need to do anything to get it 'right', displaying, moving, re-sizing, panel switching and so are truly rendered like if it is a game, it is of course modeled after what a modern computer is capable of.

Most surprising (for some of you) it is entirely coded in python 2.7 (except for 2 functions coded in c: fill and fill_rect), given the poor performance python has and the high speed archived in the demo you can easily see how feasible is to do this in a high performance language like c / c++, as my purpose was to demonstrate the feasibility it was just a great language to prototype it.

I'll be closing this post as it is getting quite long already, got some interesting insights into how a modern windowing library could be approached and I'd like to write and discuss about some of the aspects of it but that may happen in a future post. for now i'm signing off

-Mat

No comments:

Post a Comment