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?
Add a comment
|
6 Answers
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).
answered Jul 15, 2011 at 22:12
-
1+1 Apple does this too in their menus in the OS and it's both very pleasant to the eye and fast.– user371Jul 15, 2011 at 23:56
-
3Apple 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. Jul 18, 2011 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? Jul 18, 2011 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. Jul 18, 2011 at 14:11
-
1iOS utilizes implicit animations almost everywhere. The default transition time is 0.3 seconds, so I would argue that transitions of that nature have little to no negative impact on perceived UI speed. What's important is how quickly a UI change begins. I personally don't tolerate things popping in. It's hard to sometimes tell what just happened in the UI, especially if it's something subtle like a button becoming disabled. Transitional animations can and do offer important usability affordances.– user10242Jul 9, 2012 at 16:44
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)
answered Jul 16, 2011 at 2:15
-
6Under 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.– JoJoJul 16, 2011 at 8:48
-
1I 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. Jul 16, 2011 at 17:18
-
1@jojo I totally agree. I wrote under 1 sec as in 1 sec is the longest it should be. Jul 17, 2011 at 5:24
-
3I 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.– MelJul 17, 2011 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. Jul 18, 2011 at 13:05
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.
answered Jul 16, 2011 at 7:07
-
1
-
2Yes, the Apple HIG agrees with you: "The effect of a click should be immediate and obvious." Jul 18, 2011 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. Jul 18, 2011 at 13:02
-
-
2Windows (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.] Jul 18, 2011 at 14:04
I agree with Jonshariat, but would suggest between
200ms (just noticable)
and
700ms (not yet annoying)
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.
answered Jul 17, 2011 at 22:51
-
1Google+ does this when you click on a circle - the friend list 'grows' from the circle you clicked on, and 'shrinks' back into it. Jul 19, 2011 at 0:22
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.
