4

On more and more sites now I'm seeing what I'm calling "slide out teasers" appearing at the bottom of pages. What happens is I'm scrolling down the page and nearing the bottom, and then a small box slides into view, usually fixed to the bottom-right corner of the window (not the page).

Like this, from the NY Times:

http://www.nytimes.com/
NY Times teaser slide-out

Or this, from ui-patterns.com:

http://ui-patterns.com/
up-next call to action
Note how this implementation (a) fades into view instead of sliding, but (b) seems to be triggered a bit too early.


What is this design pattern called, and what are the UX implications?

4
  • 8
    Personally, I abhor them..., especially when they do not have a pause before showing so they always get in the way of what I am doing. Sep 27, 2011 at 6:22
  • 1
    I do think it's solving a problem; it's giving the "read more" info without requiring the user to scroll all the way to the footer of the page (a la powazek.com/2005/09/000540.html) which on many news sites would require you to scroll through a variable length section filled up with comments. I personally bet they yield much higher CTR than "Read More" links in the footer for this use, but I'd love some data.
    – Ben Brocka
    Dec 5, 2011 at 14:14
  • 2
    I neither like nor dislike this concept, but one thing to keep in mind is mobile usability. For example, on NYTimes.com, I like to use the full version of the site instead of the mobile site. However, when I zoom in on the page, these popovers zoom too -- taking over my screen and obscuring the content at the bottom of an article. Really, they should be disabled or adapted for any device that is often used in a zoomed state... including the iPad, in my opinion. Dec 6, 2011 at 19:57
  • In the hands of a marketer, the design pattern is called "subtle manipulation", and as far as the user experience, one might say, "Hi attention-deficit disorder, I'd like you to meet restless-click syndrome". Only joking, of course; ...but not entirely.
    – mg1075
    Dec 8, 2011 at 5:14

5 Answers 5

1
+50

First off - I like the NYT's execution of this. I have often gone to other articles from that box. There seems to be some harsh words for this practice, but they seem to be rooted in assumptions about how it will be used (or abused). I don't think there's a design pattern called "box with crappy, useless content".

It's similar to the notification patterns found throughout sophisticated sites that have become popular in part due to the ease of implementation of jquery. Look no further than the top of this page - stackoverflow has animated top of page notifications when I login, earn new badges, etc.

Anyway, to your questions - this particular pattern seems to be tied to the notion of presenting some sort of add'l action as the user nears the end of a particular piece of content. So my term: anchored actions. Or perhaps anchored content animations.

Done well, they shouldn't interfere with the main content space (the NYT only has it overlap with their right column and only after all content in that column has been scrolled by). A good UX professional would design to use them sparingly and not rely on them as a primary means of navigation/presenting crucial information.

And as Daniel Newman mentioned, these can be dependent of certain screen sizes. They should be avoided (or at least done carefully) in mobile interfaces and other smaller resolutions.

2
  • 1
    +1 for "tied to the notion of [...] as the user nears the end of a particular piece of content". Maybe "Just In Time Calls to Action" (or JIT-CTA)?
    – Erics
    Dec 9, 2011 at 2:12
  • Good point Erics - that might be a little more precise.
    – Voodoo
    Dec 9, 2011 at 17:46
9

So when you talk about naming a pattern, there seem to consistently be 2 elements to a pattern's name. One is the item being patterned, the other is its behavior/action. So for example, 'inline edit' tells us that we are editing a field, and the behavior for editing is 'inline' (versus click to edit, etc). Common terms seem to be 'inline', 'hover', 'continuous', 'dynamic', 'prompt', 'spotlight', 'drag-and-drop', 'modal', etc.

In this case, we've got something that is appearing based on triggers--location on page, time on page, distance scrolled to bottom (say 70% to bottom of page), etc. And it's appearing and sticking, or appearing and fading, depending on the implementation.

One term I've seen for SIMILAR functionality is 'Toast Notification'. http://bit.ly/spg3yr and http://bit.ly/st3OLL.

I think it fits your need--it tells us what is happening: "Toast", i.e. something is popping up at a pre-determined time (when the toast is ready!). It tells us what is showing up--"Notification".

Another term that might be application instead of Notification is 'Call to Action'. So you could consider it a Toast Call to Action. In this case you're wanting the user to do something--click through to a new article, provide feedback, rate an app, whatever.

In terms of usability--the concept is already prominent within OSX and Windows. Growl notifications, system tray notifications, etc. are all forms of this same type of behavior. Tell the user something happened in a conspicuous manner, outside of the scope of their working interface, and allow them to act on it. I'm willing to bet at least some of the folks above who are poo-pooing it also use OSX with growl enabled. I'm not bashing!, just trying to point out it's a little more ubiquitous than we might think.

So, call it a Toast Notification or Toast Call to Action. Use it when you want to conspicuously inform the user of something, outside of the 'frame' or 'scope' of their working interface/reading area, and allow them to take action on it--including closing it, clicking through, whatever.

Hope this helps!

3
  • 1
    Certainly does help, thanks! The particular pattern I've described above fits the larger concept of Toast Notification, but it's more specific that simply that. It's a "Just In Time" toast at the foot of an article .. hmmm .. Jitter Foot Toast? (I suck at naming)
    – Erics
    Dec 6, 2011 at 8:00
  • 1
    A Call to Toast!
    – aslum
    Dec 6, 2011 at 18:45
  • content aware toast? Dec 7, 2011 at 1:38
6

Usually it means that overall design is so full of junk and useless that when one want to put something that may interest his users, one just cannot because of all that junk that is already there.

So, if on some point in your project you may think adding such banner is a good idea, it is a good sign that you need to remove something from design, simplify it and add more value to it.

And about UX implications:

  1. it looks like a banner, so it may become a victim of banner blindness.
  2. users usually do not like auto-activated animations.
1
  • 2
    Quite possibly. I've also seen it on rather clean wordpress blogs where it's a just-in-time presentation of related reading. My personal reactions to seeing these then is that the links lead to stuff which is related indirectly, as different from (say) a bunch of footnotes and references at the bottom of an article. The motion of the animation also suggests to me that the links are not hard coded to the content, but instead are the relevant links as of now (which, again, is different from footnote and reference links).
    – Erics
    Sep 27, 2011 at 7:16
4

I call it a "time to visit userscripts.org and find a blocker", myself.

Seriously, don't do this. Animation should be used for stuff that's important to the user, not the marketing department.

6
  • 3
    More news articles related to the content you are finishing reading on a news site quite possibly would be important to the user. Certainly, don't use the slide out teaser for advertising junk.
    – Erics
    Sep 28, 2011 at 4:54
  • 2
    I generally agree with you about animation, but I'm not bothered by the NYTimes implementation. It's a little distracting, but the content is related.
    – bendur
    Sep 29, 2011 at 1:03
  • 2
    I can't remember a time when it's ever suggested something I would want to go on and read. The fact that it flies out when I near the bottom, meaning I'm still reading, is the major killer for me though. I don't want to know about suggested stories until I've read the last word of the one I'm on - so a static bar below the article would be a better implementation.
    – John Y
    Sep 30, 2011 at 8:00
  • Newspapers have a history of writing their stories such that key facts are at the start of the article and the most inconsequential and trivial fluff is at the end of the article. This pattern is breaking now though, with more articles using the last para for the payoff on a brick-joke or similar shenanigans.
    – Erics
    Oct 4, 2011 at 7:54
  • 1
    -1. I agree that these thing-a-ma-bobs could be misused, over-used, or mask other problems, but that is quite different than saying they have no place. The NYTimes implementation highlights content that is relevant, which some users may appreciate - it's more hand-holding than I prefer, but I bet a nickel they have some science behind the practice. You and I are not representative of their demographic. And, the people who figure out who is the demographic? Marketing! Sorry to rail but this ain't a useful answer IMHO. Dec 6, 2011 at 19:23
1

As you can see from other answers, some people aren't very excited about interactions like this. I think this has more to do with how people abuse their audience when it's used inappropriately.

Mike Early's answer is great when this is used as an alert mechanism. This doesn't seem to be the strategy of NY Times. It's used as a promotional tool. Which isn't a bad thing, but can easily benefit the company (in the short term by getting more clicks) more than the users (by distracting and frustrating them while they're concentrating on something else).

I've only seen this used well a few times. NY Times not being one of them. Oddly enough, one of them is on Khoi Vinh's website. He used to be the design director for NY Times.

Irony? Maybe that's why he quit. :)

Previous Post Call to Action

Notice how the "Previous Post" box appears to be a part of the design with it lined up next to the end of the post and the start of the comments. Which is when people might make the decision to keep reading or look for something else.

Scrolling Previous Post Call to Action

Then it follows you down the page while you scan the comments. By this point you're probably scanning through little bits of content and a moving box won't be a huge distraction.

Stopped Previous Post Call to Action

Then it stops at the end of the comments area in a place where it still looks like part of the design. At this point it doesn't get in the way of the footer since it's a place people might look for further information that has nothing to do with the current or previous post.

I realize this isn't a "slide out" like you were referring to. But that's where I might draw the line between a good use of a tool to promote relevant content and demanding someone's attention. Something inserting itself into the flow of anything will distract people in a way that may not be thought of as helpful.

I'm trying really hard to defend an idea that gets abused a lot... Hopefully that all makes sense!

4
  • That's another great example, thanks Dan. It doesn't "slide out", but it does "slide up" from the bottom of the window as you approach the end of the content, and then moves with you as scroll down. It's the "just in time" nature of the moment of appearance that I believe is an important point - get the timing wrong and you annoy the user.
    – Erics
    Dec 6, 2011 at 22:37
  • The fact that the this design concept can work really well if done right, or utterly fail and backfire due to poor execution tells me it needs closer attention and proper formulation into a design pattern. Pull apart what makes it work and what makes it fail.
    – Erics
    Dec 6, 2011 at 22:41
  • 1
    Exactly. The perfectionist in me thinks these types of tools aren't necessary. If you organize your site properly and give people good options in the right context, you shouldn't need to distract them to notice something.
    – Dan Ritz
    Dec 7, 2011 at 16:15
  • 1
    But that's not always a reasonable expectation... If it has to be done (or should I say ordered/demanded) then you need some very tight conditions about when it gets triggered and what makes it go away. I've seen a few places that show a little tab from the start so it's not such a surprise when it pops out. I think that reduces the shock a little bit.
    – Dan Ritz
    Dec 7, 2011 at 16:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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