Squarespace Website Pop-Up Designs That Won't Aggravate Visitors

How To Use Squarespace Pop-Ups

Squarespace Pop-up Designs That Work

We've all seen pop-ups, and most of us hate them. The worst of the worst are those email pop-ups that are distracting, confusing and most of the time just don't work. 

There's a reason that most pop-ups don't work and that's because they're often designed from an email marketers point of view. A pop-ups only goal is to maximize the number of emails they can collect. The problem with this plan is that it disregards all of the negative impacts that a badly designed pop-up can have on your website.

Fortunately, you can create pop-ups that are well designed, won't aggravate your visitors, and will convert! Here are some tips for developing Squarespace pop-up designs that work.

Pop-up Design: Respect the Principals of UX Design 

Your pop-up designs should follow all of the best practices and fundamental principals of UX design (user experience). This includes:

• Optimizing Load Times

How fast your site loads is essential both for the user and your Google SEO. Most consumers expect your page to load in 2 seconds or less. A pop-up can add to your load time. To maximize your pop-ups for quick load times, use correctly sized images.

Ever Wonder If Your Website is All It Can Be? Click Here For A Free Website Review on Video

• Include Visible Closing Options

The average rate of conversions with a typical pop-up is about 6%. That means 94% of your visitors close your pop-ups without taking action. To keep this 94% on your site, offer them an easy solution to close your pop-ups. For example, implement a closing option that is visible, add a closing link to compliment the closing “x,” and make sure to test your choices on a variety of devices to make sure that your closing option is available to the majority of visitors.

• Optimized Your Pop-up Designs for Mobile Devices

Ever heard of “fat thumb” syndrome? It's what happens when the button you're trying to click on your mobile device is too small, and you click the wrong item. The same issue can occur with pop-ups that are not optimized for mobile. If you show your pop-ups on your mobile site follow the following design rules. Use calls to actions that are large enough to click on and that your close option is visible and works. 

• Size Doesn't Always Matter

For a long time, marketers were designing lightbox pop-ups or full-screen pop-ups. The advantage? They catch the user's attention. However, in many situations, a smaller pop-up or even your announcement bar can be more effective, especially if you display it on multiple pages. Always A/B test different options until you find the one that works best.

Testing Your Pop-up Designs

Just because your pop-ups look great on your display doesn't mean it will look great on every device. You need to take the time to test your pop-up designs on multiple browsers, operating systems, and devices. If you don't have the time, pay testers or just focus on the most popular configurations. Online tools like StatCounter can help you to identify the most popular browsers, OS, and screen resolutions.

Targeting and Setting Limits

Most pop-up designs appear as soon as you open the website. This may not be the best option as your visitor hasn't even scanned your site yet and probably isn't ready to give you their information. 

Set your Squarespace pop-up to display once they've had a chance to scroll halfway through your homepage or when they've spent a fixed amount of time, like 30 seconds on your site.

Studies have shown that exit pop-ups convert 5% better than those displayed immediately. This also provides you with a better user experience as visitors navigating your site will not be interrupted while learning about your services.

Another option is to set limits. Seeing a pop-up once is irritating if you're not ready to subscribe, but seeing it every time you land on a site can drive visitors away, and they won't be back. Set your pop-up to display once every seven days. If a visitor to your site has seen your pop-up five times without converting, it's a good bet they're not going to convert. Setting limits can improve the user experience, and focus on the visitors who are likely to convert. Also, make sure to exclude your current subscribers! Sounds obvious, but often it's an oversight. Squarespace offers a variety of limits and targeting options for pop-ups on your website.

Keep Text Short and Simple

In their most basic form, pop-ups are the combination of a background, a call to action, a form, and text. From your user's standpoint, the wording is just as important as the rest of your campaign, so you need to optimize it.
Keep your message short and concise. When writing your text, think like a user.  Have you allowed enough time to read the pop-up? Is the copy clear and are the benefits for users obvious? Is there anything that can be simplified or removed? Ask these questions and adjust your copy accordingly.

Effective Pop-up Design Tips

When it comes to designing your pop-ups, you need to optimize them to make them easier to read and act upon, quickly. Two main design patterns can work to maximize your visual content they are the Z-pattern and the F pattern. Keep them in mind when creating your pop-up designs.

The Z-Pattern: Position your headline at the top and your final call-to-action at the bottom. Position secondary elements on the right, below the headline.

The F-Pattern: Users typically scan the top of the design for the headline. Next, they scan down the left side to seek out highlights in the text's initial paragraphs. When readers find something of interest, they read it with a second horizontal movement completing the “F.”

Both of these design patterns can help you to create a pop-up with a good visual hierarchy.

Other Design Elements To Incorporate

• Animated Elements – The eye is naturally drawn to movement, in fact, the brain is hardwired to attract to motion so why not incorporate it into your design? To incorporate motion on your Squarespace pop-up, add an animated .gif. It can add some eye-catching movement that can drive up your conversion rate.

• Use High Contrast – Color contrast is an effective design principal that works across many businesses and industries. When you're scrolling through a page, your eye is drawn to movement, and color contrast. This is called the isolation effect and the science behind it is that an item that stands out on a page is more likely to be retained. Studies have shown that consumers favor high-contrasting colors in marketing. High-contrast works!

• Creative Buttons – While visual design is important, copy matters too. Using enticing copy on your button or call to action is critical for increased conversions. Your button text should make people feel like they're missing out on information or a deal, they're more likely to click.

These are just a few creative options to help you create pop-up designs that are effective and will engage your visitors, not annoy them.

Are Your Pop-up Designs Effective?

Without analysis, you can't determine if your designs are effective. Evaluate your pop-up analytics for success, especially when it comes to measuring their impact on user experience.

Look beyond merely the number of new subscribers, or leads generated. Monitoring average session duration and bounce rate can help you to determine if users are leaving your site early due to your pop-ups. If you want to evaluate their impact on your email marketing, take a look at open and reactivity rates of the emails you send to a user who subscribed through your pop-ups. This can help you determine if users are genuinely interested in your company. 

Start by setting up control groups and setting a baseline. Look at your metrics before you implement a pop-up strategy to get a metrics baseline. While this can be a problematic measure because of seasonal effects and other traffic drivers, you can use this baseline to better determine the effectiveness of your pop-up campaigns. Or if you'd like an ongoing look at the numbers, set up a control group of users, or a portion of your traffic that will not see your pop-ups. A control group can give you a reliable way to compare your website performance with and without pop-ups.

Pop-ups can be an effective method for delivering both conversions to your content marketing campaigns. The key lies in your design, your message, and how and where you use them. Test, test, and test again to determine if your designs are user-friendly. Think smaller and smarter when designing pop-ups for your visitors and watch your conversions increase!

Website Building Tips From A Squarespace Designer

About Means-of-Production & Michael Conway

I'm the owner and strategist at Means-of-Production. My firm builds Squarespace websites, and content marketing campaigns for construction and design professionals like architects, interior designers, design-build contractors and landscape design firms. Our websites attract clients with exceptional architectural photography and brand messaging that sets you apart from your competitors.

Website Design, Content MarketingMichael ConwayMeans-of-ProductionSquarespace WebsitesComment