Animate various UI elements across KDE applications and Plasma to indicate status changes in a subtle and intuitive way
Open, WishlistPublic

Description

As part of improving the look and feel of the desktop, I propose that some elements which are stationary as of now, be animated to indicate what happened behind them. See the examples below. The first few are very similar to how the new notification bell icon is animated on new notification.

Password field wiggle on incorrect password like GNOME plans to do it, it could be faster and subtler, with a red label appearing below the fiend saying "Authentication Failed" or "Incorrect Password". The password dialog should not resize, and as soon as the user touches the field and changes a character or starts typing in it or clicks on the eye symbol, the warning should disappear.

Trash highlighting on item deletion in Dolphin: When a file or folder is moved to trash in Dolphin or file dialogs, the trash entry in the Places sidebar should draw attention for a second in some way. There are multiple ways to emphasize it.

a) (hard to implement and resource-hogging) The trashed item could start flying towards the trash, while shrinking and fading out at the same time.
b) The trash icon could be animated to open the lid for a short time, catch a piece of crumbled paper flying into it, then close the lid back.
c) The trash icon could wiggle subtly for a second.
d) The trash icon could smoothly become larger by 20-40% and then shrink back.
e) The trash icon could turn red for a second.
f) The trash enry text could become bold and/or red/blue for a second, with a smooth transition into and out of the emphasized state.
g) The trash entry could become highlighted with a light gray background for a second, with a smooth transition into and out of the highlighted state.

Informative animations in System Settings to communicate what certain functions do

Here I am thinking about a small animated frame in Night Color page for example, which would show a symbolic KDE desktop with a symbolic Sun. Shortly after the Sun turns into a Moon (indicating sunset), the desktop is tinted yellow indicating what Night Color does. In manual mode, the Sun/Moon could disappear. In "Custom time", it could show a clock. The yellow tint could respect the warmth setting.

Another example might be one-clik vs double-click selection. The symbolic frame could have some folders in it and a cursor. In one-click mode it clicks on the '+' selection button and the folder becomes selected. It clicks on the folder and the view turns into files. In double click mode, there could be one click which would select it, and then a double click would go into it. Each click could be represented by a bluish ripple spreading from the tip of the cursor.

Here are my suggestions for now. I will update this when I have more ideas of subtle animations like these. I think that small animations like these could help the desktop feel more responsive and snappy, while making it easier to use as these help the user intuitively recognize what is happening in their computer and what did they do.

kkoma created this task.Jan 10 2020, 2:39 PM
kkoma triaged this task as Wishlist priority.
kkoma updated the task description. (Show Details)Jan 10 2020, 2:52 PM

I believe anything that is as subtle as Firefox animations* is fine. Anything beyond must be killed (shredding flying moving scaling rotating etc etc).
Also to me, quality-designed static photos are better than animations to illustrate very simple concepts.

(*) Check also the "Bookmarked" animation and how you can't click the button while the animation is... animating.

kkoma added a comment.EditedJan 10 2020, 5:08 PM

I believe anything that is as subtle as Firefox animations* is fine. Anything beyond must be killed (shredding flying moving scaling rotating etc etc).

What do you think about the password wiggle seen on the gif? And something similar with the trash icon?
(The gif I uploaded looks messy because it is grabbed from YouTube while it is being demoed by a guy who loves to move the mouse around a lot and zoom in a lot in videos, and the "back 5 seconds" OSD of YouTube is visible in the screen capture when I press Left to rewatch the big moment. Please focus on the password fiels and ignore everything else.)

Also to me, quality-designed static photos are better than animations to illustrate very simple concepts.

I could imagine a 60° diagonal split in the middle, left side Day/off, right side Night/on. I don't know about the single vs double click though, it cannot be captured intuitively enough in one single photo.

(*) Check also the "Bookmarked" animation and how you can't click the button while the animation is... animating.

That is not an issue with the fact that it is animated. That is an issue with Firefox's implementation. And why would you want to click the button exactly in that 1s interval when it is animating? It becomes clickable again afterwards. It is 1 sec if not less!
If it is significantly more than 1 sec, clicking the Bookmark button in Firefox is the least of the problems. That means less than 5 FPS in a browser that is among the most well-optimized ones. In that case it is either time for a virus check/Firefox cleanup, or time for new hardware...

gikari removed a subscriber: gikari.Jan 10 2020, 5:18 PM

What do you think about the password wiggle seen on the gif? And something similar with the trash icon?
(The gif I uploaded looks messy because it is grabbed from YouTube while it is being demoed by a guy who loves to move the mouse around a lot and zoom in a lot in videos, and the "back 5 seconds" OSD of YouTube is visible in the screen capture when I press Left to rewatch the big moment. Please focus on the password fiels and ignore everything else.)

It's nice and sweet differently, but I think it's a bit much. Sometimes we need to think of some edge cases, where the user wants to finish his job quickly, and even waiting for the 1s wiggle to stop then start typing can ruin the experiance.
Instead we can (for example) make an animation on the border instead.
Either ways, we must have text telling the user what went wrong exactly (wrong password, error sending, server down, etc)

I could imagine a 60° diagonal split in the middle, left side Day/off, right side Night/on. I don't know about the single vs double click though, it cannot be captured intuitively enough in one single photo.

Well... tbh the question is: Is it really needed to tell the user what a single/double click will do by an image/animation? I mean we are not targeting babies here (and even that, babies nowadays use smart phones)
The next question is: Will we provide illustrations for each and every option in the settings? If not, then what is the criteria? Who could tell me that this is needed and that is not? Let's think about maintainability as well as contribution.

That is not an issue with the fact that it is animated. That is an issue with Firefox's implementation. And why would you want to click the button exactly in that 1s interval when it is animating? It becomes clickable again afterwards. It is 1 sec if not less!
If it is significantly more than 1 sec, clicking the Bookmark button in Firefox is the least of the problems. That means less than 5 FPS in a browser that is among the most well-optimized ones. In that case it is either time for a virus check/Firefox cleanup, or time for new hardware...


(This is the button, by the way)

I meant by noting to it the fact that we shouldn't have such a problem, whether people clicked it or not. If it's gonna take 1 FPS to regain clickability, why not. But 2-3 seconds and people could notice that, then it's a problem. It's important that animations don't brake users flow in any way, otherwise it will be a regression.

But I like the idea as a whole :)

In general I agree with you, as long as we keep it very subtle. I think the password wiggle is a great example (BTW the "you enter the wrong password" timeout is currently 3 seconds so this wouldn't slow down anything).

I don't think using animations as explicit instructional tools is a good idea though. I think they're best used to communicate where something is going to or coming from, or to make it less jarring when something just appears. Overusing animations will make people who are already kind of leery of them adopt a hardline position and hate all of them. :)

kkoma added a comment.Jan 11 2020, 9:39 AM

In general I agree with you, as long as we keep it very subtle. I think the password wiggle is a great example (BTW the "you enter the wrong password" timeout is currently 3 seconds so this wouldn't slow down anything).

I don't think using animations as explicit instructional tools is a good idea though. I think they're best used to communicate where something is going to or coming from, or to make it less jarring when something just appears. Overusing animations will make people who are already kind of leery of them adopt a hardline position and hate all of them. :)

OK, I could see the instructional animations being too much.
Plasma already does a great job of telling the user where things come from and where they go through animations, take for example the popups (Kickoff, system tray stuff, calendar, etc) sliding up from the panel whn appearing. It also does a great job of dawing attention subtly to something, like the notification bell, or windows that want attention by orange bar. The 2 examples I provided could add to this.
I didn't intend for these examples to be explicit feature requests, my intent was to provide examples that explain what I mean, so that it can be applied to other cases as well. I intended for the amazing people working on this, and anyone who reads this, to think about other cases where an animation would be beneficial after seeing my examples.

mglb removed a subscriber: mglb.Jan 11 2020, 10:25 AM