movement of elements on a screen that can help solidify their relationship, create a visual appeal or rearrange/remove controls or information presented visually

learn more… | top users | synonyms

219
votes
4answers
16k views

Why do progress bars animate backwards?

Gmail's new loading bar drew my attention to this today: The colored pattern inside the bar animates from right to left. The Mac OS progress bars do the same: Is there a reason for this? If I ...
35
votes
14answers
5k views

Slow down job for better progress animation

So, I am in a situation where I am developing an internal application that executes a list of many task items, some of which have multiple steps. For each task item, I also have a progress bar. Well, ...
15
votes
6answers
2k views

Blinking, bouncing and flashing elements

I'm responsible for the UI/UX in a software development company. During my absence, some developers decided to implement a "bounce" effect on a button of a website that they think should have more ...
14
votes
6answers
603 views

What is more pleasing to the eye fade in or suddently appear

I have a pop up menu. What is said to be easier on the users' eyes? Should I just have it appear immediately using visibility = true or should I have it fade in using opacity animation?
13
votes
6answers
756 views

Why are nested elements scrolled to the opposite direction?

My question is about scrolling conventions, and spatial scroll conventions in general (even here it's only horizontal, but same applies for vertical scrolling). Looking at the below mockup, why is it ...
13
votes
6answers
2k views

If you can't improve loading time, is distracting the user a good technique?

On several implementations I've worked with, loading times can be as high as four seconds for the start page. When all reasonable options are done, is it possible to distract the user to make the ...
13
votes
8answers
5k views

Why are spinning animations typically used for loading sequences?

This question is asking about why spinning animations tend to used as "conventional" indefinite loading animations - it is not asking why a particular software/app/OS uses a spinner. Also the ...
12
votes
4answers
5k views

How fast should a banner rotate on a website?

Are there any studies or published de-facto standards on how fast the slides of a carousel should change on the homepage of a website? Here are some examples of sites that incorporate carousels at ...
11
votes
11answers
2k views

How can animations be depicted in wireframes effectively?

I came across a question on Quora about jQuery animations in wireframes, which got me thinking about the general conventions in depicting any animation in static wireframes. I've been using either ...
11
votes
9answers
2k views

How and when should you use animation in your application?

Sometimes applications can benefit from animations in the UI. What tips do you have for determining when you should use animation? How can you maximize the usefulness of animations and avoid ...
8
votes
6answers
383 views

Animated scroll vs jump for a “back to top” button

I am looking at implementing a back to top button for documentation pages that tend to get very long. The button will be shown in a fixed position at the bottom right of the screen. My question is: ...
8
votes
3answers
955 views

Does a “faster” loading indicator make website/software seem faster?

While checking how a site works on Internet Explorer, I noticed that the page loading indicator spins a lot faster than in other browsers. Also, the iPhone uses a noticeably slower activity indicator ...
7
votes
3answers
147 views

Should the input for a new item of a wishlist be at the top or the bottom of that list?

I was working on an idea for a public wishlist web app that a user will be able to manage: "New item" is an input field that gets focus by default. Right now when I enter "5th Item" and press Enter ...
7
votes
1answer
337 views

How to define interactions and animations in an extensible way?

The whole question, summarised for answerability: How would it be best for a designer to define really complex UIs? Would it be a good approach to map how the mental creative process works, into ...
6
votes
4answers
138 views

How should cancelled animations behave?

How should an animation behave when it is cancelled/changed? For example, let's say I have a button in my application that triggers the visibility of a tool panel. When the panel is shown, an ...
6
votes
3answers
687 views

Should animations pause on mouseover?

Should animations pause on mouseover? I have my opinion, but I was wondering if there was any evidence to support/refute the idea that users expect this to happen. EDIT: I'm specifically concerned ...
5
votes
4answers
410 views

What's this called and how does it fare from a UI perspective?

The Facts About Coventry website has a flash plugin app for navigation of data (bottom half of the page). It's a big circle where you can hover over the icons to get a description of the category and ...
5
votes
3answers
240 views

Is perpetually animating a button an acceptable method for indicating that it has been activated?

I work alongside a client and another designer. We currently have menus that open via button taps. After tapping the buttons, the client and other designer have decided that said buttons should ...
5
votes
4answers
265 views

Will animated feedback be annoying or nice?

I'm developing a website called Fablelane which allows you to write your own stories and have others contribute outcomes or "chunks" to that story. Right now (if you go to the website), there's an ...
5
votes
2answers
712 views

Guidelines/best practices for CSS hover animations in web UI

What, if any, are the accepted guidelines and/or best practices for using CSS animated transitions on hover in a web-based user interface? When does it start to simply become annoying and ...
4
votes
5answers
345 views

Optimal duration for animating transitions

Is there an optimal duration for animating subtle transition effects? 150-250ms usually seems about right to me for most effects. Is there any research to confirm that this is good for most users or ...
4
votes
5answers
237 views

Is there any underlying rule/paradigm for UI that prefers LACK of animation, as in a game?

There are plenty of questions/answers discussing when/where to optionally include animation in an app. Now it comes to the point, there is almost ubiquitous animation all over media. Even a few ...
4
votes
4answers
2k views

Question for UI/UX designers re: prototyping UI animation

I am a motion graphics designer (previously: motion graphics for TV, games, etc), but more recently, I worked on prototyping UI motion for an app - which I really enjoyed! I have mainly used After ...
4
votes
5answers
462 views

What is this failed login visual shake feedback properly called? Is it beneficial?

Wordpress, Coursera and others have the "shake fail" feedback (see Coursera gif below). Is there a name for this type of mimicry of a physical action (head shaking "no")? Is there any evidence of ...
4
votes
2answers
561 views

When is it appropriate to use fading animated messages for feedback and notification.

To clarify: these are messages (text or symbols) that appear right at the point of interaction, and then float away and fade out. You see this kind of animation when adding people to your Circle in ...
3
votes
1answer
143 views

How can I choose positively reinforcing sounds/animations?

I'm building a todo-list app. Anybody working with todo-lists know there is a strong sense of achievement when ticking that box and watching the item disappear from the list. I want to reinforce that ...
3
votes
3answers
208 views

Is it manipulative to animate call-to-action buttons on a webpage to encourage a specific action?

Carousels and other animated banners on websites (for example promoting special offers) are supposedly bad for UX as the sliding animation draws the users' eye from whatever it was they were ...
3
votes
1answer
157 views

Loading GIFs, too many or too few

what are your opinions on loading gifs or spinners? I have some pages on my site that take a second to load up, and I am tempted to have a translucent overlay and spinner, but it looks irritating I ...
3
votes
2answers
426 views

Clockwise or counter-clockwise loading animation

Is there any rule for using CW or CCW loading animation? Does CCW animation means "slow" or "rollback" or something? Or maybe CW direction means going forward, straight direction etc? UPDATE: due ...
3
votes
4answers
873 views

Expandable Card Interaction

I'm trying to create a card with some text/images inside, which can expand down and expose more content if a user clicks on the expand button (a huge down arrow). The natural way to do this obviously ...
3
votes
1answer
491 views

What examples are there of animated toolbar icons? [closed]

Are there applications (including web applications) that have animated toobar icons? I would imagine they would only animate on hover/mouse over, but I'd be interested to show someone this so we can ...
3
votes
1answer
110 views

Rich interaction experience in forms

The guys say that by adding their animation plugin the experience is improved: https://medium.com/ui-ux-articles/3d1b0a9b810e Now, of course it is prettier, but what about the whole theory of ...
3
votes
1answer
183 views

Office 2013 smooth cursor while typing

The cursor movement has been animated in the Office 2013. (I'm not sure if it affects some other applications too.) Basically the cursor moves smoothly as you type now letters. Apparently this is ...
2
votes
2answers
1k views

What software is used to create GUI concept videos?

If I was to create a video of a GUI concept video with animations, what software is best suited for that? The focus would be applications for mobile devices or screens integrated in homes, cars etc. ...
2
votes
2answers
252 views

Overuse of JQuery animation; hiding text behind (animated) headers - how to make a case against it?

A client I'm working with wants to implement a "peekaboo" block where information is revealed when a client rolls over headers, (basically an image-block JQuery accordion) as shown here: (in the ...
2
votes
2answers
197 views

Fast / numereous animations. Possible Epilepsy / Seizures from website game?

I'm building a pretty simple Question and Answer game. It's in the beginning stages now, but I would like to know what your thoughts are on the background animation I currently have. 1) Is there too ...
2
votes
1answer
520 views

Creating a transition pattern library

I am looking to compile and apply a list of transitions/animations across a web application. Does anyone have any good examples of any existing transition pattern libraries out there? I know the ...
2
votes
2answers
60 views

When do hover animations become a distraction to users?

I'll often visit beautiful websites with hover animations on links that become distracting to me, and I've noticed that I just play around with the animation and don't even end up clicking the link. ...
2
votes
1answer
149 views

Choosing which easing to use in interactions? Any Standard?

I've researched the web a lot for this and have come up with a very small list. Almost all iOS Apps and most current Web Apps use some form of easing or another. Interactions & Transitions are ...
2
votes
2answers
133 views

Animation on Handheld: How Much is Too Much?

In web applications in the 1990s, it was pretty common to see animation (animated gifs, marquees, etc.) -- since then, the industry has pretty much established this as a no-no for (professional) ...
2
votes
3answers
512 views

Does including background animation or motion in an application increase user engagement?

I'm interested why top game companies put a lot of "background" animations in their games - has it been demonstrated to increase user engagement? Does it take longer for a user to get bored of a game ...
2
votes
2answers
252 views

Floating animated message vs. confirmation message. When to use each?

Some pre-clarifications: By floating animated messages I mean the Firefox style messages usually appearing bottom right of the window, for example, when a file downloaded successfully. By ...
2
votes
7answers
378 views

Deliverables: Animated Movies - what to do when a clickable wireframe is not enough?

Since I started working for a think tank I am often confronted with the problem that my standard set of deliverables are not sufficient to describe a vision. I often need to highlight the context ...
2
votes
1answer
128 views

How to indicate an element is loading without animation?

I'm working on a product detail page that contains a 'Table of Contents'. Due to some not so great API work, I'm in a weird situation. It takes between 10-20 seconds for the app to check if there is ...
2
votes
1answer
114 views

With respect to creating circles, what are the pros and cons of the following methods? [closed]

I am making a website in which the home page will have 5 circles each linking to a category of items (e.g. cities, phones, etc.). The user will click on circle to go to the specific page for that ...
1
vote
4answers
199 views

Are Animated Images considered bad UX?

I read that animated gifs are making a come back but when i saw this on a private business website to get attention to a new feature, put me off. Copy of the image : ...
1
vote
2answers
158 views

How fast should a user-initiated horizontal scroll be?

I have a bunch of athletes that have their faces linking to their bios. On desktop computers where users don't have the ability to touch-swipe, arrows take over the job. Click here for a working ...
1
vote
2answers
55 views

How to best spec animations/transitions for engineering team handoff

I have an app prototype built using Pixate which demonstrates the entire flow of the app I am working on. There are transitions between views and animations for certain elements on the page. I have ...
1
vote
1answer
142 views

Usage of animated buttons and effects on user experience

I see more and more animated buttons in service oriented web applications, especially in registration and completing an action. In the literature of persuasive psychology, moving objects are used for ...
1
vote
1answer
316 views

Preloaders for Web Pages?

I've been debating if I should add a preloader to my page that hides all of the page's content until it's loaded. Once it's loaded, it fades out a full-screen overlay to reveal the site. Is that delay ...