KDE Desktop Buttons
Introduction
Background
With the advent of the Plasma project for defining eyecandy and desktop interaction regarding the K Desktop Environment, there's a need to study new concepts for the way we manipulate data on our computer. This short article focuses on the part of the user interface that is commonly referred to as the desktop, the screen area where you can put links to documents and programs.
The concept: desktop buttons
Up until now it was common for the desktop to only be a place to put simple iconic links to data, but there has been much demand from the userbase to offer more visually pleasing components and elements on the desktop. Think Mac OS X widgets, but directly on the desktop. SuperKaramba, and its predecessor Karamba, both attempt to provide these features.
Plasma aims to provide a uniform way for elements to be placed on the desktop, in the form of so-called desktop buttons. These buttons still need to provide a way to encapsulate simple icons, but can also offer a wider variety of functions and interactivity. Because there are no examples of this kind of functionality, a call was put forward to artists requesting they provide input in the design of the desktop buttons.
The Challenge
KDE-Artists.org
A challenge about the interaction design of desktop buttons was organized in the weekend spanning from the 15th of July to the 17th of July 2005, as mentioned on The Dot. The original thread is available on the KDE-Artists website, where artists and designers can post their entries.
Simple and Smooth
Simple and Smooth in action.
My entry is labelled Simple and Smooth because it's just that - elegant and smooth as silk. I will describe my design decisions as posted on KDE-Artists here, including the animated thumbnail preview, available on the right.
I tried to come up with something conservative - there's not an awful lot of effects you can apply without introducing new theme colors, and the effect does need to work on the wallpaper of the user. That leaves me with an Alpha effect, a neutral tinting effect and of course a transformation effect.
I applied them to the theme like this: new icons are transformed from nothing in the center to a rectangle slightly larger-than-normal size, and tinted 50% white at the same time to draw attention. After the larger-than-normal size, it transforms and tints to the normal colors and size. The descriptive text fades using alpha transparency. Deleting is handled in the opposite way: the icon gradually transforms to nothing and its colors fade to a full black tint. The text fades out using the alpha channel.
The disabled state is indicated by a slow fade to 25% alpha, and a descriptive text with the reason behind the disable state is slowly faded in. The colors do not pulsate. Once again available, the icon is faded to the normal 100% alpha and the disabled reason fades out.
Hovering is indicated by a blurry edge around the icon, in the theme-selection-foreground color. This edge fades in using alpha when the cursor enters the button, and fades out only as the cursor leaves the icon. There is no color pulsating in the blurred border.
Activation is indicated by a slow pulsating white tint (selection foreground color) of the whole icon. The pulse cycles through 25% and 50% white tint, so that it is always clear if an icon is activated. It's also possible to fade in an extra descriptive text explaining what is happening to the icon (connecting, starting up etcetera).
It's possible to combine all non mutually exclusive actions described: hovering can be combined with activation and so forth, see the thumbnail for a clear indication of the icon states.
Conclusion
Because of the current lack of a clear view on desktop buttons, I wasn't able to really create something that will become reality without any changes, but I think I managed to get the basic motions right, even for non-icon elements that will be added to the desktop.
And the winner is...
Added on the 23rd of July 2005: The contest is officially closed and the voting has taken place, I recall seeing about 47 votes in total. I also voted, but of course I didn't vote on my own work, I voted for the best three submissions excluding mine. Well, the results can now be found at the Plasma Desktop Buttons thread over at KDE-Artists.
To make a short story shorter: my Simple and Smooth entry won with a total of 27.6%, but I'm not sure how to interpret this number because voters were allowed to choose three entries. Anyway, it's nice people liked the work I put in although I must admit it wasn't really that much of a chore to do.
This article was created on the 17th of July 2005 and updated on the 23rd of July 2005 with the contest closing status. The page was again updated on the 15th of December, 2012 to change the broken Mac OS X Dashboard link; thanks to Erin Williams for the notification.