Tag Archives: mobile

Thumbnail

A Reference Guide For Typography In Mobile Web Design




A Reference Guide For Typography In Mobile Web Design

Suzanna Scacca



With mobile taking a front seat in search, it’s important that websites are designed in a way that prioritize the best experience possible for their users. While Google has brought attention to elements like pop-ups that might disrupt the mobile experience, what about something as seemingly simple as choice of typography?

The answer to the typography question might seem simple enough: what works on desktop should work on mobile so long as it scales well. Right?

While that would definitely make it a lot easier on web designers, that’s not necessarily the case. The problem in making that statement a decisive one is that there haven’t been a lot of studies done on the subject of mobile typography in recent years. So, what I intend to do today is give a brief summary of what it is we know about typography in web design, and then see what UX experts and tests have been able to reveal about using typography for mobile.

Understanding The Basics Of Typography In Modern Web Design

Look, I know typography isn’t the most glamorous of subjects. And, being a web designer, it might not be something you spend too much time thinking about, especially if clients bring their own style guides to you prior to beginning a project.

That said, with mobile-first now here, typography requires additional consideration.

Typography Terminology

Let’s start with the basics: terminology you’ll need to know before digging into mobile typography best practices.

Typography: This term refers to the technique used in styling, formatting, and arranging “printed” (as opposed to handwritten) text.

Typeface: This is the classification system used to label a family of characters. So, this would be something like Arial, Times New Roman, Calibri, Comic Sans, etc.

Typefaces in Office 365


A typical offering of typefaces in word processing applications. (Source: Google Docs) (Large preview)

Font: This drills down further into a website’s typeface. The font details the typeface family, point size, and any special stylizations applied. For instance, 11-point Arial in bold.

3 essential elements to define a font


An example of the three elements that define a font. (Source: Google Docs) (Large preview)

Size: There are two ways in which to refer to the size (or height) of a font: the word processing size in points or the web design size in pixels. For the purposes of talking about mobile web design, we use pixels.

Here is a line-by-line comparison of various font sizes:

An example of font sizes


An example of how the same string of text appears at different sizes. (Source: Google Docs) (Large preview)

As you can see in WordPress, font sizes are important when it comes to establishing hierarchy in header text:

An example of font size choices in WordPress


Header size defaults available with a WordPress theme. (Source: WordPress) (Large preview)

Weight: This is the other part of defining a typeface as a font. Weight refers to any special styles applied to the face to make it appear heavier or lighter. In web design, weight comes into play in header fonts that complement the typically weightless body text.

Here is an example of options you could choose from in the WordPress theme customizer:

An example of font weight choices


Sample font weights available with a WordPress theme. (Source: WordPress) (Large preview)

Kerning: This pertains to the space between two letters. It can be adjusted in order to create a more aesthetically pleasing result while also enhancing readability. You will need a design software like Photoshop to make these types of adjustments.

Tracking: Tracking, or letter-spacing, is often confused with kerning as it too relates to adding space in between letters. However, whereas kerning adjusts spacing between two letters in order to improve appearances, tracking is used to adjust spacing across a line. This is used more for the purposes of fixing density issues while reading.

To give you a sense for how this differs, here’s an example from Mozilla on how to use tracking to change letter-spacing:

Normal tracking example


This is what normal tracking looks like. (Source: Mozilla) (Large preview)

-1px tracking example


This is what (tighter) -1px tracking looks like. (Source: Mozilla) (Large preview)

1px tracking example


This is what (looser) 1px tracking looks like. (Source: Mozilla) (Large preview)

Leading: Leading, or line spacing, is the amount of distance granted between the baselines of text (the bottom line upon which a font rests). Like tracking, this can be adjusted to fix density issues.

If you’ve been using word processing software for a while, you’re already familiar with leading. Single-spaced text. Double-spaced text. Even 1.5-spaced text. That’s leading.

The Role Of Typography In Modern Web Design

As for why we care about typography and each of the defining characteristics of it in modern web design, there’s a good reason for it. While it would be great if a well-written blog post or super convincing sales jargon on a landing page were enough to keep visitors happy, that’s not always the case. The choices you make in terms of typography can have major ramifications on whether or not people even give your site’s copy a read.

These are some of the ways in which typography affects your end users:

Reinforce Branding
Typography is another way in which you create a specific style for your web design. If images all contain clean lines and serious faces, you would want to use an equally buttoned-up typeface.

Set the Mood
It helps establish a mood or emotion. For instance, a more frivolous and light-bodied typeface would signal to users that the brand is fun, young and doesn’t take itself seriously.

Give It a Voice
It conveys a sense of personality and voice. While the actual message in the copy will be able to dictate this well, using a font that reinforces the tone would be a powerful choice.

Encourage Reading
As you can see, there are a number of ways in which you can adjust how type appears on a screen. If you can give it the right sense of speed and ease, you can encourage more users to read through it all.

Allow for Scanning
Scanning or glancing (which I’ll talk about shortly) is becoming more and more common as people engage with the web on their smart devices. Because of this, we need ways to format text to improve scannability and this usually involves lots of headers, pull quotes and in-line lists (bulleted, numbered, etc.).

Improve Accessibility
There is a lot to be done in order to design for accessibility. Your choice of font plays a big part in that, especially as the mobile experience has to rely less on big, bold designs and swatches of color and more on how quickly and well you can get visitors to your message.

Because typography has such a diverse role in the user experience, it’s a matter that needs to be taken seriously when strategizing new designs. So, let’s look at what the experts and tests have to say about handling it for mobile.

Typography For Mobile Web Design: What You Need To Know

Too small, too light, too fancy, too close together… You can run into a lot of problems if you don’t strike the perfect balance with your choice of typography in design. On mobile, however, it’s a bit of a different story.

I don’t want to say that playing it safe and using the system default from Google or Apple is the way to go. After all, you work so hard to develop unique, creative and eye-catching designs for your users. Why would you throw in the towel at this point and just slap Roboto all over your mobile website?

We know what the key elements are in defining and shaping a typeface and we also know how powerful fonts are within the context of a website. So, let’s drill down and see what exactly you need to do to make your typography play well with mobile.

1. Size

In general, the rule of thumb is that font size needs to be 16 pixels for mobile websites. Anything smaller than that could compromise readability for visually impaired readers. Anything too much larger could also make reading more difficult. You want to find that perfect Goldilocks formula and, time and time again, it comes back to 16 pixels.

In general, that rule is a safe one to play by when it comes to the main body text of your mobile website. However, what exactly are you allowed to do for header text? After all, you need to be able to distinguish your main headlines from the rest of the text. Not just for the sake of calling attention to bigger messages, but also for the purposes of increasing scannability of a mobile web page.

The Nielsen Norman Group reported on a study from MIT that covered this exact question. What can you do about text that users only have to glance at? In other words, what sort of sizing can you use for short strings of header text?

Here is what they found:

Short, glanceable strings of text lead to faster reading and greater comprehension when:

  • They are larger in size (specifically, 4mm as opposed to 3mm).
  • They are in all caps.
  • Lettering width is regular (and not condensed).

In sum:

Lowercase lettering required 26% more time for accurate reading than uppercase, and condensed text required 11.2% more time than regular. There were also significant interaction effects between case and size, suggesting that the negative effects of lowercase letters are exacerbated with small font sizes.

I’d be interested to see how the NerdWallet website does, in that case. While I do love the look of this, they have violated a number of these sizing and styling suggestions:

The NerdWallet home page


NerdWallet’s use of all-caps and smaller font sizes on mobile. (Source: NerdWallet) (Large preview)

Having looked at this a few times now, I do think the choice of a smaller-sized font for the all-caps header is an odd choice. My eyes are instantly drawn to the larger, bolder text beneath the main header. So, I think there is something to MIT’s research.

Flywheel Sports, on the other hand, does a great job of exemplifying this point.

The Flywheel Sports home page


Flywheel Sports’ smart font choices for mobile. (Source: Flywheel Sports) (Large preview)

There’s absolutely no doubt where the visitors’ attention needs to go: to the eye-catching header. It’s in all caps, it’s larger than all the other text on the page, and, although the font is incredibly basic, its infusion with a custom handwritten-style type looks really freaking cool here. I think the only thing I would fix here is the contrast between the white and yellow fonts and the blue background.

Just remember: this only applies to the sizing (and styling) of header text. If you want to keep large bodies of text readable, stick to the aforementioned sizing best practices.

2. Color and Contrast

Color, in general, is an important element in web design. There’s a lot you can convey to visitors by choosing the right color palette for designs, images and, yes, your text. But it’s not just the base color of the font that matters, it’s also the contrast between it and the background on which it sits (as evidenced by my note above about Flywheel Sports).

For some users, a white font on top of a busy photo or a lighter background may not pose too much of an issue. But “too much” isn’t really acceptable in web design. There should be no issues users encounter when they read text on a website, especially from an already compromised view of it on mobile.

Which is why color and contrast are top considerations you have to make when styling typography for mobile.

The Web Content Accessibility Guidelines (WCAG) has clear recommendations regarding how to address color contrast in section 1.4.3. At a minimum, the WCAG suggests that a contrast of 4.5 to 1 should be established between the text and background for optimal readability. There are a few exceptions to the rule:

  • Text sized using 18-point or a bold 14-point only needs a contrast of 3 to 1.
  • Text that doesn’t appear in an active part of the web page doesn’t need to abide by this rule.
  • The contrast of text within a logo can be set at the designer’s discretion.

If you’re unsure of how to establish that ratio between your font’s color and the background upon which it sits, use a color contrast checking tool like WebAIM.

WebAIM color contrast checker


An example of how to use the WebAIM color contrast checker tool. (Source: WebAIM) (Large preview)

The one thing I would ask you to be mindful of, however, is using opacity or other color settings that may compromise the color you’ve chosen. While the HEX color code will check out just fine in the tool, it may not be an accurate representation of how the color actually displays on a mobile device (or any screen, really).

To solve this problem and ensure you have a high enough contrast for your fonts, use a color eyedropper tool built into your browser like the ones for Firefox or Chrome. Simply hover the eyedropper over the color of the background (or font) on your web page, and let it tell you what the actual color code is now.

Here is an example of this in action: Dollar Shave Club.

This website has a rotation of images in the top banner of the home page. The font always remains white, but the background rotates.

Dollar Shave Club grey banner


Dollar Shave Club’s home page banner with a grey background. (Source: Dollar Shave Club) (Large preview)

Dollar Shave Club beige banner


Dollar Shave Club’s home page banner with a beige/taupe background. (Source: Dollar Shave Club) (Large preview)

Dollar Shave Club purple banner


Dollar Shave Club’s home page banner with a purple background. (Source: Dollar Shave Club) (Large preview)

Based on what we know now, the purple is probably the only one that will pass with flying colors. However, for the purposes of showing you how to work through this exercise, here is what the eyedropper tool says about the HEX color codes for each of the backgrounds:

  • Grey: #9a9a9a
  • Beige/taupe: #ffd0a8
  • Purple: #4c2c59.

Here is the contrast between these colors and the white font:

  • Grey: 2.81 to 1
  • Beige/taupe: 1.42 to 1
  • Purple: 11.59 to 1.

Clearly, the grey and beige backgrounds are going to lend themselves to a very poor experience for mobile visitors.

Also, if I had to guess, I’d say that “Try a risk-free Starter Set now.” is only a 10-point font (which is only about 13 pixels). So, the size of the font is also working against the readability factor, not to mention the poor choice of colors used with the lighter backgrounds.

The lesson here is that you should really make some time to think about how color and contrast of typography will work for the benefit of your readers. Without these additional steps, you may unintentionally be preventing visitors from moving forward on your site.

3. Tracking

Plain and simple: tracking in mobile web design needs to be used in order to control density. The standard recommendation is that there be no more than between 30 and 40 characters to a line. Anything more or less could affect readability adversely.

While it does appear that Dove is pushing the boundaries of that 40-character limit, I think this is nicely done.

The Dove home page


Dove’s use of even tracking and (mostly) staying within the 40-character limit. (Source: Dove) (Large preview)

The font is so simple and clean, and the tracking is evenly spaced. You can see that, by keeping the amount of words on a line relegated to the recommended limits, it gives this segment of the page the appearance that it will be easy to read. And that’s exactly what you want your typography choices to do: to welcome visitors to stop for a brief moment, read the non-threatening amount of text, and then go on their way (which, hopefully, is to conversion).

4. Leading

According to the NNG, content that appears above the fold on a 30-inch desktop monitor equates to five swipes on a 4-inch mobile device. Granted, this data is a bit old as most smartphones are now between five and six inches:

Average smartphone screen sizes


Average smartphone screen sizes from 2015 to 2021. (Source: TechCrunch) (Large preview)

Even so, let’s say that equates to three or four good swipes of the smartphone screen to get to the tip of the fold on desktop. That’s a lot of work your mobile visitors have to do to get to the good stuff. It also means that their patience will already be wearing thin by the time they get there. As the NNG pointed out, a mobile session, on average, usually lasts about only 72 seconds. Compare that to desktop at 150 seconds and you can see why this is a big deal.

This means two things for you:

  1. You absolutely need to cut out the excess on mobile. If this means creating a completely separate and shorter set of content for mobile, do it.
  2. Be very careful with leading.

You’ve already taken care to keep optimize your font size and width, which is good. However, too much leading and you could unintentionally be asking users to scroll even more than they might have to. And with every scroll comes the possibility of fatigue, boredom, frustration, or distraction getting in the way.

So, you need to strike a good balance here between using line spacing to enhance readability while also reigning in how much work they need to do to get to the bottom of the page.

The Hill Holliday website isn’t just awesome inspiration on how to get a little “crazy” with mobile typography, but it also has done a fantastic job in using leading to make larger bodies of text easier to read:

The Hill Holliday home page


Hill Holliday uses the perfect ratio of leading between lines and paragraphs. (Source: Hill Holliday) (Large preview)

Different resources will give you different guidelines on how to create spacing for mobile devices. I’ve seen suggestions for anywhere between 120% to 150% of the font’s point size. Since you also need to consider accessibility when designing for mobile, I’m going to suggest you follow WCAG’s guidelines:

  • Spacing between lines needs to be 1.5 (or 150%, whichever ratio works for you).
  • Spacing between paragraphs then needs to be 2.5 (or 250%).

At the end of the day, this is about making smart decisions with the space you’re given to work with. If you only have a minute to hook them, don’t waste it with too much vertical space. And don’t turn them off with too little.

5. Acceptable Fonts

Before I break down what makes for an acceptable font, I want to first look at what Android’s and Apple’s typeface defaults are. I think there’s a lot we can learn just by looking at these choices:

Android
Google uses two typefaces for its platforms (both desktop and mobile): Roboto and Noto. Roboto is the primary default. If a user visits a website in a language that doesn’t accept Roboto, then Noto is the secondary backup.

This is Roboto:

The Roboto character set


A snapshot of the Roboto character set. (Source: Roboto) (Large preview)

It’s also important to note that Roboto has a number of font families to choose from:

The Roboto families


Other options of Roboto fonts to choose from. (Source: Roboto) (Large preview)

As you can see, there are versions of Roboto with condensed kerning, a heavier and serifed face as well as a looser, serif-like option. Overall, though, this is just a really clean and simply stylized typeface. You’re not likely to stir up any real emotions when using this on a website, and it may not convey much of a personality, but it’s a safe, smart choice.

Apple
Apple has its own set of typography guidelines for iOS along with its own system typeface: San Francisco.

The San Francisco font


The San Francisco font for Apple devices. (Source: San Francisco) (Large preview)

For the most part, what you see is what you get with San Francisco. It’s just a basic sans serif font. If you look at Apple’s recommended suggestions on default settings for the font, you’ll also find it doesn’t even recommend using bold stylization or outlandish sizing, leading or tracking rules:

San Francisco default settings


Default settings and suggestions for the San Francisco typeface. (Source: San Francisco) (Large preview)

Like with pretty much everything else Apple does, the typography formula is very basic. And, you know what? It really works. Here it is in action on the Apple website:

The Apple home page


Apple makes use of its own typography best practices. (Source: Apple) (Large preview)

Much like Google’s system typeface, Apple has gone with a simple and classic typeface. While it may not help your site stand out from the competition, it will never do anything to impair the legibility or readability of your text. It also would be a good choice if you want your visuals to leave a greater impact.

My Recommendations

And, so, this now brings me to my own recommendations on what you should use in terms of type for mobile websites. Here’s the verdict:

  1. Don’t be afraid to start with a system default font. They’re going to be your safest choices until you get a handle on how far you can push the limits of mobile typography.
  2. Use only a sans serif or serif font. If your desktop website uses a decorative or handwritten font, ditch it for something more traditional on mobile.

    That said, you don’t have to ignore decorative typefaces altogether. In the examples from Hill Holliday or Flywheel Sports (as shown above), you can see how small touches of custom, non-traditional type can add a little flavor.

  3. Never use more than two typefaces on mobile. There just isn’t enough room for visitors to handle that many options visually.

    Make sure your two typefaces complement one another. Specifically, look for faces that utilize a similar character width. The design of each face may be unique and contrast well with the other, but there should still be some uniformity in what you present to mobile visitors’ eyes.

  4. Avoid typefaces that don’t have a distinct set of characters. For instance, compare how the uppercase “i”, lowercase “l” and the number “1” appear beside one another. Here’s an example of the Myriad Pro typeface from the Typekit website:

    Myriad Pro characters


    Myriad Pro’s typeface in action. (Source: Typekit) (Large preview)

    While the number “1” isn’t too problematic, the uppercase “i” (the first letter in this sequence) and the lowercase “l (the second) are just too similar. This can create some unwanted slowdowns in reading on mobile.

    Also, be sure to review how your font handles the conjunction of “r” and “n” beside one another. Can you differentiate each letter or do they smoosh together as one indistinguishable unit? Mobile visitors don’t have time to stop and figure out what those characters are, so make sure you use a typeface that gives each character its own space.

  5. Use fonts that are compatible across as many devices as possible. Your best bets will be: Arial, Courier New, Georgia, Tahoma, Times New Roman, Trebuchet MS and Verdana.

    Default typefaces on mobile


    A list of system default typefaces for various mobile devices. (Source: tinytype) (Large preview)

    Android-supported typefaces


    Another view of the table that includes some Android-supported typefaces. (Source: tinytype) (Large preview)

    I think the Typeform website is a good example of one that uses a “safe” typeface choice, but doesn’t prevent them from wowing visitors with their message or design.

    The Typeform home page


    Typeform’s striking typeface has nothing to do with the actual font. (Source: Typeform) (Large preview)

    It’s short, to the point, perfectly sized, well-positioned, and overall a solid choice if they’re trying to demonstrate stability and professionalism (which I think they are).

  6. When you’re feeling comfortable with mobile typography and want to branch out a little more, take a look at this list of the best web-safe typefaces from WebsiteSetup. You’ll find here that most of the choices are your basic serif and sans serif types. It’s definitely nothing exciting or earth-shattering, but it will give you some variation to play with if you want to add a little more flavor to your mobile type.

Wrapping Up

I know, I know. Mobile typography is no fun. But web design isn’t always about creating something exciting and cutting edge. Sometimes sticking to practical and safe choices is what will guarantee you the best user experience in the end. And that’s what we’re seeing when it comes to mobile typography.

The reduced amount of real estate and the shorter times-on-site just don’t lend themselves well to the experimental typography choices (or design choices, in general) you can use on desktop. So, moving forward, your approach will have to be more about learning how to reign it in while still creating a strong and consistent look for your website.

Smashing Editorial
(lf, ra, yk, il)


Link: 

A Reference Guide For Typography In Mobile Web Design

Thumbnail

What You Need To Know To Increase Mobile Checkout Conversions




What You Need To Know To Increase Mobile Checkout Conversions

Suzanna Scacca



Google’s mobile-first indexing is here. Well, for some websites anyway. For the rest of us, it will be here soon enough, and our websites need to be in tip-top shape if we don’t want search rankings to be adversely affected by the change.

That said, responsive web design is nothing new. We’ve been creating custom mobile user experiences for years now, so most of our websites should be well poised to take this on… right?

Here’s the problem: Research shows that the dominant device through which users access the web, on average, is the smartphone. Granted, this might not be the case for every website, but the data indicates that this is the direction we’re headed in, and so every web designer should be prepared for it.

However, mobile checkout conversions are, to put it bluntly, not good. There are a number of reasons for this, but that doesn’t mean that m-commerce designers should take this lying down.

As more mobile users rely on their smart devices to access the web, websites need to be more adeptly designed to give them the simplified, convenient and secure checkout experience they want. In the following roundup, I’m going to explore some of the impediments to conversion in the mobile checkout and focus on what web designers can do to improve the experience.

Why Are Mobile Checkout Conversions Lagging?

According to the data, prioritizing the mobile experience in our web design strategies is a smart move for everyone involved. With people spending roughly 51% of their time with digital media through mobile devices (as opposed to only 42% on desktop), search engines and websites really do need to align with user trends.

Now, while that statistic paints a positive picture in support of designing websites with a mobile-first approach, other statistics are floating around that might make you wary of it. Here’s why I say that: Monetate’s e-commerce quarterly report issued for Q1 2017 had some really interesting data to show.

In this first table, they break down the percentage of visitors to e-commerce websites using different devices between Q1 2016 and Q1 2017. As you can see, smartphone Internet access has indeed surpassed desktop:

Website Visits by Device Q1 2016 Q2 2016 Q3 2016 Q4 2016 Q1 2017
Traditional 49.30% 47.50% 44.28% 42.83% 42.83%
Smartphone 36.46% 39.00% 43.07% 44.89% 44.89%
Other 0.62% 0.39% 0.46% 0.36% 0.36%
Tablet 13.62% 13.11% 12.19% 11.91% 11.91%

Monetate’s findings on which devices are used to access in the Internet. (Source)

In this next data set, we can see that the average conversion rate for e-commerce websites isn’t great. In fact, the number has gone down significantly since the first quarter of 2016.

Conversion Rates Q1 2016 Q2 2016 Q3 2016 Q4 2016 Q1 2017
Global 3.10% 2.81% 2.52% 2.94% 2.48%

Monetate’s findings on overall e-commerce global conversion rates (for all devices). (Source)

Even more shocking is the split between device conversion rates:

Conversion Rates by Device Q1 2016 Q2 2016 Q3 2016 Q4 2016 Q1 2017
Traditional 4.23% 3.88% 3.66% 4.25% 3.63%
Tablet 1.42% 1.31% 1.17% 1.49% 1.25%
Other 0.69% 0.35% 0.50% 0.35% 0.27%
Smartphone 3.59% 3.44% 3.21% 3.79% 3.14%

Monetate’s findings on the average conversion rates, broken down by device. (Source)

Smartphones consistently receive fewer conversions than desktop, despite being the predominant device through which users access the web.

What’s the problem here? Why are we able to get people to mobile websites, but we lose them at checkout?

In its report from 2017 named “Mobile’s Hierarchy of Needs,” comScore breaks down the top five reasons why mobile checkout conversion rates are so low:

Reasons why m-commerce doesn’t convert


The most common reasons why m-commerce shoppers don’t convert. (Image: comScore) (View large version)

Here is the breakdown for why mobile users don’t convert:

  • 20.2% — security concerns
  • 19.6% — unclear product details
  • 19.6% — inability to open multiple browser tabs to compare
  • 19.3% — difficulty navigating
  • 18.6% — difficulty inputting information.

Those are plausible reasons to move from the smartphone to the desktop to complete a purchase (if they haven’t been completely turned off by the experience by that point, that is).

In sum, we know that consumers want to access the web through their mobile devices. We also know that barriers to conversion are keeping them from staying put. So, how do we deal with this?

10 Ways to Increase Mobile Checkout Conversions In 2018

For most of the websites you’ve designed, you’re not likely to see much of a change in search ranking when Google’s mobile-first indexing becomes official.

Your mobile-friendly designs might be “good enough” to keep your websites at the top of search (to start, anyway), but what happens if visitors don’t stick around to convert? Will Google start penalizing you because your website can’t seal the deal with the majority of visitors? In all honesty, that scenario will only occur in extreme cases, where the mobile checkout is so poorly constructed that bounce rates skyrocket and people stop wanting to visit the website at all.

Let’s say that the drop-off in traffic at checkout doesn’t incur penalties from Google. That’s great… for SEO purposes. But what about for business? Your goal is to get visitors to convert without distraction and without friction. Yet, that seems to be what mobile visitors get.

Going forward, your goal needs to be two-fold:

  • to design websites with Google’s mobile-first mission and guidelines in mind,
  • to keep mobile users on the website until they complete a purchase.

Essentially, this means decreasing the amount of work users have to do and improving the visibility of your security measures. Here is what you can do to more effectively design mobile checkouts for conversions.

1. Keep the Essentials in the Thumb Zone

Research on how users hold their mobile phones is old hat by now. We know that, whether they use the single- or double-handed approach, certain parts of the mobile screen are just inconvenient for mobile users to reach. And when expediency is expected during checkout, this is something you don’t want to mess around with.

For single-handed users, the middle of the screen is the prime playing field:

The thumb zone for single-handed mobile


The good, OK and bad areas for single-handed mobile users. (Image: UX Matters) (View large version)

Although users who cradle their phones for greater stability have a couple options for which fingers to use to interact with the screen, only 28% use their index finger. So, let’s focus on the capabilities of thumb users, which, again, means giving the central part of the screen the most prominence:

The thumb and index finger zone for mobile cradling


The good, OK and bad areas for mobile users that cradle their phones. (Image: UX Matters) (View large version)

Some users hold their phones with two hands. Because the horizontal orientation is more likely to be used for video, this won’t be relevant for mobile checkout. So, pay attention to how much space of that screen is feasibly within reach of the user’s thumb:

The thumb zone for vertical and horizontal


The good, OK and bad areas for two-handed mobile users. (Image: UX Matters) (View large version)

In sum, we can use Smashing Magazine’s breakdown of where to focus content, regardless of left-hand, right-hand or two-handed holding of a smartphone:

Where the ideal thumb zone is on mobile


A summary of where the good, OK and bad zones are on mobile devices. (Image: Smashing Magazine) (View large version)

JCPenney’s website is a good example of how to do this:

JCPenney’s form is in the thumb zone


JCPenney’s contact form starts midway down the page. (Image: JCPenney) (View large version)

While information is included at the top of the checkout page, the input fields don’t start until just below the middle of it — directly in the ideal thumb zone for users of any type. This ensures that visitors holding their phones in any manner and using different fingers to engage with it will have no issue reaching the form fields.

2. Minimize Content to Maximize Speed

We’ve been taught over and over again that minimal design is best for websites. This is especially true in mobile checkout, where an already slow or frustrating experience could easily push a customer over the edge, when all they want to do is be done with the purchase.

To maximize speed during the mobile checkout process, keep the following tips in mind:

  • Only add the essentials to checkout. This is not the time to try to upsell or cross-sell, promote social media or otherwise distract from the action at hand.
  • Keep the checkout free of all images. The only eye-catching visuals that are really acceptable are trustmarks and calls to action (more on these below).
  • Any text included on the page should be instructional or descriptive in nature.
  • Avoid any special stylization of fonts. The less “wow” your checkout page has, the easier it will be for users to get through the process.

Look to Staples’ website as an example of what a highly simple single-page checkout should look like:

The single-page checkout for Staples


Staples has a single-page checkout with a minimal number of fields to fill out. (Image: Staples) (View large version)

As you can see, Staples doesn’t bog down the checkout process with product images, branding, navigation, internal links or anything else that might (1) distract from the task at hand, or (2) suck resources from the server while it attempts to process your customers’ requests.

Not only will this checkout page be easy to get through, but it will load quickly and without issue every time — something customers will remember the next time they need to make a purchase. By keeping your checkout pages light in design, you ensure a speedy experience in all aspects.

3. Put Them at Ease With Trustmarks

A trustmark is any indicator on a website that lets customers know, “Hey, there’s absolutely nothing to worry about here. We’re keeping your information safe!”

The one trustmark that every m-commerce website should have? An SSL certificate. Without one, the address bar will not display the lock sign or the green https domain name — both of which let customers know that the website has extra encryption.

You can use other trustmarks at checkout as well.

Big Chill uses a RapidSSL trust seal


Big Chill includes a RapidSSL trust seal to let customers know its data is encrypted. (Image: Big Chill) (View large version)

While you can use logos from Norton Security, PCI compliance and other security software to let customers know your website is protected, users might also be swayed by recognizable and well-trusted names. When you think about it, this isn’t much different than displaying corporate logos beside customer testimonials or in callouts that boast of your big-name connections. If you can leverage a partnership like the ones mentioned below, you can use the inherent trust there to your benefit.

Take 6pm, which uses a “Login with Amazon” option at checkout:

6pm uses an Amazon trustmark


6pm leverages the Amazon name as a trustmark. (Image: 6pm) (View large version)

This is a smart move for a brand that most definitely does not have the brand-name recognition that a company like Amazon has. By giving customers a convenient option to log in with a brand that’s synonymous with speed, reliability and trust, the company might now become known for those same checkout qualities that Amazon is celebrated for.

Then, there are mobile checkout pages like the one on Sephora:

Sephora’s PayPal trustmark


Sephora uses a trusted payment gateway provider as a trustmark. (Image: Sephora) (View large version)

Sephora also uses this technique of leveraging another brand’s good name in order to build trust at checkout time. In this case, however, it presents customers with two clear options: Check out with us right now, or hop over to PayPal, which will take care of you securely. With security being a major concern that keeps mobile customers from converting, this kind of trustmark and payment method is a good move on Sephora’s part.

4. Provide Easier Editing

In general, never take a visitor (on any device) away from whatever they’re doing on your website. There are already enough distractions online; the last thing they need is for you to point them in a direction that keeps them from converting.

At checkout, however, your customers might feel compelled to do this very thing if they decide they want a different color, size or quantity of an item in their shopping cart. Rather than let them backtrack through the website, give them an in-checkout editing option to keep them in place.

Victoria’s Secret does this well:

Victoria’s Secret edit lightbox in checkout


Victoria’s Secret doesn’t force users away from checkout to edit items. (Image: Victoria’s Secret) (View large version)

When they first get to the checkout screen, customers will see a list of items they’re about to purchase. When the large “Edit” button beside each item is clicked, a lightbox (shown above) opens with the product’s variations. It’s basically the original product page, just superimposed on top of the checkout. Users can adjust their options and save their changes without ever having to leave the checkout page.

If you find, in reviewing your website’s analytics, that users occasionally backtrack after hitting the checkout (you can see this in the sales funnel), add this built-in editing feature. By preventing this unnecessary movement backwards, you could save yourself lost conversions from confused or distracted customers.

5. Enable Express Checkout Options

When consumers check out on an e-commerce website through a desktop device, it probably isn’t a big deal if they have to input their user name, email address or payment information each time. Sure, if it can be avoided, they’ll find ways around it (like allowing the website to save their information or using a password manager such as LastPass).

But on mobile, re-entering that information is a pain, especially if contact forms aren’t optimized well (more on that below). So, to ease the log-in and checkout process for mobile users, consider ways in which you can simplify the process:

  • Allow for guest checkout.
  • Allow for one-click expedited checkout.
  • Enable one-click sign-in from a trusted source, like Facebook.
  • Enable payment on a trusted payment provider’s website, like PayPal, Google Wallet or Stripe.

One of the nice things about Sephora‘s already convenient checkout process is that customers can automate the sign-in process going forward with a simple toggle:

Sephora lets customers save sign-in information


Sephora enables return customers to stay signed in, to avoid this during checkout again. (Image: Sephora) (View large version)

When mobile customers are feeling the rush and want to get to the next stage of checkout, Sephora’s auto-sign-in feature would definitely come in handy and encourage customers to buy more frequently from the mobile website.

Many mobile websites wait until the bottom of the login page to tell customers what kinds of options they have for checking out. But rather than surprise them late, Victoria’s Secret displays this information in big bold buttons right at the very top:

Victoria’s Secret express checkout options


Victoria’s Secret simplifies and speeds up checkout by giving three attractive options. (Image: Victoria’s Secret) (View large version)

Customers have a choice of signing in with their account, checking out as a guest or going directly to PayPal. They are not surprised to discover later on that their preferred checkout or payment method isn’t offered.

I also really love how Victoria’s Secret has chosen to do this. There’s something nice about the brightly colored “Sign In” button sitting beside the more muted “Check Out as a Guest” button. For one, it adds a hint of Victoria’s Secret brand colors to the checkout, which is always a nice touch. But the way it’s colored the buttons also makes clear what it wants the primary action to be (i.e. to create an account and sign in).

6. Add Breadcrumbs

When you send mobile customers to checkout, the last thing you want is to give them unnecessary distractions. That’s why the website’s standard navigation bar (or hamburger menu) is typically removed from this page.

Nonetheless, the checkout process can be intimidating if customers don’t know what’s ahead. How many forms will they need to fill out? What sort of information is needed? Will they have a chance to review their order before submitting payment details?

If you’ve designed a multi-page checkout, allay your customers’ fears by defining each step with clearly labeled breadcrumb navigation at the top of the page. In addition, this will give your checkout a cleaner design, reducing the number of clicks and scrolling per page.

Hayneedle has a beautiful example of breadcrumb navigation in action:

Hayneedle checkout breadcrumb navigation


Hayneedle’s breadcrumbs are cleanly designed and easy to find. (Image: Hayneedle) (View large version)

You can see that three steps are broken out and clearly labeled. There’s absolutely no question here about what users will encounter in those steps either, which will help put their minds at ease. Three steps seems reasonable enough, and users will have a chance to review the order once more before completing the purchase.

Sephora has an alternative style of “breadcrumbs” in its checkout:

Sephora’s numbered breadcrumbs navigation


Sephora’s numbered breadcrumbs appear as you complete each section. (Image: Sephora) (View large version)

Instead of placing each “breadcrumb” at the top of the checkout page, Sephora’s customers can see what the next step is, as well as how many more are to come as they work their way through the form.

This is a good option to take if you’d rather not make the top navigation or the breadcrumbs sticky. Instead, you can prioritize the call to action (CTA), which you might find better motivates the customer to move down the page and complete their purchase.

I think both of these breadcrumbs designs are valid, though. So, it might be worth A/B testing them if you’re unsure of which would lead to more conversions for your visitors.

7. Format the Checkout Form Wisely

Good mobile checkout form design follows a pretty strict formula, which isn’t surprising. While there are ways to bend the rules on desktop in terms of structuring the form, the number of steps per page, the inclusion of images and so on, you really don’t have that kind of flexibility on mobile.

Instead, you will need to be meticulous when building the form:

  • Design each field of the checkout form so that it stretches the full width of the website.
  • Limit the fields to only what’s essential.
  • Clearly label each field outside of and above it.
  • Use at least a 16-point-pixel font.
  • Format each field so that it’s large enough to tap into without zooming.
  • Use a recognizable mark to indicate when something is required (like an asterisk).
  • Always let users know when an error has been made immediately after the information has been inputted in a field.
  • Place the call to action at the very bottom of the form.

Because the checkout form is the most important element that moves customers through the checkout process, you can’t afford to mess around with a tried and true formula. If users can’t seamlessly get from top to bottom, if the fields are too difficult to engage with, or if the functionality of the form itself is riddled with errors, then you might as well kiss your mobile purchases (and maybe your purchases in general) goodbye.

Crutchfield shows how to create form fields that are very user-friendly on mobile:

Large-sized form fields on the Crutchfield checkout


Form fields on the Crutchfield checkout page are large and difficult to miss. (Image: Crutchfield) (View large version)

As you can see, each field is large enough to click on (even with fat fingers). The bold outline around the currently selected field is also a nice touch. For a customer who is multitasking and or distracted by something around them, returning to the checkout form would be much easier with this type of format.

Sephora, again, handles mobile checkout the right way. In this case, I want to draw your attention to the grayed-out “Place Order” button:

Smart use of the Sephora call to action in checkout


Sephora uses the call to action as a guide for customers who haven’t finished the form. (Image: Sephora) (View large version)

The button serves as an indicator to customers that they’re not quite ready to submit their purchase information yet, which is great. Even though the form is beautifully designed — everything is well labeled, the fields are large, and the form is logically organized — mobile users could accidentally scroll too far past a field and wouldn’t know it until clicking the call-to-action button.

If you can keep users from receiving that dreaded “missing information” error, you’ll do a better job of holding onto their purchases.

8. Simplify Form Input

Digging a bit deeper into these contact forms, let’s look at how you can simplify the input of data on mobile:

  • Allow customers to user their browser’s autocomplete functionality to fill in forms.
  • Include a tabindex HTML directive to enable customers to tap an arrow up and down through the form. This keeps their thumbs within a comfortable range on the smartphone at all times, instead of constantly reaching up to tap into a new field.
  • Add a checkbox that automatically copies the billing address information over to the shipping fields.
  • Change the keyboard according to what kind of field is being typed in.

One example of this is Bass Pro Shops’ mobile website:

Bass Pro checkout form uses a smart keyboard


Each field in the Bass Pro checkout form provides users with the right keyboard type. (Image: Bass Pro Shops) (View large version)

For starters, the keyboard uses tab functionality (see the up and down arrows just above the keyboard). For customers with short fingers or who are impatient and just want to type away on the keyboard, the tabs help keep their hands in one place, thus speeding up checkout.

Also, when customers tab into a numbers-only field (like for their phone number), the keyboard automatically changes, so they don’t have to switch manually. Again, this is another way to up the convenience of making a purchase on mobile.

Amazon’s mobile checkout includes a quick checkbox that streamlines customers’ submission of billing information:

Amazon streamlines form input with address duplication


Amazon gives customers an easy way to duplicate their shipping address to billing. (Image: Amazon) (View large version)

As we’ve seen with mobile checkout form design, simpler is always better. Obviously, you will always need to collect certain details from customers each time (unless their account has saved that information). Nonetheless, if you can provide a quick toggle or checkbox that enables them to copy data over from one form to another, then do it.

9. Don’t Skimp on the CTA

When designing a desktop checkout, your main concerns with the CTA are things like strategic placement of the button and choosing an eye-catching color to draw attention to it.

On mobile, however, you have to think about size, too — and not just how much space it takes up on the screen. Remember the thumb zone and the various ways in which users hold their phone. Ensure that the button is wide enough so that any user can easily click on it without having to change their hand position.

So, your goal should be to design buttons that (1) sit at the bottom of the mobile checkout page and (2) stretch all the way from left to right, as is the case on Staples’ mobile website:

Staple’s big blue CTA button


Staple’s bright blue CTA sticks out in an otherwise plain checkout. (Image: Staples) (View large version)

No matter who is making the purchase — a left-handed, a right-handed or a two-handed cradler — that button will be easy reach.

Of all the mobile checkout enhancements we’ve covered today, the CTA is the easiest one to address. Make it big, give it a distinctive color, place it at the very bottom of the mobile screen, and make it span the full width. In other words, don’t make customers work hard to take the final step in a purchase.

10. Offer an Alternate Way Out

Finally, give customers an alternate way out.

Let’s say they’re shopping on a mobile website, adding items to their cart, but something isn’t sitting right with them, and they don’t want to make the purchase. You’ve done everything you can to assure them along the way with a clean, easy and secure checkout experience, but they just aren’t confident in making a payment on their phone.

Rather than merely hoping you don’t lose the purchase entirely, give them a chance to save it for later. That way, if they really are interested in buying your product, they can revisit on desktop and pull the trigger. It’s not ideal, because you do want to keep them in place on mobile, but the option is good for customers who just can’t be saved.

As you can see on L.L. Bean’s mobile website, there is an option at checkout to “Move to Wish List”:

L.L. Bean wish list option


L.L. Bean gives customers another chance to move items to their wish list during checkout. (Image: L.L. Bean) (View large version)

What’s nice about this is that L.L. Bean clearly doesn’t want browsing of the wish list or the removal of an item to be a primary action. If “Move to Wish List” were shown as a big bold CTA button, more customers might decide to take this seemingly safer alternative. As it’s designed now, it’s more of a, “Hey, we don’t want you to do anything you’re not comfortable with. This is here just in case.”

While fewer options are generally better in web design, this might be something to explore if your checkout has a high cart abandonment rate on mobile.

Wrapping Up

As more mobile visitors flock to your website, every step leading to conversion — including the checkout phase — needs to be optimized for convenience, speed and security. If your checkout is not adeptly designed to mobile users’ specific needs and expectations, you’re going to find that those conversion rates drop or shift back to desktop — and that’s not the direction you want things to go in, especially if Google is pushing us all towards a mobile-first world.

Smashing Editorial
(da, ra, yk, al, il)


See the original post:  

What You Need To Know To Increase Mobile Checkout Conversions

Are Mobile Pop-Ups Dying? Are They Even Worth Saving?




Are Mobile Pop-Ups Dying? Are They Even Worth Saving?

The pop-up has an interesting (and somewhat risqué) origin. Were you aware of this? The creator of the original pop-up ad, Ethan Zuckerman, explained how it came into being:

Specifically, we came up with it when a major car company freaked out that they’d bought a banner ad on a page that celebrated anal intercourse. I wrote the code to launch the window and run an ad in it. I’m sorry. Our intentions were good.

Basically, the client was dissatisfied with having their ad placed beside an article discussing this less-than-savory subject. Rather than lose the ad revenue or, worse, the client, Zuckerman and his team came up with a solution: The car company’s ad would still run on the website, but this time would pop out into a new window. Thus, the pop-up gave the advertiser an opportunity to share their offer without the risk of sitting next to a competitor or unsuitable blog content.

Origin story aside, does Zuckerman have anything to apologize for? Is the pop-up in its current state such a bad thing for the user experience? With a few simple searches around the web, you might very well begin to believe that.

For instance, a search of the term “pop-up ads” in Answer the Public comes up with this disheartening response:

Answer the Public questions about pop-ups


Users clearly just want pop-ups to go away. (Image: Answer the Public) (View large version)

A search for “I hate pop-ups” on Google results in over 3 million pages and responses like this:

Google search for 'I hate pop-ups'


You can bet that a search for ‘I love pop-ups’ doesn’t have quite the same results. (Image: Google) (View large version)

With the seemingly abundant negative responses to pop-ups, does this mean the pop-up is dead? Google’s 2017 algorithmic update penalizing certain types of mobile pop-ups could very well spell their doom — though I’m not ready to throw in the towel yet.

So, today, I want to see what the research says.

Are mobile pop-ups dying? Or will they simply undergo another adaptation?

If they continue to remain effective, how should designers make use of them, especially in mobile web design?

Finally, are there alternatives web designers can start using now to prepare for Google’s vision of a more mobile-friendly digital world?

Is The Mobile Pop-Up Dead? What The Experts Say

Pop-ups have come a long way since their founding by Zuckerman in the ’90s.

For the most part, pop-ups don’t force users out of the browser, nor do they surprise them with a desktop cluttered with ads once the browser is closed altogether. It’s a neater and more controlled experience overall. And we’ve seen them in a variety of forms, too:

  • full-page interstitials,
  • partial modal pop-ups,
  • top- or bottom-aligned bars,
  • pop-out modules tucked in the corner of the page,
  • push notifications,
  • inline banners found within the actual content of the page.

Pop-ups can also now appear at various points throughout the journey, thanks in part to big data and AI:

  • appearing as soon as the web page loads;
  • appearing once the user scrolls down the page;
  • appearing once the user moves the cursor to the close button in the browser tab;
  • ever-present, sitting off to the side, waiting for engagement.

But this type of pop-up technology doesn’t work all that well with the mobile experience, does it?

Take Macy’s website. Upon entering it, you’ll encounter this pop-up ad within a few seconds:

Example of Macy’s modal pop-up on desktop


Macy’s displays this offer within a few seconds of your arrival on the website. (Image: Macy’s) (View large version)

When you open the website on mobile, however, you won’t find any trace of that pop-up. Instead, you’ll see a small bar built into the space just below the navigation bar:

Macy’s inserts desktop pop-up into mobile on-page content


Macy’s ditches the pop-up on mobile and integrates it in the content. (Image: Macy’s) (View large version)

The offer is similar, but with no request for an email address and no pop-up functionality. This is likely because of the change to Google’s algorithm in 2017.

Which brings me to what the experts say about pop-ups. While most are focused on the life expectancy of pop-ups in general, Google has been leading the charge against mobile pop-ups (sort of) for almost a year now:

Google

Let’s start by looking at Google’s announcement regarding mobile-first indexing. This originally came to light in 2016, but it was just talk at the time. It is now over a year later, and Google has begun rolling out this indexing initiative.

Basically, what it does is change how Google’s bots crawl and index a website. Google no longer views the desktop version of a website as the primary experience for users. Going forward, the mobile website will be the primary version indexed.

With Google users increasingly starting on a mobile device instead of desktop, this move makes sense. It’s also why the algorithm change in 2017 that penalizes certain types of mobile pop-ups was another logical move in Google’s mission to make the web a more mobile-friendly place.

Google diagram of penalty pop-up designs


Google provides examples of the kinds of interstitial pop-ups to avoid. (Image: Google) (View large version)

In laying out the details of this change, Google explained that mobile pop-ups deemed disruptive to the user experience would result in ranking penalties for those websites. These kinds of pop-ups fall into three categories:

  • interstitial pop-ups that cover the entire screen upon entering the website and that require users to “X” out in order see the actual website;
  • pop-ups that cover the entire screen upon entering the website but that require users to know that scrolling past them is the way to bypass the pop-up and see the main content;
  • any pop-up that hides the majority of content on the page behind it.

In other words, Google doesn’t believe that traditional pop-ups have any place on mobile because the limited screen space would make the experience too disruptive. That’s likely the reason why you’re seeing popular websites like Macy’s do away with mobile pop-ups altogether. Though there are some traditional modal pop-ups Google doesn’t mind, it’s probably safer to avoid modals and interstitials on mobile in order to avoid the chance of a penalty.

As you can see, pop-ups for legal requirements are still OK, although most of the time you’re going to see publishers relegate them to small bars, as MailChimp has done here:

Example of an acceptable cookies disclaimer on mobile


MailChimp adheres to Google’s new guidelines in providing a cookies disclaimer. (Image: MailChimp) (View large version)

Nielsen Norman Group

In 2017, Nielsen Norman Group conducted a survey on the most hated advertising techniques. This study encompassed all kinds of website advertising (including video ads, on-page banner ads, etc.), but there was special mention of pop-up ads that make the findings relevant here.

Out of a total score of 7, with 1 being “strongly like” and 7 being “strongly dislike,” respondents gave mobile ads a score of 5.45. Desktop ads weren’t far behind, with 5.09, although the survey results did consistently show that mobile ads were more despised than their desktop counterparts.

Comparison of desktop and mobile ad hatred


Users might despise ads, in general, but they really don’t like them on mobile. (Image: Nielsen Norman Group) (View large version)

Drilling down, Nielsen Norman Group also found modals (i.e. partially covering pop-ups) to be the most hated type of ad that mobile users encounter:

: Chart that shows mobile ad dislike ratings


Oof! Users really don’t like modal pop-ups, do they? (Image: Nielsen Norman Group) (View large version)

Why does Nielsen Norman Group believe this to be the case? Well, there’s the aforementioned real estate issue. Mobile phones just don’t have enough room to accommodate modal pop-ups without overwhelming users. According to the authors, though, there may be another reason:

Additionally, the context of mobile use tends to be “on-the-go” — that is, users are more likely to be distracted by competing stimuli, and the need for efficiency is drastically increased.

Having reviewed Nielsen Norman Group’s research, I do agree that many users will very likely be put off upon encountering a pop-up on a mobile website. That being said, plenty of research provides a valid counter-argument.

While users might be likely to describe their annoyance with pop-ups as high when surveyed about it, some evidence suggests it is short-lived for many of them. As we’ll see in a moment, pop-ups are actually quite effective in driving conversions.

Sumo

Sumo declared in 2018 that pop-ups aren’t dead. While that opinion might be seen as biased, considering it’s in the business of creating and selling list-builder tools such as pop-ups, welcome mats and smart bars, it does have evidence to suggest that pop-ups are still worthwhile if generating leads and conversions is your top priority.

Sumo used data from nearly 2 billion customer pop-ups to make this argument. Sadly, the data doesn’t directly break out anything related to mobile pop-ups and their conversion rates, but I found this particular statistic to be relevant:

Of the top 10% of pop-ups, only 8% had pop-ups appear in the 0-4 second mark. And the majority of those 8% were on pages where the pop-up was expected to appear quickly — as in sending someone to a download page.

In other words, users don’t want to be rushed into seeing your pop-ups — which is one of the major points Google is trying to make with its algorithm update. (Tests conducted by Crazy Egg mirror this point about delaying pop-ups.) Mobile websites that jump the gun and present visitors with a pop-up message before giving them an opportunity to scroll through the website are just creating an unnecessary disruption.

Another point that Sumo stresses is that pop-ups need to be valuable and presented within context. This is especially important on mobile, where you can’t afford to test visitors’ patience with a video pop-up completely unrelated to the blog post they were trying to read beneath it.

In other words, always think about how a pop-up will add value to the experience that you are (partially) blocking.

Justinmind

Justinmind calls modal pop-ups “complicated,” and for good reason. Even though there was nearly an even split between how users felt about pop-ups (21% said they liked them, while 23% said they didn’t), the research shows that pop-ups have proven to be quite helpful in the conversion process.

That being said, what a lot of this comes down to is how a website uses the pop-up. The University of Alberta, for example, was able to get 12% to 15% more email subscribers by using a pop-up on its website. On the other hand, you have Search Engine Land claiming that the main reason people block websites is because of pop-up ads.

Another thing to think about, according to Justinmind, is the mobile UI. It suggests that even if you do everything else right — deliver a valuable and well-timed offer and compromise an unobtrusive amount of space — there’s still the thumb zone to think about.

While it’s great that designers have built the ever-trusty “X” button into the top-right corner of pop-ups, that’s not the easiest stretch for the mobile user’s thumb. If you want to design ads for the mobile UX, consider another placement of that exit button.

30 Lines

Digital marketing agency 30 Lines claims:

Our clients who run targeted lead capture pop-ups on their websites typically convert anywhere from 75-250% more leads from their sites than clients who don’t.

Unlike other experts who have shied away from the subject of mobile pop-ups (because it might end in them admitting defeat), 30 Lines took on the topic head on. And this was the point they sought to make:

  • Google is not saying that mobile pop-ups are all bad.
  • Google, in fact, does want you to generate more conversions on your website — and it acknowledges that pop-ups might play a role in that.
  • It’s simply up to you to determine what will lead to the most unobtrusive experience for your visitors.

30 Lines gives a lot of great tips on how to adhere to Google’s principles without doing away with mobile pop-ups altogether. As we move on to discuss ways in which designers can use mobile pop-ups in the future, I’ll be sure to include them for consideration.

What Do Web Designers Do With Mobile Pop-Ups Now?

I’m not going to lie: This is a tough one, because while it would be so easy to just kill pop-ups on mobile websites altogether — and many consumers would be thrilled with that decision — they do still have incredible value in generating conversions. So, what do we do?

Clearly, this is a complicated matter, because you could equally argue both sides and are left choosing between two evils:

  • Do you want to run mobile pop-ups in the hope of gaining more subscribers (especially considering that mobile users tend to have lower conversion rates to begin with)?
  • Or do you want to put more resources into writing high-converting landing pages and on-page banners to sell and convert mobile visitors?

Do you even know which option mobile visitors would be more receptive to?

Below are questions to think about as you evaluate whether pop-ups make sense for your mobile website now and in the future.

Is It Necessary?

Ask yourself whether a particular message even needs to be in a pop-up format. If it could work just as well integrated in a page, then you might want to skip it entirely (as in the Macy’s example from earlier).

Fast Company uses pop-ups on its mobile website (shown below), but it also integrates its contact forms into on-page banners, like this one:

Example of a subscriber form that could be in a pop-up but isn’t


Fast Company inserts a subscriber form inline with the content. (Image: Fast Company) (View large version)

Different Designs

Create different pop-up designs for desktop and for mobile. So long as the message and offer are still relevant and valuable to mobile users, there’s no reason not to completely start from the ground up when building mobile pop-ups. Just be sure to think about the design, message and trigger rules when reshaping desktop pop-ups for mobile.

Gap is a good example of this. You can see how its offer is displayed on desktop as an on-page banner with expanded details:


Gap desktop pop-up ad


This is how Gap displays this offer on desktop.

Then, on mobile, it is shown as a bottom bar element:

Gap mobile pop-up ad


This is how Gap displays this offer on mobile. (Image: Gap) (View large version)

Go Small

Keep pop-ups small on mobile. In general, it’s recommended they take up no more than 15% of the screen. This means staying away from full-page interstitials, even if you’re trying to sneak them in on a second or third page.

Inc has a small and succinct message for mobile users:

Example of bottom bar pop-up


Inc keeps its pop-up message bold but brief. (Image: Inc) (View large version)

Target Mobile Context

Use mobile-targeted messaging. This means be very light on text, and don’t include images or icons that force the pop-up to be larger than it needs to be. You can also create targeted messages for consumers who use your website for research while out and about or even while shopping in house.

Stick To The Bottom

To play it safe, display pop-ups only at the very bottom of a page. This could mean one of two things. First, you could align the pop-up to the bottom of the mobile screen (this could be a traditional modal pop-up or a hello bar). Here’s an example of how Fast Company does it:

Example of how a modal pop-up works on mobile


Fast Company doesn’t shy away from modals with this mobile pop-up example. (Image: Fast Company) (View large version)

The second option is to open the pop-up once the visitor has scrolled all the way to the bottom of the web page.

Delay

Try not to show a pop-up on the first page a visitor sees. By this, I mean the first page that a user is directed to by search or a referral website (which is not necessarily the home page). Also, don’t forget about timing. In general, try not to load a pop-up within the first four seconds of a visitor arriving on a page.

Intuit does this really well:

Example of delayed mobile pop-up


This Intuit pop-up only appears after you’ve navigated inwards on the website. (Image: Intuit) (View large version)

Visit the first page of the website and you won’t encounter any kind of pop-up messaging. Click through to learn more about pricing, and then you’ll see a relevant and value-adding message pop up at the bottom of the screen.

Easy Exit

If you still want to use a modal pop-up design, make sure it’s easy to exit out of. This means putting an “X” in the bottom-right corner or an exit message beneath the CTA.

Or you could stick with the bottom bar design that many mobile web designers seem to favor right now, like Zumiez:

Example of hello bar pop-up on mobile


A bottom-aligned hello bar pop-up from Zumiez. (Image: Zumiez) (View large version)

The New Yorker also does this:

Example of bottom bar pop-up content on mobile


A bottom-aligned hello bar pop-up from The New Yorker. (Image: The New Yorker) (View large version)

Make It Optional

Create a special CTA or other interactive element on your website that, only when clicked, opens a pop-up. Basically, let mobile users decide whether and when they want to interrupt the on-site experience.

Basic Outfitters does this after you’ve added your first item to the cart:

Example of a user-triggered mobile pop-up


The Basic Outfitters pop-up shows only after the user actively triggers it on the website. (Image: Basic-Outfitters) (View large version)

Consider Alternatives

If you’re nervous about designing a traditional pop-up on your website, fear not. There are alternatives.

Consider push notifications and SMS notifications. They allow you to reach mobile users without having to intrude in the browser or in the mobile device experience without their express permission.

Gated content is another way to collect leads on a mobile website without having to force users into a pop-up to submit their contact information.

Track Preference

You will more likely annoy a mobile user with a repeat pop-up ad than a desktop user. So, if you can use cookies to prevent mobile visitors from being interrupted by the same pop-up message after they’ve dismissed it, that would be ideal.

Remember: You’re not just playing by Google’s rules here. If mobile visitor numbers drop off and Google spots a change in your bounce rate and time-on-site statistics, then your website’s rank will suffer as a result, since Google now prioritizes the mobile website experience over desktop.

The Mobile Pop-Up Doesn’t Need To Die

For now, the best plan is to heed the experts. And what they’re saying is that mobile pop-ups aren’t dying. In fact, they can still play a vital role in signing up more email subscribers and converting more customers from mobile devices. But, as with anything else, you need to play by Google’s rules and always think about how your decisions will affect your users’ experience.

So, use your mobile pop-ups wisely.

Smashing Editorial
(da, ra, yk, il, al)


Source:  

Are Mobile Pop-Ups Dying? Are They Even Worth Saving?

How to Create Ads For More Clicks in 2018

With Facebook making some serious changes in 2018, marketers are beginning to look toward other channels for generating attention. I truly believe we’ll see a shift from Facebook to SEM in the coming months. People will begin investing in SEO, link-building and – of course – AdWords. But PPC has always been a challenge. Competition continues to increase as new startups enter existing spaces. Not to mention the industry Goliath’s expanding their reach into new markets. We recently analyzed 30,000 PPC accounts to see what the highest performers all had in common. While the use of machine learning helped control parameters…

The post How to Create Ads For More Clicks in 2018 appeared first on The Daily Egg.

Excerpt from: 

How to Create Ads For More Clicks in 2018

Get Access to All the Recordings From Marketing Optimization Week

Just last week you may have joined us, along with 8,000 other marketers online for our first ever Marketing Optimization Week. Held over four days (February 20-23), experts from Hanapin, Emma, Zapier, Drift, Microsoft and more shared their tactics for refreshing your marketing and getting past a results slump.

Running 14 sessions total with 13 amazing partners, we were pretty excited to see marketers get so much out of the event:

I presented on the topic of “How to Improve Your Adwords Conversion Rates” as part of the PPC track (we had four tracks in all, including PPC, AI, Marketing Strategy and Automation). Today I’ll share some of the PPC-related takeaways, both from my session and others.

Making the Most of Your PPC Spend

To start, here’s my pop quiz:

If you’ve optimized your AdWords campaigns to no end, but are still seeing smaller and smaller efficiency gains, do you:

  1. Throw more money at it (cost per acquisition be damned!)
  2. Keep on truckin’. (Refine your keyword strategy further and test new ads), or
  3. Start looking at where your ads are pointing to

Call me crazy, but option 3 seems like a no-brainer, right?

It’s like my pal Joe Martinez, Director of Paid Media at Granular Marketing says:

“Ads get traffic. Landing pages get conversions.”

In other words, no matter how good your keyword and bidding strategies are, your ads can’t do the work alone.

The savviest PPC marketers are optimizing as much of the funnel as they can get their hands on, because AdWords CPC’s have nearly tripled since 2012. To ensure you’re not blindly spending, you need to look at where your ads are pointing to.

The question I have is: with landing pages being such low-hanging fruit in terms of paid ad success, why haven’t all marketers figured this out yet?

I tackled this in my presentation covering:

  • What landing page changes you can make now to lift conversion rates
  • How to make these changes without talking to your developer
  • How to set up an A/B test in less than 30 seconds
If you haven’t already, you can sign up to get all the recordings here

Other PPC-Specific Sessions You Can Check out

Throughout the week it was pretty satisfying to see a big focus on post-click optimization as a major area to consider for improving results and getting the most out of your PPC ad spend.

My personal favourite talks within the PPC track were:

  • PPC Woes And What To Do About Them by Beth Thouin and Richard Beck of Acquisio
  • Beef Up Your Quality Score With Landing Page Updates by Jeff Baum and Diane Anselmo at Hanapin, and
  • Unicorn Marketing: Getting Unusually Great Results Across Every Marketing Channel by Larry Kim of Mobile Monkey

Finally, here are some of my top takeaways from the talks above:

1. Optimize your landing pages to get ahead

Acquisio structured their session around addressing the biggest woes PPC marketers face everyday and they provided actionable tips for prolonging the effectiveness of your campaigns past three to four months.

According to Beth and Richard, one of the best ways to get ahead of the competition (and keep your campaigns fresh and high-converting) is to work on your landing pages. Make sure your images are high-quality, pages load fast, and there’s clear message match between your ads and resulting landing pages.

It’s like Richard said during the session: “[forget] the bucket with holes in it! Not having a good landing page is like having a bucket with no bottom in it when it comes to PPC campaigns.”

2. Focus on navigation to increase your Quality Score

So often we get caught up with page load time, copy, and SEO that we forget to focus on intent and how people expect or want to navigate through our landing page information (i.e.: easily). Hanapin’s session went over just how important Quality Score is for PPC campaign performance and how one factor in improving your score via the landing page experience is navigation.

Jeff and Diane use the analogy of a shoe store: the experience after clicking through on a search ad should be akin to walking through a neatly organized shop where everything is labelled, certain types of shoes are grouped together, and you can easily find what you’re looking for in a matter of minutes. When in doubt: the simpler you make your landing page navigation/information hierarchy, the better.

3. Stop trying to optimize donkeys. They will always be donkeys.

During his session at Marketing Optimization Week, Larry Kim outlined the difference between a unicorn and donkey. What’s a marketing unicorn? Typically, these are the pieces of content or campaigns that outperform the rest. They usually make up only a small percentage of everything you run. One of the main points in this talk that resonated with me was that we should stop trying to optimize donkeys and focus exclusively on the unicorns.

Unicorns are unicorns across channels, so when you find one, take it and apply it across your other channels, including PPC. To find unicorns we need to audition lots of content ideas, identify which ones have unusually high engagement rates, and optimize those few for engagement even further.

These takeaways just scratch the surface from Marketing Optimization Week (there are more tracks and engaging speakers). Be sure to grab the recordings and share them with your team!

More – 

Get Access to All the Recordings From Marketing Optimization Week

Adobe XD Contest: Create An App Prototype With Your City’s Best-Kept Secrets

(This article is kindly sponsored by Adobe.) Every city has its hidden spots: the best place to see the sunset, a cozy coffee shop that makes excellent espresso, or that impressive building you won’t find in any guidebook. As a visitor, you might stumble across little gems like these by chance, but, well, no one knows a city’s secrets as well as the locals, right?
Now’s your opportunity to let fellow creatives see your city through your eyes — and to put your design skills to the test at the same time.

Link: 

Adobe XD Contest: Create An App Prototype With Your City’s Best-Kept Secrets

A Comprehensive Guide To Mobile App Design

(This is a sponsored article.) More than ever, people are engaging with their phones in crucial moments. The average US user spends 5 hours per day on mobile. The vast majority of that time is spent in apps and on websites.
The difference between a good app and a bad app is usually the quality of its user experience (UX). A good UX is what separates successful apps from unsuccessful ones.

Source – 

A Comprehensive Guide To Mobile App Design

Using SSE Instead Of WebSockets For Unidirectional Data Flow Over HTTP/2

When building a web application, one must consider what kind of delivery mechanism they are going to use. Let’s say we have a cross-platform application that works with real-time data; a stock market application providing ability to buy or sell stock in real time. This application is composed of widgets that bring different value to the different users.
When it comes to data delivery from the server to the client, we are limited to two general approaches: client pull or server push.

See original article – 

Using SSE Instead Of WebSockets For Unidirectional Data Flow Over HTTP/2

Changing On-Page Behavior with Sticky Navigation and Data-Driven Design

As an optimizer, there’s nothing that excites me more than using design to change on-page behavior. By “change”, I mean to positively influence visitors to achieve their (and your) goals more effectively, and sticky navigation is a great way to increase your odds of driving behavioral change.

The best way I know to design experiences that change on-page behavior is to use my Data-Driven Design (3D) framework to gather and observe available data, and use the Micro Metrics Method (3M) to guide design exploration.

This is what I’ll be showing you today by using sticky navigation on a long landing page and also on this blog post.

It’ll help you move around the content while secretly showing you the cool things you can do with Unbounce ;)


What is Data-Driven Design? (3D)

Data-Driven Design is an 8-step collaborative optimization process designed to help your marketing team work together to increase conversions, but more importantly, to develop empathy for your customers and your coworkers. It begins with The 3D Playbook, which is an interactive lookup table that helps narrow down the data types you should be looking at when trying to optimize your landing pages, websites, and more.

It looks like the screenshot below, and you can check it out at this link. The process for using it needs more explanation that I can give in this post, but I am doing a webinar at Marketing Optimization Week where I’ll cover it in depth.

One of the most important steps in the process is taking the observations we make looking at data (analytics, heatmaps, usability tests etc.), and working as a team to design solutions to each of the problems you observe. Measuring the impact that these design changes have is called the Micro Metric Method (3M).


What is the Micro Metrics Method? (3M)

When you make observations as a team (I recommend you include a designer, copywriter, and marketer), not only are the solutions better, but the collaborative nature helps with team/client/executive buy-in for the changes you’ll propose. You can see a session I ran recently below. We watched usability test videos and took notes about the observations we were making in a shared doc that is created for you as part of the 3D Playbook (when you choose a page element from the menu it will create a series of worksheets for you and your team – the instructions on the first page of the sheet explain how).

A marketing team following the Data-Driven Design process

A definition of micro metrics

A completed worksheet with observations, severity ratings, and those assigned as micro metrics

The design solution sketches the team came up with to solve the problems identified by the micro metrics


I’m actually giving my Data-Driven Design for Marketing Teams talk for Marketing Optimization Week, so you should definitely register for that and I’ll run you through the whole process. MOW is a 4-day event from Feb 20-23 and I’m on the last day.

How to Use Sticky Navigation to Change On-Page Behavior

I’ve set up a demo page that shows a long landing page with a sticky nav that I created using an Unbounce Sticky Bar with some CSS to hide the close button. The goal of sticky navigation is to increase the level of engagement with your page by presenting persistent options that explain what’s available on the page.

I really love this approach to landing page design, where it’s standard – and recommended – to not have navigation (that takes you away from the page). In particular, it’s great because it’s persistent. It scrolls with you so the opportunity for behaviorally interesting clicks doesn’t go away. What I mean by that is that there’s so much more data to collect when the navigation follows you down the page. When it’s fixed to the top of the page, you have very few opportunities beyond the very first click, to get a sense of which items trigger intent.

According to The 3D Playbook, for sticky navigation, we should first look at heatmap data and the click-through rate of each navigation link, as well as the primary call to action you have on your page.

In the Unbounce app, I used a sticky bar to create a navigation bar, assigning each link to the ID of a page element on the landing page that it would reside on.

Below is a screenshot of the sticky nav that shows up on every post of Product Awareness Month (except this one and one other where I’m demoing sticky bars). I’ll be sharing the data I collected from this, and a gazillion other data sources, in the end of month results show.

Sticky nav helps increase engagement with your content, bringing people further down the page to sections they may otherwise not see, and almost as importantly, it lets you measure what people ate interested in.

DEMO: How to Use Sticky Navigation to Increase Blog Engagement

You can click here to show a sticky nav on this blog post. I’ve set it up so that the nav links connect to different “chapters” of the post. It’s a great way to direct your readers, and also to gather valuable engagement data by looking at click heatmaps and analytics.

It’s very easy in Unbounce to duplicate a Sticky Bar and apply it to another page! Huzzah! Product awareness in action. Remember to click here to show the sticky nav.

Notice the CSS ID shown for the click target in the screenshot below (it says URL: “#register-for-mow”). This makes the nav link jump to the corresponding section of the blog post that I set up by adding an ID to a page element.

Sticky Nav in Unbounce: links to #register-for-mow

#register-for-mow as a target ID in the blog post

Do me a favour and click on the nav so I get some heat map data. It won’t be legitimate as I’m asking you to do it, but hey, shits and giggles amiright?

This post wandered a bit into a few directions, but I hope you got a sense for how I like to think about optimization, why sticky nav is awesome, and why we need more collaborative frameworks like Data-Driven Design.

Cheers
Oli


p.s. Register for Marketing Optimization Week to see 4 days of the most badass content including my Data-Driven Design framework, plus Larry Kim from Mobile Monkey, Dana DiTomaso form KickPoint, Purna Virji from Microsoft, David Gerhardt from Drift, and many more.

Taken from: 

Changing On-Page Behavior with Sticky Navigation and Data-Driven Design

Thumbnail

[Mobile] How to Turn Your Blog Posts Into a Mobile App Experience – Using Sticky Bars

With so much of your traffic coming from people’s phones, it’s essential that we start to craft exceptional mobile experiences. This means going beyond simple responsive design if you’re going to create a superior mobile UX (user experience) that stands out from your competition.

IMPORTANT: Use your phone to read this post – it’s designed as a mobile experience.

***Click here to show a mobile nav bar***. The concept here is to use a nav bar with icons, to turn this blog post into an app-like mobile user experience. Click the nav buttons to move up and down the blog post on your phone and you’ll get a sense of how the experience has changed from a regular blog post reading experience.

You can use this technique with landing pages, blog posts, or anywhere you want to create a mobile app experience.

For those reading on desktop, this is what you’ll see at the bottom of your mobile browser.


Why Do Landing Pages (and Your Blog) Need Good Mobile UX?

When a landing page or blog post is long, there will most likely be a small percentage of visitors who will actually read the whole thing. You can increase engagement, and make a better experience if you guide people to the most important chapters or segments of the content.

***Click here to show the mobile nav bar***.

To achieve this you can use a navigation bar with clearly labeled sections that are not only helpful but and also feels like you’re inside an app native to your phone.


Turning Your Landing Page into an App-Like Mobile Experience with Unbounce Sticky Bars – in 4 Simple Steps

I’ve set it up so there are 4 main sections in the blog post that you can navigate to using the sticky app nav. So go ahead and click the nav icons to jump to each of the four steps you can follow to add this experience to your own landing pages and blog posts.


Step #1 – Create a Sticky Bar With Retina-Grade Icons

I created a sticky bar with four icons. To make them retina I made them with a width of 160px and a height of 130px, and shrank them to 80×65 in the Unbounce builder. To do this, I added 4 boxes and set the background style to be “Image” and “Background to fit container”. Then I added a fully transparent button above each of the images (because boxes don’t have a link action) to link to each of the 4 page sections.


Step #2 – Add Anchor Links and Sections

You can do this by setting the link action of the icons to point to a page element ID. For instance, the horizontal rule (line) that appears above step #2, has an ID of “section2”. In Unbounce this looks like the settings below. Note that the target of the link is set to “Parent Frame” as the Sticky Bar is set in an iframe above the page.


Step #3 – Hide the Close Button with CSS

As with many hacks that I’ve come up with for Product Awareness Month, this one requires that we hide the “Close” button that is part of the Sticky Bar functionality. When your Sticky Bar is used for promotional purposes it’s important that people can close it. But when you’re creating a navigational experience, the bar becomes part of the interface, and we need it to be always present.

To do this, you need to add a line of CSS to the landing page or blog that you want it to appear on. Note: this is not an official Unbounce feature, so your best bet for geeking out with functionality will be in the Unbounce community.

.ub-emb-iframe-wrapper .ub-emb-close visibility: hidden;

Step #4 – Look at Your Phone and Say Hells Yeah!

I can’t state enough how much I think this is a better mobile experience, so please give it a try and join the conversation in the comments (or ping me on Twitter).

Cheers
Oli

Taken from – 

[Mobile] How to Turn Your Blog Posts Into a Mobile App Experience – Using Sticky Bars