Just leave it on the counter
November 1st, 2009
I’d like to expand a bit on one of the Fedora 12 polish items Matthias already blogged about. Better Tooltips.
As most of you know, tooltips are the little window-like pop-ups that (hopefully) provide helpful information about a user interface element (widget, control, etc) as you hover over it. It seems to me they were originally used to provide textual assistance for the case where the user is unsure what a tool will do when activated. And were particularly useful when the tool had no intrinsic text. However, since then their use has expanded and become more generalized. They are used for quite a few different things today and can contain more than simple text.
Now granted, you have probably never been consciously annoyed by tooltips. More likely you haven’t really thought a lot about them at all. But that doesn’t imply there is no room for improvement. I spent a few hours examining my own interactions with tooltips and I came up with a few things that bothered me. These basically fall into the categories of: color, shape, and position.
The issues with color and shape are fairly obvious. Yellow! boxes! right out of the mid 90s. The issues with positioning are a bit more subtle.
Before
Notice how the tooltip:
- Obscures what you are looking at
- Gets all up in your shit
- Does not appear in a stable position
- Appears to be more closely associated with the pointer position than the thing that is providing the tip
How about something like…
After
Niiice!
Thanks Matthias.
November 1st, 2009 at 8:32 pm
That is really cool
November 1st, 2009 at 8:42 pm
Looks like a good improvement. As a non-Fedora user though, can you tell me if the patches for this are likely to be going upstream, or if not, where I can get them from?
November 1st, 2009 at 8:54 pm
Simply disabling all tooltips would probably be an improvement for almost all users.
November 1st, 2009 at 8:54 pm
Tooltips obscuring what I’m looking at has really bothered me. This is excellent work! Thanks!
November 1st, 2009 at 9:00 pm
I just wish I could get those popups using the shiki theme…
November 1st, 2009 at 9:21 pm
Though the transparency on the new one may look nice, it ‘t make the reading easier. Also the new blue cooler blurs in the tooltip with the window, which makes it harder to spot.
November 1st, 2009 at 9:22 pm
@simon: the patches have already been filed upstream by mclasen, but arrived a little to make 2.18. they will be in the next release, though, as soon as they’ll be reviewed and discussed.
November 1st, 2009 at 9:25 pm
Except that this doesn’t work well when reading menus, because it obscures the item lower down the list… Still something to look at.
November 1st, 2009 at 9:32 pm
Placement is an improvement for sure but why on earth change the color? Yellow did a great job at standing out against most backgrounds.
November 1st, 2009 at 10:00 pm
I saw some screenshots on some Fedora blog showing these off with transcluency and I thought they looked awesome but now that I seem the next to the old ones I can’t help but notice that the new ones don’t have the nice contrast that black on yellow has.
I am not saying the old ones are good, but the new ones are less readable, although the admittedly look better.
November 1st, 2009 at 10:07 pm
Nice stuff, I especially like the new placement algorithm!
On the down side, this new look does not seem to work in all cases:
- sometimes a shadow is drawn which makes the corners look ugly
- rounded corners and transparency do not work in firefox
November 2nd, 2009 at 12:20 am
I know this is some major bikeshedding, but I really like them yellow …
November 2nd, 2009 at 12:33 am
Awesome idea. But I like the yellow!
November 2nd, 2009 at 1:09 am
[...] http://blogs.gnome.org/mccann/2009/11/01/just-leave-it-on-the-counter/ a few seconds ago from Gwibber [...]
November 2nd, 2009 at 1:12 am
Excellent points. I believe the reason for placing the tooltip near the cursor is because that is where the user’s attention is. The object the tooltip describes, on the other hand, can be fairly large, pushing the tooltip too far for the user to notice. That said, I agree that the current simple placement is not always ideal.
I would add a few more areas for improvement. First, tooltips are generally small and do not provide much helpful information. Office 2007’s ‘Super Tooltips’ are a good example of tooltips that aim to be much more useful. A second improvement would be to make tooltips clickable. Once that is possible, tooltips can become a lot more helpful and interactive, thus obviating the need to hide features and information in contextual menus and elsewhere. This is a common technique in Ajax applications, but not so on the Desktop.
November 2nd, 2009 at 1:35 am
you should make the text of the tool tip color more grey like #444
November 2nd, 2009 at 1:38 am
I would love it if, similar to David’s suggestion about Office tooltips, GNOME tooltips also showed the keyboard shortcut inside them if a shortcut is linked to a function.
“Cut – Move text to paste it elsewhere (Ctrl-C)”.
Tooltips that provide keyboard information would be awesome. It makes things much more discoverable, rather than hunting through menus for a function that you like.
May not be possible: I know that OS X API has some way of linking shortcuts, menu entries, and toolbar buttons together programmatically. GTK may not be nearly that flexible.
Also, I heard of some deprecated GNOME HIG clause that said any toolbar button should -not- have a menu entry or keyboard shortcut (since those would be redundant). Sounds like horrible policy, but that would obviously not work with this idea.
November 2nd, 2009 at 2:48 am
Yellow is much better, it stands out from the background.
November 2nd, 2009 at 8:24 am
I actually do prefer the yellow tooltips a little better – much better contrast than the blue. At least, you should make the shade of blue you’re using a bit lighter.
And there’s nothing wrong with tooltips being yellow – they are in Mac OS X, and that’s the best designed user interface there is.
November 2nd, 2009 at 9:54 am
The old one is not yellow and I guess the new one is not blue either… the color is decided by your gtk theme.
I think it is great that this is looked into, a few more iterations and I think the new one could be superior in all aspects.
November 2nd, 2009 at 10:10 am
Dude, my tooltips are gettin’ all up in my shit!
Nice design, should be themable also, I like it though, stops the tooltips gettin’ all up in my shit.
November 2nd, 2009 at 10:12 am
The entire look should in fact be themable i think, just like with other widgets. I don’t know how the round corners are implemented now, but they would not go well with a square gtk theme.
November 2nd, 2009 at 10:24 am
Thank you!
November 2nd, 2009 at 12:59 pm
Yellow is essential in providing a clear contrast to the used theme (nobody uses a yellow-theme).
It’s the same reason why DVD subtitles are often in yellow – to stand out in those short momentary spurts. One doesn’t always hover the mouse over an icon – it’s something momentary – and the tooltip should try its best to stand out as much as possible.
November 2nd, 2009 at 5:40 pm
Nice work (both on the positioning and on the color – especially that slight transparency rocks!), just can hope it gets upstream soon, so i can enjoy it on ubuntu as well.
November 2nd, 2009 at 6:29 pm
I’m all for better positioning, but I prefer yellow to blue, and for the love of God, MAKE THEM OPAQUE AGAIN. Text on a transparent background over more text (which it usually will be) is the worst thing ever.
November 4th, 2009 at 6:35 am
Awesome, I like the positioning, very good. At first I could not spot the difference, only the colour one. Then I read the text.
I don’t think these tooltips should have a transparent background and I would prefer the yellow background. Both because they need to stand out.
One thing the new algorithm needs to show is how it will handle large buttons – where will the tooltip go? Will it be to far from the cursor?
As others mentioned I would like to see keyboard shortcuts shown in the tooltip
Cheers
November 4th, 2009 at 12:09 pm
I have to agree that yellow was actually a very good colour. With your theme the blue of the tooltip is hard to pick out against the grey of the toolbar.
Positioning is definitely better though.
November 5th, 2009 at 4:06 pm
[...] http://blogs.gnome.org/mccann/2009/11/01/just-leave-it-on-the-counter/ a few seconds ago from Gwibber [...]
November 5th, 2009 at 9:47 pm
I had exactly the same idea in my mind.
November 7th, 2009 at 6:43 pm
To be honest, the yellow tooltips look far better to me. Microsoft chose yellow for a reason, and also made the position relative to the mouse pointer rather than the object for a reason.
The contrast is better with the yellow, and the text doesn’t get lost among the text of the tab labels as it does in your ‘blue’ example, especially with the addition of opacity.