Tag Info

Hot answers tagged

211

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 ...


179

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. :)


35

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 ...


25

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. ...


16

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 ...


14

This is the most compact and intuitive way to present an indefinite progress. The key word is indefinite. source I can hardly imagine an indefinite linear solution. For example, a common progress bar in indeterminate mode looks a bit unclear: source BTW, circle is a very useful shape (just want to make your day better :) Round-robin - The ...


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.


12

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, ...


11

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 ...


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

Ideally, we'd always be able to give the user an estimate of the amount of time remaining. Visually, this is usually done through the infamous progress bar. However, certain activities such as waiting for a stream to buffer are difficult to estimate completion for. Most, if not all, progress bars have some sort of "indefinite" state available to programmers ...


9

I think casinos can be used as a good model for positively reinforcing a sense of achievement to the user. Specifically slot machines, as they make all types of pinging noises even when you are really losing money. This gives the user a false sense of achievement in a lot of cases but it can still be used as a good reference point. This video summarizes a ...


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

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

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/


8

Animation in its very basic form is used to signify change. Whether that's a change in relationship between elements or the status of an element itself, doesn't matter. However, this is when you look at animation in the context of animation vs no animation. If you take it out of that context, animation is like color, pattern, shape, etc. It's just another ...


7

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.


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 ...


7

First, I applaud anyone showing an interest in focusing on the interaction side of design. In corporate UX groups, I find that the one thing that often does fall through the cracks is the interaction design (often due to waterfall development processes). The UI may look stunning, the back end, tight and responsive, but then you put them together and things ...


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 ...


6

@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" ...


6

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 ...


6

Apple provides some good recommendations to developers regarding animation inside an interface. While this isn't necessarily directly related to website interface design, some of the basic principles still apply, and might be helpful in persuading your client to avoid going down the path of excessive animations. "In general, avoid using animation as the ...


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 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

Some locations where animation can be appropriate: Minimizing a panel to a specific location - animation helps teach the user where the minimized panel went and how to restore it. Auto-hiding stuff, for example a navigation bar - animation draws the user attention that something just disappeared and where it can be retrieved from. Updating an area that's ...


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

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.


5

Honestly it varies depending on how much information you have to display. Oracle's carousel displays a lot of it so ~12 seconds works for them. Hopefully that gives you an idea.



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