In App iAD design analysis

There's a pretty cool video promoting the new washington post iPad application that's been getting mentioned a lot over the past couple days, and it prompted me to head on over to the app store and check it out.

Upon opening the app though, something seemed really off to me. I couldn't explain it at first, but the screen was literally hurting my eyes. More specifically, my eyes felt like they were really distracted - as if they didn't know where on the screen they should be focusing.

Then I realized it was the placement of the iAd at the bottom of the page that was causing most of the trouble.

The Washington Post app already has kind of a lot going on with it, but it seemed clear to me that it was the placement of the iAd that was causing most of the trouble. So I decided to spend some time analyzing exactly what was the issue was, and then compared it to a couple other applications.

Here's a screenshot of the Washington Post's iPad application in portrait mode.

The first thing that's wrong here is the black padding on the left and right sides of the Ad. It makes the Ad look like it was just sort of tossed in there as an afterthought and, quite literally, does not fit properly.

More critically though, it throws off the balance of the entire application. When reading an article, you're eyes are almost constantly pulled down to that section of the page. I know the point of ads is to get people to look at them, but this is done so forcefully because of the heavy contrast that it's actually painful on the eyes.

The ad looks a little bit better when the iPad is in portraitmode (screenshot below) because at least the size is right, but it still looks weird.

The reason is because the ad is underneath the bottom controls of the application. This gives the ad the feel of being OUTSIDE of the application - and treats it as if it's some sort of separate entity.

But it's not.

If you're going to put ads in your application, then they are a part of your application, and they require as much design attention and focus as any other part of the app.

Compare the above screenshots with those of the New York Times application below.


The Ad at the bottom is treated as an element within the application. It appears INSIDE the app. The controls appear under the ad, the ad shares the same background as the page (and articles), and there's a nice little double border above it. These design decisions clearly separate the ad from the rest of the CONTENT, yet still incorporate it into the overall look and feel of the application.

If I were in charge of the development of the Washington Post app, the first thing I would do is simply work on the design and placement of the ads. Until that's done, making other more application specific design enhancements will be a challenge.

Now, having thought this through, I feel like I'm seeing this problem in ads all over the place. From websites, to Ads in android apps to ads in iOS devices, the theme is the same throughout: Ads that are incorporated into the application and included as part of the design look acceptable.

Ads that appear outside the context of the application seem out of place and distracting, ultimately harming the overall experience of the user. Something to think about if you've got an app out in the world with ads in it.