It’s easier to imagine hiding an ad than completely redesigning a UI

Over the past week, I’ve seen an uptick in feedback from Cozi’s users, some of it responding to a recent change we made in Cozi’s standard page template. It seems some users have perceived a significant loss of vertical screen real estate on the main family calendar page. The odd thing is that the new layout has roughly the same vertical amount of calendar data as the old design:

Old Cozi design

New Cozi design

Two main changes are at work here:

1. We simplified the layout of our calendar UI controls so that they take up less room. The new design consolidates three rows of calendar controls (one from the top, two from the bottom) into a single row at the top.
2. We redesigned our standard page template. Among other things, we moved the navigation controls from a footer at the bottom to the left side. At the same time, we moved our standard display advertising unit from the left side to the bottom. Specifically, we upgraded the unit from an IAB 180x150 Rectangle to a IAB 728x90 Leaderboard. The latter is worth more to advertisers, and hence commands higher revenue for Cozi.

The new design should address some long-standing usability issues, while simultaneously increasing revenue — a win/win. So I was surprised when users contacted Cozi to complain that the new design showed significantly less vertical room for calendar data than the old one. There is a loss, it’s true: at 1024x768, the old design allows for 560px of vertical height for calendar data, whereas the new design only allows 553px. This is a loss of seven vertical pixels of data. (As it turns out, the new design could easily gain that space back if we get rid of the rounded corners in the visual design. We’re working on that.)

I don’t think users begrudge the loss of seven pixels. I think the main issue is that the new design makes it really apparent that Cozi has to make a trade-off between the needs of its users and its advertisers. That trade-off is just a fact of life for an ad-driven business, and most people would prefer that Cozi to keep its product free for users. Virtually every user I’ve interviewed on this specific point has indicated that, in the abstract, they’re comfortable with this trade-off.

Here, though, the user can readily see what the ad is costing them. It’s very easy for them to imagine that, if only that Leaderboard at the bottom were hidden, they’d be able to see more data. Compare this with the old design: it’s hard for someone to imagine what they would gain if the small Rectangle ad on the left were hidden. It’s harder still for a user to imagine what would need to happen at the bottom of the old design, with its multiple stacked toolbars, to allow them to see more data. The lesson here is that it’s easier to imagine turning off an ad than to envision a complete redesign of the user interface. (That’s, um, actually a good thing for me, or else I wouldn’t have a job designing user interfaces.)

We’re in the midst of making further page layout and calendar UI improvements, so I’m looking forward to being able to gives users a design that they can see is unequivocally better than the old one. In the meantime, we’ve learned a valuable lesson in the user perception of advertisements in screen layouts.

Comments

[Alex McCarthy]

Hi Jan,

Long time reader, first time commenter :)

Could the perceived loss in vertical space come from the bigger date font?

The 8th is a relatively empty day in both of the screenshots you provided, so its height is limited by the date on the left. The 8th was 105 pixels tall in old UI, and it's 112 pixels high in the new UI. If your schedule is mostly empty, you used to see 5.33 days on your screen. Now you'd only see 4.94, and you've lost half a day! Your screenshots show this: The new screenshot's schedule is less busy, but you can only see one of Tuesday's entries (compared to 3.5 entries on Monday in the old UI).

Could this have more impact than the moved ad? I haven't used Cozi before and I'm just working from your screenshots, so I might be off the mark here.

Keep up the great posts!

-Alex

[Jan Miksovsky]

Hi Alex,

Thanks for your kind words!

We did change our typeface (I hope to talk about that experience in a post at some point), but it has very little effect on the amount of data the user can see. The differences between the above two images aren't really controlled as well as I would like. For one thing, the two images aren't showing the same calendar: the first image was actually taken a year earlier, and it just happened that the rough date range was similar. For another thing, upon investigation, the second image was taken on a monitor with Large Fonts turned on, which in this case had the effect of making the large dates bigger. So there are several things I could have done to permit a more accurate comparison between the old design
and the new design. Nevertheless, the key measurement being examined here (the vertical height of the total calendar data) is pretty accurate, and I think the general point still stands.

-Jan

[Michel]

I think the left sidebar has much to do with the perception that you're losing part of your calendar: it continues all the way to the bottom, and that makes it all the more obvious the calendar does not.

Perhaps if you "stopped" the sidebar? Changed the bottom 100-odd pixels to a different, more neutral background colour?

[Stefan Möbius]

Hi Jan,

Even though you're probably right in saying that most users prefer to have a free service in exchange for getting ads, I'd still like to point out that this is not true for all users. Some years ago I decided that I'd be willing to pay for a web-based mail service, just to get rid of all those annoying ads. At the time I was using Yahoo mail, but they just didn't offer ad-free service - not for any money in the world! Consequently, they lost me as a customer.

Cheers,
Stefan

PS: Let me also thank you for a very interesting blog.

[Nikki]

My 2 cents: The users were ignoring the side ad (or blocked it, like I do), and the calendar was small. Thus, content appeared to go way past the left side content. The stuff you notice on the left ends at the 7, two days into the content.

Now, instead of a nice calendar control, there are text links, so your eye must read them instead of being able to glance, and you stop "seeing" content at the 9 (4 days in).

It's like those puzzles where they show the line lengths and put different size lines next to them, and you think the original line is much smaller when in fact it hasn't changed. Do an image search for "which line is longer" is see what I mean.

[Jonsatwit]

In the old design the list of dates continues above and below the screen in the mind's eye, with the banner, the user's focus is boxed into a space about a 3rd of the overall data displayed so as to visually avoid the ad at the bottom. The controls at the top are better, but that ad placement is hugely distracting.