Scroll-Activated Dynamic Menus – Web Navigation Trend

“Also known as fly-out menus, pull-down menus, or pop-up menus, dynamic menus provide quick access to navigation options. They are considered “dynamic” because visitors must interact with them before they display. After the visitor selects a navigation option with a mouse rollover or click, the site presents a menu window similar to choosing a menu in a software application.”

That’s how I define dynamic menus in Designing Web Navigation. They’re pretty much mainstream these days, and we’ve seen lots of variations, including mega-menus and more.

Recently, I’ve noticed another type of dynamic menu that’s scroll activated. By that I mean that the menus–sometimes just an option or two–appear when the user scrolls to a certain point on page. This is usually at the end of a text towards the bottom of the page.

Below is an example from Harvard Business Review Blogs (Figure 1). See the small box in the lower right corner with the header “More from Scott Anthony.” The menu is animated and slides in from the right side gently.

Figure 1: Scoll-activated menu on Harvard Business Review Blog

This menu option is a related content link to other stories. For news sites, it seems like a good way to lead users to other content. The animation is quite eye catching, but not intrusive or disturbing if done tactfully.

The Economist.com site uses two scroll activated menus (Figure 2). First, there is one at the top that appears fairly quickly as you scroll down–see the red bar across the page. This has some social media options and a helpful search feature.

Unfortunately, when you continue scrolling to the bottom of the page, a large advertisement slides into view from the bottom of the screen. This is intrusive, and it doesn’t bring the user any direct value and tries to steer them towards a subscription.

Figure 2: Scoll-activated menus on Economist.com

I suspect we’ll start seeing more and more of this. Hopefully it won’t get out of control and abused. When done subtly, it can be useful.

Learn about these and other trends, as well as principles of IA and web navigation design, in my upcoming workshops this year:

1. In GERMAN: UX Workshops in Hamburg by NetFlow, 11-12 April
a. Prinzipien der Informationsarchitektur
b. Elemente des Navigationsdesigns

Die online Anmeldung ist offen.
2. in ENGLISH: ANZ UX Workshops in Sydney, 28-29 April
See our website for more information and to register.
Enhanced by Zemanta

About Jim Kalbach

Head of Customer Success at MURAL

5 comments

  1. Pingback: Tweets that mention Scoll-Activated Dynamic Menus – Web Navigation Trend « Experiencing Information -- Topsy.com

  2. Tony Russell-Rose

    Hi James

    Interesting stuff – I’m wondering what the business rules are behind these implementaions. For example, on first loading of the page on ecomonist.com, the bottom banner appears in its open state, but thereafter only shows as closed (which arguably is less intrusive). I couldn’t get the top one to appear at all tho! (Likewise HBR). What URL did you use?

    Tony

  3. Pingback: Docking Navigation Bars – Web Navigation Trend « Experiencing Information

  4. Pingback: My Interview on IATV Radio « Experiencing Information

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: