Introduced as part of the HTML5 specification, the placeholder attribute “represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.”
This seemingly straightforward attribute contains a surprising amount of issues that prevent it from delivering on what it promises. Hopefully, I can convince you to stop using it.
Inputs are the gates through which nearly all e-commerce has to pass. Regardless of your feelings on the place of empathy in design, unusable inputs leave money on the table.
The presence of a placeholder attribute won’t be flagged by automated accessibility checking software. However, this doesn’t necessarily mean it’s usable. Ultimately, accessibility is about people, not standards, so it is important to think about your interface in terms beyond running through a checklist.
Call it remediation, inclusive design, universal access, whatever. The spirit of all these philosophies boils down to making things that people—all people—can use. Viewed through this lens, placeholder simply doesn’t hold up.
One of the attributes skipped over by browsers is placeholder. Because of this, placeholder content won’t be translated and will remain as the originally authored language.
If a person is requesting a page to be translated, the expectation is that all visible page content will be updated. Placeholders are frequently used to provide important input formatting instructions or are used in place of a more appropriate label element (more on that in a bit). If this content is not updated along with the rest of the translated page, there is a high possibility that a person unfamiliar with the language will not be able to successfully understand and operate the input.
This should be reason enough to not use the attribute.
While we’re on the subject of translation, it’s also worth pointing out that location isn’t the same as language preference. Many people set their devices to use a language that isn’t the official language of the country reported by their browser’s IP address (to say nothing of VPNs), and we should respect that. Make sure to keep your content semantically described—your neighbors will thank you!
Interoperability is the practice of making different systems exchange and understand information. It is a foundational part of both the Internet and assistive technology.
Semantically describing your content makes it interoperable. An interoperable input is created by programmatically associating a label element with it. Labels describe the purpose of an input field, providing the person filling out the form with a prompt that they can take action on. One way to associate a label with an input, is to use the for attribute with a value that matches the input’s id.
Without this for/id pairing, assistive technology will be unable to determine what the input is for. The programmatic association provides an API hook that software such as screen readers or voice recognition can utilize. Without it, people who rely on this specialized software will not be able to read or operate inputs.
The reason I am mentioning this is that placeholder is oftentimes used in place of a label element. Although I’m personally baffled by the practice, it seems to have gained traction in the design community. My best guess for its popularity is the geometrically precise grid effect it creates when placed next to other label-less input fields acts like designer catnip.
The floating label effect, a close cousin to this phenomenon, oftentimes utilizes the placeholder attribute in place of a label, as well.
A neat thing worth pointing out is that if a label is programmatically associated with an input, clicking or tapping on the label text will place focus on the input. This little trick provides an extra area for interacting with the input, which can be beneficial to people with motor control issues. Placeholders acting as labels, as well as floating labels, cannot do that.
The 2016 United States Census lists nearly 15 million people who report having cognitive difficulty — and that’s only counting individuals who choose to self-report. Extrapolating from this, we can assume that cognitive accessibility concerns affect a significant amount of the world’s population.
Self-reporting is worth calling out, in that a person may not know, or feel comfortable sharing that they have a cognitive accessibility condition. Unfortunately, there are still a lot of stigmas attached to disclosing this kind of information, as it oftentimes affects things like job and housing prospects.
Cognition can be inhibited situationally, meaning it can very well happen to you. It can be affected by things like multitasking, sleep deprivation, stress, substance abuse, and depression. I might be a bit jaded here, but that sounds a lot like conditions you’ll find at most office jobs.
The umbrella of cognitive concerns covers conditions such as short-term memory loss, traumatic brain injury, and Attention Deficit Hyperactivity Disorder. They can all affect a person’s ability to recall information.
When a person enters information into an input, its placeholder content will disappear. The only way to restore it is to remove the information entered. This creates an experience where guiding language is removed as soon as the person attempting to fill out the input interacts with it. Not great!
When your ability to recall information is inhibited, it makes following these disappearing rules annoying. For inputs with complicated requirements to satisfy—say creating a new password—it transcends annoyance and becomes a difficult barrier to overcome.
While more technologically-sophisticated people may have learned clever tricks such as cutting entered information, reviewing the placeholder content to refresh their memory, then re-pasting it back in to edit, people who are less technologically literate may not understand why the help content is disappearing or how to bring it back.
Considering that more and more of the world’s population is coming online, the onus falls on us as responsible designers and developers to make these people feel welcomed. Your little corner of the Internet (or intranet!) could very well be one of their first experiences online — assuming that the end user “will just know” is simple arrogance.
For someone who has never encountered it before, placeholder text may look like entered content, causing them to skip over the input. If it’s a required field, form submission will create a frustrating experience where they may not understand what the error is, or how to fix it. If it’s not a required field, your form still runs the unnecessary risk of failing to collect potentially valuable secondary information.
Placeholder help content is limited to just a string of static text, and that may not always be sufficient to communicate the message. It may need to have additional styling applied to it, or contain descriptive markup, attributes, images, and iconography.
This is especially handy in mature design systems. The additional styling options created by moving the string of text out of the input element means it can take advantage of the system’s design tokens, and all the benefits that come with using them.
Placeholder text’s length is also limited to the width of the input it is contained in. In our responsive, mobile-first world, there stands a very good chance that important information could be truncated:
The major browsers’ default styles for placeholder content use a light gray color to visually communicate that it is a suggestion. Many custom input designs follow this convention by taking the color of input content and lightening it.
Unfortunately, this technique is likely to run afoul of color contrast issues. Color contrast is a ratio determined by comparing the luminosity of the text and background color values; in this case, it’s the color of the placeholder text over the input’s background.
If the placeholder content has a contrast ratio that is too low to be perceived, it means that information critical to filling out a form successfully may not be able to be seen by people experiencing low vision conditions. For most common input font sizing, the ratio is 4.5:1.
Like all accessibility concerns, low vision conditions can be permanent or temporary, biological or environmental, or a combination. Biological disabilities include conditions like farsightedness, color blindness, dilated pupils, and cataracts. Environmental conditions include circumstances such as the glare of the mid-day sun, a battery-saving low brightness setting, privacy screens, grease and makeup left on your screen by your last phone call, and so on.
This ratio isn’t some personal aesthetic preference that I’m trying to force onto others arbitrarily. It’s part of a set of painstakingly-developed rules that help ensure that the largest possible swath of people can operate digital technology, regardless of their ability or circumstance. Consciously ignoring these rules is to be complicit in practicing exclusion.
And here’s the rub: In trying to make placeholder attributes inclusive, the updated higher contrast placeholder content color may become dark enough to be interpreted as entered input, even by more digitally literate people. This swings the issue back into cognitive concerns land.
High Contrast Mode
The Windows operating system contains a feature called High Contrast Mode. When activated, it assigns new colors to interface elements from a special high contrast palette that uses a limited number of color options. Here’s an example of what it may look like:
In High Contrast Mode, placeholder content is assigned one of those high contrast colors, making it look like pre-filled information. As discussed earlier, this could prevent people from understanding that the input may need information entered into it.
You may be wondering if it’s possible to update the styling in High Contrast Mode to make a placeholder more understandable. While it is possible to target High Contrast Mode in a media query, I implore you not to do so. Front-end developer Hugo Giraudel said it best:
“High contrast mode is not about design anymore but strict usability. You should aim for highest readability, not color aesthetics.”
The people that rely on High Contrast Mode use it because of how predictable it is. Unduly altering how it presents content may interfere with the only way they can reliably use a computer. In the case of lightening the color of placeholder content to make it appear like its non-High Contrast Mode treatment, you run a very real risk of making it impossible for them to perceive.
To recap, the placeholder attribute:
Can’t be automatically translated;
Is oftentimes used in place of a label, locking out assistive technology;
Can hide important information when content is entered;
Can be too light-colored to be legible;
Has limited styling options;
May look like pre-filled information and be skipped over.
Eesh. That’s not great. So what can we do about it?
Move the placeholder content above the input, but below the label:
Communicates a visual and structural hierarchy:
What this input is for,
Things you need to know to use the input successfully, and
the input itself.
Can be translated.
Won’t look like pre-filled information.
Can be seen in low vision circumstances.
Won’t disappear when content is entered into the input.
Can include semantic markup and be styled via CSS.
Additionally, the help content will be kept in view when the input is activated on a device with a software keyboard. If placed below the input, the content may be obscured when an on-screen keyboard appears at the bottom of the device viewport:
Here’s how to translate our designed example to code:
Your employee ID number
Can be found on your employee intranet profile. Example: <samp>a1234567-89</samp>.
This isn’t too much of a departure from a traditional accessible for/id attribute pairing: The label element is programmatically associated with the input via its id declaration of “employee-id”. The p element placed between the label and input elements acts as a replacement for a placeholder attribute.
“So,” you may be wondering. “Why don’t we just put all that placeholder replacement content in the label element? It seems like it’d be a lot less work!” The answer is that developer convenience shouldn’t take priority over user experience.
By using aria-describedby to programmatically associate the input with the p element, we are creating a priority of information for screen readers that has parity with what a person browsing without a screen reader would experience. aria-describedby ensures that the p content will be described last, after the label’s content and the kind of input it is associated with.
In other words, it’s what content the input is asking for, what type of input it is, then additional help if you need it — exactly what someone would experience if they look at form input.
User experience encompasses all users, including those who navigate with the aid of screen readers. The help content is self-contained and easy to navigate to and from, should the person using a screen reader need to re-reference it. As it is a self-contained node, it can also be silenced (typically with the Control key) without risking muting other important information.
Including the help content as part of the label makes it unnecessarily verbose. labels should be meaningful, but also concise. Adding too much information to a label may have the opposite of the desired effect, making it too long to recall or simply too frustrating to listen to all the way through. In fact, the Web Content Accessibility Guidelines has rules that specifically address this: Success Criteria 2.4.6 and 3.3.2.
Good copywriting creates labels that clearly and succinctly describe the input’s purpose. Do a good enough job here and the label cuts through the ambiguity, especially if you test it beforehand.
Good user experience is all about creating intelligent flows that preempt people’s needs, wants, and desires by capitalizing on existing information to remove as many unnecessary questions as possible.
Accommodating the people who use your website or web app means taking a critical eye at what you take for granted when you browse the Internet. By not making assumptions about other people’s circumstances — including the technology they use — you can do your part to help prevent exclusion.
Take some time to review your design and code and see what doesn’t stand up to scrutiny — checking to see if you use the placeholder attribute might be a good place to start.
Smashing Magazine gave us a little surprise recently: Its website has been completely overhauled, switching away from WordPress to Netlify. One of the several reasons for the move is cost: Netlify allows for a static version of a website, which can be hosted directly on a content delivery network (CDN), reducing the number of web servers that are needed. In addition, because CDNs are located near users, accessing the website becomes faster.
I admit it. I’m a geek. Or am I a nerd? Definitely not a dweeb, but probably a keener (that’s a Canadian term).
One of my favorite things to do (as a marketer) is to reverse-engineer marketing experiences – good and bad – to define an equation that can be used to score them. It’s primarily a heuristic exercise, but I find it’s an incredibly helpful way to analyze a design, especially when it has the ability to leave you with a simple checklist of things to consider to make it better.
In the past, I’ve created The Clarity Equation (for value propositions), and The Testimonial Equation (for customer social proof).
For today’s post, I focused on popup design examples that exude positive characteristics, to create The Popup Delight Equation.
What Makes a Popup Design Delightful?
Hands up if you thought “That’s an oxymoron.”? I know, I know, how can a popup be delightful? Well, just like any other aspect of marketing and web design, it’s all about the details, and finding those magical ways of combining what makes your brand special, with a dose of responsible interaction design.
I see delightful popups all the time, usually because the copy is hilarious, or the design is surprising.
If your perception of a popup is one of those ugly WordPress template type things with three big green checkmark bullet icons (see below), and a Johnson box (those fat dashed red lines that resemble a coupon cutout), then no, that’s not delightful. That’s just shitty.
It is possible to make a popup delightful, and it’s not that hard if you know which aspects of interaction and visual design are required to do it right. Which brings me to…
The Popup Delight Equation
The equation (shown in the image at the top of the post) is broken down into 7 principles; Clarity, Control, Creativity, Relevance, Charm, Value, & Respect.
Each principle has a few checklist questions that build up a score between 0 and 1 (you can choose 0.5 for any of them if you like) for a maximum score of 7. These are then combined and turned into an overall percentage score as shown below:
EXAMPLE POPUP DELIGHT SCORE
I’ll explain each of the delight principles, and then I’ll get to the popup designs.
(skip to the examples)
Principle #1 – Clarity
The clarity principle represents how easy it is to understand the offer presented by the popup. First, there’s the immediacy factor, can you read and understand it very quickly. The second part concerns the use of a primary “hero” image and whether it helps or hinders visual communication.
Clarity = ( Immediacy + Hero ) / 2
Can you explain what the offer is after looking at it for only five seconds? Yes 1, No 0
Is there a primary image (not a logo) that shows what you will get (or who you will get it from)? Yes 1, No 0 If it’s a generic site-wide offer like a discount that doesn’t need an image, score 1.
Principle #2 – Control
The control principle represents a visitor’s ability to fully control the experience. This includes being able to easily accept, reject, or discard the interruption.
Control = ( Close [On] + Close [Out] + Close [Esc] + Continue + Cancel ) / 5
Is there a close button (typically an x) on the popup? Yes 1, No 0 If it’s a fullscreen “Welcome Mat” you can take a 1 here unless there’s no “No thanks” button.
Does the popup close if you click on the background surrounding it? Yes 1, No 0 If it’s a fullscreen “Welcome Mat” you can take a 1 here.
Does the popup close if you press the escape button on your keyboard? Yes 1, No 0
Is it clear what you need to click in order to accept the offer? Yes 1, No 0
Is it clear what you need to click in order to decline the offer? (Score 1 if there’s only one option) Yes 1, No 0
Principle #3 – Creativity
Like any type of marketing communications, a creative popup will be more likely to be well received. This principle is comprised of visual design esthetic, the inclusion of (non-tacky) animation, and how on-brand it is.
Creativity = ( Design + Animation + Brand ) / 3
Visual Design Esthetic
Is it unique looking (non-rectangle), or just look awesome to you (some subjectivity is okay here)? Yes 1, No 0
Does it include some motion as it appears that makes it more noticable. Yes 1, No 0.5, Yes, but it’s annoying 0
Does it match the site’s design or look like a cheap template that could be from any site? Yes 1, No 0
Principle #4 – Relevance
A popup that isn’t highly relevant will convert poorly and moves you closer to the wrong end of the interruption spectrum. This principle includes congruence (how aligned the offer is with the page you are visiting) and targeting.
Relevance = ( Congruence + Targeting ) / 2
Does the offer feel related to the page you’re on? Yes 1, No 0 If it’s somethng like a site-wide discount it’s a 1, but if it’s a blog subscribe popup on a homepage, product or pricing page etc. (not your blog), that’s a 0.
Score 1 unless one of these scenarios is true: it doesn’t apply to you (such as wrong country), or it’s referring to you coming from a page/partner/place that you didn’t come from (and in general if it’s making assumptions about you that are incorrect), in which case it’s a 0
Principle #5 – Charm
You know a charming marketing experience when you see one. Same goes for popups. If the design and/or copy make you laugh, or smile, or want to share it with someone, it’s a winner.
Charm = ( Smile [Design] + Smile [Copy] ) / 2
Does the visual design make you smile? Yes 1, No 0
Does the copywriting make you smile? Yes 1, No 0
Principle #6 – Value
Some popups only contain information, some have a discount, others ask you for personal information in order to claim the offer. The value principle is concerned with how fair of an exchange it is, and it’s completely binary. If the reward is equal or greater than the ask/effort, you win.
Value = ( Reward >= Ask )
Reward > Ask
Is the offer worth more than or equal to the requested information/effort? Yes 1, No 0 Score a 0 if it seems unfair, such as a ton of form fields for very little in return.
Principle #7 – Respect
The respect principle leans on the concept of “a responsible use of technology”. The biggest offense in this regard is the idea of “Confirm Shaming”. This is where there are two options (continue or cancel), but in order to cancel, you have to click a button/link with offensive copy – such as “I don’t like free money”. You get penalized extra for this offense.
Respect = 1 – 2*(Confirm Shaming)
If this is a two-button Accept/Decline popup, and the decline button is offensive in any way, it’s confirm-shaming. Yes 1, No 0 A 1 here results in a -1 score for principle 7.
Thanks to these awesome companies/people for inspiring me to include them: Tim Ferriss, Leesa, ClassPass, How-To Geek, Groupon, Tasting Table, Get Response, Lemonstand, PetSmart, Travelzoo.
Note: None of these popup designs score 100%
I’m sure you’ll like some, and dislike others. I’m including a wide variety of examples because they each show different aspects of the delight criteria.
Popup Design #1: Tim Ferriss
POPUP DELIGHT SCORE
This fullscreen “Welcome Mat” popup takes over the screen when you’re leaving. I dislike this style when it happens when you arrive, but on exit, it’s totally cool. It’s a simple and classy design. Let’s score it!
CLARITY: I gave it 0.5 for immediacy as I had to figure out what the content was (fortunately I just bought a book about Seneca so I caught on). Having Tim in the background makes it very clear it’s coming from him.
CONTROL: The only failing here is the lack of the escape button working, which is my favourite way of dismissing a popup (I’m a big keyboard shortcut fan). It’s much faster than hunting for a close icon/button.
CREATIVITY: I love the design. It’s fresh and open. The visual hierarchy of the buttons is perfect: dominant continue, secondary cancel.
RELEVANCE: It loses out a bit on relevance, as it’s a speaker contact page, making this popup incongruent.
CHARM: Visually, yes. His authentic smile makes you feel welcome.
VALUE: It’s a 2-step opt-in form (email address if you click “Unlock”), which is a fair deal.
RESPECT: “No thanks, I’m not interested.” is great. It’s all you need to do on your cancel button. No confirm shaming here.
Popup Design #2: Leesa Mattress – Countdown Timer
POPUP DELIGHT SCORE
There are so many mattress 2.0 companies out there now, it’s hard to tell them apart aside from the colour. This one’s really plain, and quite boring, but it does get bonus points for the countdown timer, and not breaking any of the fundamental delight rules.
CONTROL: Full control.
CREATIVITY: It got it’s creativity 1/3 only for being on brand, but I added a 0.5 bonus for the countdown timer, which is a nice touch for ecommerce.
RELEVANCE: Timely and on point.
CHARM: Nah. They could do way more with the copy and the visuals are kinda bleh.
VALUE: Hard to argue with a discount.
RESPECT: No problems here.
Popup Design #3: Tasting Table
POPUP DELIGHT SCORE
I like the use of a question headline in this popup. If you aren’t then you probably shouldn’t be on the site, so they’re helping to self select their ideal customer/subscriber. I’m not a foodie, however, so I’m closing it
CLARITY: Get an email, about food. Easy.
CONTROL: No escape button close on this one either. Grrr.
CREATIVITY: It gets a few points for being on brand, but nothing original otherwise.
RELEVANCE: It’s food.
CHARM: Lots of potential, but doesn’t deliver.
VALUE: I was going to ding it for asking for a zipcode, but it probably increases the value so it get’s a pass.
Popup Design #4: Get Response
POPUP DELIGHT SCORE
Simple and a bit weird (and basic) looking, but it rocks the scores beacuse it doesn’t break the fundamental delight rules, and adds some playfulness to stand out. Give it a little wiggle animation to go with that cute little alien thing and it would get a perfect score.
CLARITY: Pretty clear, and they get a few extra seconds of reading because it’s cute.
CONTROL: Full control.
CREATIVITY: Not the slickest design, but I think it’s got a lot of fun in it.
RELEVANCE: It’s SaaS, and this is for a free trial. Totally relevant.
CHARM: This one made me smile based on the copy and the design. Nicely done.
VALUE: It’s no different than clicking any other signup button on the site, so it’s regular ol’ fair.
A quick contrast break…
Some pretty amazing score so far, and that’s because they’re doing it right. Before I continue, I just want to run one of the examples from yesterday’s “6 Really Bad Website Popup Examples” post through The Popup Delight Equation to provide some perspective.
POPUP DELIGHT SCORE
Popup Design #5: Groupon
POPUP DELIGHT SCORE
CLARITY: I would’ve given it a higher score if there had been a photo of Vancouver in the popup, as it gives that immediate sense of locale.
CONTROL: Neither the escape key or clicking the background close the popup, which is really annoying when the “No thanks” link is so tiny. I dinged it extra for that.
CREATIVITY: This is what I’m referring to re: looking different from a shape perspective. Yes, it’s a circle and not a rectangle, but that’s the point. 99.999999% of popups are rectangles. So this simple change makes a world of difference. And the transparency allows lots of breathing room, and for it to not look like it’s completely shutting out the site.
VALUE: Hard to argue with deals.
RESPECT: Good job.
Popup Design #6: How-To Geek
POPUP DELIGHT SCORE
I bet you didn’t expect a score like that. Which just goes to show that when you do some of the fundamentals correctly: it’s very clear, it’s easy to control, relevant, fair value, and respectful. It looks pretty awful, but that’s why it scores so poorly on creativity and charm. The fundamentals matter a lot. Get those right, and you can spend your time being exceptional.
CLARITY: Super obvious.
CONTROL: All functional.
CREATIVITY: On brand but nothing else positive from a creative standpoint.
CHARM: I gave it a tiny bit cos of the nerdy logo guy.
VALUE: Standard newsletter value.
RESPECT: All good.
Popup Design #7: ClassPass
POPUP DELIGHT SCORE
I thought this would do better when I first saw it, then after playing with the interaction it let me down a bit.
CLARITY: This is an entry popup, so the visuals are covered. Having a photo in the popup would help with the clarity around what kind of class they’re talking about for a first-time visitor.
CONTROL: no on, out or esc. The reason having no visible close button is undelightful is because it forces you to choose (and read) one of the buttons to close it. That’s too much effort when I’ve decided I want to get rid of it.
CREATIVITY: On brand, nothing else.
CHARM: A bit cold.
VALUE: Without question.
RESPECT: Good job.
Popup Design #8: Lemonstand – Squishy Animation
POPUP DELIGHT SCORE
I stuck an animated GIF in for this one so you could see the animation. It’s a prety plain looking popup aside from that, but you can see how it does add that extra attention-grabbing effect.
CLARITY: Ebook with an image of a book. Done.
CONTROL: Full control.
CREATIVITY: Scores for animation and being on brand. Mix in a different shape or a design like a lemon stand for bonus points
RELEVANCE: It’s on the blog, so full points.
CHARM: Only the squishy animation saves it here.
VALUE: Fair indeed.
RESPECT: No confirm shaming here.
Popup Design #9: PetSmart
POPUP DELIGHT SCORE
Granted, this is the lamest of the bunch, but I included it because of its simplicity. Sometimes an offer is just an informative statement.
CREATIVITY: Nope. Sorry.
RELEVANCE: It’s an ecommerce store. Yes.
CHARM: Nope. Add some kittens!
RESPECT: All good.
Popup Design #10: Travelzoo << The worst!
POPUP DELIGHT SCORE
Looks sure can be deceiving. At first glance I really like this one. Then I started playing with it. And it became the worst popup of them all.
CLARITY: Yep, super clear with the photo of Ireland.
CONTROL: Can’t click the background to close. Oh, and wait, no matter what you do, IF you manage to close it you get turfed to the homepage. Horrible.
CREATIVITY: Minor points for the rounded corners.
CHARM: Started with zero, got worse from there.
VALUE: See respect, below.
RESPECT: Wow. If I were critiquing this solely on a screenshot, I’d have given them a 1 for respect. But I just tried to interact with it. If you close the popup (without signing up) it redirects you right back to the homepage. You can’t even see the deal. That’s seriously gnarly. Shoulda put this one in yesterday’s post.
Popup Design #11: Tim Ferriss
POPUP DELIGHT SCORE
We close it out with another from Mr. Ferriss. It’s from the same page as the first one, but instead of being an exit popup, it’s triggered when you click a small banner that appears in the lower-left as you scroll down the page. Because it’s an on-click triggered popup, you typically get full points for relevance and clarity as you asked for it specifically.
CLARITY: Super clear
CONTROL: No escape key function, and the close (x) button doesn’t always show up.
CREATIVITY: Looks great,and on brand.
CHARM: As before, the friendly photo works.
VALUE: As expected.
RESPECT: Not quite as nice as the other one on the cancel link, so I’m dinging him a little.
Alrighty then, that’s a wrap for those 10 delightful popups, and one most certainly not delightful (Travelzoo) popup. Let me know if you agree/disagree with my ratings.
How Delightful are Your Popups?
I showed you mine, now show me yours! I hope you enjoyed learning about the delightful side of the website popup. I’d really love to see some of your popups, and how you score them, so drop a URL in the comments with your score and we can see if I agree.
Before I bring the heat, I want to talk a bit about what it’s like, as a marketer, to be marketing something that’s difficult to market.
You see, there’s a common problem that many marketers face, and it’s also one of the most asked questions I hear when I’m on the road, as a speaker:
“How do I great marketing for a boring product or service?”
That’s a tough challenge for sure, although the good news is that if you can inject some originality you’ll be a clear winner, as all of your competitors are also boring. However, I think I can one-up that problem:
“How do I do great marketing for something that’s universally hated, like popups?”
We knew we had a big challenge ahead of us when we decided to release the popups product because of the long legacy of manipulative abuse it carries with it.
In fact, as the discussion about product direction began in the office, there were some visceral (negative) reactions from some folks on the engineering team. They feared that we were switching over to the dark side.
It makes sense to me that this sentiment would come from developers. In my experience, really good software developers have one thing in common. They want to make a difference in the world. Developers are makers by design, and part of building something is wanting it to have a positive impact on those who use it.
To quell those types of fears requires a few things;
Education about the positive use cases for the technology,
Evidence in the form of good popup examples, showcasing how to use them in a delightful and responsible manner,
Features such as advanced triggers & targeting to empower marketers to deliver greater relevance to visitors,
And most important of all – it requires us to take a stance. We can’t change the past unless we lead by example.
It’s been my goal since we started down this path, to make it clear that we are drawing a line in the sand between the negative past, and a positive future.
Which is why we initially launched with the name “Overlays” instead of popups.
Overlays vs. Popups – The End of an Era
It made a lot of sense at the time, from a branding perspective. Through podcast interviews and public speaking gigs, I was trying to change the narrative around popups. Whenever I was talking about a bad experience, I would call it a popup. When it was a positive (and additive) experience, I’d call it an overlay. It was a really good way to create a clear separation.
I even started to notice more and more people calling them overlays. Progress.
Unfortunately, it would still require a lot of continued education to make a dent in the global perception of the terminology, that with the search volume for “overlays” being tiny compared to popups, factored heavily into our decision to pivot back to calling a popup a popup.
Positioning is part of a product marketer’s job – our VP of Product Marketing, Ryan Engley recently completed our most recent positioning document for the new products. Just as the umbrella term “Convertables” we had been using to include popups and sticky bars had created confusion, “Overlays” was again making the job harder than it should have been. You can tell, just from reading this paragraph alone that it’s a complex problem, and we’re moving in the right direction by re-simplifying.
The biggest challenge developing our positioning was the number of important strategic questions that we needed to answer first. The market problems we solve, for who, how our product fits today with our vision for the future, who we see ourselves competing with, whether we position ourselves as a comprehensive platform that solves a unique problem, or whether we go to market with individual products and tools etc. It’s a beast of an undertaking.
My biggest lightbulb moment was working with April Dunford who pushed me to get away from competing tool-to-tool with other products. She said in order to win that way, you’d have to be market leading in every tool, and that won’t happen. So what’s the unique value that only you offer and why is it important?
Let’s get back to the subject of popups. I think it’s important to look back at the history of this device to better understand how they came about, and why they have always caused such a stir.
Browser Interaction Models & the History of the Popup
The talk I was doing much of last year was called Data-Driven Design. As part of the talk, I get into interaction design trends. I’ve included the “Trendline” slide below.
You can see that the first occurrence of a popup was back in 1998. Also, note that I included Overlays in late 2016 when we first started that discussion.
Like many bad trends, popups began as web developers started trying to hack browser behavior to create different interruptive interaction modes. I know I made a lot of them back in the day, but I was always doing it to try to create a cool experience. For example, I was building a company Intranet and wanted to open up content in a new window, resize it, and stick it to the side of the screen as a sidebar navigation for the main window. That was all good stuff.
Tabbed browsers have done a lot to help clean up the mess of multiple windows, and if you couple that with popup blockers, there’s a clear evolution in how this type of behavior is being dealt with.
Then came the pop-under, often connected to Malware virus schemes where malicious scripts could be running in the background and you wouldn’t even know.
And then the always fun “Are you sure you want to do that?” Inception-like looping exit dialogs.
So we have a legacy of abuse that’s killed the perception of popups.
What if Popups Had Been Built Into Browsers?
Imagine for a moment that a popup was simply one of many available interaction models available in the browsing experience. They could have had a specification from the W3C, with a set of acceptable criteria for display modes. It would be an entirely different experience. Sure, there would still be abuse, but it’s an interesting thought.
This is why it’s important that we (Unbounce and other like-minded marketers and Martech software providers) take a stance, and build the right functionality into this type of tool so that it can be used responsibly.
Furthermore, we need to keep the dialog going, to educate the current and future generations of marketers that to be original, be delightful, be a business that represents themselves as professionals, means taking responsibility for our actions and doing everything we can to take the high road in our marketing.
Alright, before I get to the really bad website popup examples, I’ll leave you with this thought:
Technology is NOT the problem, We Are.
It’s the disrespectful and irresponsible marketers who use manipulative pop-psychology tactics for the sake of a few more leads, who are the problem. We need to stop blaming popups for bad experiences, and instead, call out the malicious marketers who are ruining it for those trying to do good work.
It’s a tough challenge to reverse years of negative perception, but that’s okay. It’s okay because we know the value the product brings to our customers, how much extra success they’re having, and because we’ve built a solution that can be configured in precise ways that make it simple to use in a responsible manner (if you’re a good person).
What does a bad popup actually look like? Well, it depends on your judging criteria, and for the examples below, I was considering these seven things, among others:
Clarity: Is it easy to figure out the offer really quickly?
Relevance: Is it related to the content of the current page?
Manipulation: Does it use psychological trickery in the copy?
Design: Is it butt ugly?
Control: Is it clear what all options will do?
Escape: Can you get rid of it easily?
Value: Is the reward worth more than the perceived (or actual) effort?
#1 – Mashable Shmashable
What’s so bad about it?
If you peer into the background behind the popup, you’ll see a news story headline that begins with “Nightmare Alert”. I think that’s a pretty accurate description of what’s happening here.
Design: Bad. The first thing I saw looks like a big mistake. The Green line with the button hanging off the bottom looks like the designer fell asleep with their head on the mouse.
Clarity: Bad. And what on earth does the headline mean? click.click.click. Upon deeper exploration, it’s the name of the newsletter, but that’s not apparent at all on first load.
Clarity: worse. Then we get the classic “Clear vs. Clever” headline treatment. Why are you talking about the pronunciation of the word “Gif”? Tell me what this is, and why I should care to give you my email.
Design: Bad. Also, that background is gnarly.
#2 – KAM Motorsports Revolution!
What’s so bad about it?
It’s motorsports. It’s not a revolution. Unless they’re talking about wheels going round in circles.
Clarity: Bad. The headline doesn’t say what it is, or what I’ll get by subscribing. I have to read the fine print to figure that out.
Copy: Bad. Just reading the phrase “abuse your email” is a big turn off. Just like the word spam, I wasn’t thinking that you were going to abuse me, but now it’s on my mind.
Relevance: Bad. Newsletter subscription popups are great, they have a strong sense of utility and can give people exactly what they want. But I don’t like them as entry popups. They’re much better when they use an exit trigger, or a scroll trigger. Using a “Scroll Up” trigger is smart because it means they’ve read some of your content, and they are scrolling back up vs. leaving directly, which is another micro-signal that they are interested.
#3 – Utterly Confused
(Source unknown – I found it on confirmshaming.tumblr.com)
What’s so bad about it?
I have no earthly clue what’s going on here.
Clarity: Bad. I had to re-read it five times before I figured out what was going on.
Control: Bad. After reading it, I didn’t know whether I would be agreeing with what they’re going to give me, or with the statement. It’s like an affirmation or something. But I have no way of knowing what will happen if I click either button. My best guess after spending this much time writing about it is that it’s a poll. But a really meaningless one if it is. Click here to find out how many people agreed with “doing better”…
It ends with “Do Better”. I agree. They need to do a lot better.
#4 – Purple Nurple
What’s so bad about it?
Manipulation: Bad. Our first “Confirm Shaming” example. Otherwise known as “Good Cop / Bad Cop”. Forcing people to click a button that says “Detest” on it is so incongruent with the concept of a mattress company that I think they’re just being cheap. There’s no need to speak to people that way.
I found a second popup example by Purple (below), and have to give them credit. The copy on this one is significantly more persuasive. Get this. If you look at the section I circled (in purple), it says that if you subscribe, they’ll keep you up to date with SHIPPING TIMES!!! Seriously? If you’re going to email me and say “Hey Oli, great news! We can ship you a mattress in 2 weeks!”, I’ll go to Leesa, or Endy, or one of a million other Casper copycats.
#5 – Hello BC
What’s so bad about it?
Context: This is an entry popup, and I have never been to this site before.
Relevance: Bad. The site is Hellobc.com, the title says “Supernatural British Columbia”, and the content on the page is about skydiving. So what list is this for? And nobody wants to be on a “list”, stop saying “list”. It’s like saying email blast. Blast your list. If you read the first sentence it gets even more confusing, as you’ll be receiving updates from Destination BC. That’s 4 different concepts at play here.
Design: Bad. It’s legitimately butt ugly. I mean, come on. This is for Beautiful Supernatural British Columbia ffs. It’s stunning here. Show some scenery to entice me in.
Value: Bad. Seeing that form when I arrive on the page is like a giant eff you. Why do they think it’s okay to ask for that much info, with that much text.
Control: Bad. And there’s not any error handling. However, the submit button remains inactive until you magically click the right amount of options to trigger it’s hungry hungry hippo mouth to open.
Well, that’s all for today, folks. You might be wondering why there were so few popup examples in this post, keep reading and I’ll explain why.
Coming Up Tomorrow – Good Popups, YAY!!!
One of the most interesting things I’ve noticed of late is that there is a shift in quality happening in the popup world. When the team rallied to find the bad popup examples above, we found at least 10x as many good ones as bad. That’s something to feel pretty good about. Perhaps the positive energy we’re helping to spread is having an impact.
So get your butt back here tomorrow to see 20+ delightful website popup examples. More importantly, I’ll also be sharing “The Delight Equation”, my latest formula for measuring quantifying how good your popups really are.
The monetization of the process by which you share your knowledge. Benjamin Franklin once said, “An investment in knowledge pays the best interest.” Even with the passing of years, this quote hasn’t lost its meaning. But what if you could create a business entirely out of your knowledge? Would the returns be significantly higher? The answers to the above questions are in this article. The online learning industry continues to grow by leaps and bounds every day. Individuals who have chosen to share their knowledge and expertise digitally have seen amazing returns. However, the truth is, not many people are…
Think about the last thing you shared on the internet. Maybe it was an insightful video on the political turmoil in a far away country, or maybe it was a funny picture of a cat wearing a bow tie. Either way – you saw it, had an emotional reaction to it and decided to share it with others. But in the process of sharing the latest video, picture or article to your social media feeds – did you ever stop to think about why you shared it? What was your emotional response to the content? What about that response made…
One lazy Sunday evening, I decided to order Thai delivery for dinner. It was a Green-Curry-and-Crispy-Wonton kind of night.
A quick google search from my iPhone turned up an ad for a food delivery app. In that moment, I wanted to order food fast, without having to dial a phone number or speak to a human. So, I clicked.
From the ad, I was taken to the company’s mobile website. There was a call-to-action to “Get the App” below the fold, but I didn’t want to download a whole app for this one meal. I would just order from the mobile site.
Dun, dun, duuuun.
Over the next minute, I had one of the most frustrating ordering experiences of my life. Labeless hamburger menus, the inability to edit my order, and an overall lack of guidance through the ordering process led me to believe I would never be able to adjust my order from ‘Chicken Green Curry’ to ‘Prawn Green Curry’.
After 60 seconds of struggling, I gave up, utterly defeated.
I know this wasn’t a life-altering tragedy, but it sure was an awful mobile experience. And I bet you have had a similar experience in the last 24 hours.
Let’s think about this for a minute:
This company paid good money for my click
I was ready to order online: I was their customer to lose
I struggled for about 30 seconds longer than most mobile users would have
I gave up and got a mediocre burrito from the Mexican place across the street.
Not only was I frustrated, but I didn’t get my tasty Thai. The experience left a truly bitter taste in my mouth.
10 test ideas for optimizing your mobile website!
Get this checklist of 10 experiment ideas you should test on your mobile website.
Why is mobile website optimization important?
In 2017, every marketer ‘knows’ the importance of the mobile shopping experience. Americans spend more time on mobile devices than any other. But we are still failing to meet our users where they are on mobile.
For most of us, it is becoming more and more important to provide a seamless mobile experience. But here’s where it gets a little tricky…
“Conversion optimization”, and the term “optimization” in general, often imply improving conversion rates. But a seamless mobile experience does not necessarily mean a high-converting mobile experience. It means one that meets your user’s needs and propels them along the buyer journey.
I am sure there are improvements you can test on your mobile experience that will lift your mobile conversion rates, but you shouldn’t hyper-focus on a single metric. Instead, keep in mind that mobile may just be a step within your user’s journey to purchase.
So, let’s get started! First, I’ll delve into your user’s mobile mindset, and look at how to optimize your mobile experience. For real.
What’s different about mobile?
First things first: let’s acknowledge that your user is the same human being whether they are shopping on a mobile device, a desktop computer, a laptop, or in-store. Agreed?
So, what’s different about mobile? Well, back in 2013, Chris Goward said, “Mobile is a state of being, a context, a verb, not a device. When your users are on mobile, they are in a different context, a different environment, with different needs.”
Your user is the same person when she is shopping on her iPhone, but she is in a different context. She may be in a store comparing product reviews on her phone, or she may be on the go looking for a good cup of coffee, or she may be trying to order Thai delivery from her couch.
This is why many mobile optimization experts recommend having a mobile website versus using responsive design.
Responsive design is not an optimization strategy. We should stop treating mobile visitors as ‘mini-desktop visitors’. People don’t use mobile devices instead of desktop devices, they use it in addition to desktop in a whole different way.
– Talia Wolf, Founder & Chief Optimizer at GetUplift
Step one, then, is to understand who your target customer is, and what motivates them to act in any context. This should inform all of your marketing and the creation of your value proposition.
(If you don’t have a clear picture of your target customer, you should re-focus and tackle that question first.)
Step two is to understand how your user’s mobile context affects their existing motivation, and how to facilitate their needs on mobile to the best of your ability.
Understanding the mobile context
To understand the mobile context, let’s start with some stats and work backwards.
Americans spend more than half (54%) of their online time on mobile devices (Source: KPCB, 2016)
Mobile accounts for 60% of time spent shopping online, but only 16% of all retail dollars spent (Source: ComScore, 2015)
Insight: Americans are spending more than half of their online time on their mobile devices, but there is a huge gap between time spent ‘shopping’ online, and actually buying.
29% of smartphone users will immediately switch to another site or app if the original site doesn’t satisfy their needs (Source: Google, 2015)
Of those, 70% switch because of lagging load times and 67% switch because it takes too many steps to purchase or get desired information (Source: Google, 2015)
Insight: Mobile users are hypersensitive to slow load times, and too many obstacles.
So, why the heck are our expectations for immediate gratification so high on mobile? I have a few theories.
Mobile devices provide constant access to the internet, which means a constant expectation for reward.
“The fact that we don’t know what we’ll find when we check our email, or visit our favorite social site, creates excitement and anticipation. This leads to a small burst of pleasure chemicals in our brains, which drives us to use our phones more and more.” – TIME, “You asked: Am I addicted to my phone?”
If non-stop access has us primed to expect non-stop reward, is it possible that having a negative mobile experience is even more detrimental to our motivation than a negative experience in another context?
When you tap into your Facebook app and see three new notifications, you get a burst of pleasure. And you do this over, and over, and over again.
So, when you tap into your Chrome browser and land on a mobile website that is difficult to navigate, it makes sense that you would be extra annoyed. (No burst of fun reward chemicals!)
A mobile device is a personal device
Another facet to mobile that we rarely discuss is the fact that mobile devices are personal devices. Because our smartphones and wearables are with us almost constantly, they often feel very intimate.
In fact, our smartphones are almost like another limb. According to research from dscout, the average cellphone user touches his or her phone 2,167 times per day. Our thumbprints are built into them, for goodness’ sake.
Just think about your instinctive reaction when someone grabs your phone and starts scrolling through your pictures…
It is possible, then, that our expectations are higher on mobile because the device itself feels like an extension of us. Any experience you have on mobile should speak to your personal situation. And if the experience is cumbersome or difficult, it may feel particularly dissonant because it’s happening on your mobile device.
User expectations on mobile are extremely high. And while you can argue that mobile apps are doing a great job of meeting those expectations, the mobile web is failing.
If yours is one of the millions of organizations without a mobile app, your mobile website has got to work harder. Because a negative experience with your brand on mobile may have a stronger effect than you can anticipate.
Even if you have a mobile app, you should recognize that not everyone is going to use it. You can’t completely disregard your mobile website. (As illustrated by my extremely negative experience trying to order food.)
You need to think about how to meet your users where they are in the buyer journey on your mobile website:
What are your users actually doing on mobile?
Are they just seeking information before purchasing from a computer?
Are they seeking information on your mobile site while in your actual store?
The great thing about optimization is that you can test to pick off low-hanging fruit, while you are investigating more impactful questions like those above. For instance, while you are gathering data about how your users are using your mobile site, you can test usability improvements.
Usability on mobile websites
If you are looking take get a few quick wins to prove the importance of a mobile optimization program, usability is a good place to begin.
The mobile web presents unique usability challenges for marketers. And given your users’ ridiculously high expectations, your mobile experience must address these challenges.
Below are four of the core mobile limitations, along with recommendations from the WiderFunnel Strategy team around how to address (and test) them.
Note: For this section, I relied heavily on research from the Nielsen Norman Group. For more details, click here.
1. The small screen struggle
No surprise, here. Compared to desktop and laptop screens, even the biggest smartphone screen is smaller―which means they display less content.
“The content displayed above the fold on a 30-inch monitor requires 5 screenfuls on a small 4-inch screen. Thus mobile users must (1) incur a higher interaction cost in order to access the same amount of information; (2) rely on their short-term memory to refer to information that is not visible on the screen.” – Nielsen Norman Group, “Mobile User Experience: Limitations and Strengths”
Consider persistent navigation and calls-to-action. Because of the smaller screen size, your users often need to do a lot of scrolling. If your navigation and main call-to-action aren’t persistent, you are asking your users to scroll down for information, and scroll back up for relevant links.
Note: Anything persistent takes up screen space as well. Make sure to test this idea before implementing it to make sure you aren’t stealing too much focus from other important elements on your page.
2. The touchy touchscreen
Two main issues with the touchscreen (an almost universal trait of today’s mobile devices) are typing and target size.
Typing on a soft keyboard, like the one on your user’s iPhone, requires them to constantly divide their attention between what they are typing, and the keypad area. Not to mention the small keypad and crowded keys…
Target size refers to a clickable target, which needs to be a lot larger on a touchscreen than it is does when your user has a mouse.
So, you need to make space for larger targets (bigger call-to-action buttons) on a smaller screen.
Test increasing the size of your clickable elements. Google provides recommendations for target sizing:
You should ensure that the most important tap targets on your site—the ones users will be using the most often—are large enough to be easy to press, at least 48 CSS pixels tall/wide (assuming you have configured your viewport properly).
Less frequently-used links can be smaller, but should still have spacing between them and other links, so that a 10mm finger pad would not accidentally press both links at once.
You may also want to test improving the clarity around what is clickable and what isn’t. This can be achieved through styling, and is important for reducing ‘exploratory clicking’.
When a user has to click an element to 1) determine whether or not it is clickable, and 2) determine where it will lead, this eats away at their finite motivation.
As the term mobile implies, mobile devices are portable. And because we can use ‘em in many settings, we are more likely to be interrupted.
“As a result, attention on mobile is often fragmented and sessions on mobile devices are short. In fact, the average session duration is 72 seconds […] versus the average desktop session of 150 seconds.” – Nielsen Norman Group
You should design your mobile experience for interruptions, prioritize essential information, and simplify tasks and interactions. This goes back to meeting your users where they are within the buyer journey.
According to research by SessionM (published in 2015), 90% of smartphone users surveyed used their phones while shopping in a physical store to 1) compare product prices, 2) look up product information, and 3) check product reviews online.
You should test adjusting your page length and messaging hierarchy to facilitate your user’s main goals. This may be browsing and information-seeking versus purchasing.
4. One window at a time
As I’m writing this post, I have 11 tabs open in Google Chrome, split between two screens. If I click on a link that takes me to a new website or page, it’s no big deal.
But on mobile, your user is most likely viewing one window at a time. They can’t split their screen to look at two windows simultaneously, so you shouldn’t ask them to. Mobile tasks should be easy to complete in one app or on one website.
The more your user has to jump from page to page, the more they have to rely on their memory. This increases cognitive load, and decreases the likelihood that they will complete an action.
Your navigation should be easy to find and it should contain links to your most relevant and important content. This way, if your user has to travel to a new page to access specific content, they can find their way back to other important pages quickly and easily.
In e-commerce, we often see people “pogo-sticking”—jumping from one page to another continuously—because they feel that they need to navigate to another page to confirm that the information they have provided is correct.
A great solution is to ensure that your users can view key information that they may want to confirm (prices / products / address) on any page. This way, they won’t have to jump around your website and remember these key pieces of information.
Implementing mobile website optimization
As I’m sure you’ve noticed by now, the phrase “you should test” is peppered throughout this post. Because understanding the mobile context, and reviewing usability challenges and recommendations are first steps.
If you can, you should test any recommendation made in this post. Which brings us to mobile website optimization. At WiderFunnel, we approach mobile optimization just like we would desktop optimization: with process.
You should evaluate and prioritize mobile web optimization in the context of all of your marketing. If you can achieve greater Return on Investment by optimizing your desktop experience (or another element of your marketing), you should start there.
But assuming your mobile website ranks high within your priorities, you should start examining it from your user’s perspective. The WiderFunnel team uses the LIFT Model framework to identify problem areas.
The LIFT Model allows us to identify barriers to conversion, using the six factors of Value Proposition, Clarity, Relevance, Anxiety, Distraction, and Urgency. For more on the LIFT Model, check out this blog post.
A LIFT illustration
I asked the WiderFunnel Strategy team to do a LIFT analysis of the food delivery website that gave me so much grief that Sunday night. Here are some of the potential barriers they identified on the checkout page alone:
Relevance: There is valuable page real estate dedicated to changing the language, when a smartphone will likely detect your language on its own.
Anxiety: There are only 3 options available in the navigation: Log In, Sign Up, and Help. None of these are helpful when a user is trying to navigate between key pages.
Clarity: Placing the call-to-action at the top of the page creates disjointed eyeflow. The user must scan the page from top to bottom to ensure their order is correct.
Clarity: The “Order Now” call-to-action and “Allergy & dietary information links” are very close together. Users may accidentally tap one, when they want to tap the other.
Anxiety: There is no confirmation of the delivery address.
Anxiety: There is no way to edit an order within the checkout. A user has to delete items, return to the menu and add new items.
Clarity: Font size is very small making the content difficult to read.
Clarity: The “Cash” and “Card” icons have no context. Is a user supposed to select one, or are these just the payment options available?
Distraction: The dropdown menus in the footer include many links that might distract a user from completing their order.
Needless to say, my frustrations were confirmed. The WiderFunnel team ran into the same obstacles I had run into, and identified dozens of barriers that I hadn’t.
But what does this mean for you?
When you are first analyzing your mobile experience, you should try to step into your user’s shoes and actually use your experience. Give your team a task and a goal, and walk through the experience using a framework like LIFT. This will allow you to identify usability issues within your user’s mobile context.
Every LIFT point is a potential test idea that you can feed into your optimization program.
Case study examples
This wouldn’t be a WiderFunnel blog post without some case study examples.
This is where we put ‘best mobile practices’ to the test. Because the smallest usability tweak may make perfect sense to you, and be off-putting to your users.
In the following three examples, we put our recommendations to the test.
Mobile navigation optimization
In mobile design in particular, we tend to assume our users understand ‘universal’ symbols.
But, that isn’t always the case. And it is certainly worth testing to understand how you can make the navigation experience (often a huge pain point on mobile) easier.
You can’t just expect your users to know things. You have to make it as clear as possible. The more you ask your user to guess, the more frustrated they will become.
– Dennis Pavlina, Optimization Strategist, WiderFunnel
This example comes from an e-commerce client that sells artwork. In this experiment, we tested two variations against the original.
In the first, we increased font and icon size within the navigation and menu drop-down. This was a usability update meant to address the small, difficult to navigate menu. Remember the conversation about target size? We wanted to tackle the low-hanging fruit first.
With variation B, we dug a little deeper into the behavior of this client’s specific users.
Qualitative Hotjar recordings had shown that users were trying to navigate the mobile website using the homepage as a homebase. But this site actually has a powerful search functionality, and it is much easier to navigate using search. Of course, the search option was buried in the hamburger menu…
So, in the second variation (built on variation A), we removed Search from the menu and added it right into the main Nav.
Both variations beat the control. Variation A led to a 2.7% increase in transactions, and a 2.4% increase in revenue. Variation B decreased clicks to the menu icon by -24%, increased transactions by 8.1%, and lifted revenue by 9.5%.
Never underestimate the power of helping your users find their way on mobile. But be wary! Search worked for this client’s users, but it is not always the answer, particularly if what you are selling is complex, and your users need more guidance through the funnel.
Mobile product page optimization
Let’s look at another e-commerce example. This client is a large sporting goods store, and this experiment focused on their product detail pages.
On the original page, our Strategists noted a worst mobile practice: The buttons were small and arranged closely together, making them difficult to click.
There were also several optimization blunders:
Two calls-to-action were given equal prominence: “Find in store” and “+ Add to cart”
“Add to wishlist” was also competing with “Add to cart”
Social icons were placed near the call-to-action, which could be distracting
We had evidence from an experiment on desktop that removing these distractions, and focusing on a single call-to-action, would increase transactions. (In that experiment, we saw transactions increase by 6.56%).
So, we tested addressing these issues in two variations.
In the first, we de-prioritized competing calls-to-action, and increased the ‘Size’ and ‘Qty’ fields. In the second, we wanted to address usability issues, making the color options, size options, and quantity field bigger and easier to click.
Both of our variations lost to the Control. I know what you’re thinking…what?!
Let’s dig deeper.
Looking at the numbers, users responded in the way we expected, with significant increases to the actions we wanted, and a significant reduction in the ones we did not.
Visits to “Reviews”, “Size”, “Quantity”, “Add to Cart” and the Cart page all increased. Visits to “Find in Store” decreased.
And yet, although the variations were more successful at moving users through to the next step, there was not a matching increase in motivation to actually complete a transaction.
It is hard to say for sure why this result happened without follow-up testing. However, it is possible that this client’s users have different intentions on mobile: Browsing and seeking product information vs. actually buying. Removing the “Find in Store” CTA may have caused anxiety.
This example brings us back to the mobile context. If an experiment wins within a desktop experience, this certainly doesn’t guarantee it will win on mobile.
I was shopping for shoes the other day, and was actually browsing the store’s mobile site while I was standing in the store. I was looking for product reviews. In that scenario, I was information-seeking on my phone, with every intention to buy…just not from my phone.
Are you paying attention to how your unique users use your mobile experience? It may be worthwhile to take the emphasis off of ‘increasing conversions on mobile’ in favor of researching user behavior on mobile, and providing your users with the mobile experience that best suits their needs.
Note: When you get a test result that contradicts usability best practices, it is important that you look carefully at your experiment design and secondary metrics. In this case, we have a potential theory, but would not recommend any large-scale changes without re-validating the result.
Mobile checkout optimization
This experiment was focused on one WiderFunnel client’s mobile checkout page. It was an insight-driving experiment, meaning the focus was on gathering insights about user behavior rather than on increasing conversion rates or revenue.
Evidence from this client’s business context suggested that users on mobile may prefer alternative payment methods, like Apple Pay and Google Wallet, to the standard credit card and PayPal options.
To make things even more interesting, this client wanted to determine the desire for alternative payment methods before implementing them.
The hypothesis: By adding alternative payment methods to the checkout page in an unobtrusive way, we can determine by the percent of clicks which new payment methods are most sought after by users.
We tested two variations against the Control.
In variation A, we pulled the credit card fields and call-to-action higher on the page, and added four alternative payment methods just below the CTA: PayPal, Apple Pay, Amazon Payments, and Google Wallet.
If a user clicked on one of the four alternative payment methods, they would see a message:
“Google Wallet coming soon!
We apologize for any inconvenience. Please choose an available deposit method.
Credit Card | PayPal”
In variation B, we flipped the order. We featured the alternative payment methods above the credit card fields. The focus was on increasing engagement with the payment options to gain better insights about user preference.
Note: For this experiment, iOS devices did not display the Google Wallet option, and Android devices did not display Apple Pay.
On iOS devices, Apple Pay received 18% of clicks, and Amazon Pay received 12%. On Android devices, Google Wallet received 17% of clicks, and Amazon Pay also received 17%.
The client can use these insights to build the best experience for mobile users, offering Apple Pay and Google Wallet as alternative payment methods rather than PayPal or Amazon Pay.
Unexpectedly, both variations also increased transactions! Variation A led to an 11.3% increase in transactions, and variation B led to an 8.5% increase.
Because your user’s motivation is already limited on mobile, you should try to create an experience with the fewest possible steps.
You can ask someone to grab their wallet, decipher their credit card number, expiration date, and ccv code, and type it all into a small form field. Or, you can test leveraging the digital payment options that may already be integrated with their mobile devices.
The future of mobile website optimization
Imagine you are in your favorite outdoor goods store, and you are ready to buy a new tent.
You are standing in front of piles of tents: 2-person, 3-person, 4-person tents; 3-season and extreme-weather tents; affordable and pricey tents; light-weight and heavier tents…
You pull out your smartphone, and navigate to the store’s mobile website. You are looking for more in-depth product descriptions and user reviews to help you make your decision.
A few seconds later, a store employee asks if they can help you out. They seem to know exactly what you are searching for, and they help you choose the right tent for your needs within minutes.
Imagine that while you were browsing products on your phone, that store employee received a notification that you are 1) in the store, 2) looking at product descriptions for tent A and tent B, and 3) standing by the tents.
Mobile optimization in the modern era is not about increasing conversions on your mobile website. It is about providing a seamless user experience. In the scenario above, the in-store experience and the mobile experience are inter-connected. One informs the other. And a transaction happens because of each touch point.
Mobile experiences cannot live in a vacuum. Today’s buyer switches seamlessly between devices [and] your optimization efforts must reflect that.
We wear the internet on our wrists. We communicate via chat bots and messaging apps. We spend our leisure time on our phones: streaming, gaming, reading, sharing.
And while I’m not encouraging you to shift your optimization efforts entirely to mobile, you must consider the role mobile plays in your customers’ lives. The online experience is mobile. And your mobile experience should be an intentional step within the buyer journey.
What does your ideal mobile shopping experience look like? Where do you think mobile websites can improve? Do you agree or disagree with the ideas in this post? Share your thoughts in the comments section below!
(This is a sponsored post). When you examine the most successful interaction designs of recent years, the clear winners are those who provide an excellent functionality. While functional aspect of a design is key to product success, aesthetics and visual details are equally important — particularly how they can improve those functional elements.
In today’s article, I’ll explain how visual elements, such as shadows and blur effects, can improve the functional elements of a design.
‘A-ha!’ moment (n.): An insight that leads to more substantial revenue lift and profitable growth for your company (e.g. the moment all Optimizers live for).
At WiderFunnel, our mission is create profitable ‘A-ha!’ moments for our clients every day.
Last year, I created a five-part ‘A-ha!’ moments series: Five mini blog posts focused on five of our favorite insights from 2015. Well, turns out 2016 was also full of ‘A-ha!’ moments that were too good to keep to ourselves.
This post explores five of WiderFunnel’s favorite ‘A-ha!’s from the past year. I hope that they inspire you as you begin planning your 2017 experiments!
‘A-ha!’ #1: Using color psychology to increase conversions
If you follow WiderFunnel, you probably know that we are not big fans of conversion optimization ‘best practices’ like “all calls-to-action should be orange”.
Because, frankly, best practices may not be the best thing for your business. They must be proven in your business context, for your users.
That said, this first ‘A-ha!’ moment comes from a color isolation test. But, the ‘A-ha’ isn’t the result, it’s the why behind the hypothesis.
One of our clients provides an online consumer information service — users type in a question and get an Expert answer. Once a user asks their question, they have entered a four-step funnel:
Step 1: Ask the question
Step 2: Add more information
Step 3: Pick an Expert
Step 4: Get an answer (aka the checkout page)
We have been testing on each step of this funnel, but this particular experiment was on the all-important checkout page, the final conversion.
What can the right color do?
For each WiderFunnel client, we create a customized growth program, however, each program is built with our proven Infinity Optimization Process™. The process cycles between two phases: Explore (information-gathering) and Validate (testing and proving).
Research on consumer behavior, psychological principles, and persuasion techniques is a huge part of the Explore phase. Our Strategists use this research, along with several other information touchpoints, when developing hypotheses.
This past year, one of WiderFunnel’s favorite bloggers and researchers, Nick Kolenda, published a giant piece on color psychology. Kolenda looked at 50 academic studies on color, and compiled his findings. According to him, certain colors can inspire certain actions.
In the case of this client, Optimization Strategist, Nick So, wanted to see if adding a subtle, subconscious visual cue to the checkout page would be more motivational for users. He was looking, specifically, at warm colors.
Persuasion principle: Warm colors (with high saturation and low brightness) increase arousal because they trigger impulsivity, and tend to increase behavioral responses.
The test: Isolation I and isolation II
In the first isolation, Nick decided to put warm colors to the test.
Hypothesis: Increasing prominence of the checkout area by using a color linked to increasing action and responses will improve visual clarity of the page and increase conversions.
In the variation, Nick removed all other background colors and added a warm orange background to the payment section. And it worked! This variation saw a statistically significant 2.82% increase in conversions.
We wanted to validate this insight across audiences, so Nick created a second isolation for this client’s mobile users.
He tested the Control against two variations: Variation B (the warm color isolation) was built on variation A, so Nick was able to track the isolation properly. In this experiment, the color change was responsible for a 2.7% lift in conversions, almost the exact same increase as in the desktop test.
It’s always amazing how such seemingly subtle psychological cues and persuasion elements can have a big potential impact on user behavior. We are fortunate to be able to have a client that has the traffic, trusts us, and understands testing enough to allow us to run an isolation on such an interesting concept.
– Nick So
‘A-ha!’ #2: Sometimes, all your users need is a clear next step
You may have heard the phrase “if content is king, revenue is queen”…
Our second ‘A-ha!’ moment comes from testing we have been doing with one WiderFunnel client: A content site that provides information for the individual investor. This client offers a ton of free resources on its website to help users stay on top of their finances.
Of course, they also offer subscription services, such as their newsletter and professional advisor service, which provides premium stock-picking advice to users. Our goal is to help this client increase profitable conversions.
When we began testing with this client, there were many different paths that users could take after landing on an investing article. And there was almost no indication that there were professional services available (which is how this client makes money!)
The WiderFunnel Strategy team did an initial LIFT analysis of the site-wide navigation, which revealed several problems, like:
There was not a clear, primary call-to-action in the nav (Clarity)
There was a general lack of urgency (Urgency)
The menu drop-down for “Stock Picks” had one, ambiguous dropdown (Anxiety)
If someone is ready to spend money, it is not clear how to do so (Clarity)
We wanted to test giving users a clear action to take in the site-wide navigation. This way, a user who wanted more would know which path to take.
We tested adding a “Latest Stock Picks” call-to-action in the nav (replacing the “Stock Picks” dropdown); the assumption was that users of this client’s site are looking for stock-picking advice, specifically.
Hypothesis: Creating a clear “Latest Stock Picks” CTA in the site-wide navigation will cause more users to enter a revenue-driving funnel from all parts of the site.
We tested two variations, each of which featured the “Latest Stock Picks” call-to-action. But, in each variation this CTA took the user to a different page. Our ultimate goal was to find out:
If users were even aware that there are premium paid services offered, and
Which funnel is best to help users make a decision and, ultimately, a purchase?
With variation A, we added the “Latest Stock Picks” CTA in the nav. This call-to-action sent users to the homepage and anchored them in the premium services section. (This is how the functionality of the original dropdown worked.)
This section provides a lot of detail about this client’s different offerings, along with a “Sign Up Today” call-to-action.
With variation B, we wanted to test limiting choice. Rather than showing users a bunch of product options, the “Latest Stock Picks” CTA sent them directly to the professional advisor sign up page (this client’s most popular product).
Both variations beat the control, with variation A resulting in an 11.17% lift in transactions with 99% confidence and variation B resulting in a 7.9% increase in transactions with 97% confidence.
Interestingly, because variation B was built on variation A, we were able to see that it actually decreased transactions by 3.3%.
So, what does this mean? Here are a few takeaways we plan to explore further in 2017:
Users may have been unsure of how to sign up (or that they could sign up) due to lack of CTA prominence on the original site-wide navigation
It is also possible that Urgency was a motivator for this client’s users: Changing the “Stock Picks” drop down to a “Latest Stock Picks” CTA increased urgency and led to more conversions. This wasn’t a clear isolation but it’s good evidence to follow-up with!
Users prefer some degree of choice over being sent to one product (as seen with the decrease in transactions caused by variation B)
But the main moral of this ‘A-ha!’? Make sure your users know exactly where to find what you’re selling. ‘Cause content without conversions is just free publishing.
Earlier this year, I published a case study on WiderFunnel client, weBoost. WeBoost is an e-commerce retailer and manufacturer of cellular signal boosters.
This case study explored several tests that we had run on multiple areas of the weBoost site, including a series of design tests we ran on their product category page. Our third A-ha! moment takes up where the case study left off in this series…
A quick refresher
Originally, the weBoost product category pages featured a non-traditional design layout. A large image in the top left corner, very tall product modules, and right-hand filters made these pages unique among e-commerce catalog pages.
We decided to test displaying products in landscape versus the long, portrait-style modules. According to a Baymard study of e-commerce sites, technical products are easier to compare in a horizontal layout because there is more space to include specs. This was variation A.
In variation B, we wanted to explore the idea that users didn’t need to see a product details page at all. Maybe the information on the category page was all users needed to make a confident purchase.
Variation B was built on variation A, with one isolated change: We changed the primary visual call-to-action from “View Details” to “Add To Cart”.
In a backward ‘A-ha!’ moment, variation A (based on the Baymard study) decreased transactions by -9.6%. Despite our intentions, the horizontal layout might have made it more difficult for users to compare products.
But! Variation B, with the add-to-cart focus, saw a 16.4% increase in transactions against the control page. It turns out that many users are actually comfortable adding products to their cart right from the category page.
Variation B moved more users further through the funnel and ultimately resulted in a large uptick in transactions, despite the negative impact of the horizontal layout.
After comparing variation A to variation B, WiderFunnel Optimization Strategist, Michael St Laurent, estimated that the “Add To Cart” call-to-action was actually worth a lift of 28.7% in transactions.
The follow-up (and subsequent ‘A-ha!’)
We knew that the horizontal layout led to a decrease in transactions and we knew that the horizontal layout plus the isolated CTA change led to a sizable increase in transactions.
So, we ran the obvious follow-up experiment: We tested a variation featuring the vertical module design with the add-to-cart focused call-to-action. We expected to see at least a 29% increase in transactions. We used variation B from the previous test as the Control, following proper Design of Experiments.
As predicted, when we tested the “Add To Cart” call-to-action on the vertical modules, we saw a whopping 38.1% increase in transactions (more than double the 16.4% increase we observed with the horizontal layout, and 9 percentage points more than the estimate).
It never gets old to see isolations at work. The ‘A-ha!’ moment here is that no test ever has to be a ‘loser’. If you structure your tests using isolations, you will be able to track the potential impact of each change.
This entire time, we were assuming that users needed more information to make a technical product selection. We were focused on making the specs easier to compare, when there was an entire segment of the audience that was ready to put the product in their cart without more investigation. Sometimes you have to challenge your assumptions. In this case it paid off!
– Michael St Laurent, Optimization Strategist, WiderFunnel
‘A-ha!’ #4: De-emphasizing price reduces user anxiety
One of our clients is Vital Choice, a trusted source for fast home delivery of the world’s finest wild seafood and organic fare, harvested from healthy, well-managed wild fisheries and farms.
Our fourth ‘A-ha!’ moment from 2016 came out of the testing we did with Vital Choice on their product detail pages and revolves around de-emphasizing price, in favor of value proposition points.
While the results may not be surprising, the WiderFunnel Strategy team would not have prioritized this particular test if they hadn’t done extensive user research beforehand. Because we took the pulse of Vital Choice users, we were able to reduce anxiety and provide more motivation to purchase.
Let’s say you wanted to order a few organic, grass-fed American Wagyu beef patties from the Vital Choice website. You would have eventually landed on a detail page that looked like this (the Control in this experiment):
As you can see, price is displayed prominently near the ‘Add To Cart’ call-to-action. But, during the Explore (information gathering) phase, WiderFunnel Optimization Strategist, Dennis Pavlina, identified several common themes of barriers to conversion in user survey responses, including:
Price: Users love Vital Choice and the excellent quality of their products, but they often mention the premium they are paying. For many users, it is a ‘treat’ and a ‘luxury’ to buy from Vital Choice. Price-related themes, such as discount codes or coupons, also came up often in surveys.
Shipping: Users often express concern about how frozen perishable items are shipped, particularly in warmer climates in the U.S.
If we could reduce user anxiety in these two areas, we believed Vital Choice would see a surge in conversions.
Hypothesis: Adding relevant value proposition points that justify the price and quality of the product, and adding copy to reduce anxiety around shipping in close proximity of the order area on the product page, will increase conversions.
It was unclear what users would receive in their shipment i.e. how it would be shipped to them, how long it would take, etc. (Anxiety)
There were no prominently displayed value proposition points to justify the price of the product. (Value Proposition)
There was a lot of emphasis on the price of the product. (Anxiety)
This variation led to a 3.3% increase in conversions and a 2.7% increase in average order value, resulting in almost $250,000 in estimated additional annual revenue.
Conversions were up for almost every goal we tracked: Visits to checkout (step 2), visits to checkout (step 3), visits to checkout (step 4), total visits to cart, and average order value. But they were down to unique visits to cart.
The most interesting part of analyzing results was noticing that, although unique visits to cart were slightly down, there was a large increase in total visits to cart. It’s a surprising pattern. We hypothesize that users may have been more confident and willing to purchase more items at once, when anxiety was reduced.
– Dennis Pavlina, Optimization Strategist, WiderFunnel
The fact that de-emphasizing price worked for Vital Choice users isn’t what made us say, ‘A-ha!’. But, the proven power of listening to, and addressing their users’ stated concerns, did. When in doubt, ask your users.
A-ha! #5: Quick view, long delay
A-ha! number 5 comes from testing we did with another one of our clients, a large retailer of sports goods, footwear, and apparel. We have been working with this company for more than a year to optimize their e-commerce experiences, with the goal of increasing transactions.
Like on many e-commerce sites, users on this client’s site could view product details directly on the category page, using a Quick View functionality. When a user hovered over a product, they would see the product details in a Quick View window.
In our final ‘a-ha!’, we explore what (so often) happens when you test a common practice.
Distraction is a very common barrier to conversion; often, there are elements on a client’s page that are diverting visitors away the from the ultimate goal.
For Michael St Laurent, the Quick View option on this client’s category page was a potential distraction.
The more visual cues and action options your visitor has to process, the less likely they are to make a conversion decision. At WiderFunnel, we have found that minimizing distractions such as unnecessary product options, links, and extraneous information will increase your conversion rate.
– Michael St Laurent
So, he decided to put his theory that the Quick View is an unnecessary distraction to the test.
Hypothesis: Disabling the Quick View functionality will result in reduced distraction and ultimately, more conversions.
The Control in this test was the client’s original category page, featuring the Quick View functionality.
In the Quick View, users could quickly move from product to product on the category page without going to a product page itself.
We tested this control against a variation that removed the Quick View functionality completely.
It turns out the Quick View functionality was, indeed, distracting. Disabling it resulted in more product exploration as well as more transactions; transactions increased by 4% (a big lift for a high-traffic company like this one!)
If your site has a functionality, like Quick View or a rotating banner, you should probably test it! While ‘flashy’ functionalities are…well…flashy, they are rarely what your users want, and may be preventing your users from actually purchasing.
At the end of every month, the WiderFunnel Strategy team shares their favorite ‘A-ha!’ moments from the past four weeks. Sometimes, the ‘A-ha!’ is an exciting result and big lift for a client, sometimes it’s a twist insight, sometimes it’s a ‘losing’ test that inspired a winning test.
As Chris Goward explains,
There’s no downside to communicating what you’ve learned from every test. If you view your optimization program as a strategic method for learning about your customers and prospects – for truly understanding their mindset – rather than a tactical tweaking program, you can take a broader perspective and find the gains in every test.
I hope that these ‘A-ha!’ moments inspire you to do the work, structure your tests properly, and learn constantly in 2017. And I encourage you to share your favorite ‘A-ha!’ moments in the comments section below.