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.
That is really cool 🙂
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?
Simply disabling all tooltips would probably be an improvement for almost all users.
Tooltips obscuring what I’m looking at has really bothered me. This is excellent work! Thanks!
I just wish I could get those popups using the shiki theme…
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.
@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.
Except that this doesn’t work well when reading menus, because it obscures the item lower down the list… Still something to look at.
Placement is an improvement for sure but why on earth change the color? Yellow did a great job at standing out against most backgrounds.
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.
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
I know this is some major bikeshedding, but I really like them yellow …
Awesome idea. But I like the yellow!
Pingback: Javier Ercilla (xvi82) 's status on Monday, 02-Nov-09 01:08:25 UTC - Identi.ca
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.
you should make the text of the tool tip color more grey like #444
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.
Yellow is much better, it stands out from the background.
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.
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.
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.
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.
Thank you!
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.
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.
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.
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
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.
Pingback: Bognár András (bognarandras) 's status on Thursday, 05-Nov-09 16:06:02 UTC - Identi.ca
I had exactly the same idea in my mind.
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.