Hover Crafting: a look at AMO’s new add-on grids

AMO has made huge improvements in nearly every way since I started working on it in 2006 — design, scalability, performance, user experience, content, quality. Back then, we had a whopping 6 listed add-ons on our homepage: one featured promo block and a list of the top 5 downloads that week. None could be installed without going to the add-on’s details page first.

In contrast, today there are dozens of add-ons on the homepage and most can be installed without leaving the page. When we set out to design the new homepage, we wanted to surface more add-ons in such a way that every user would be able to see something interesting, read the details, and grab it without leaving the page. We wanted it to be easy to scan through the page and if you weren’t interested in a particular add-on, it wouldn’t take any time to skim right over it.

We knew we’d probably use a hover effect to expose the additional details, but wanted to steer clear of the bad hover interactions used on many popular websites and similar galleries today. Chris Howse and I whiteboarded some mocks of an early hover interaction of a card, and began examining the ways it was insufficient. Most hover designs block scanning in one of the directions you’re trying to go (down or to the right) or, in order to avoid that, display content above and break your downward focus.

Wireframe of the bad methods

We wanted a way for users to be able to scan across a grid of add-ons any way they wanted without getting frustrated. Greg Koberger had an idea: trim the width of the card such that you can still see the add-on icons, allowing users to easily scan down a column of add-ons.

Wireframe of the good method

We went to dinner at New Mongolian BBQ to noodle over whether this new design would work, and potch began planning how he would achieve the CSS box shadow effect with the tricky border structure. A few minutes after we got back from dinner, we had a working prototype, and were excited to see that it had the effect we wanted. This design would also let us place install buttons right below the hover area, ensuring that no one would have to play some kind of mouse game to get to the download button while the hover was still in effect.

The hovercards, as they are lovingly known, went live with our new design several weeks ago. They’re certainly not perfect, but I think they’re a big improvement over other hover methods.

Great, you redefined hovering as we know it. How are they actually performing?

Interestingly, the answer depends on the page. On the homepage, where we utilize hovercards for the Featured and Up & Coming carousels, two thirds of downloads from each section come from the hover card, while only one third come from a user clicking through to the details page and installing the add-on there.

However, on the category landing pages, where we employ hovercards in every section and carousel, closer to only one third of users install from the card and the rest journey through the tubes to install from the details page. Even more interestingly, each section has different results: Recently Added has the most hovercard downloads by far, with 46%, while the Featured hovercards only account for 30% of their downloads.

Why is hovercard usage so inconsistent? One theory is that it all depends on the add-on. Some add-ons are self-explanatory: you know exactly what they do from the name or summary, and you immediately want to have them. Others are quite a bit harder to figure out: what does this functionality even mean? is this a reputable author? what’s their privacy policy? what do the reviews say? screenshots please!

To test this, I looked at a few individual add-ons and compared them to the site-wide average for hovercard use in the Most Popular carousel on the category landing page.

  • All add-ons: 36% from hovercard
  • Adblock Plus: 25% from hovercard
  • Firebug: 38% from hovercard
  • Download Statusbar: 43% from hovercard

That shows the individual add-ons have an impact, but nothing too substantial. Let’s look at the the Featured block on the homepage for those same add-ons:

  • All add-ons: 61% from hovercard
  • Adblock Plus: 34% from hovercard
  • Download Statusbar: 76% from hovercard

Well, that rules out that it’s entirely the individual add-ons, since Download Statusbar nearly doubled the percentage of downloads coming from the hovercard. It looks as though the location and context of the hovercard really does make big a difference in how many people use it, but that the individual add-ons play a decent role as well.

I’m very interested in what AMO visitors think of the hovercards, and am looking forward to digging into the data we have on other parts of the new design as we continue to roll it out.