56
votes
Accepted
YouTube Premiere countdown animation
This image is know as test card (or test pattern) and was originally used as a TV test signal. Before 24/7 TV, it was typically shown when the regular broadcast ended. In its beginning it used to be ...
- 8,826
16
votes
YouTube Premiere countdown animation
Like the floppy disk icon commonly used to represent the feature of saving for most of the digital products, the animation visual you mentioned was the opening screen for channels to set up ...
- 1,788
9
votes
Accepted
Should the sun rise from left or right side?
I don't know where the sun rises in a screen animation, but I do understand that the movement of the sun indicates the passage of time.
Our generic indicator of the passage of time is the clock. The ...
- 20.4k
6
votes
Accepted
Pulsing to grab attention
I would be wary of having something pulse on the screen with no way to make it stop. This kind of animation can be very distracting. I would caution you to not "annoy" the user into signing in.
In a ...
- 19.6k
6
votes
Accepted
Why are websites so poor in terms of transition & animation compared to native apps?
There are a lot of assumptions here and a lot of reasons on why, I'll try to break it down:
It's a historic thing
Animations as we know today, from complex Bezier-smoothed transitions to dialog pops ...
- 246
6
votes
Mobile ui design - Scrolling effect to hide navbar and show it on scroll up
This types of NavBars are known as Pit bars according to this answer.
- 71
5
votes
Accepted
How long should a loading spinner take to do one rotation?
There are some comments on the question which are quite telling - some people can get stressed or anxious when they have difficulty following the motion of an animation or sequence.
Yes, there is ...
- 71.3k
5
votes
Optimal duration for animating transitions
According to Google's Material Design guidelines:
Larger animations on mobile devices are 300-400ms long. Smaller
animations can be as short as 150-200ms. Animations longer or shorter
than ...
- 131
4
votes
Should the sun rise from left or right side?
I just want to point out one big thing with your line of reasoning;
The sun rises from the east, on the vast majority of world maps, that's to the right.
The vast majority of people live in the ...
- 8,379
4
votes
Accepted
What are main disadvantages of decorative animation and when it is a good use and when it is not?
I think above all animation should have purpose and style.
Some websites have gone overboard and added all the parallax animation they could fit on their website. Elements that swoop in from the right ...
- 9,414
3
votes
how frequently should numbers refresh on an exercise machine?
Why not let the user decided?
If it's technically possible you could provide a slider (I'd do a sketch if I could on this laptop of a turtle at one end and a hare at the other) for the user to pick ...
- 1,895
3
votes
Card-swipe based interface for macOS: Human Interface Guidelines
The problem you might face is not mainly in the transition between states (although it might also be) but in the way the user interacts with the app.
In non-touch devices, drag is used to change the ...
- 16.9k
3
votes
Why are websites so poor in terms of transition & animation compared to native apps?
I'll admit up-front that I'm a bit of a "Luddite" as regards web-design: I generally dislike animations, and mostly prefer clean, simple designs. Having said that, I'll try to be as objective as ...
- 2,665
3
votes
What is the keyword for this effect: an animated person walks out from the bottom right corner of a website?
"3D Talking Avatar" seems to be the closest phrase that matches what I think you're looking for.
From a UX perspective, they probably went out of style for a reason; avatars give the ...
- 12.9k
2
votes
Accepted
Can using animation positively lengthen the user journey
Nielsen and Norman have an exhaustive article on the use of animations -- I suggest you read that.
There has been research done on loading screens and animations. For example, one study found that
...
- 2,814
2
votes
Accepted
MockUps - Prototyping UI using After Effects. Is it worth it?
Here's my two cents on the matter. I agree with you that prototyping is necessary in some cases (wow-ing clients, expressing the behavioral details of an app, etc). In my experience, prototyping has ...
- 68
2
votes
Best practice for prototyping and making motion animations for iOS and android
Depending on the complexity of your animations, and the methods in which you used to create them, you'd be surprised as to how easy hand off can be.
Since it's just micro interactions and a loading ...
- 21
2
votes
Accepted
Microinteraction and transition are same?
Microinteractions: Small "delightful" elements that are part of a whole experience.
Note: Microinteractions often use transitions to show the interaction between the user and the system.
Example: ...
- 1,751
2
votes
What is a good duration time for UI animations?
According to this article - How Fast Should Your UI Animations Be? your start point is within a reasonable starting range.
200ms to 500ms is a good range to start with for interface animations.
You ...
- 11.7k
2
votes
Accepted
Displaying acronyms
This is a great question.
As you have noted, the full name in the navbar area is going to be tenuous. You should indeed put the acronym on display for the majority of the user's browsing time.
Make ...
- 176
2
votes
Progress indicator position in iOS
Considering left-to-right mentality, I think, the difference is this:
If it’s to the left, the user will read it as “we’re working, and here’s why...” - they’ll “read” the indicator first and then, ...
- 2,628
2
votes
What makes Reverse scrolling a sign of Bad UI?
I think the key term is direct manipulation.
There are two ways to look around something that is too big to fit in your fixed sight:
Moving surface, stationary eye
Paper
Overhead projector
use ...
- 121
2
votes
Accepted
Use top-looking arrow when navigate between screens
The up/down arrow is not common in search field. If you want to use an icon inside the search field you can use an "X" that means close. Or, if the panel slide up from bottom and the back page is ...
- 963
2
votes
Accepted
Validation of a text file: how to best show the inline editor?
Try visually mapping errors to code as adjacent to each other as possible. Allow filtering and selection to isolate code snippets.
Try a split pane view
Right now you have a lot of up/down scrolling ...
- 25k
2
votes
What should happen when deleting a table?
Although I can agree on the fact that animations might give your users more context and feedback on what is happening, I don't think the type of animation matters.
All options that you name are ...
- 9,414
2
votes
Is it a good choice to use a more complex animation for loadings?
It sounds like your loading indicator matches your theme, your users love it, and it's doing its job as a loader – these are clues that it's good UX. If it provides enough positive distraction, it ...
- 12.9k
2
votes
Accepted
Should we animate tab switching?
Animation can be helpful in showing users that something has changed and to bring attention to an element on the page. It can, like you said, reduce the "jump cut" effect.
It shouldn't be ...
- 12.9k
2
votes
Removing an item from Favorites
There are 2 ways you can slow down the user at this point.
One is the sanity check that you've described: when the user attempts a destructive, non-reversible operation, they get some sort of ...
- 14.2k
1
vote
Should the sun rise from left or right side?
I would vote neither a) or b).
The sun should move from left to right for locales that use LTR writing systems. This is naturally the direction of forward progress (c.f. side scrolling video games, ...
- 201
1
vote
Should the sun rise from left or right side?
For the people sun appears on the sky in "Analema" ellipsis shape, not linear direction right > left, and perception of sun movement is not connected directly to East and West, than to other factors ...
- 2,701
Only top scored, non community-wiki answers of a minimum length are eligible