Let me start by saying this isn’t the subject I planned to blog about. I could’ve posted yet another application mockup, but I ran out of ideas (feel free to send your suggestions for next time). but I thought it would be a good idea to illustrate the goals of GNOME Art Team for GNOME 3 and how you can help to realise them.
At the Gran Canaria Desktop Summit Andreas gave a quick and brief presentation of how we can improve GNOME visually. Yes, there will be a new widget theme, and yes, a new icon theme as well. But that really is only half of the job. You can improve the beauty of an interface by changing the looks of it, but only to an extend. There’s this Dutch saying: “You can give a golden ring to a monkey, but it will still be a monkey” (not saying that all GNOME applications are ugly but you get the point).
There are two very clear examples of this.
Design in GNOME used to be all about icons. There were icons everywhere. On every button, and for every menu entry. Bugs were filed against things that didn’t have an icon. And in lack of availability of icons for very specific actions the wrong metaphors were chosen, or metaphors that were already used for other actions in a different application. It wasn’t rare to have five different actions with the same icon (and it still isn’t actually). Having icons had become a goal itself, though there are only a handful that are recognisable by the user.
Pretty? Yes. Elegant? No.
A few years ago almost everyone was pretty excited by the release of Compiz, the compositing window manager. And suddenly everybody in the OSS community cared about graphics. “Yeah! We’re going to have amazing effects now! Take that Windows and OSX!”. And it’s true, Compiz could do amazing things and was technically superior to its competitors. Your windows would wobble when you moved them and become semi transparent. When you close a window it would now burst into flames or fold up into a paper air plane and fly off. And last but not least you could spin the desktop cube whilst whales were swimming comfortably inside it.
Impressive? Yes. Elegant? No.
As said, elegance in interfaces doesn’t come from funky graphics and pretty widget themes. It comes down to how your interface is laid out. And this is where developers can help. Andy Fitzsimon made a great presentation for last year’s GUADEC that goes into these things. A must read.
In this post I would like to focus on how some of these aspects apply to GNOME desktop as it is now. Some common things that can be easily tackled:
Can you guess where the come from looking at the screenshots? 
Not elegant: Padding / framing where it is not needed.
Where to look: Image / document viewers, video players, games.
Solution: Remove the padding / framing, content should touch the window border.
Not elegant: Double lines.
Where to look: Nested widgets.
Solution: Rethink your application’s design.
Not elegant: Frames.
Where to look: Anywhere.
Solution: Whitespace.
Not elegant: Unaligned widgets.
Where to look: Anywhere.
Solution: Check surrounding widgets for points to align to.
Not elegant: Headers like “Options” or “General”.
Where to look: Preference windows.
Solution: Remove them or come up with something better.
Not elegant: A header for only one or two options.
Where to look: Preference windows.
Solution: See if you can use whitespace to group things together.
Not elegant: Double headers.
Where to look: Preference window tabs.
Solution: Remove the second header.
These are all things that may sound pretty obvious and are probably in the GNOME HIG, but it’s good to really focus on these things and know what to look for. There are a lot more things to look for, but only fixing these things will make a great improvement. If you see things like this please open a bug report against the application, because visual inconsistencies are bugs too! Let’s make GNOME elegant! (and just work as well!)
Also: unnecessary status bars, scrollbars that do not touch window edges, tabs with just one widget, tooltips on checkboxes etc.
Also also: resize grips. These should be drawn automatically by the window manager (just draw it over window contents when mouse moves near active window’s bottom right corner), otherwise we’re stuck with either unresizable windows or unreasonably thick window borders (the higher the DPI the harder it gets).
here! here!
Not elegant: Inconsistency
Where to look: Next release
Solution: Proactive Art Team
This is really easy stuff to fix! Are you suggesting that bugs be filed with patches against these apps?
I think that something else that contributes to elegance is
anti-aliased curves. One problem I have with metacity is that
the themes that have rounded corners aren’t rendered with
anti-aliasing, and it stands out when a lot of the desktop
content, be it widgets or the web, renders smooth, rounded
curves all the time.
Hello man I have one fast offtopic. I notice that in your screenshots the fonts looks awesome. Can you tell me what are your font preferences and what is this font?
Thanks.
Naiden Gochev
Java Developer.
> Not elegant: Padding / framing where it is not needed.
The framing is essential for resizing windows. I don’t like using the OSX style windows where the only resize handle is in the lower-right corner — it is not a usable interface IMHO.
Otherwise I agree with all your other points. The unaligned widgets is especially annoying.
Elegant: Global Menu Bar.
Not elegant: Apps that don’t work with it, be they XUL, JAVA, WIN*, or simply somehow broken (Inkscape, GIMP).
Firefox works with the menu bar in OS X, it should work with the one for gnome.
For me what makes the Gnome superior over KDE or Windows is such observations above. When I’m using a GNOME application I find almost all the things where I expect to be, I don’t see any unnecessary text, buttons etc, the default properties are usually fine and I get the behaviour I expect when I do an action.
On the contrary, when using KDE I get lost among the buttons, menu items and struggle to find how to do the thing in my mind. Also I spend time to fine tune the settings before I start using the applications because default settings are usually seem not to fit in my needs.
Of course not all GNOME applications are perfect but they are usually very good when it comes to the look & feel.
I’ll read GNOME HIG so that I can apply “the secret behind GNOME applications” to my applications as well
I agree with most of your observations, but I think that whitespace is not a replacement for everything. In particular, I think frames as used in Inkscape in your screenshot are both elegant and necessary — it is important to know that those buttons are related to distribution as oppose to alignment etc.
Great post! I think I finally have a way to describe why I don’t like KDE now. KDE is certainly impressive but I don’t see it as very elegant, though 4.3 is a small step in the right direction.
I’ve personally always been a GNOME fan but it is definitely not without flaw. We need more public discussion (like this) about how to make apps more elegant!
There should be a drag handle in the corner of a window to resize it. I you can make it so that I can click 5-10 px inside the window border and still use that to resize the window - fine, remove the border lines, otherwise having a resize handle in the corner is still very useful.
However, I do fully agree with the other suggestions. Keep up the good work!
The penultimate screenshot’s link’s URL contains too many “n”s.
Good points. I wonder how much of this is a tools problem; it frustrates me that I have to run around manually setting paddings to conform to the HIG, for example.
I’m not so sure I accept all of these as true — and I worry that some of this will change again as fashions change and suddenly we’ll be rewriting everything again just to change a few lines or some spacing. I guess I’m worried about throwing the baby our with the bathwater, especially if the main reasons are aesthetic or fashion-oriented (lines are ugly) and not design-oriented (i.e. this preferences pane has more options that can easily be read and understood at one time)
“Frames” and “Double lines” — this sounds like an issue of *theming* to me, not of application design. Frames have a simple purpose — to group a set of related widgets. If lines have gone out of fashion (which I think they have), we should design a theme where the frame is borderless and has a simple no-frills bold label. But if we get rid of all the frames now and frames come back into style in a year or two, then life really is a pain. If you’re for getting rid of widgets grouped in the way that frames group them, that’s one thing, but if it’s about the line, I don’t that’s something that shouldn’t be handled at the application level.
“Content should touch the window border” — this seems obviously false to me, so much so that perhaps I’m misunderstanding your point. Books have margins, for a good reason. Good websites all have substantial padding on the edges, again, for good reason. When you say “content should touch the border” do you really mean that e.g. text should go right up to the edge of a window? If it’s a movie or picture, I’m on board, but otherwise, no (again, think of the book or magazine as a model).
“A Header for only one or two options” This is an understandable gripe, but I think parallelism is more important. If you have 4 higher level concepts, each of which has sub-options, it seems it’s important to keep the layout consistent, even if the fourth concept only has one or two settings.
“Double Headers” and “Headers like Options or General” — in both cases, you’ve chosen examples nested in a notebook, and both times the notebook tab has what looks like a redundant name. However, notebook tabs are *not* the same as headers. You look at tabs when you want to switch to a different tab (it’s a control for changing), whereas you use headers to orient yourself as to where you are right now. I have the same beef with the HIG’s recommendation against duplicate window titles and headers — I only look at window titles when I’m moving windows around or looking at the title of an otherwise obscured window. A plain old bold label (a title) does a much better job orienting me to what I’m actually looking at *in* the window. Firefox is a very nice example here. It’s occasionally handy that the window title shows me the page title; it’s somewhat handy that the tab has the page title; but it is imperative that the webpage itself have clear headers and titles. Why should applications be much different?
Not elegant: border around tabbed windows that appears when you open the second tab.
Where to look: tabbed applications that don’t open a tab bar until a second tab.
Solution: remove the border around the tabbed window.
If only the whole world were as good at design as you are. Or if you lived thrice as long.
“What a wonderful world it would be.”
HIGs are not always correct.
They are there for uniformity, and a HOPE of being correct about something. They might also be wrong. Good example of this would be the KDE HIG, which is a pretty huge joke even in galactic scale.
Good thoughts, but I’m not necessarily with you on the anti-frames bent; I don’t think they’re inherently inelegant.
A better translation of that Dutch saying would be:
“If a monkey were to wear a golden ring, it still would be an ugly thing.”
hi hylke,
while in general i agree with the sentiment, i wonder how you decide what is elegant and what not — your writing implies that one can objectively determine something’s elegance. i’m not so sure everything is so ‘pretty obvious’ that all will agree, or?
do you have some underlying theory as to what is elegant and what not, or is it just your gut feeling?
Great post! And i can just agree with it (although i think *some* icons on buttons/menu entries really are better than none at all).
On the other hand, i think gnome is already much better at such small things than KDE, and hope your blog post will also animate even more gnome devs to take care of aestetics.
It might correct some misunderstandings if you mocked up some elegant solutions for your inelegant examples.
@foo: I would say that it’s more an issue of how you present information. All those lines and redundancy create noise, increasing the time it takes the user to grasp what is on the screen. A well-designed display of information is both easy and quick to understand. It will also tend to be elegant. Any of Edward Tufte’s works would be relevant here.
Side question: what font are you using in your screenshot examples? It looks similar to my Myriad Pro Condensed 12 that I use for my desktop and applications.
One thing I really think GNOME should provide is a nice free thin font like Myriad Pro Condensed or the one in your screenshots instead of this wide and ugly ‘Sans’ crap.
That’s #1 for me.
The font is, as always, with graphic types on Linux nowadays, Droid Sans (commissioned by Google for Android).
Myriad? I’ve tried that for a while, but it looks weird on Linux at these sizes, also Frutiger looks much nicer. However, I am using Minion (which I find absolutely gorgeous) for window titles.
You’re right: nearly all of this stuff has been in the HIG for years
“while in general i agree with the sentiment, i wonder how you decide what is elegant and what not — your writing implies that one can objectively determine something’s elegance. i’m not so sure everything is so ‘pretty obvious’ that all will agree, or?”
Just because something is subjective doesn’t mean it doesn’t exist. Compare a hulking ’70s Ford truck to a current model BMW. You can tell which is more elegant can’t you? Whatever that difference is still exists in smaller amounts between more similar objects. But sure, there’s a point at which we can no longer suss out an evaluation and opinion trumps anything objective.
And we also aren’t talking about something as vague as “beauty”. Elegance is much more specific and someone with good design sense and an experienced eye, someone who is constantly refining their ability to detect things like elegance, will be able to find or create it. To everyone else, finely tuned elegance just gives a vague sense that something is a little more right.
While it is positive to bring forth a term such as ‘elegance’, there appears to be a blatant neglectfulness of traditional art / design theory and thinking here.
We all realize the term is empty and shifting correct? You are supposed to learn that in art / design school 101 right?
foo said:
“while in general i agree with the sentiment, i wonder how you decide what is elegant and what not — your writing implies that one can objectively determine something’s elegance. i’m not so sure everything is so ‘pretty obvious’ that all will agree, or?”
Yes it is contextual. Yes it is relative to the age demographic. And yes it is relative to the culture. Spot on foo.
“Just because something is subjective doesn’t mean it doesn’t exist. Compare a hulking ’70s Ford truck to a current model BMW. You can tell which is more elegant can’t you? Whatever that difference is still exists in smaller amounts between more similar objects. But sure, there’s a point at which we can no longer suss out an evaluation and opinion trumps anything objective.”
Actually you are dead wrong. Aesthetics shift over time in culture.
Is sexy ‘heroin chic’ or ‘Rubenesque’? Did Fraktur bring different connotations prior to the 1940’s? Why does a soup can mean capital A art now?
Absolutism does not exist. There is no such creature as ‘elegance’ until you define the historical context, the cultural context, and other constraints. In short, who is the ‘who’?
It’s a moving target and we all look like fools when terms are peddled without grounding and education to back up the claims.
http://www.uigarden.net/english/global-market-global-emotion-global-design
http://www.uigarden.net/english/easy-intuitive-and-metaphor