When it comes to subscribe forms, it looks like the difference between being making it the most loved, or most hated design element on your site comes down to shades of gray.

I came across an interesting study on ‘Lightbox Overlay Dialog Boxes‘ via Jakob Nielsen’s Alertbox blog. In one example, he shows a lightbox that’s not at all dissimilar from one we featured in our earlier round-up of email subscribe forms:

Flight of the Conchords subscribe form

Regarding lightboxes like this, Nielsen is gushing, calling them the ‘interaction design technique of the year’ in his 2008 study on good application UIs. He reiterated this point in March, stating:

“In last week’s study, this (lightbox design) worked well, just as many other lightbox designs have performed swimmingly in our previous usability studies.”

However, in the same study, Nielsen goes on to slam another overlay dialog box, calling it a ‘repugnant perversion‘ and ‘no better than a pop-up, which is the #1 most hated advertising design‘. Here’s the subscribe form in mention:

Nielsen's hated subscribe form

So, what makes the Flight of the Conchords lightbox superior to this overlay? The dimming effect. This is put eloquently in the 2008 study, which states:

“The lightbox benefit is obvious: it’s impossible for users to overlook the only bright part of the screen. This is in stark contrast to many traditional designs, where users often remain blissfully ignorant of notifications that are camouflaged within busy pages.”

The overriding problem with the later design is that it in no way stands out from the busy (and not particularly attractive) page below it, creating a visually confused look in which the reader doesn’t know whether to look at the site logo, the prominent ‘Signup Here’ button, or the prompt to subscribe. Plus, the overlay has no visual consistency at all with rest of the site, even going as far as using a totally different set of (crappy) fonts.

Adding a lightbox subscribe form to your site

PadiAct subscribe form

Searching for ‘lightbox JS code’ on Google offers plenty of variety to choose from. However, if you’re looking for a more intelligent way to present your subscribe forms to site visitors, it’s hard to go past PadiAct, an app for creating targeted forms that display based on criteria such as referrers, behavior patterns and time on site. PadiAct also integrates with Campaign Monitor and is super-easy to setup, while providing the advantage of detailed reports on conversion rates, daily trends and more. Find out more in our recent review of PadiAct.

Finally, what has your experience been with the different types of subscribe forms out there? Do you prefer lightboxes, or regular, static forms? We’d love to hear your thoughts in the comments below.

  • jared

    We’ve had pretty good conversion rates with lightboxes. I don’t love implementing them because I know how bothersome they are to me but coupled with a good action, people do indeed use them.

    My lightbox plugins of choice are colorbox (http://colorpowered.com/colorb… and reveal (http://zurb.com/playground…. I use jQuery cookie to conditionally launch the lightbox and make sure I’m not spamming someone with a popup on every single page.

  • Andi

    what about the google instant preview in the search results and lightboxes?
    In my opinion a website with a lightboxes In the small preview window dosen’t look very nice and inviting.
    By the way, great article, thank you.

  • Samantha

    Grab you FREE newsletter seems odd wording to me, I would never expect to pay for a newsletter.

  • Elliott F.

    the big headline kind of falls flat by the end. how do you design overlays that our users will love? the flight of the conchords one is great, but how did they do it?

  • Andrew

    Both lightboxes and overlays are impossible to overlook because they jarringly interrupt you from the content; lightboxes just look a little more elegant doing so. On the flip side, though, I’ve encountered some horribly mangled lightboxes so the argument becomes a little subjective. We’d need real-world numbers (preferably with some A/B testing) to see which type is truly more effective.

    Planning in advance of adding an email sign up form to your site with a designer or UX expert could be advantageous in creating an equally eye-catching form that falls in the natural flow of the page.

  • Kerwin

    I use the lightbox form at http://www.cruisinaltitude.com and it works fine. Its timed and only comes up once every 7 days if you don’t sign up.

  • jPurchs

    I’d agree with Andrew, AB testing would be the only way to really measure the success. Is there any way you could test the impact subscribe boxes have on customer experience? Collecting subscribers might not outweigh the negative impact it has on the experience.

  • andjules

    Client has been happy with this one: https://calligaristoronto.ca/ although I’d like to make the call-to-action (click-to-signup) more prominent. Colorbox/jQuery.

  • Vincent

    the way it’s done on http://www.flightoftheconchords.co.nz/ is fine, it doesn’t interrupt anyone as it only displays once users click to join the mailing list.

    By the way, has anyone else notice the really funky music player on their site? :-)
    I wonder how much it would cost to get that coded for one of my projects?

  • Tina

    Hi Roz,
    Still on the subject of signup forms – has there been any developments since your comment about 4 weeks ago that CM is about to release a Facebook App to easily allow email opt-ins on a Facebook iFrame Page?

    I hope this App will be fully white labelled? It would be a great benefit to a lot of us I’m sure.

  • Ros Hodgekiss

    Hi Tina, it’s still a work in progress and yes, it will be white-label. If you could kindly contact our support team in regards to the Facebook app, I’ll make sure that we get in touch with you personally, closer to its release.

  • Paul Warren

    Is anyone able to help us integrate this on our website (Warcom).

    We’re currently trialling PadiAct, but I’d sooner keep this in house.

    – Paul.

  • Ros Hodgekiss

    Hi Paul, could you kindly post the job specifics on our ‘Find a Designer’ forum? We’ll happily ask around on your behalf there.

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free