There is perhaps no dirtier word in web design than “confusing”.
If you have a website, “confusing” is your evil nemesis. Visitors will always choose to leave a confusing web page in favor of one of the many non-confusing web pages out there. Also, they won’t come back to see if you’ve fixed the situation.
But you know this. So let’s discuss how it relates to email opt-ins.
We are living in the golden age of mailing list sign-up forms. Or, as they are also known, email opt-ins. Or, in even plainer English, the place on a website where email addresses are gathered so everyone can keep in touch. Unfortunately, what is a very good thing (gathering mailing list subscribers) has teamed up with conventional wisdom (get that sign-up form in your visitors face right at the top of the page) and crashed into a little piece of reality (everyone is viewing websites on their mobile phones) to create an opportunity for terrible confusion and a bad experience for users.
Here’s what’s happening.
Let’s say you’re browsing the ol’ world wide web and stumble across our imaginary Jane Doe website. Jane Doe is selling something that you absolutely want. When you arrive at the home page, you see something like this:
Ok so far. Very typical situation, actually. The horizontal opt-in form (a mailing list sign-up form across the bottom or top of a website header) is in it’s hey-day. When seen on a full-size screen, all is right with the world.
But when viewed on a mobile…
The opt-in text should wrap around and will end up taking up several lines of space on the screen. The header (which should shrink down or otherwise rearrange itself to fit the screen) will end up above or below it, depending on the order of things.
The screenshot at the top of this article shows the the home page of our imaginary site when viewed on a mobile. The email opt-in (a.k.a. sign-up form) is, in fact, taking up almost the entire screen. This is a thing that happens.
So here’s the big question…
What do we see when the user clicks on the menu icon and decides to look at, let’s say, the “About” page?
Um…that looks exactly the same.
What about the Contact page?
Jane Doe’s Blog?
This is the definition of confusing.
“Did I even go to a new page?”
(Clicks repeatedly on the menu.)
Yes, we know that users scroll now.
The pre-mobile days of **Above the Fold is GOLD** are gone. (Did people say that in, like, 2006? They should have because rhyming.)
For the youths who don’t know what I’m talking about, “above the fold” is a term that originated with printed newspapers and referred to the area of a website that was viewable on a desktop/laptop (the only way people were consuming their internet at the time) before scrolling (because people didn’t necessarily scroll down the page back then).
The top of the page was by far the most valuable area on a website, which is why web pages in the early 2000’s looked totally insane: jam-packed with as much information as possible, no breathing room between objects because the space couldn’t be spared and just generally very different from the web design of today.
Those of use who create websites, whether as a profession or DIY for another type of business, have MUCH more freedom now because our user can be relied upon to scroll down the page and see what else is happening. Glory be!
But that doesn’t mean it’s a good idea to confuse the hell out of them. This shows three different blog posts from the same imaginary website:
Nope. Not okay.*
How does this happen?
An email sign-up form with even slightly long text that wraps around to become several lines on a phone. Add a logo or header image above that and boom…problem.
Sometimes websites have both a sign-up bar at the very top of a web page and another sign-up below the header image. That will pretty much guarantee that this issue will occur.
On laptops, tablets, etc.:
Yes, it happens on larger devices. In this case, if you have a very large (and, yes, it may be absolutely beautiful) header image with an email opt-in form below/above it…oops the entire screen is covered and your user has no idea if they just got to a new page when they clicked on a button in the navigation.
Will they scroll down to find out if they’re on a new page? MAYBE. Will they be confused? YES. Will they find this whole thing annoying? YES. And, to state the obvious, we don’t want to annoy our visitors. They will leave.
1. Very short email opt-in text:
Copy writing is hard enough without throwing THIS in the mix, right? Sorry. But that’s one option. If it only takes up, let’s say, two lines of space on a mobile, you’re in much better shape.
2. Place your opt-in/sign-up form somewhere other than the header:
Options include: a pop-up that works well on mobile (Test it! Some do and some are so annoying that people will leave immediately.) or placing your opt-in somewhere else like the top of the sidebar. It’s all a balancing act: user experience (which is what we’re talking about here) vs PRETTINESS vs conversion rates on your sign-up form vs…probably other things too. But the reality is that no one is signing up for a mailing list before reading SOME kind of content on the site first. If they leave the page before they read anything or are generally annoyed by the experience of visiting the site, they won’t sign up JUST because the opt-in happens to be very visible.
3. Use a different header image on each page:
This can happen through the magic of code or by simply using a theme with this option. So, although your user may not get to see the actual content of a page before scrolling down, they WILL know that they have arrived at a new page because something will look different. Problem solved.
4. A custom solution of some sort:
Basically, remove or resize an element when the site is viewed on small screens. There is code involved as your site will have to do something special based on the width of the screen. This is the freestyle option and also the kind of thing that you’d discuss with your web developer if you have one. So it could be a matter of shrinking down the logo when it appears on a mobile device/small screen, which would leave a bit more room for opt-in text while still letting a bit of content peek through at the bottom of the screen. OR maybe you decide to remove that horizontal opt-in on mobile devices (but leave it on larger ones) and let them sign up using an opt-in in the sidebar/after blog posts once they scroll down further and actually read some content. A good designer/developer can work through a solution that makes sense for the actual layout of your site, typical behavior of your users and your goals.
A final word.
The only way to know if this is an issue on your site is to check. View the site on mobile. Check it out on a tablet or two.
You can use something like this tool to get a very rough idea of the situation on different devices. You can click on the tiny little screens to visit different pages on your site, scroll up and down, etc.
Or get super-fancy about your testing with something like Browserstack. There’s a free trial.
Again, the website visitor of 2015 knows how to scroll. So we just need to see SOME kind of change on the screen that indicates that we’re now on a different page…a visual sign that, yes, clicking on “Blog” actually took us somewhere other than the home page.
Take a look. Is this happening on your site? Have you noticed it on others?
*On the other hand…
The fact that every imaginary page looks the same made the graphics for this article infinitely easier. It feels like a fake website screenshot should take two minutes to create, right? Not the case.