Photo expansion on mouseover could get disruptive

Written by Adrian Holovaty on May 28, 2004

Steve Outing over at E-Media Tidbits has suggested a "better technique for enlarge-this Web photos". I agree that displaying "enlarge this photo" links usefully is an unsolved problem, but I don't know if the technique pointed out there -- using mouseovers to expand photos -- is the best way to do it. It's a good idea in theory but could get disruptive in practice.

The problem is mouseovers get in the way. For example, if I'm moving my mouse cursor from one end of a page to the other -- say, to go up to the navigation bar -- my cursor crosses every part of the page between here and there. And if any parts of the page are set to trigger onmouseover events, they're triggered, despite my not wanting to trigger them.

That exact scenario happens almost every time I visit, which relies heavily on mouseovers to dynamically change content on its home page. When it doesn't happen, it's because I have carefully considered the path my cursor should take to get from one area of the page to another -- an experience not unlike avoiding minefields. (Disclaimer: CJOnline is a competitor of the site I work for.)

The crux: With a mouseover image, you can never tell whether the reader explicitly wanted to mouse over it, or whether his or her cursor was simply en route to another part of the page. That's why the click makes more sense -- the act of clicking signifies intent to do something.

Of course, I'm basing this on my own Internet usage and observation of friends and colleagues -- not on any sort of study.


Posted by Steven Jarvis on May 28, 2004, at 8:26 p.m.:

I'm with you on this one, Adrian. Mouseovers --- while they have their uses --- are the wrong idea for expanding photos, for the reasons you cite.

I especially don't like mouseovers for things like the CJonline front page. IF you want that functionality without the user having to the page, a hide/show div DHTML switch or tab that you have to click (but doesn't cause a page reload) is usually the best answer. In my experience watching web users, they don't expect mouseovers, and are usually confused or annoyed by them, even when they take the time to figure out how they work.

I think you could do a similar DHTML tool for the "enlarge this photo" that doesn't pop a new window, but shows/hides a div that contains the larger photo. The problem with this (and something like the CJonline front, though it may be less of a problem with that type of feature, depending on what you're hiding/showing) is that you'd have to load the big photo every time, even if someone didn't click on the enlarge button. There are ways to engineer it that would minimize the impact, but you'll still end up with a heavier page and possible a significantly heavier page for multiple instances of this on one page.

But, I think you may be right in saying that it's an unsolvable problem. There are variations, but each has its pros and cons that make them all about equal in utility.

Posted by Gary Love on May 29, 2004, at 12:27 a.m.:

Have we given up completely on offering a strong visual experience as the default? Relegating photographs to a postage-stamp-sized image on the fringes of a story seems dreadfully dull to me. Javascript/CSS can help ease the pain, but we're still forcing readers to take action in order to receive a better experience.

Some sites (Adrian's is a prime example) are starting to experiment with more visual front pages. However, I'm still waiting for story pages to be treated as anything more than a template-driven afterthought.

Posted by Adrian on May 29, 2004, at 12:41 a.m.:

I'm with ya on the large photos, Gary. Instead of requiring users to click to enlarge, why can't images just be bigger in the first place?

I should've offered that as a suggestion rather than just critizing the mouseover idea. :)

Posted by Steven Jarvis on May 29, 2004, at 12:58 a.m.:

The problem is that, as web developers for newspaper sites that are (usually) underfunded and understaffed, we try to come up with (at least semi-) automated solutions. Anything we can automate, we do, in the sake of saving a little time/money.

Gary's right, of course, especially for story pages. Having the staff to do big, sweet photos and graphic design treatments to story pages every day is out of the grasp of most news websites --- as much as we would LOVE to do that. Most of us have to try to do more with less (and do EVEN MORE with EVEN LESS every year, it seems). That's not to say that most of can't do some of it, but it's a matter of coming up with a solution that fits our staffing/budgets.

I think a good start for many would be to put "full-size" (or large, anyway) images in story pages. As for section fronts and homepages, photos are competing with a lot of different interests (branding, breaking news, advertising, navigation, ec.) where space is really at a premium. But story pages are usually a different (ahem) story when it comes to available space. The problem from a developer's point of view, of course, is that individual story pages are usually the most templated and rigidly-controlled of all the pages on a site.

Thanks, Gary, for reminding us to look at the issue from a different perspective.

Posted by Chris Heisel on June 1, 2004, at 7:08 p.m.:

Adrian, I'm with you in the anti-mouseover camp.

Think about every other computer based interface... does anything major ever happen when you hover over something? Usually not (at least in well designed interfaces) for the exact reason you mentioned -- a hover may not be deliberate.

That's why we have the click (and double-click in the desktop GUI realm...).

I'm a fan of giving photos better treatment (esp. on story-level pages). I do wish there was an easy, cross-browser, cross-platform way to dynamically size images (maybe percentages for width, height in CSS?) so folks with big monitors could see big photos, and folks with small monitors could see appropriately sized images....

Comments have been turned off for this page.