Tag Info

Hot answers tagged

7

You can use the "Model Human Processor" system to decide the length of an animation.* On average it takes a human 230 ms to visually perceive something, with a min/max of 70-700 ms across different people. That basically means that some people are faster at perceiving motion than others, and what some people can perceive in 100ms will take others else ...


5

As you mentioned its about the subconscious level, if the system or application can provide a perception that a system has changed state in a high speed that it almost seems instantaneous, it enhances the user experience since it gives a sense of continuity and also informs the user about the change. To quote this article from smashing magazine A good ...


5

Meaningful Transitions - Motion Graphics in the User Interface has some really nice examples of transitions along with detailed descriptions of how they can be used to enhance the user experience.


4

I recently covered this in a seminar on UIE: You have a window between 100ms to 1 second for transitions. At 100ms, animations happen so fast as to appear instantaneous, defeating their purpose. The sweet spot that shows up time after time in game and UI design is 250-300ms. For transitions that bounce or are elastic, 400-500ms lets the motion read ...


4

I guess there is no clear answer if there are standardised easings. The type of easing is depending on what additional information you want to provide on current interaction in the current context. So for example: Interaction is removing an item off screen. When the item is of high importance, it has more "weight" and is "more sticky" to remove. When ...


4

It's not particularly difficult to support a hover on desktop, but a click on mobile. The more important question is this: what are you hiding? As my friends at Hot Studio used to tell me (before Facebook ate them), you never want to make the user wait for the UI. As I subsequently tell others, the job of your interface is to inform, not entertain. Once ...


3

Changing chapter is a major operation, which should be handled with care. A swiping motion changing chapter is in a way careless, since users who accidentally makes the swiping action will be completely lost. Therefore I thing your best option is to use a standard hamburger menu containing the chapters and possibly subchapters as well. download bmml ...


2

There's quite a bit on this in Google's Material Design Guide. Amongst the guidelines: Don't: Linear motion feels mechanical. Accelerate objects swiftly and decelerate them slowly to avoid abrupt changes in velocity. When an object enters the frame, ensure that it's moving at its peak velocity. The android also has animation duration constants - ...


2

My (personal, largely unsourced) view is "as fast as possible while still communicating what you need". I almost always start with a default of 200ms then tweak, usually ending up faster. I can tell you from experience that it does vary for different types of transition: shorter animations work for smaller elements and/or small displacement. To animate a ...


2

I think this centers around knowing your audience. If your audience is going to be primarily Mac users then use that default, otherwise I would defer to Windows' standard. The reasons being: Something like 50% of users are Windows users compared to about 10% Mac (I could dig up the article later if you'd like) - even those who aren't are at least familiar ...


2

If its faster than the eye can see then I doubt we will be able to appreciate on an unconscious level. I think that transition is there as a backup for when systems are performing slower than normal and the user needs to be informed that a process/action is taking place.


2

I would say (from personal preferences) - make them as fast as possible, without being too fast so the user can't distinguish what happened. If, for example, a navigation bar is to slide in from the left side on a button click, make it as fast as possible, without losing the feeling of the menu sliding in, thus making it look like it just suddenly ...


2

"Does it vary widely for different kinds of transitions?" Yes. I think the key here is the impact the transition has on the usability of the interface. If the transition makes the user wait before they can continue with a common task, even a short transition can become very frustrating. For example, a 200ms transition that delays displaying the options ...


1

Please see Animate.css for a list of common animation names.


1

If the popup is only activated by the controls at the top of the screen then showing it at the top would make it easier for the user to click on buttons on the popup since the cursor is at the top of the screen. But if the popup is activated from different locations in your app than I would suggest placing it at the middle since the cursor will be closer to ...



Only top voted, non community-wiki answers of a minimum length are eligible