Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 14 down vote favorite
1

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?

share|improve this question

6 Answers

up vote 16 down vote accepted

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 prioritizing speed of service and accessibility (in the broadest sense of the word).

share|improve this answer
1  
+1 Apple does this too in their menus in the OS and it's both very pleasant to the eye and fast. – rightfold Jul 15 '11 at 23:56
2  
Apple FADES/ANIMATES IN on their pop ups and notifications on OSX and iOS, although it is very quick. It it almost had to notice but it doesn't just pop up. – Matt Rockwell Jul 18 '11 at 13:10
@Matt How do you know it fades in? Is there any way to find out exactly how long the animation is? I'm not seeing it, but maybe it's just so quick I can't tell? – Patrick McElhaney Jul 18 '11 at 13:57
Try getting a text message in the iPhone (if you have one). The blue "bubble" that appears animates in or kind of grows in. – Matt Rockwell Jul 18 '11 at 14:11
I think the key here is fast animation. If its time is below 0.5 sec. (~0.3 sec aprox.) then it is fast enough to cognition senses (appears as popped up) but an eye (unconscious recognition) will recognize its transitioned behaviour. – Bartosz Rakowski Jul 28 '11 at 9:20
show 1 more comment

This post does not cite any references or sources. Please help improve this article by adding citations to reliable sources. Unsourced material may be challenged and removed.
up vote 8 down vote

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 with its movement but then they must wait for it to fully stop animating to scan it. So unless it happens in less than a second, its bad.

My suggestion: what ever transition you do make it happen fast, under 1 sec. (Unless your program is slow and you want to hide that, which in case distract them haha)

share|improve this answer
6  
Under 1 second might be too loose. I've found that 0.3 seconds is fast, yet not startling. I use that for all my animations. – JoJo Jul 16 '11 at 8:48
1  
I disagree that popping in is bad: as Rohan expresses below, we already have the user's attention, so I don't think an immediate response would be especially surprising. – Jimmy Breck-McKye Jul 16 '11 at 17:18
1  
@jojo I totally agree. I wrote under 1 sec as in 1 sec is the longest it should be. – jonshariat Jul 17 '11 at 5:24
3  
I agree with this. I don't know why but it is completely jarring to see the popup come up in my game. I'll see if putting something like a .3 makes a difference. If it does I'll come back and change the answer. – Mel Jul 17 '11 at 15:18
1  
+1 Right on Jon. There is a fine line between too long and just right. It should be quick enough that you don't really perceive it, but it just feels right. 0.3 seconds is perfect. – Matt Rockwell Jul 18 '11 at 13:05
show 2 more comments
up vote 7 down vote

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.

share|improve this answer
1  
Exactly. The user wants something, so why defer it? – Jimmy Breck-McKye Jul 16 '11 at 13:46
2  
Yes, the Apple HIG agrees with you: "The effect of a click should be immediate and obvious." – Patrick McElhaney Jul 18 '11 at 12:52
Apple is right, but immediate to them is "very fast", as they themselves use a .3 sec or so long animation in there iOS notification system. – Matt Rockwell Jul 18 '11 at 13:02
@Matt Is that in response to a click? – Patrick McElhaney Jul 18 '11 at 13:46
2  
Windows (for example) uses a default delay of 0.4s - No wonder then that Google shows 1.7 million results for 'Windows MenuShowDelay' (the registry entry that controls this delay) and it's listed among 'Top 10 things to do first on Windows'. I concede that a 150ms fade-in might take the edge off, while still seeming to appear 'instantly'. Windows has it way too long. [Interestingly, my Windows 7 'Start Menu' (left click) seems to appear 'instantly' which I don't have a problem with at all.] – Roger Attrill Jul 18 '11 at 14:04
show 1 more comment
up vote 3 down vote

I agree with Jonshariat, but would suggest between

200ms (just noticable)

and

700ms (not yet annoying)

share|improve this answer
up vote 2 down vote

If you are going to use a transition effect, it's not a bad idea to actually put some information in it; use the transition to show the user how they got there and how to get back. Fading doesn't really provide much information. Instead, you could have the new content grow over the old content, or have both new and old content slide off one edge and on the other, both in such a way that emphasizes the ui elements the user will use to navigate between the two screens.

All of this should be part of an overall spatial design of the application so that your users can use the visual queues to build a mental understanding of where they are and how each interaction will affect that. If your transitions don't do any of this, then they are just wasteful.

share|improve this answer
1  
Google+ does this when you click on a circle - the friend list 'grows' from the circle you clicked on, and 'shrinks' back into it. – Jon White Jul 19 '11 at 0:22
up vote 1 down vote

From your question i can gather that you are talking about the user triggering the action. The user clicks on the menu link and then it opens up.

I would suggest an appearance without any animation.

  • Animation can slow down the users browser experience why take a chance. I have often seen animation slowing down or hanging my Firefox or Chrome browsers.
  • Animation has the effect of something important happening. If you already have the user attention why do it again with a fade in.
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.