Design experience and demos in GTK and Clutter
Par Didier Roche le mardi 25 août 2009, 10:10 - Lien permanent
Well, coming back from vacation, I had a couple of hours to "kill" in the train.
I saw a few days ago the awesome work of Davyd Madeley on animating GTK+ and Clutter-Gtk from client-side-windows based on the first step from Alexander's Larson. Reading the comments some people say "this is sooooo cool, but totally unuseful".
That's the reason why I tried to figure out some pratical examples where some animations can teach about the component/widget the user is currently interacting with. Giving some blink effects so that people can understand a concept has already been successfull: take the example of the cube in compiz which has helped a bunch of GNU/Linux newcomers to understand what really a worspace is.
In my experience, the tab concept is quite difficult for some people like my mother, not having the habit of it (it has never come to her minds that it's like a traditional phone notebook). So, maybe some animations can help them to realize what it is.
I built Davyd's version of clutter-gtk and other stuffs and then, began to write some realistic animations on the GTK Notebook component. BEWARE: as the frame can't be currently reparented and as I need to have one actor by frame, the current implementation is very hackish and just there for some proof of concept (code here for all animations below).
The first one is just a fade in/fade out, very unobtrusive.
clutter gtk fading
Second is a little more noticeable, with the new frame coming and overlapping the previous one.
clutter gtk fade and show
Third is maybe the best in term of representation: we change the current "sheet" (the frame) and put the new one in front:
clutter gtk fade and move
The two last ones are more for fun. Not that they don't represent (even maybe better than the previous one) the real behavior of such a component, but they take a lot of space on the screen:
Rotating from the left:
clutter gtk rotating left
An finally, rotating from the bottom:
clutter gtk rotating bottom
So, what do you think about those, does that bring a better user feedback? Maybe we can explore that way to make a properly binding between clutter and GTK for making such things. With Clutter, GTK components can be more interactive and attractive.
Of course, we still need a default fallback for not forcing clutter, though.
Commentaires
Nice work! Of those five, the last two actually come closest to looking realistic, because they show the active tab flipping out of the way to reveal the newly-selected one. Real-life tabs (in a ring binder, for example) flip like those two; they don’t fade in and out like the other animations.
All five animations, however, have the big problem that they make the tab contents look as if it has broken off the tab itself. The tab and tab contents should look like a single piece of card during the animation, just as they do the rest of the time.
Another control you might try applying animation to is lists (tree views). When a new row appears in the middle of a list, the rows below it should slide down to make room, then the new one could fade in. And the reverse when a row is removed from a list: the removed row fades out, then the rows below it slide up to close the gap. You would need to do this at variable speed, so that no matter how many rows are waiting to be added or removed, the upcoming animation never takes more than about one second.
Very very cool!
This is a sure win for user experience (and Your Mother). I would love to see something like this land for every tab throughout the entire Linux desktop.
I like the "clutter gtk rotating bottom" and "clutter gtk rotating left" best.
Keep up the awesome work.
I like it. These things are very nice to experiment with. It pays off for the user if the interface behaves a bit more like a physical object; it moves, changes but it does not suddenly appear or disappear (as is normal now).
However, it is hard to implement. The whole object must be modeled for the physical interaction; small details like the tab labels here immediately call attention and you see that it's not really one object after all.
So that is the gtk challenge, to make whole physical-ish objects out of tabs in the tab notebook, even though they are not implemented that way.
I like the first one.
Second and third seem a bit confusing.
I think the other ones decrease usability (they use more screen space than the standard version).
I like eyecandy, but I think it should go almost un-noticed in an everyday use.
Fade effect looks nice. As of the others...somehow I can't imagine where to put them...well, the last one is definitely must have for a calendar widget/plugin/etc.
Still, when it comes to switching tabs I think the main thing user wants is performance. Imagine situation when you switch firefox tabs and wait 'till page is drawn.
On the other hand it could be nice to apply a bit different effect when you switch tab and expand window a bit.
Let's say you've got window with 2 tabs, first - simple settings, second - advanced. In the first one we use as little space as possible, and when we switch to the other we have to expand the window.
Right now window will just expand. What about drawing a border line from top left corner to the top right and bottom-left. Then the window contents would fade in...
It's hard for me to explain it in words, what I mean is that the window would expand smoothly instead of popping up big. Hope you know what I mean:) Somehow I think that this would match gnome smoothness better than 3d-switching tabs.
I like the last best (the others are harder to read with the fading, IMO), but I wouldn't show the text upside down. That's too much detail, and it would assume the paper was transparent (which generally it isn't). I also don't think they need to be so separate. Paper tends to flatten together, not stay fanned out. Just the fact that you see the cards flip down or up is enough to get the visualization and get the idea across. Keeping all 4 flipped-down sheets' content visible makes it too busy and space-consuming.
The problem with all of these animations is that the contents of each tab (the "Frames") are disconnected from the tabs themselves (the "Pages").
For example, in the last two examples, the flipping is meant to remind the user of physically flipping through a drawer of index cards or something, but the little tab handles don't flip along with everything else, which breaks the image.
I think any potential animation must connect the tab handle with its content, and it should also stay within the dialog's window border.
Thanks to all for your feedbacks.
@mtp, ulrik, Ryan : concerning moving tab linked to the content. As you probably know, the internal GTK notebook component isn't structured that way and so, this certainly required to change some stuff on the GTK library itself. But this is only technical stuff that can be fixed. My main concerns is that user wants to move quickly from one tab to another one, without moving the mouse from up to down in a big distance (tabs don't have to be far one from another). This can add some usage difficulties. Do you have any idea to avoid that?
Concerning the new animation ideas. I note it and see what I can do when I willl have some time :)
@Antoine Leclair: about being un-noticeable in a daily usage, that's why I propose just the fading in the first example.
@Mackenzie: your comments are true, I will fix this as well.
That's awesome. I hope it'll come as something easy to use soon.
Compiz transformed the desktop but couldn't do much in the windows, and this finishes the puzzle :)
Wow. Pretty impressive experimentation - something that we need far more of in our culture.
I don't know if it is easy to evaluate which one is 'better' without further defining the playing field. Making opinions on which is 'better' is completely pointless without that context.
Terrific work.
I just wanted to state my opinion. I think it's cool that you're thinking about this problem and that you're trying to utilize Clutter to solve it. However, I think all these animations suck, this is the kind of "eye candy" that is obnoxious. It just isn't subtle enough nor does it really fit.
The problem is, a screen is not a 3D interface and people don't view it as a 3D interface.
Anyways, not trying to be rude and I wish I could offer some suggestions so that it was more constructive. If I manage to think of anything I'll be sure to share it.
didrocks: I dont understand why the user wanting “to move quickly from one tab to another one, without moving the mouse from up to down in a big distance … can add some usage difficulties”. None of your animations involve making the tabs any further away from each other than they are now (and making the tabs part of the same animation as the tab contents wouldn’t change that at all). Can you be more specific?
Nathan: An animation in a polished theme would be quite a bit faster than the ones didrocks is demonstrating, and probably it would also be clipped so that no animation appeared outside the whole notebook area. So it would be much more subtle than what you see in the video. What’s important here is exercising the possibilities.
i like them almost all. Keep up the good work !