Is using an entire banner as a link bad usability?

Question

I am working on a eCommerce site which has a large hero banner space which scrolls through a number of 865 X 450 px banners. Each of these banners is linked to a specific offer in the site. When I initially planned the design, my plan was to have a call to action button in each banner which would be the link to the offer.

But due to technical restrictions we found that the only way we can have a linked call to action button on each banner was by hard coding an image map which would not work well if the image banner was changed as the button position would be fixed and the relative context of the button would be lost with regards to the text. The option of creating a new image map is also out of the question since the site is going to be handed over to a client who has no idea about the technical details of the implementation

So the only alternative option seems to be directly link each banner image to the offer.

I was just wondering if this is bad usability since the user could accidentally click on a large scrolling banner and suddenly find himself transported to a section of the site without understanding how he got there.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

No, it's the other way around. As your having a carousel, there is a timing issue to address. The carousel switches images and users have to quickly click on the banner to get to the offer currently visible, before it swiches again.

According to Fitts's Law, illustrated above, the time it takes a user to click an area is a function of distance and target area. If you have a large target area - the less time it takes a user to click the banner link.

The issue with the mock-button is solved by applying the same style of the carousel images as the rest of your site design. That way the carousel images doesn't look like adds, but part of your site.

Problem solved, tecnically and form a User Experience view.

Answer 2

I don't think it's a bad idea.

Having entire banners clickable is quite common and some users even expect it. Consider graphical ad banners (like those on Google AdSense). Even if they have a call to action button, the entire banner is always clickable.

Also, I don't think that on a desktop computer, users really accidentally click. Clicking your mouse button requires effort. Since you're designing a site, your main target audience is probably desktop browsers. Accidental "clicking" makes more sense on mobile touch devices. I can see a user accidentally tapping the screen though, especially when scrolling your content. Mobile devices usually handle this by showing a short animation prior to changing content. For example, slide the new content from the side (iPhone navigation), or highlight the entire link prior to acting upon it. If the transition is animated, it helps the user understand that his interaction is what caused the content to change. It may still be accidental, but at least the user understands and can click "back".

An animated transition can be a pretty nice idea anyways. Consider darkening the entire banner just a little bit (a simple brightness filter / showing a semi-transparent black overlay) either when the mouse hovers over the banner, or when the click was made. This will be a pretty good indication that the banner is interactive.

Also, on desktop browsers don't forget that the cursor changes when hovering over clickable areas. This can be stated by CSS if it doesn't happen by default (cursor: hand;). This also makes it pretty clear..

Answer 3

Using the entire banner as a link is a good choice. It provides a larger target size and supports users who assume entire images are hyperlinks (I have seen this behaviour in testing). Accidental clicks are not much of an issue (they are hard to do), and so long as you don't break the back button by opening a lightbox or a page in a new window, you'll be fine.