5 Techniques to Make Mobile Call to Action Buttons Intuitive

To tap or not to tap—that is the question on the user’s mind when they see a call to action button. The more buttons there are, the longer it takes them to make a decision.

To tap or not to tap—that is the question on the user’s mind when they see a call to action button.

The more buttons there are, the longer it takes them to make a decision. They have to examine each button to determine which one best meets their goal. Any uncertainty or doubt about the buttons could cause them to take no action or the wrong action.

You can prevent this by making the priority of each action intuitive. When users can see which button is important to their task, they’re able to take action right away. There are a few UX techniques you can use to make a big difference on the intuitiveness of your call to action buttons.

cta_button-techniques

Order Buttons According to Scanning Pattern

One common mistake made on apps is placing buttons in an order that diverts from the user’s natural scanning pattern. They place their highest priority button first because they want users to notice it first. But users will notice the button regardless of the order as long it carries visual weight.

Button order is not to aid visibility, but to aid efficiency. Placing the high priority button first causes users to reverse their scanning direction from top-down to bottom-up, which breaks their natural flow.

cta_button-scanning

Instead of forcing users to rescan buttons, allow them to get to the high priority action with a scan in a single direction. This allows users to scan every button option in order before they make a decision.

By placing the high priority action at the bottom, it’s in the path of least visual resistance which makes it quick and easy to tap. Also, the bottom location is the easiest for the finger to reach, which further improves efficiency.

Distinguish Buttons from Text with a Shape

Another mistake made on apps is using text only to represent a button. Designers use text buttons to show which actions are lower priority. But this is a poor choice for call to actions because the text doesn’t have the appearance of a button. This can cause users to overlook those actions and only see the primary one.

cta_button-shape

Text buttons also cause confusion by making users wonder if the text is a button or information. This uncertainty can lead them to skip those buttons.

Not only are text buttons confusing, but they’re also smaller tap targets. Placing the text label inside a button shape makes the call to action easier to notice and tap.

Button shapes are a better way to subdue low priority actions than text buttons. They make every option easy to recognize for users to meet their goal in their preferred way.

Add Color to Progressive Actions

The high priority action is easiest to identify—it’s the action that leads directly to the user’s goal. If you’re unsure about the remaining actions, think about which one progresses users toward their goal and which one regresses them.

cta_button-actions

In the example, “checkout” has high priority because it takes users to their goal. But it’s not as clear which action has medium priority—“view cart” or “keep shopping”.

The “view cart” action takes users to view the items they added to their cart, which then leads to checkout. The “keep shopping” action takes users back to the product pages further away from the checkout option.

By examining the actions, it’s clear that “view cart” has a medium priority and “keep shopping” has a low priority. It’s easy to see which action progresses users toward their goal and which one regresses them from it.

Progressive actions are always higher priority than regressive ones. As such, they deserve more visual weight and higher color contrast.

cta_button-blue

Color is an effective way to denote progressive actions because it stands out from the text color and grabs the user’s attention. When the color of the button is the same color as the text, the signal is not as strong. Adding a distinct color to progressive actions signifies the action users should take.

cta_button-winner

If you use the same color for each progressive action, users won’t know which one has higher priority. And using different colors for each one would only confuse users more and cause them to wonder what the different colors mean. Not only that, but it would also give each button the same visual weight.

The trick is to use the same hue but vary the saturation and brightness on the medium priority action so that it looks lighter than the high priority action. Now the weight of the buttons are no longer competing and there’s a clear winner.

To enhance the contrast more, you can invert the display polarity. Use light text on a dark background for the primary button and dark on light for the secondary one. This gives the high priority action a brighter text label and the highest contrast.

Vary the Boldness of Text Labels

Applying the current techniques is enough to distinguish priority, but there’s more you can do. The more intuitive you make each button the less the user has to think.

cta_button-bold

Using the same boldness on each text label puts the same amount of emphasis on them. It’s better to emphasize each text label differently based on priority. Vary the boldness of the text labels so that high priority buttons are the boldest and low priority buttons are the least bold. This way the weight of the text labels even indicate priority when users read them.

The example shows you how the “checkout” label is bolder and brighter than the rest. The “view cart” label is semibold and “keep shopping” label is medium. As a result, the text labels reflect the visual weight of each action. The text indicating “3 items” in the “view cart” label isn’t bolded because it’s supplemental information that doesn’t represent the action taken.

Give the High Priority Action an Icon

The last technique is the cherry on top that will make your buttons accessible to color blind users. Color blind users won’t be able to tell the difference between the weight of buttons. They need something more than color to serve as a visual cue.

cta_button-accessible

Giving the high priority action an icon adds the extra emphasis to set it apart. When users scan, they often fixate on visual elements more than text. The icon ensures that all users will pay more attention to the high priority action than the other ones.

If you removed the color and label, users would still be able to recognize the checkout button. The icon communicates checkout as well as the text does.

Are Your Buttons Intuitive?

Your buttons aren’t intuitive if users are spending a long time on the action screen, or if you’re getting a low click through rate. If this is the case, use these techniques to sharpen the UX of your call to action buttons. You’ll see a big difference between the before and after version.

cta_button-intuitive

How to Optimize Mobile Buttons for High Touch Accuracy

Tap, tap, tap! Are your mobile buttons easy to tap? Or are they making your users feel like they have fat fingers? Designing buttons for mobile is a balancing act.

Tap, tap, tap! Are your mobile buttons easy to tap? Or are they making your users feel like they have fat fingers?

Designing buttons for mobile is a balancing act. With limited screen space, buttons must be small enough to fit, yet big enough for fingers to hit them with accuracy.

Before you blame the user, check the size and spacing of your buttons. Are they optimized for high touch accuracy? If you’re not sure, keep reading because this article reveals the answer. (Note: Measurements below are in CSS pixels at 96 DPI)

Button Size Standard

It’s hard to know if your buttons are optimal without a standard to go by. Luckily, research on button size and spacing has discovered a standard that works for most users, including the elderly.

optimal-button-size

The study found that users had the lowest touch accuracy on buttons that were less than 42 pixels. Buttons that were over 72 pixels also had low accuracy.

The highest accuracy was found with buttons between 42-72 pixels. This means that 42 pixels is the minimum and 72 pixels is the maximum button size that’s most optimal for users.

The most preferred button size was 60 pixels, which is about the middle of the range. The 72 pixel button produced the highest touch accuracy and was preferred by older users.

When using an array of buttons, it’s important to indicate priority. This way users know which actions will lead them to the most desired result. By following the button size standard, you can indicate priority in an effective way. No longer do you have to pick an arbitrary size and hope that it’s user-friendly.

mobile_buttons-size

The example demonstrates the use of the button size standard to indicate priority.

  • High priority button = 72 pixels
  • Medium priority button = 60 pixels
  • Low priority button = 42 pixels

The buttons users use the most frequently are now easier to spot and tap. They’ll be able to tap it with a faster reaction time and higher accuracy. This is especially useful if the user’s attention is divided between different tasks.

Button Spacing Standard

When the buttons were too far apart, users moved to the touch target much slower. And when the buttons were too close together, users had the lowest touch accuracy.

optimal-button-spacing

The study concluded that a range of 12 to 48 pixels is the optimal button spacing. This wide range is useful because you can apply it to different button sizes. When you divide the wide range into smaller ranges, you get a button spacing standard that corresponds to the standard button sizes.

  • 12-24 pixels for a large button
  • 24-36 pixels for a medium button
  • 36-48 pixels for a small button

mobile_buttons-spacing

A larger button allows users to hit their target accurately even when their finger is slightly off target. But if they’re off target with a smaller button, they’ll miss and hit an adjacent button. This is why smaller buttons need more spacing than larger buttons.

The example shows how following the button spacing standard improves touch accuracy. The user’s finger can be slight off target and they’ll still be able to hit the button no matter what size it is.

Implications for Text Buttons

Can these standards apply to text buttons? These standards can apply to the height of text buttons, but the width will vary.

icon-text-buttons

For example, a text button with the height of 60 pixels will have a larger width than a 60 pixel icon button, but it’s just as easy to tap. In fact, it’s easier to tap because the larger width requires less precision.

The button height is what matters more for accuracy. You can see that the touch accuracy of text buttons remain consistent with icon buttons.

The button spacing standard doesn’t apply to text buttons due to the larger widths. But a spacing of at least 12 pixels is good to have for visual separation.

Sizing Up Your Buttons

Do your buttons have an optimal size and spacing? Following the button size and spacing standards will guarantee that your mobile interface has high touch accuracy.

Going by your feelings to decide on proper size and spacing leaves room for uncertainty. It’s better to establish an optimal standard you can rely on. This is how design systems are formed and why many companies use them.

Think about what standards you and your company follow. If you don’t have any, establish some and you’ll be able to scale a great user experience across platforms.

Solid Vs. Outline Icons: Which Are Faster to Recognize?

There always comes a time when building a mobile app where you have to decide whether to use solid or outline icons. Which style is better for user experience?

There always comes a time when building a mobile app where you have to decide whether to use solid or outline icons. Which style is better for user experience?

solid-vs-outline

Some think the difference between the two is just a matter of preference, but research shows there’s more to it than that. One style actually has a faster recognition rate than the other.

Knowing when to use solid or outline icons on your mobile app will make it easy for users to find what they’re looking for. They’ll be able to recognize your icons faster and select the right option for them.

A research study, “Filled-in vs. Outline Icons: The Impact of Icon Style on Usability,” discovered that icon style affects task performance. Task performance was measured by the speed and accuracy of recognizing and selecting icons.

Solid icons were generally faster to recognize than outline icons, but with a few exceptions. And some icons showed no difference in task time. The reason has to do with characteristic cues.

Characteristic Cues

Characteristic cues are what users use to identify icons. If characteristic cues are absent or hard to notice, the icon becomes unidentifiable.

icon-characteristic-cues

For example, the tail of a comment bubble icon is its characteristic cue. Without it, it’s simply a circle. The keyhole on a lock icon is its characteristic cue. Without it, it’s easy to mistake for a different object. The teeth on a cog icon are a characteristic cue. Without it, it looks like a doughnut.

The lock icon used in the study had no keyhole and was the most misidentified icon with over a quarter of all failures. The keyhole is a necessary characteristic cue because without it the icon looks like a bag, purse, or even a pot.

These characteristic cues are what users rely on for icon recognition. When using icons make sure it includes all the characteristic cues users need to identify them. If an icon could look like a different object, consider adding an extra characteristic cue to it.

When Outline Icons Are Faster

In addition to including characteristic cues, the cues must be salient or easy to notice. Sometimes the characteristic cues on certain icons are more salient in an outline style than solid style.

outline-icons-faster

The study found three icons that were faster to recognize in outline style–comment bubble, trash can, and key. These icons have subtle characteristic cues that appear on the outer edges of the shape. Because of this, an outline style makes those cues easier to notice.

The comment bubble tail is easy to miss as a solid, but more apparent as outlines. The trash can lid is hard to notice in solid style, but more visible in an outline one. The key teeth are subtle, but the jagged edges are more distinct in an outline style.

When an icon’s characteristics cues are subtle and appear on the edges of a shape, use an outline style. This makes the cues more salient which results in faster recognition.

icon-choices

When choosing icons, it’s best to stick to a consistent style. Instead of mixing solid and outline styles, try to choose a set of icons that have salient characteristic cues with sharper angles that point outward.

For example, if you compare the comment, trash can, and key icon to ones with more salient cues you can see the difference. The more salient cues jut out and are easier to notice.

When Solid Icons Are Faster

Most icons represent physical objects in the real world. These objects are in a solid form and appear as silhouettes. Viewing icons as outlines is not a realistic representation of what most are used to seeing. This is why solid icons are faster to recognize.

solid-icons-faster

Despite this, users are still able to recognize outline icons. But it’ll take them longer to do so if the icon’s shape outlines are too close together.

The study found that the thumb, scissors, phone, and tools icon were faster to recognize in a solid style. This is because the outline style of these icons all have a narrow inner spacing on their cues that creates visual noise.

icon-recognition-solid

It’s best to use solid icons for objects that have a narrow inner spacing. This displays the silhouette form most users are familiar with.

When Style Makes No Difference

The study found icons that were easy to recognize in either style. For example, the star, shopping cart, and flag icon all had similar recognition times.

This means the outline style for these icons didn’t slow users down. The reason is due to the wide inner spacing they have that reduces visual noise. The more narrow the inner spacing is, the more noise it creates, which interferes with recognition.

icon-style-no-difference

Icon Style for Button Selection

It’s common practice to use a solid icon to highlight the active button in a tab bar, while the other buttons remain in outline form. But this design practice is backward and should be the other way around.

icon-selection

Users need more recognition speed on options they haven’t discovered yet, not on the one they have already selected it. A solid icon for the active button isn’t necessary. It’s more important for the inactive buttons to get solid icons.

Use an outline icon to highlight the active button, not a solid icon. It offers a clearer change in style and color that reinforces the selected button.

Iconoclastic Guidelines

If task speed is important to your users, the icon recognition rate must be considered. And if you want a faster recognition rate, solid style icons are better. But there’s an exception to this rule that you should keep in mind. Knowing the exception to the rule allows you to make use of outline styles when the situation fits.

In summary, here’s what you should keep in mind when using icon styles:

  • Icons consist of characteristic cues that need to be identifiable and salient for recognition
  • Solid icons are faster to recognize unless their cues are subtle and not salient enough
  • Outline icons are recognizable when they have wide inner spacing as opposed to narrow
  • Use outline icons if the solid version has subtle characteristic cues on the edges
  • Use solid icons if the outline version creates narrow inner spacing

6 marketing trends set to take off in 2019

No longer are marketers focused solely on moving a customer through the funnel. Now, marketers are creating experiences that promote…Read blog postabout:6 marketing trends set to take off in 2019
The post 6 marketing trends set to take off in 2019 ap…

No longer are marketers focused solely on moving a customer through the funnel. Now, marketers are creating experiences that promote...Read blog postabout:6 marketing trends set to take off in 2019

The post 6 marketing trends set to take off in 2019 appeared first on WiderFunnel Conversion Optimization.

Mobile Video Optimization And Its Impact On Conversions

Mobile video optimization isn’t only about making videos play smoothly on smartphones of different screen sizes. Popular video hosting sites can help you to that end. Vimeo and Wistia even offer responsive embedded code so that you can upload videos on your landing pages or blogs without worrying about the container size. Even if your […]

The post Mobile Video Optimization And Its Impact On Conversions appeared first on Blog.

Mobile video optimization isn’t only about making videos play smoothly on smartphones of different screen sizes. Popular video hosting sites can help you to that end.

Vimeo and Wistia even offer responsive embedded code so that you can upload videos on your landing pages or blogs without worrying about the container size.

Even if your website is responsive, embedded videos with fixed width can give your visitors an unpleasant experience. And studies say that half of your users are less likely to engage with you if you give them a bad mobile experience. So, the next time you are planning to embed a video, go for responsive instead of “fixed width.”

Optimizing videos for mobile can be tricky. This article will not just help you fit your videos within the screen of a mobile device, but also help you improve these videos to increase conversions.

We have more video optimization hacks laid out for you below. Dig in.

And note that making videos playable on mobile is not your end goal. What matters more is conversion. Why are we even paying so much attention to mobile?

Mobile Video Optimization: Reasons

The reason we want you to be serious about mobile video optimization is because of these 2 stats:

1. Mobiles give you a wider reach compared to desktops. A study indicates that there are more mobile users now than desktop users.

Source

2. By 2021, 75% of all mobile traffic will come from video content.

Per these 2 points, you get the idea that mobile browsing is on the rise and people like to watch videos, more on the smartphone than on their desktop. Ergo thinking out a mobile-first strategy is crucial for your video marketing success.

After all, it’s much easier to watch a video on your phone. And the cherry? 92% of mobile video consumers share videos with others. That means easy marketing for you—higher views, engagement, and click-throughs!

Let us now move to how videos can be optimized to drive conversions on mobile devices:

Optimization Tip 1: A/B Test Vertical Video Ads

Most videos are designed to play in the landscape orientation. But let’s face it—we hold our phones vertically 94% of the time. So, it can be a hassle to flip your phone just to watch a video and then flip it back. Sounds like a waste of time, right? Many marketers thought so and are now A/B testing their ads with vertical videos.

Source

Vertical videos are popping up as in-app ads too. So far, we have heard a lot of success stories about use of vertical videos.

Chartboost adopted the vertical video ad format, and reported that their advertisers saw up to 20% lift in install per thousand impressions (IPM). That’s great, right?

Even a study from Facebook saw people preferring vertical video content:
– 79% of the novice vertical video consumers were in favor of the vertical video format.
– 65% of respondents applauded brands that are using vertical video for their advertising as “more innovative.”

So, prepare to contribute to this brave new world of vertical video content.

Optimization Tip 2: Use Native Video Uploads to Get More Views

Natively uploaded videos play automatically while you need to click to play videos that have been linked with other platforms. Facebook reports imply that you can achieve as much as 1055.41% higher average share rate with native videos compared to YouTube third-party video links.

So, don’t be a stranger to this native video tactic.

In one of the expert interviews, Matthew Vazquez also asserted the importance of uploading your video separately on YouTube, Vimeo, and Facebook each, and to use modified descriptions with strategic keyword density for all 3 uploads. Matthew says that “this is powerful when done right because now you’ve 3X your SEO potential.”

Source

Optimization Tip 3: Ensure That Your Landing Page Video Is Mobile-Compatible

Conversion prophets have revealed that adding an explainer video on your landing page can boost your conversion rate by
up to 23%.

Source

One of the best landing pages using an explainer video as the conversion bait was that of Dropbox. They had kept their landing page simple with one engaging video and a download button. Visitors watched the video, saw the benefit of using Dropbox, and proceeded to download it. It was a simple funnel, and the conversion rate was high. Reports say that Dropbox earned a million users and bagged a revenue of $48 million.

There are a few problems when it comes to adding a video to your landing page:

– To begin with, ensure that your landing page video is responsive. As we shared in the beginning, you can use Wistia or Vimeo’s responsive embedded code to get this done. These video-hosting platforms offer incredible analytics to help you monitor your video performance. You will get cool insights, such as at which point your viewers are dropping off, and will be able to use these to optimize the playback accordingly.
– Use a thumbnail that prompts visitors to play the video. Never put your landing page video on autoplay. That’s a no-no.
– Keep your video short; 60 to 90 seconds is the best. (Stats say 59% of viewers will watch your video to the end if it’s under a minute.) The idea is to ensure that your video isn’t too heavy and that it shouldn’t lag.
– Position the Call to Action (CTA) button next to the video. Also, ensure that the narrator ends the video with a verbal CTA message, or use text to highlight CTA on the end screen. Try doing both as well.
– Try user testing to see how your target audience interact with the video. Check if they click the video right away or if they are distracted by some other elements on your landing page.

Select these probable issues before spending on PPC campaigns and ads. After that’s done, you will have a landing page with a video that can get you the ROI.

Optimization Tip 4: Ensure that your video has a call to action at the end

Remember those “Please subscribe to our channel.” requests that video makers leave with at the end of the video? These work.

If you watch a video till the end, that means you already like it. So when the creator politely asks you to subscribe, there’s a good chance you would do it.

Call to actions are, therefore, important.

These instruct your users on the next course of action—what they should do after watching the video. So, don’t just put up your CTA message or link in the video description. Say it. Have the narrator of the video conclude your video with the call to action message.

You can also use the actor in the video to point to the CTA button at the end. (If it’s an animation video, use a hand illustration or directional cues.) You will notice that many YouTube video creators use this tactic to request the viewers to subscribe.

There’s another CTA hack. If you are using YouTube, it is its annotation and card features. You can also use these to pop up your CTA link on the screen itself. For mobile users, that makes navigation easier.

Source

Optimization Tip 5: Use typography or subtitles to get a reaction

Your videos should make sense even when muted.

With platforms like Facebook and Twitter having the muted autoplay feature, you are bound to have viewers who will look at your video for a few seconds to determine if it’s worth watching. This means that you can’t afford to have videos that rely only on audio and narration.

Your video should make sense even without the audio or at least provide a context of what’s being presented. Mute your video and see if the idea is being conveyed even without the audio, or if the visual is powerful enough to make the viewers turn the volume up or put on their earphones (if they are at a public place).

Best way—try adding captions or subtitles or use typography animation. Either will help you grab viewer attention, engage them even with a muted video, and get a reaction.

Conclusion

Making your video play on mobile devices is not your end goal. As a marketer and business owner, what matters more is conversion. By using the above optimization hacks, you can get your videos to perform better on mobile.

Just remember the distinct phases of your buyer’s journey. A video designed for customers in the awareness phase may not be appealing to your audience in the evaluation phase or those hesitating at that purchase point.

So, create several types of videos to power your customer’s decision journey.

Conduct a survey acquiring information about your demographics if you want to be painfully precise; but for the most part, develop your content such that it is not inhibited by a small screen. Your videos should have details clearly presented so that these may not get missed out if viewed on a small screen.

This is just the tip of the iceberg. If you have some cool video optimization tips, please share your story in the comments below.

The post Mobile Video Optimization And Its Impact On Conversions appeared first on Blog.