Glom UI Review

I have been working on a UI Review for Glom. It is still rough around the edges and mostly covering the most obvious problems.

The most challenging bit so far was the redesign of the welcome screen. This is what I came up with (inspired by Adobe’s welcome screens):

Glom Welcome Mockup

For comparison, this is what it currently looks like:

Current Glom Welcome Screen

What was most important to me was to allow single-click activation of the individual options, but by doing so I realised that Gtk doesn’t offer really satisfying options for this. The best I could come up with was buttons set to RELIEF_NONE, which is essentially the same as a toolbar button. Unfortunately this doesn’t make the item look particularly clickable (unless hovered). Other platforms often use labels that look like web links for this kind of functionality, but while Gtk supports hyperlink labels, that is generally only used for actual web links. Why?

As applications become more and more similar in design to websites (and vice versa), I feel that we over-use the “button” element and do not provide enough flexibility to create “clickable items” that suit the purpose of the application.


Contemporary Visual UI Design

One thing that I often missed in GNOME development is an easy way to apply glow and shadow effects to any kind of element. The most obvious kind of this is the lack of a built-in method to render text shadows. Selectively used in almost every single designer’s mockup, the lack of it in actual implementations has been one reason why the result is rarely as satisfying as it could be.

While some people have stated the opinion that they do not like text shadows, and they can easily be overused, this is not an excuse to make it harder than a single line of code (or CSS!) to implement them. Creating text twice is not a good solution. Despite the awkwardness of the implementation, it is also inefficient, and the reason why this approach was discarded for Maemo 5.

To give a few examples of the importance of text shadows (and glow) in modern UI design:

(Click to enlarge)

WebKit got this covered, why haven’t we? This should be well supported throughout the platform. Where and when to actually use it should not at all be a question that depends on technical issues.

Text shadows are only the tip of the iceberg though. In particular shadows and glow effects are extremely powerful and flexible assets in any GUI designer’s toolkit. We should have utility functions easily available for these effects, as well as the obvious rounded borders and multi-step gradients.

GNOME Shell is certainly on the right track, with their fairly flexible CSS styling, but many of these elements are still missing. This leads to issues like Bug 581067. If the designer wants a glow, she should be getting a glow. Something as elemental as this just shouldn’t require any significant programming effort. I am confident that GNOME Shell will get there, it’s just something to keep in mind (i.e. once the effect is implemented once, make it easily available via CSS).

Classy Gradients

Another common eye-sore is the way we utilise gradients. A rule of thumb should be: Unless the gradient is used to indicate an obviously rounded surface, the gradient should not actually be visible to the naked eye. Gradients are excellent to add sophistication to an otherwise flat surface by simulating the natural distribution of light, but gradients in itself are by and large just not an attractive design element.

Consider the new Ubuntu theme. The gradient in the panel is pretty good. Oddly enough the gradient in the titlebars is much different. While in itself it is still acceptable (due to the slight illusion of glossiness), the added menubar completely ruins it. Of course that is ultimately a symptom of the larger issue that is the separation between window frame and application (hopefully soon solved by client side decorations), but there is certainly an argument for rather not doing something than to do it badly. Also unnecessarily exaggerated is the gradient of the title button tray.

The straight-forward application of the concepts above would result in something like this:

(Yes, it’s far from perfect, but I hope it illustrates some points. I also forgot to colour the title and menu text)

What I mainly hoped to accomplish with this is to create some discussion about how we can make these things easier to do for designers and developers, and where to add these capabilities in the stack (Cairo? Pango? A graphic styles library? Gtk?). I would want to work on this.

Also, what is our answer for rich application UIs? When Webkit beats us in capabilities for desktop application UIs, something is clearly amiss.


Also long overdue is an updated hackergotchi:

I will also be looking for new blog software. Can somebody recommend one that is simple, modern, and standards-compliant?

Updated Website, Themes

My official work on Maemo has ended now, so I finally had time to finish the long overdue refresh of In the end we didn’t stray much from the original, and it was difficult to please everybody, but at least it looks a lot more polished now. The site is still simple and adjusts reasonably well to different font sizes and resolutions. The plan is to update the design frequently.

N900 Themes

MelodyMeanwhile, Harmony, Melody and Word City were released to the Ovi Store. All three themes have been developed with a lot of effort during the time I worked with Nokia and are based on the development theme. Harmony and Melody include a background by myself, Word City includes a background by Steffen Halme. I am very happy with how these turned out, unfortunately a bug in the firmware causes the themes to reset whenever the device is restarted. This will be fixed in the next firmware, for which themes will also have to be updated.

Learning from Fremantle Themeing

Back in Germany, found a nice flat in Berlin, and finally some time to reflect on the last few months.

Working on the Fremantle themes was (and is) a great experience, especially because we had the freedom to do things we could never do on the desktop without breaking compatibility to the myriad of applications out there. When you control the entire environment, practically everything becomes a possibility. But it also makes it painfully obvious when certain technologies make things harder than they really need to be. The current Gtk themeing architecture is certainly one of those technologies. Hopefully we can lean from it and create a better experience with Gtk 3 and Qt/Harmattan.

Pixels Still Matter

There has been a lot of talk about scalable interfaces, and using SVG. But the reality is, that even with incredibly high DPI mobile devices, the pixel is still the most important unit. This becomes most obvious when doing the common “ridge” effect, which at a minimum requires a two pixel line:Example button at different resolutions

You may argue that the buttons on the right are still “good enough” on a high DPI device, but when your graphics look even slightly fuzzy while your competitors’ graphics looks sharp and crisp, you need a really good reason to justify that (the philosophical high road won’t cut it).There is a time and place for vector graphics, and it is generally a good idea to keep your source images in a vector format, but the end result still essentially has to be a pixel-optimised bitmap image. Perhaps this will all change when we switch display technologies or reach DPI values in the four digit range, but I do not see this happening any time soon.

The bottom line is, any themeing architecture for current technology should make using pixmaps simple and efficient. Good performance is a must, as well as 9-slice scaling and overlay images. It must be possible to create pixmaps for precise dimensions, instead of expecting the engine to provide arbitrary sized images.

Sapwood does a fairly good job at enabling efficient pixmap themeing on Maemo devices, but in many cases we had to heavily bend the themeing architecture to create the desired result. This includes using (many) custom widget names to provide size hints, and in some cases Gtk widgets make the unfortunate assumption that certain images are expected to scale down to almost 1×1 pixels.

Applications First

Another big problem has been the Gtk philosophy of abstracting everything into building blocks. I won’t go into Gtk’s habit of abstracting even those building blocks into boxes and shadows, as I believe it is generally agreed that this doesn’t make any sense any more and hopefully will disappear in a revamp of the themeing structure. But that’s only a small part of the problem. To create the rich and detailed UIs that are starting to become generally expected, we really need to start with the design of the application first. We simply cannot build every application from a limited set of standard widgets. Take for example the Palm Pre’s notes application (which looks like a bunch of actual sticky notes on a chalk board). The Gtk way of doing it would be to assemble a bunch of standard elements, and then try to shoehorn these into the intended design with themeing rules. It doesn’t work.

The only way to create UIs like these is to use custom graphics and custom layouts. Fortunately this is easy to do when you are working with a limited amount of components on an integrated device, unfortunately Gtk makes it more difficult than it should be. E.g. to load a custom graphic, you basically have three choices: 1) Create custom themeing rules for your application and try to use standard widgets, 2) load the images directly from the theme folder, or 3) provide your own images and ignore the theme.

None of these options are particularly tempting on the desktop. 1) and 2) pretty much require all themes to take your application into account, otherwise you end up with missing images. 3) completely circumvents the theme and may lead to inconsistency. Fortunately 1) and 2) are reasonable options when you can keep the global theme and application layouts in sync, so we made heavy use of it. Unfortunately third party applications will still have to struggle with it.

Global Overload

A serious issue with putting too many application-specific elements into the global theme, is that the themeing rules become unwieldy and providing a complete theme becomes increasingly hard.

The Diablo GtkRC was huge, the Fremantle GtkRC is even bigger. Despite heavy optimisations and caching, this creates a significant slowdown at the start of every application. This is a shame considering that each application only uses a small subset of the available elements. In hindsight, it would have been better to keep the global GtkRC to a minimum, and provide custom rules for each application (even if they would largely duplicate each other), but this creates its own set of problems.

The large amount of images provided by the global template means that creating a new theme from scratch is incredibly hard. Not just because you have to re-do so many images, but also because it becomes virtually impossible to accurately predict where everything will be used (especially if you factor in legacy elements, which may not even be used in any available software).

Third party applications are completely out of luck, and limited to either re-use existing elements from the global template, or provide their own unthemeable and potentially inconsistent set of images.

The Future?

If I had the chance to design a themeing architecture from scratch (either for a specific device or the generic desktop), I would do it like this:

– Provide a lean global stylesheet, which suggests colours and a small amount of very common elements. I say “suggests”, because it would still be up to each application to ignore the defaults in isolated cases or completely.

– Applications provide their own graphics and stylesheet, that (together with the lean global stylesheet) are sufficient to display it properly.

– User themes can provide a custom global stylesheet, as well as override application specific stylesheets. I.e. themes selectively replace specific elements, rather than being forced to re-implement the whole structure.

The reason I say “stylesheet” is not an accident, as all of this is already  easily possible with CSS based systems. This is one more reason why I believe that the future of rich application UIs will be very heavily based on web technologies. It just makes sense.

My First Snow in Helsinki


Document Representations

In response to Stuart:

I don’t think it’s a good idea in general to confuse the user with the technical difference between data in memory and data that has a representation on disk.

What I would like to see in the long-term is:

* Every document is stored on disk (and regularly synced), even if it’s as anonymous files in a temporary directory. “Saving” a document should be as simple as giving it a name, which might then move the document to a permanent storing location. In the usual case, I believe that documents should be created first and then edited. I would see temporary documents mostly used for things like working image copies in Gimp.

* Very direct mapping between a document on disk and its corresponding window, e.g. it should be possible to manipulate a window in the same way you can manipulate the icon representation of a document (drag it to the web for uploading, and things like that). I’m not sure if the “icon in a window” approach of OS X is the best way to do it, but that would be one possibility. Nautilus implements something like this with the folder button in the status area for spatial windows, but there is no general way to do this right now.

Generally, creating, naming, moving and deleting files should be a breeze, wherever you are, so that the idea of creating a new document does not seem like a chore or give the user the feeling of creating a mess. Sensible names and places should be suggested and data stored in a way that does not crowd the data that the user cares about most. Also, accessing a document should not have to involve finding the document at its physical location, but still give the option in case the user would like to put it in a specific place for quick access (e.g. the Desktop, as long as it acts as a workspace).

Of course none of these ideas are new, so this is not a useful post in any way. But I think it’s a petty that we still don’t have the means to even allow applications to implement these kind of mechanics in a sensible way. Let’s think about it, and let’s solve it.