User experience, one pixel at a time

• A couple of weeks ago, I've been attending 2011 user experience Sprint, in Berlin. That was interesting and nice and productive and everything, and above all it was my first live encounter with other KDE people, including Nuno.

There's been (notably) quite some discussions about how information and functionality should be presented to users, organized and formulated, in order to be complete but not overwhelming, sexy, gratifying, and elegant.

Now, no matter how well organized resources, features, and information are, a significant fraction of the above can be wasted if every single brick of the UI is not rendered perfectly.

So Nuno (finger above) and I have been focusing on the remaining UI elements for which we are not fully satisfied, pretty much disregarding how these elements are used later on.

Two screenshots to illustrate the progress we've made during these few days.

First screenshot is Dolphin:
Things one notices:

• more visible pressed tool buttons at the top
  
• new slider at the bottom
• and new folder icons (quite unrelated with this post actually), on which Nuno has been working lately (and I'm sure he would blog better than I about it).

Things one does not notice (but with which we are happy):

• improved holes for the scrollbars, progressbars, and main view (note notably how the main view bottom corners are better rounded)
• improved (well, bug fixed) rendering of the capacity bar at the bottom.

To give proper credit to whom it belongs, some of the improvements above have been primarily instigated by Peter Penz, Dolphin dev.

Second screenshot is K3B:K3B is using nice title frames all over the place for quite some time now (the icons and text over a blue background on the picture above), but which have not been rendered properly by oxygen so far (notably, there was one or two pixel between the frame shadow and the blue content, that was pretty much wasting all the effort). So we finally took some time to fix it, resulting in the above, which is closer, I think, to what was originally intended.

We've made other changes here and there and we still have some in the pipe before KDE 4.7 is out. Most of them are barely noticeable but we believe it will make oxygen look sharper, more polished and pleasant to the eye, one pixel at a time.

A taste of things to come

1. Oxygen-gtk

Oxygen-gtk version 1.1.0 will be out some time in June. It will come with a number of new features listed below:

• interface to dbus that allows on-fly update of the applications on configuration changes (as already documented here)
  
• a complete set of mouse-over and focus animations identical to what is available for the Qt version, and configurable using oxygen-settings. This includes smooth highlight effects of buttons, text fields, menu and menubar items, lists, etc.
• improved consistency with the Qt style: we finally implemented the same design as in Qt for named frames, and Ruslan Kabatsayev did a great job at implementing extended inner shadows in lists and text widgets. This is all illustrated in the screenshot below.

three toolkits, one widget style

2. Gtk3

Oxygen-gtk has been ported to the brand new Gtk3 toolkit, with practically no feature loss with respect to its Gtk2 incarnation. Despite GTK3's complete rewrite of the styling API, the porting turned out to be less painful than originally thought, notably thanks to the high segmentation of our code. From the limited set of applications we could test it on so far, this port is working quite well, as also illustrated in the screenshot above. Obviously all three windows are not pixel-perfect identical, and the metrics of various widgets somewhat vary from one toolkit to the other, but the overall consistency is quite satisfying, already, in my humble opinion.

Now, this is definitely not ready for release yet, notably because of the quite small amount of Gtk3-ready applications we could find on the web, for testing. Also, we had to seriously bypass (hack) the rather limited API of the new theming engine in order to be able to implement all features present in Oxygen's Qt and Gtk2 incarnations. Anyway, the code is available from our git repository using the command:

git clone -b gtk3 git://anongit.kde.org/oxygen-gtk

3. Shadows

We've been collaborating with KWin dev Martin Graesslin on a new shadow system that let the widget style render the shadows for menus, tooltips, drop-down list, etc. This new feature, also documented here, allows Oxygen to render the same shadows for the widgets listed above as for normal decorated windows, thus improving consistency. The result is illustrated in the next two screenshots, first for a Qt application, second for a famous XUL + Gtk application. Note notably how the menu in the second screenshot have square corners, due to an XUL limitation, and how we adapt the shadow rendering to that case, something which was not possible in the past.

Finally, for the first time I'll meet in person with Nuno in a couple of days, and we'll take this opportunity to revisit (and hopefully improve) the last few UI elements with which he is not so happy today. In the process of doing so, we will notably incorporate some quite useful input from Dolphin dev, Peter Penz.

All the above should become available to everyone by the time KDE-4.7 is out, so stay tune.