Slide out teasers near the bottom of the page?

Question

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/

Or this, from ui-patterns.com:

http://ui-patterns.com/

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?

Answer 1

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.

Answer 2

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!

Answer 3

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.

Answer 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.

Answer 5

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. :)

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.

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.

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!