Integrating my now-playing controls with the new design language is hard. The biggest challenge: Where do I put the ad?
The system button-shadow style looks best at the screen edges, and can't stack (system-style toolbar buttons AND a capsule-style ad look bad next to each other).
Some options I'm playing with:
1 is the closest to the status quo.
2 seems safe, but I don't love the toolbar-style buttons floating in the middle like that.
Leaning toward 3 myself, but it's pretty different from the status quo.
Do you have a clear preference?
1. Thanks, everyone! Great feedback and suggestions. (Especially @BenRiceM!)
2. Lots of responses theorizing about better/worse ad-performance tradeoffs. Let me be clear:
When these factors are in tension, I prioritize good design over ad performance every time.
I try to make the best app, and I trust that the ad performance will mostly take care of itself if people keep wanting to use it. (And for the past ~8 years, it has.)
(Plus, I use the app with ads! I don't want it to suck!)
@BenRiceM Below-artwork ends up looking really busy when there are chapters.
I'll play with below-title, though. Thanks.
@marcoarment I’d go with something like this, personally.
(and I’d be tempted to move the collapse button to the bottom)
@marcoarment @BenRiceM In my opinion, putting it below the title makes it harder to ignore. If it's always at the bottom or top, you can mentally tune it out more easily.
I know that is not your intention, but that location underneath the title could also be the most revenue-generating.
@marcoarment I don’t want to presume(*) and you probably have considered it before, but I’d love to see @BenRiceM‘s treatment of your app design sensibilities if y’all manage to find a professional arrangement 🙏🧡
(*paying Overcast customer since day 1 ;)
@cbirdsong @marcoarment I think it’s just odd that some controls are liquid glass and others remain in the iOS7 style. If the playback controls were also be liquid glass (orange tinted would be sweet!) alongside the white/clear secondary controls, the hierarchy would make more sense.
Having the ad inside of a liquid glass bubble gives it the top-most layer of hierarchy which doesn’t seem user-centric, it’s ad-centric.
@marcoarment #1 looks good and is probably my favorite.
#2 looks unbalanced left-to-right but is clean.
#3 is worry would mess with muscle memory on navigation.
What about #3 but between navigation and artwork?
@marcoarment the business brain says to A/B top and bottom and see which one performs better.
As a user, I’d prefer top, because I’m more likely to want to reach controls easily than the ad.
@marcoarment my opinion is that:
3 gets the ad out of the way and out of the mind, good if you want the user to have a better experience, bad if you need the ads clicks.
2 feels the most standard of the designs, the instinct tells me that without the ad the toolbar-style buttons would lower down so it doesn't feel weird, also good for ads clicks
@apmeyer @marcoarment This is the closest to what I was saying. But I was suggesting putting them all in a floating box. Maybe even making each control float?
Also note how Apple’s Music app does not have anything floating, almost like it’s a bad idea…
@marcoarment I didn’t like #3 at first because it makes the top feel much heavier, however it does push the controls closer to the bottom which is much friendlier for users.
It’s also likely to lead to fewer accidental clicks on the ads, which may or may not help your advertising metrics (should you have any). Less clicks overall, but more that are likely intentional (thus a better conversion rate).
@marcoarment I don’t know why three has such high support, it’s shocking.
Maybe just that you primed your poll. I wouldn’t use an app like 3 and I’ve been using overcast exclusively since launch
@marcoarment I dislike 3 as the ad is the first thing in lexical order. So you always have to “read over” the ad when looking at the page.
2 neatly de-emphasizes it while still displaying it at the same size – and marks the buttons as buttons according to platform conventions.
Marco Arment
Ehler
Jim Mc
Michael Boyle
ziplyne
tambourineman
Ramón 🇨🇴
Thom Bullock
Marc Bizer
Scott Edwards
Steven Op de beeck
Marc Robinson 
BenRiceM
Adam Bell 
Ste Grainer
Jason Snell
Jari Pennanen
Jan Lehnardt 
Dimitry
Nathan Snelgrove
Warner Crocker
Cory Birdsong
John Appleseed
Michael Cook
Stuart Gibson
LeleSōchō - Gabriele
Adam Meyer
Brandon Butler
Neil Henning
Craig Hockenberry
Matt Christensen
Chase Carroll
Orlando Gabriel Herrera, SOC
Scott Wright 🏳️🌈🏳️⚧️
Jon Anderson
Jason Petersen (he)
Graham Ballantyne
Dean Mayers
Hans has moved
Jiji, the cat
Duncan Blair
Wade
David Lynch