The Heuristics of Headerbarsby Daniel Foré

One of the more visually obvious changes we’re working on for Isis Freya is the adoption of Gtk’s new HeaderBar widget. This is a major departure from the way window controls and window titles have appeared for years, so I think it’s worth spending a bit of time discussing what this change allows.

Every Pixel Counts

Whether we're talking about tiny 10" displays or giant 32" displays, we aim to make the best possible use of screen real estate. Combining the Titlebar and Toolbar into a single widget saves precious vertical pixels that could be better used to show your photos or the web.

Every Pixel Counts

Additionally, using these new fancy window decorations means that windows can now have a semi-transparent single pixel border. Much like what this has done for our icons, it means that windows look as sharp and crisp over dark backgrounds as they do on light backgrounds, something that hasn’t been possible before.

Larger Tap Targets

Larger Tap Targets

Even though we're saving vertical space, we're actually able to increase the amount of space around Tool items. And by moving window controls into the same line as Tool items, we decrease the chance for misclicks by placing them farther away from each other.

Window Titles Optional

Music Without Window Titles

Traditionally, every window comes with a title calling out the name of the app that’s open. For some apps, like Scratch, we use this space to call out important information such as the name of the file that is currently open. However, for a lot of apps, this title doesn’t add value to what’s displayed on screen. When you open up Music, you can tell that it’s the music player because of the layout of the controls and the content that is displayed. In this app, the title is simply visual noise that makes it more difficult to focus on other more important information (like the currently playing song).

A Little Creative Freedom

Mockup of Birdie with a Blue Headerbar

Mobile app developers are familiar with the idea of being able to visually express their brand in their apps, while staying within platform guidelines and using the native toolkit. Now, desktop developers will be able take advantage of CSS theming in the HeaderBar of their apps as well.

Coming Soon to Isis Freya

While we’re excited to announce this direction, we’re still putting it all together! If you are an app developer with access to one of our Isis Freya preview builds, you can expect the necessary bits and pieces to land within the next couple of weeks. For everyone else, it’s something to look forward to once Isis Freya is ready and released.

A Developer’s Choice

As a final note, I’d like to remind everyone that implementing the new HeaderBar and client-side window decorations is completely a developer’s choice. We’ll continue to support traditional window decorations in Gala for the foreseeable future and your apps will not be automatically converted. It’s up to the developer to decide if Gtk HeaderBar is right for their app.

Edit: As of Gtk 3.12, HeaderBars support Close, Maximize, and Minimize as well as a Menu item much like our current gear menu (So GNOME apps will look and work as expected on Pantheon!). Additionally, they remain configurable so you can place them on whichever side of the window you like. By default, we'll be sticking with our configuration of close on the left side and maximize on the right.


Edited on June 22, 2014 to reflect the change from Isis to Freya. Read more here.

Published November 21st, 2013
Comments

94 Comments


isfawwaz 7 hours ago

can someone tell me where i can know the eOS gtk css class?


anubeon
Lee Hyde 3 months ago

I’ve been using many of the newly headerbar applications for a while now and I adapted to them far quicker than I thought I would. I wouldn’t mind seeing Firefox ported over to these, I’m sure they could resolve the headerbar with their tabs-on-top arrangement quite easily. I could be waiting a while though.

My one gripe would have to be the fact that these headerbars don’t obey the gsetting org.gnome.desktop.wm.preferences action-double-click-titlebar. It appears that gktheaders are hardcoded to toggle maximise upon double-click, which is rather annoying as I’ve assigned minimise to that gsettings (as we already have a visual maximise toggle in elementary). I don’t know whether this bug originates upstream (i.e. with GNOME) or whether it affects other gsettings in org.gnome.desktop.wm.preferences, but I’m tempted to file a bug against libgranite (?) to see whether there is any chance of fixing it.


atarixle 3 months ago

What about bringing back true-RGBA to the headerbars? when I was watching the presentation of the new OS X 10.10 I actually was like “wait, I had this back in 2010 already” ... how about something like that?
Also websites (even yours) work like that, transparency effects everywhere ... mostly just nice, but also usefull


joy 5 months ago

I think elementary team should now put atleast an option to change the position of the wingpanel.
If you can put wingpanel to the left it will save more vertical space,as widescreen displays are
common now a days.It will increase browsing and document reading experience as most webpages
(including elementaryos.org) are made for standard screen displays.


MrAli
MrAli 5 months ago

i really like this idea. when i migrate from ubuntu to elementry, i miss ubuntu’s global menu. maybe you can consider adding “global menu” too; or atleast beside headbars, add the ability to show window tite in top bar.
thanks


Rhys 5 months ago

I agree with you. It would be interesting to have a global menu.


Rhys 5 months ago

I agree with you. It would be interesting to have a global menu.


Wolfgange 5 months ago

I love the simplicity of elementary OS, but I fear its simplicity is making it lose power. For instance, the removal of the minimize button simplified the task bar, but it also lost some of the power and purpose of the title bar. A better option would be to remove the minimize button, BUT then make middle-clicking the title bar minimize it.

This both simplifies the title bar and look, while keeping the power and purpose of the title bar. Please consider adding this in the default configuration.

I realize it is possible to change this with elementary-tweaks (Which isn’t installed by default…) but why not add this feature by default? From my experience, people more often minimize a window than send it to the back (Which is what middle-clicking the title bar normally does). Why not remove the less-used “Send to back” Feature and replace it with the commonly used “Minimize” Feature?

On your website you boast “Beautiful and Usable” while this is not true after installing elementary. It is quite beautiful, but in the process, it lost usability. Rather than removing a useful feature like the minimize button, make the title bar more beautiful by minimizing with the middle click. I love the elementary OS project so far, but one thing I have not seen much is taking the suggestions of the users. elementary OS will become worse than a proprietary OS if they don’t start taking suggestions from the community.

If you do not want to change any default feature for whatever reason, at least give the user the option to change it out of the box. For example, if the majority of users want icons on their desktop, and you choose to not follow their suggestion to add them, at least instal elementary-tweaks by default and add in a hidden feature of pantheon files to display files on the Desktop. This keeps simplicity out of the box, but allows the user to gain more usability from their desktop by easily changing a setting. After all, thats what settings should be about, right? System Settings should allow the user to customize parts of the OS such as the title bar and the desktop icons. Please consider implementing some of the suggestions discussed above. I believe they would only benefit the usability of elementary OS without sacrificing simplicity or beauty.


crb
crb 6 months ago

Looks really awesome! Thank you for all of your efforts!


theusername100 6 months ago

Elementary is very a very nice distro with a modern UI. But i do have a few small things that kind of annoy me, firstly some of the icons are a tiny bit inconsistent such as the big thick coloured ones with gradients. I think they should all be flat mostly one colour. That would be cool. But great distro anyway.


Johan Bjäreholt 6 months ago

I can’t find that icon actually, where did you see it?
The icons should not be the same color for multiple reasons, but the biggest one is branding. It is both easier for the user to find the icon he/she is looking for if they know which color it is, as well as it would look very boring in the long run.

You might think it looks good, but it is not functional, and if this is a preference of yours you could always just install a icon pack.


mrpt3o 6 months ago

Im a huge lover of the Elementary Operating System and even though iv always wanted to go to a core system e.g. Debian, Arch i always find myself drawn back to Elementary.

I cant wait for the Isis release, and am super excited about the CSS Headers.


Johan Bjäreholt 6 months ago

I went away from Elementary for a while because i didn’t like that it was based on 12.04 since so many packages were old.
I looked into what i could do and saw that the AUR had the pantheon-desktop, but it didn’t work well.

What worked well though was installing debian and adding the elementary ppa to install pantheon desktop which works flawlessly!
Debian testing is very very nice, but if you would like to go with debian stable theres no reason to do this really.


McVoiceX
Tom Sturm 8 months ago

If any developer can create his own Headerbar, then it is a part of freedom, but Isis is sinking into a visual chaos, also his operating philosophy ... The previous consistent design Luna has turned into what it is today! Best regards from Germany.


goyodiaz 8 months ago

True. Because once the toolkit give developers freedom to create headerbars they cannot follow design guidelines any more.


ramtinq 8 months ago

I agree with you. The most thing I like about Luna is it’s regularity witch makes it easier to use. this freedom makes users so confused.


statesee 8 months ago

hi, could an elementaryos developer please answer this
are you planning to redesign the elementary theme so the tabs (let’s say in midori or some dialogue boxes where there are tabs) look less ugly
the rest of the design is absolutely fantastic but i’m really unsure about the tabs - the gradients and thick border makes it look really old
please update the theme
thanks!!


Justin_Thiel
Justin Thiel 8 months ago

It feels like elementary OS wants to to approach Linux with the same design philosophy as what Apple uses for their products and this is one of the reasons why I strongly support the team. There are some issues that need to be stressed that concern me about adopting these this new headerbar design.

The visual flow of the distro will be broken. No user, not one, will only use the built in elementary apps. There will inevitably be other apps downloaded and they will look very different from the elementary apps. This is one of the reasons that I stopped using Gnome shell recently. I am a very visual and sign focused person, having these apps look inconsistent is absolutely unacceptable and it makes an operating system look like a jumbled unfinished piece of garbage. Any good designer cringes at a visual flow that is inconsistent throughout the entire product. If it is not possible to force every app to take on the same design then that entire decision needs to be scrapped. Maybe the team should create an elementary installer that takes .deb packages and adds the headerbar to them during the intall as a new dependency. gdebi is open source and could serve as a good base for creating the installer.

Also, give people the option for a global menu and the minimize/maximize/close buttons straight out of the box, inside elementary tweaks (which should also be included by default). These are helpful features that simplifies and beautifies the experience of using elementary for certain people. These are features that can be useful for anyone. You aren’t going to force people to stop wanting those window buttons. When I am working I don’t want to drag my pointer to the bottom of the screen every time to minimize a window I need to keep active. Think more about the user experience, less about trying to reinvent the wheel. Create a simple and beautiful operating system that provides an enjoyable user experience no matter what the user needs to do. Make it “just work”.

I really hope that the elementary team is the Linux team I have been waiting for. The team that hits the “sweet spot” of providing a simple and beautiful operating system that shows the world what Linux and open source is truly capable of. Power and grace. The Beauty and the Beast.


statesee 8 months ago

i’m not really sure about forcing the headerbar into all apps because the point of the new headerbar is to save space by removing the title and incorporating tools inside the headerbar
if you force a headerbar in all apps that don’t support headerbars natively, it’s going to waste a lot of spave because the titel bar is going to be much bigger and all it shows is the title :/


Magnus Teekivi 7 months ago

I might be a minority, but coming from the world of Windows, I liked how some applications, like players (Winamp, WMP, VLC etc), had the option for custom skins. The visual differences between those applications and native GUIs didn’t distract me.
Also, I believe that the visual design will get broken sooner or later. I don’t think that elementary team would take extra steps to completely forbid custom skinning (or HeaderBars).

Load More Comments

Login to place a comment.

Just one second… Login in to comment, ask questions and more.
Cancel