Hot answers tagged animation
170
Studies have shown it looks faster and in UX perception is everything ;)
A study (PDF)[1] demonstrates that animations can increase the perceived speed of a download by up to 11% over a bar that is not animated. Having a reverse-animated background as in the Gmail loading bar, or having the background pulse faster as the bar nears completion, both create ...
114
This took forever to make using Image Ready. lol
Going forward:
Going backward:
When the spiral is going against the bar direction, it does visually exagerate the speed of the bar movement.
The bars are pretty close to each other, so hide one with your palm and look only one at time. :)
34
This is an assumption, but it's likely because it makes the progress bar appear to fill more rapidly.
This effect is achieved because the right edge of the bar, the consequential part, is moving in the opposite direction from the animation, thereby making the increments that bar edge moves appear larger than they do relative to the box containing the ...
24
In my book, all animations of control elements must be triggered only by user actions. For example, in large forms or full-screen workflows animations can be used as additional visual cues for the next step once something has been completed. If This Than That (ifttt.com) is a good example here - the page auto-scrolls to the next step when you click Next.
...
15
Users hate slow UIs, just as they hate slowly loading websites. Pop in, fade out.
Your users are not here to admire your application. It's just a tool to help them achieve a goal, and when that's done, it doesn't matter how pretty the app - they're out of there. Now, that doesn't mean you should strive for dull, grey, boxy interfaces. But it does mean ...
13
The conceptual model isn't "left arrow moves the elements left"; it's "left arrow takes me to the element on the left".
With indirect manipulation like this, it's probably fair to assume that users are thinking in terms of the content they're consuming rather than the spatial projection of the UI.
10
In addition to the perceived-speed reason offered by the other answers, this interior-pattern animation also makes sense at another logical/analogical level.
The example progress bars are animating in two ways: (1) the area representing progress is widening, with its right-edge moving to the right; and (2) the colored pattern inside is shifting, ...
10
There is very simple logic behind it and that is difference of perspective. For example Make a frame of your fingers and like shown in the image below and turn your "frame" towards the right and see what happens.
you move your frame right and your vision moves left.
you move your frame left and your vision moves right.
Now you have to pic one of the ...
9
I'm assuming this question was incited by: How and when should you use animation in your application?
I definitely do believe that if loading time cannot be improved, distraction is a good technique.
Examples:
github.com , as well as the popularity of having interlaced .png's. Maybe the term "distracting" would only apply to stuff sub 750ms, and after ...
8
Wireframes are a terrible place to try to describe animation. The closest you can get is something abstract like interactive sketching notation, but that requires the viewer of the wireframe to understand the notation style and it can only communicate very limited transitions.
Use a wireframe to outline the structure of a page. Treat it like a sketch, even ...
8
Why just popping in is bad: Nothing in the real world does that and thus it is disorienting for users. If something in the natural moved that fast and stopped right in front of us it would be startling, haha. The user must take a few moments to reorient themselves and return to scanning the new window.
Why fading in is bad: It catches the users attention ...
8
Option A won't work. It's a slow response, and users might even think that their command wasn't received at all. Options B and C are actually quite similar.
What you're trying to do is give the user an immediate response (as in B), while preserving the rules of physics (option C). In the physical world, slowing down when approaching a target has to do with ...
8
It's called a Carousel. You can read more about it at
http://ui-patterns.com/patterns/Carousel
http://developer.yahoo.com/ypatterns/selection/carousel.html
http://www.androidpatterns.com/uap_pattern/carousel
See some examples here:
http://www.uipattern.com/carousel-design-examples/
7
It's not just for fun - it's actually a really nice mechanism that attaches a delightful kind of human character to the website and stops the computer from being a box attached to a wire.
Yes, it's like the shaking of the head as if to say 'no, try again', but it's also like childhood sketching toys where it would clear the display if you shake it side to ...
6
It's a popup. The user asked for it - so give it to them - right away. Don't slowly hold your hand out to give it to them, it's just annoying.
The user knows what to expect, and the faster it popups up the faster the app will feel.
There is absolutely no need for noticeably fading-in popups.
6
Yes
Regarding sliders/carousels I say most definitely yes.
Sliders are Lists of Information
A slider (e.g., like slidejs) is really a list, or array, of information elements. In this case the elements usually consist of a full-bleed background image possibly containing a title, some descriptive copy, and possibly a link/call-to-action. The idea is you ...
5
As JoJo said in the comments, there is something fundamentally wrong if you need to draw your users attention to a button that link to the help system. The fact that you have a prominent button - not just a link - to help pages is an indication of problems in the user experience, and the fact that someone feels it needs to be more prominent - jiggling like a ...
5
If stakeholders are having difficulty understanding a particular interaction approach and you don't have time or resources to make a prototype, one short-cut I've seen is to use an example of the interaction "in the wild" if you can find one. (Ethan Marcotte's responsive web design, for example.) Obviously you must be clear that what you're referring to is ...
5
Generally animation should be used for these purposes:
To draw the user's attention to something that's happening but might otherwise go unnoticed
To provide feedback about the result of a user action. As an example, animation can highlight that a message was successfully sent, another great use would be when it failed to send.
To illustrate to a real ...
5
As Marcos Ciarrocchi correctly pointed out,what users are more concerned about is the perceived time which it takes for your site or app to load than the actual time . To quote this interesting article which states that users are more concerned about how well and how quickly they can get a task then then worry about the initial load:
When we began our ...
4
I mostly agree with dnbrv, but I think perhaps there is a place for un-triggered animation if the personality of the product is "alive", or frenetic and uncontrolled. You might have a next page button in an animated children's book that looks like it's breathing or twitching if it's appropriate to the scene, for instance, or maybe on a site for a kids' game ...
4
I've come across this numerous times, and I can certainly tell you what NOT to do - if you're creating a static or spec prototype, it's generally not worth to include any animation, expecially if the file will function as a basis for development. Not only will it confuse the programmers, it makes it almost impossible to use the file as a basis for ...
4
The best solution I can think of would be Keynote/PowerPoint. Keynote is especially well-suited for this task because its animation options are very comprehensive and you can export to a QuickTime/H.264 video including animations, transitions, etc.
The alternative is to simply screen record mockups you've put together in HTML or some other mockup tool using ...
4
@Denis is quite correct. The only thing I'd add is that a simple way to see what speed you should rotate is to read all the content on each panel out loud (because this forces you not to go too fast), and time how long that takes. Add a little time, and set that as your speed. EDIT @Rob suggests in the comments below that you take 2.5 times the "read-aloud" ...
4
The users really care only about the perceived time, which is not often the same as the actual loading time.
In that sense "distractions" are just another form of feedback, just like the progress bars and loading animations, but they reduce the perceived time to load. The Github example is really good and if you take a closer look you'll see that in the end ...
3
I understand you look for a mock up tool that produces an animated result. Mocking in that high level is rare, as in most cases it takes too much time and normal, "still" wireframing does the most important job anyway: providing something to point at while explaining.
But, I got three favs, if I really want my peeps to see how it animates:
Flash,
...
3
At very least make it stop bouncing around after the user has clicked on it once. It gives users the chance to stop it if it is a distraction to them.
Although, I can't imagine anything in the help content being so important that you would need everyone to click on it. If there is something that everyone needs to read, why not just put it right on the ...
3
I would think B is the option to go with. By clicking again the user has effectively said, "Don't do that", so there's no reason to decelerate.
With regards the timing of the slide out animation, I think proportional timing will feel the smoothest - humans are remarkably good at getting a gut-level feel for when the timing is right or wrong, and ...
3
There is a paper about the influence different progress bar animations on the perceived duration of a task:
http://chrisharrison.net/projects/progressbars/ProgBarHarrison.pdf
Our results suggest that users are most willing to
tolerate negative progress behavior (e.g., stalls and inconsistent
progress) at the beginning of an operation. Hence,
...
3
Animation of data showing the change over time is very useful. It shows another dimension of the data in a way that's intuitive: the change in data (over time) is displayed as a change in the graph (over time).
Adding a 3rd dimension to a 2D graph can be done without animation (see 3D graphs) but it becomes much more cluttered and takes more effort or ...
Only top voted, non community-wiki answers of a minimum length are eligible
