By the way, since we are trying to mockup animations in the future. Do you guys know of good/simple animation programs that can be used here?

anditosan wrote:By the way, since we are trying to mockup animations in the future. Do you guys know of good/simple animation programs that can be used here?

The Codepen stuff that I linked to is a good platform for testing out animation ideas. There's probably something simpler, but CSS3 animations are very easy to code.

anditosan wrote:By the way, since we are trying to mockup animations in the future. Do you guys know of good/simple animation programs that can be used here?

I can do animations with Axure. Omnigraffle has this feature too, I guess.

I tend to stick to Synfig Studio which is, granted, a bit of an overkill in this situation but it's something I enjoy using.

I tried making an idea of what I would expect from some animations. Notice, however, that these videos are slowed down a bit. They are not as fast I as I intended them to be just to show the idea of movement more clearly. I would expect, for example, any menus that go on the screen to feel as if "they come from somewhere" or "lead somewhere." Just because it gives a visual cue to the person using it about location and activation areas.

KDE Popup Animation Idea - https://www.youtube.com/watch?v=ipGX7mf3p9Q
KDE Activities Animation Idea - https://www.youtube.com/watch?v=LVOLRMHsfZg
KDE Plasmoids Idea - https://www.youtube.com/watch?v=uh4TiGyTBHc

Few things I think we should take a long hard look at:

• Animations for hover effects - almost always make the system seem less responsive.
• Animations that gate access to interactive elements - appearance animations - similar; these must either not be there, or be very quick, consistent and predictable.
• Beautiful, very aggressive easing curves.
• Motion animations should help map visual elements to a spatial interaction model - as such they should avoid concepts that break the consistency of that model or would require deep alterations to the mechanics of spacetime.

I collected all ideas into a preliminary HIG page: https://techbase.kde.org/Projects/Usabi ... Animations

The page starts with clarification on the topic and some general advices. At the second, 'best practice' part I added a table for possible animations by control and event. I colored the background of those that make sense in green. What do you think?

The final HIG should contain of the general advices and only real examples of animations.

I wanted to add to this conversation by showing an animation idea for the login screen.

https://www.youtube.com/watch?v=r-YJZSSneWc

Enjoy!

anditosan wrote:I wanted to add to this conversation by showing an animation idea for the login screen.

https://www.youtube.com/watch?v=r-YJZSSneWc

Enjoy!

I think that looks quite nice. I never really like the overlapping in the current animation. However, I'm not entirely sold on the bouncy-effect in your version either.

Sogatori wrote:

anditosan wrote:I wanted to add to this conversation by showing an animation idea for the login screen.

https://www.youtube.com/watch?v=r-YJZSSneWc

Enjoy!

I think that looks quite nice. I never really like the overlapping in the current animation. However, I'm not entirely sold on the bouncy-effect in your version either.

Yeah, I noticed that. It was "not" the intention to have the animation show a bounce.

jensreuterberg wrote:Well there is a trick to it which is essentially - if something happens "Once per day" the animation can be over two seconds,

I completely disagree with that. If I do something every day, and every day it makes me wait for 2 seconds while something fancy happens before I can do it, then it is still annoying me every day, even though only once. Annoying once a day is just less bad than annoying several times a day, it's not ok.

After seeing those mockups, I just remembered another thing about responsiveness.
On a slow computer or one with all of its resources occupied, laggy animations look very cheap and annoying. Wouldn't it be best to find a way to disable animations on slower systems, or at least find a way to reduce their impact on slower systems? Most would rather see no animation than 4 frames of one.

It looks like there is strong consensus on following three main points at what animations should be:

• non-distracting
• used only for assisting visual cues
• snappy

Otherwise don't use at all!

I took a look around packages I have on 4.13.3 installation with animation speed "fast" and here are some annoyances:

• resizing board in Knigths produces overblown animation with tiles and pieces flying
• Kalzium does the same overblown animation as above when changing element table
• all Kickoff animations really
• resizing Dolphin window with lot of icons produces kind of shift effect where icons change place a bit with annoying delay to fill area better
• hiding collection in Amarok provides long-winding drawer effect

Biggest annoyance with animations is the present windows effect. Any opened windows snap into a grid formation, but the animation used for moving them seems too fast and jerky. It would be better to have the application fade in or something, it would be cleaner. Then, one the windows are in a grid, there are two animations used for when the mouse hovers over a window, the animation is brightened, and the animation resizes. One animation is good enough and I think the slight brightness change is the better one.

enoop wrote:Biggest annoyance with animations is the present windows effect. Any opened windows snap into a grid formation, but the animation used for moving them seems too fast and jerky. It would be better to have the application fade in or something, it would be cleaner. Then, one the windows are in a grid, there are two animations used for when the mouse hovers over a window, the animation is brightened, and the animation resizes. One animation is good enough and I think the slight brightness change is the better one.

I think I am understanding what you mean, would you be able to produce an animation that shows your what you are thinking about?