I’m writing this because I find the current layout of the GNOME notification area very ugly, and I think a lot of GNOME users agree.
The icons are all crammed in a tiny space with very little spacing. Sometimes the sizes of the icons look very inconsistent, and the horizontal spaces between that ARE there often look different in width. And, to me, it looks like the icons are always one size to big for the current panel height.
So I’d like to present my solution to the problem. Now I don’t want to start the discussion of what applications should be using the notification area. I know it’s almost never used the way it’s supposed to be used. Applications like Pidgin, Banshee and Deluge use it as a permanent nesting place (personally I think the goals of the notification area should be rewritten, but that’s a different discussion).
Current situation
The default height for the GNOME panel is 28px. The icons in there look crammed.
Monochrome icons are not the solution
I often hear the notification area is ugly, and making the icons monochrome (like MacOS X) is opted, I think this is wrong and not a solution to the real problem.
Taking away color reduces usability. Pidgin for example relies heavily on color for status, shape is only secundary. When switching to monochrome icons I think we would very soon run out of shapes, and icons will tend to look like eachother, causing confusion. It is however wise to not to overuse color in the notification area, and have some guidelines for color use. I think tones of grey and two different colors max should be enough. Color isn’t the problem, the real problem is spacing and consistency. The notification area can still be pretty with colors!
Revisit spacing and sizes
I suggest to use 16×16px icons as a the starting size (this is a mockup made by jimmac, edited by me):
The bottom panel shows the current situation.
With spacing i mean:
- The distance of the panel top to the icon top;
- The distance of the panel bottom to the icon bottom;
- The horizontal distance between the icons.
It is very important for the eye that these distances are equal. Every time the panel changes height the spacing should be recalculated.
Of course when you increase the panel height the icons should still grow. With that we to come up with some kind of formula to define how much pixels the spacing should be.
$spacing = round(0.2 * $icon_size, 0) + round(100 / $icon_size, 0);
I’m not a mathematical genius, this formula is open for change, but it has a pretty decent result (imagine the grey are to be the panel):
So the icons switch to 22×22px sizes whe the panel reaches a height of 22 + 8 + 8 = 38px.In case of this calculation 22×22px icons appear with a panel height >= 40px, 32×32px with >= 50px, etc.
These formula’s may also be useful for other applets and application launchers in the panel.
I will post the code to generate the previews soon, after i figure out how to post HTML without messing up the layout.
If anyone has more ideas how to make the notification area prettier and more consistent, please speak up! 
Wow! The mockup is awesome, I’ll like very much one like that by default…
I hope someone hears you…
Oooooooh yeah !
This is one part of the gnome desktop which looks the older…
The mockup is great !
that mockup sure looks nice … i sure agree
Although I don’t have Linux, I really agree with you.
The mockup looks nice, (except for the clock area, which is quite not readable ; Anyway, that’s not the point).
Homogeneity in sizes and paddings would be much needed here, I cannot agree more with you.
On this chapter, even Windows XP is better…
Speaking of panels and icons, would it be possible to imagine that launchers would have paddings too ?
I usually have a lot of launchers on a panel (and I’m sure a lot of users do the same), and it looks like that :
http://flickr.com/photos/giz404/1801024020/sizes/l/in/set-72157601974585222/
Icons are a bit to big, and there is no padding… A bit of polish would be welcome here too
(please excuse my flawed english)
I can’t do anything but agree with you. Good spacing would make things look a lot better!
Make this happen ASAP!
I like it..
You mean to post code on the site?
You use the tags.
Can’t agree more with this and the mockup is exactly as it should be. Best example of this is comparing the Rhythmbox tray icon to the Pidgin icon. The Pidgin icon is massive compared to the Rhythmbox one.
Excellent ! I hope we will able to see this on panels soon…
+1
Cheers!
Go go, teach me how do it
Wow, i like it!
Please, post the code!
Cheers!
Completely agree. Any chance you can get a patch submitted that does this?
Taylor: We will discuss this during the art meeting at GUADEC.
Es una excelente propuesta, justamente vengo a encontrar este post buscando alguna solución para lo feo que se ve el gnome-panel.
saludos!
Really like the mockup, looks a hell of allot better than what we have now… Can we expect a similar clock applet soon
However, using colour as a primary means of communication violates the Windows Vista UX guidelines. This is not good for colour blind people.
Calvin: I totally agree with you, that’s why icons in GNOME are always a different shape + color.
@Hylke: Pidgin’s seem to be using colour as the means of communication. For example, the Available and Invisible icons look the same to a colourblind person. Away and “I’m not here right now” have the exact same icon.
@Calvin: Laziness maybe?
I would absolutely *love* to use this in the distro I’m in the planning stages of. I hate those huge and ugly icons. The rest of my desktop looks flawless except for the taskbar, it drives me crazy.
Here’s what my setup looks like at the moment:
http://fc39.deviantart.com/fs33/f/2008/291/6/9/SexyAwesome_by_nokadota.png
Great Mockup, though the clock is not readable.
Personally, I would prefer a digital clock
Anyway, thanks for the post - I totally agree with you on the rest
Johannes
That’s a honestly beautiful remake of the GNOME panel. I’d love to see this put into the real GNOME some time real soon.
Yes, Very good. I hope some folks on the gnome project agree!
totally agree with you!
Looks absolutely stunning. Why the heck cant the gnome people realize that looks matters?
I reallyyy wish this would be given some attention and worked upon. :[ Any news?
I wish to see new notification area integrated with task planing. We can group some process(progress bar) and drag some actions icon from right side. We can also drag action icon on bottom of notification area.
It’s some example. We drag turn off computer button onto bottom of the notification area. When all task been done and all notification are at least 20 minutes old, we should show turn of computer dialog. Once some notification have appear this task will be stopped for 20 minutes. We can also provides class to prevents some thinks like turn of computer for some part of time.
Another example is downloads. We can organize several download progress bar into one and drag music notification button on it(or message notification). When all such tasks will be done, task/notification manager will do this thinks.
that’s a great mockup for sure. just go on for it, somebody must hear you about that.
WOW! Your mockup looks great. I would really love to have this, it looks beautiful. Someone should start hacking
I like your mockup and I posted it at ubuntu brainstorm. Currently the idea is awaiting approval, but will be really great if was choosed to development.
oh, and the idea is this one:
http://brainstorm.ubuntu.com/idea/18850/
Guys, we can make this happen!!….we can submit this idea to ubuntu brainstorm. With next release ubuntu 9.10 ” the karmic koala ” scheduled for october they might consider it.
And since the karmic koala was planned to bring an improvement to the themes, the feel of ubuntu now would be the time to act.
One of us could post this idea in ubuntu, and we will all vote for it.
The idea is already present in ubuntu brainstorm. Everyone who reads this blog please vote for the idea at
http://brainstorm.ubuntu.com/idea/18039/
Hi Hylke,
Can you tel me how you changed you clock and where i can find this look’n feel?
Best regards
Hadrien
Hi,
Maybe one possible solution is to take care about the applications themselves.
What i think is often a problem is a misbehaving application, which e.g. does not have a 16×16 icon.
In default Ubuntu if one uses gnome-power-manager he will notice that it’s icon appears in size 22×22 and then it looks ugly, and then other applications can also pick same size, instead of 16×16.
I have changed icons for gnome-power-manager, and edited icons for gnote, now my notification area looks pretty neat (oh, finally!).
Screenshot:
http://www.picamatic.com/show/2009/05/07/05/56/3554262_524×40.png
What about making the notification area completely independent from a Gnome panel? I think Gnome panels are about to become obsolete.
Personally, I don’t want to use them. I use Gnome DO (and the integrated Docky functionality) and screenlets.
The notification area code should be made more generic so it can be used as a plugin for docks like Gnome Do’s Docky, AWN, Cairo Dock etc. but also as a Screenlet (or Universal Applet).
See my article about it (in Dutch but translatable on the site): http://www.ruwebit.net/article/349
just saw this on gnome look, looks promising as a first step to this panel !
http://www.gnome-look.org/content/show.php/Multirow+notification+area?content=106858
Beautiful !!!
I think another important thing to note is the utter chaos that happens when the notification area as a whole is customized. There is a gap for the standard gnome-panel clock added on the side against the notification area, but not for launchers.The log out button is overly large. the items in the notification area shuffle themselves around after suspend/restore cycles…its frustrating. I think a universal set rule about spacing is needed, and the whole use of spacers re-visited, as with many themes the spacers look like the suck.
I think some things should be ‘pin-able’, that is, the order of items in the notification area can be frozen and locked in a particular order, rather then bouncing around when things finally show up. I hate that the whole notification area bounces about when i unplug my laptop because its resizing for a different icon, or if I’m disconnected from wifi, or whatever. the whole area needs to be reworked so that it works with the user, instead of just pissing us off.
Thank you very much for this inspiring mockup. This post from 2008 (!) made me work on a customized icon theme based on Humanity - as a result I now have a quite nice looking notification area (but with not as much colors as you might like
). Thanks again.
Screenshots of the notification area