American Eagle Features Products on the Fly

American Eagle Outfitters recently AJAX-ed up its web design including its navigation menu. What’s different about AE’s flyout menu that’s different from Office Max’ and Eddie Bauer’s navigation redesign is that it actually merchandises within the flyout. Here’s what I mean:

American Eagle Outfitters Redesign Navigation

When you roll over a section in the horizontal menu, a sub-menu appears with some featured items. In the example above, you see one featured Clearance item from each category: men’s, women’s and aerie.

Navigation Close-Up

This technique allows you to show more content without a click. Clicking away from a page means another click if you want to go back. But flyouts give the user a faster peek at what’s behind the menu buttons. And if you accidentally roll over a menu item, you may be enticed by that 50% off offer you otherwise would not be aware of.

The downsides of AJAX-y menus are they cover up content, can be finicky and require steady mouse control to operate properly. Or worse, they can appear when you don’t expect them too when you mouse a bit too close to the hot-spot. Not everyone will find this a usability improvement.

I noticed when you click on the Clearance button you get different featured items. I think it would be better to keep the same items as in the flyout, because a customer may click out of habit, and wonder where that green camisole disappeared to. You want to minimize the “whoa, what happened?” factor, especially when you’re introducing Web 2.0 coolness that may involve a learning curve. (Even for technosavvy Millennials like the AE customer. It just might be mom or grandma picking out a gift).

American Eagle Clearance Landing Page

Text in the red box doesn’t need to change after you click on Clearance. If a customer clicks on Clearance, he/she understands it’s the clearance section, you don’t have to restate the obvious. When it comes to online copy – less is more.

All-in-all, it’s a pretty neat idea. What do you think about merchandising within navigation? Love it? Hate it?

PS: If you’re interested in merchandising tips and trends, be sure to sign up today for our upcoming webinar: Effective Online Merchandising: What Sells?

Related Articles

7 Responses to “American Eagle Features Products on the Fly”

  1. I really don’t like it, but I am a Web Developer that thinks a lot about the user experience. Sure its a nifty idea but I don’t think it is the most logical solution. For one the navigation hover layer isn’t even consistent between the different sections. They also have two styles of navigation in some of these hover layers. To me as a user I think its a bit overloaded and just doesn’t feel right. This include the hover state and when you are on that section.

    It’s once again great for marketing as another way to jam products down the users throats. I don’t think any users will think to wait the 3 seconds it takes to load before actually just clicking on the main navigation link.

  2. Hi Dan, thanks for your input. I always like to hear what designers think about new stuff. I agree the inconsistency across different sections is sub-optimal, although it makes sense the clearance section is red.

    I noticed that AE changes its color scheme frequently also.

  3. I agree with Dan, you have to hang around for the hover to load which isn’t ideal. They are also trying to pack too much in to a small area of the screen.

    The navigation also changes colour from the hover state to how it appears within that section, off putting to me. There’s a clash between the blue text on yellow background in one section that grates on me. Not for me I’m afraid.

  4. Luke says:

    I like the idea, however I think the execution is not the greatest. The difference between what is established as the navigation on the hover state panel and what it in the sections when it loads is a bit confusing.

  5. cfnerd says:

    I have a love hate relationship with the AE site. I am a web guy so details always get to me. I like the site overall, but not a fan of their web 2.0. The site does not do a good job of communicating what is happening. Additionally I think that the background as energetic as it is ends up taking the focus from the items, menus really all the navigation gets lost.

    As simple as it is I like the Hollister site. I think they did a better job only using the web 2.0 for the steps that are useful.

  6. Beau G says:

    I feel like AE does a pretty sweet job of showing what type of content you may get under a tab…however using the marketing area on the ajaxy menu every time is perhaps overuse. Also whoever the AD over there is, is doing a great job I love him.

  7. zacktyria says:

    I’m a student at Western Michigan University and I am currently taking a retail management class with dr4ward ( I agree with Dan, waiting for the hover to load can be frustrating. I think for a website like AE where most of the shoppers are teens to young adults, this technology can be used successfully. If the website is selling things geared toward older people then this technology could confuse and frustrate them. Having that much information pop up with the hover it could confuse some people. This could then lead to loss of sales. I like the hover because it’s better than having to go to another webpage to see all of the options. Loading webpages can be time consuming, especially if are working with a slower connection.

Leave a Reply

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS