Why even small usability issues matter; or, Evite and Flash ads

Posted on May 4, 2010 in Design, Web Dev | 10 comments

Evite provides a useful service, and since that service is free I have no complaints that they display advertisements—everyone has to get paid, right?

What's wrong with this picture? If you said "it has ads on it!" you'd be wrong: the ads themselves aren't the problem. If you said "an ad is covering a content button!" you are right. Give yourself a pat on the back.

What I do have a problem with are ads that pose a significant usability issue. As the image at the left clearly shows, Evite is serving up just such an ad. Take a look at the image I captured after responding to a recent invitation. There are two separate issues going on here, which I’ll address in a moment.

But first, a word on what’s going on here in case you’ve not received an Evite invitation recently. Some time back, Evite introduced a “Tell guests about yourself” modal dialog box that appears once you RSVP.  (A modal dialog box prevents any interaction outside of the box; and it requires the user’s input before disappearing.) Though it’s billed as a way to allow the event’s other guests to learn more about you, I have no doubt it’s a way for the service to build a richer set of demographic data on its users (including birthdate, photo, gender, etc.) for better targeted advertising.

Issue 1: Bending the usability rules

So what’s the big deal? There isn’t one, really, regarding the collection of user data. It is a bit irksome that Evite’s designers chose not to position the “Skip this step” button in the expected bottom-center or bottom-right corner of the overlay where users would naturally look for it. Instead, users presented with an unavoidable modal dialog atop a dimmed screen  find only an inviting green “Save to profile” button. I’m sure that moving the  ”accept input/okay” and “cancel/escape” interface elements, which are usually positioned in that location, caused many users to feel they had to enter at least some of the requested information.

Irksome from a usability and design perspective, but completely understandable from a business perspective. None of the information is required, so I understand it makes sense from a business perspective to introduce a little cognitive friction (separating the expected placements of the two inputs) in order to increase the rate by which users add data to their profile.

Issue 2: Breaking those same usability rules

Evite moves beyond irksome into downright infuriating, though, if your screen resolution isn’t wide enough to accommodate both the modal dialog and the Flash-based ad. The image above shows the result: the only button informing the user how to skip past the modal dialog is completely covered by the ad.

Before looking at why this is an issue for the user, a word on what’s happening. Flash content on a webpage will always float on top of other page content, regardless of the proper z-index stacking order defined on the page. It’s another of Flash’s quirks that developers must be concerned with and work around. In Adobe’s own words:

A Flash movie in a layer on a DHTML page containing several layers may display above all the layers, regardless of the stacking order (“z-index”) of those layers.

So that’s the technical reason behind the situation. But what does it mean for the user? He or she has only a handful of options when this occurs:

1. Widen the browser window, which would pull the ad to the right and reveal the button (not an option for some users with smaller screen resolutions);
2. Enter some/all of the requested profile information and click “Save to profile”; or
3. Close the browser window/tab.

Again, I can hear the question of “what’s the big deal?” The user’s RSVP has been saved, so who cares if they have to close the window to get around the modal dialog. The issue comes down to user experience. If you’ve read this far into this post, you are almost certainly someone who would recognize that (a) your RSVP had been saved and (b) your actions at this point won’t affect that RSVP and you can close the window without worry.

However, Evite’s wide user base includes many non-savvy users like your parents or friends who don’t use the internet day in and day out. These are the people who (in addition to being more likely to sport a smaller-resolution screen) won’t recognize that the modal dialog is only a marketing tool. It can be a truly frustrating experience that instills privacy worries (even a small amount for a minor event like a party RSVP); what’s worse is it perpetuates the notion that “computers are difficult/scary/unfriendly/etc.” It’s the job of a skilled web developer and user-experience designer to avoid these situations and strive to create their opposite, experiences in which the user finishes a task feeling “wow, that was easy/fun/friendly/etc.”

In this case, Evite’s design trumps a smooth total user experience for business desires. It’s not the most egregious mistake (or deliberate choice, we can’t know which), but it does remind developers and users a like that the perfect experience is always something to strive for.

Related: If you liked this, check out:

1. Usability test for… can't say Last Thursday I participated in a usability study for a...
2. A small blow in the war against spam Spam--it's not just for breakfast anymore. Raise your hand if...
3. Design Fail: Printer Drivers Disclaimer: I don’t really like printers. Printing to me is...
4. Adobe's PDF-generation (and customer service-) FAIL Recently I worked on a problem at my job whose...
5. Cross-post: One developer's perspective on the SWS's course search resource The UW's Office of Information Management invited me to be...