Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm looking for some examples and opinion of delaying the appearance of some elements in mainly static UI. I'm not talking about banners, which are affected with "banner blindness", but rather elements like in articles on 9to5mac.com, e.g. this one: http://9to5mac.com/2013/05/28/someone-got-punkd-ipad-maxi-rumor-is-hilariously-making-the-rounds/

enter image description here

As you can see, just seconds after the link is opened, a link "bounces in" on top, saying that there is a discussion below the article and encouraging people to join it.

I would like to know if this good or bad UX, both from user-centered and conversion-centered design. Are there any studies on this? Can you give me any more examples of such behavior?

share|improve this question
2  
In this case it is wrong: how can I join the conversation without having read the text? It should have been shown when I finish reading. It is better done in SE About pages (especially the last one, giving you "Informed" badge at the moment you finish reading) –  Voitcus May 29 '13 at 10:34
1  
Maybe... yet this is just an example. Maybe it could be used better, though telling user "Hey, there is a hot discussion below." may also encourage user to read the article. –  Dominik Oslizlo May 29 '13 at 10:43
add comment

3 Answers

up vote 3 down vote accepted

I would see it in the same light as any other animation that I might be using on an element. Be it a pulsating effect or a grow/shrink effect, or in this case a hide/show animation (coupled with a bounce effect).

The advantage of a perfectly implemented animations are plenty and quite useful in UX, as pointed out in this Smashing mag article - A New Mobile UX Design Material

Transitions and subtle motion-based animations are emerging as a new and compelling mobile design material, worthy of being learned and being used with efficiency and grace. The addition of movement to a mobile experience can provide clarity, information about context and, frankly, a dash of joy and fun.

That being said, if used unwisely, it can have the opposite effect.

However, too much animation or funky transitions can destroy a perfectly good mobile experience. This makes understanding the guiding principles behind the art of animation the best first step to artfully applying motion to your design work.

12 basic principles of animation as listed in the same article:

  • Squash and stretch
  • Anticipation
  • Staging
  • Straight ahead and pose-to-pose
  • Follow through and overlapping action
  • Slow in and out
  • Arcs
  • Secondary action
  • Timing
  • Exaggeration
  • Solid Drawing
  • Appeal

Ranging from subtle to right in your face animations, we can find good examples in across a range of well designed apps like listed in the article.

One of the subtle animations which I like is what android does with its wallpaper during the transitions b/w screens. The image also moves a tad bit giving the thing a nice smooth touch compared to the abrupt (and static) switch in iOS. Yahoo weather app has that and a blur effect to lend it a nice touch.

share|improve this answer
    
Thanks, nice read by the way. –  Dominik Oslizlo May 31 '13 at 20:55
    
@DominikOslizlo You're welcome :) –  rk. May 31 '13 at 20:58
add comment

In my opinion, if it is not too annoying, it is acceptable. As I wrote in my comment to the question, this should not make me think about many things at the moment, so "join the discussion" message can force me to read the text without caution because I'm thinking what a great discussion I am going to join in a minute.

This concerns all the web/application elements. If I'm reading/watching picture or video, I don't want to be disturbed, especially by "do you remember you can add me to your friends?" or something like that.

In my comment I gave a good example of Stack Exchange sites About pages. The next part is shown at the moment when I finish reading the previous. This is acceptable and nice. If it disturbs me, I will quickly learn to be "banner-blind".

There is much reason to delay GUI elements to make sure the user does not click/activate mistakenly. For example (again SE) the review page -- you can't click too quickly "I'm done" button. You should not be able to accept at first "Install new software?" question (like eg. Firefox does). In old Windows installers you could accept the licence agreement only if you've read all the terms (which was leading to click in the text box and press PageDown key until end, but I think the idea was good).

Sometimes it is done so, that eg. a web mail provider wants to show new options in his application. So he puts dialog boxes in different parts of the page and shows eg. "Using this button you can quickly mark the message important". I click "ok" and the next pop-up shows. I must move my mouse to the other edge of the screen and click it, I do this without reading, because I'm strongly thinking what an e-mail I want to write and I will forget it soon.

So in my opinion it is acceptable, but only if this will not alter user's attention from more important things.

share|improve this answer
add comment

This article quickly outlines some rules for using animations well: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511285.aspx

The short version of my opinion is that, from a user-centered point of view, the execution and purpose of the animation is everything. The example you showed doesn't really do it for me as it's only purpose seems to be to make me click it.

From a conversion-centered standpoint, humans are wired to detect motion (and sound) above all else. In the example you gave, that button stands out much more than it would have if it had stayed still.

share|improve this answer
add comment

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.