How to measure phone number views without annoying the user?

Question

I'm working on a website where we have customer pages on which we measure user interactions such as opening a booking form or posting a review.

One of the interactions we want to measure is when the users view phone numbers. Currently we do it like this:

Phone 123 - XXX XXX
show number

Show number is a button-link which shows the full number on click and allows us to track the user interaction.

We've recently had some feedback regarding the Xs in the phone number. Our users and customers find it confusing.

The customer information is displayed on one single page and tabs are not an option.

One alternative would be to only have the "show phone number button" without displaying the XXX-version of it.

Any other suggestions?

I'm also looking for good arguments to show the number directly (since, of course, that's best for the user).

Answer 1

There is usually some tradeoff between UX and administrative information. In my somewhat biased opinion UX should be the priority.

Ask yourself the question: "Would I rather have fewer less happy customers, but know more about them, or more happier customers and know less about them?"

That is the essence of what you're doing, and unless there is some amazing benefit to knowing when they see the phone numbers, I would really stop doing that.

Answer 2

Here's a slanty-design answer, since other answers have covered "right" ways to do it.

If you must hide the phone number, instead of making it a purely punitive task to show it, make it just seem like an unintended extra step.

Obfuscating the phone number and only revealing it when the user clicks on it is like dangling information in front of people. They may also wonder if they need to give you something to get the number, e.g., some sites don't let you see the real details until you log in or sign up or whatever.

Instead, just have a link that says "show number" as you say, or something that is labeled with the action the user is trying to perform or the data they want (a link that says "Contact info"). This is not good GUI design--it's an extra click--but at least it isn't blatantly hiding stuff.

Or squeeze your design so the phone number just barely doesn't fit, and put a disclosure-arrow or triangle or something so it just looks like a "more" control.

Answer 3

Personally, I would prefer to show the phone number and try my best to track interactions with it via various analytics methods:

1. Add a hover event on the parent element that fires off once per page load when the user hovers on the parent element containing the phone number. This requires a custom event to be built in your analytics software, such as Google Analtyics. This sort of of gives you some measure of intent for those folks that move their mouse to the part of the page that they're currently looking at.

2. Make it a link, such as

   <a href="tel:18005554444">1-800-555-4444</a>
   

   then it's clickable, so you can track that event as well (but you wouldn't want to track this one on top of the hover event mentioned in 1). Fortunately, most analytics software picks up on link clicks naturally and since HREF is unique, it should provide good data. This is nice because user's can actually click or tap the link to place the call on a device that supports it, but it could be confusing for users when their normal desktop browser doesn't do anything after clicking. It would measure intent, but may frustrate some of them as a sort of "button to nowhere".

Rather than just tracking "views" of the phone number, one alternative is to have a separate phone number for the web and just track the actual calls to that number each month when the bill comes. You've probably already considered that, though

Answer 4

Since the Xs are suspected of causing confusion - get rid of them. Like this:

Phone: (show number) and make (show number) clickable so that when it is clicked it is replaced with an actual number. No Xs and quite intuitive and you've got the same workflow as previously.

Answer 5

There's always a tension between business needs and UX needs, and I disagree that UX should always win.

If you have a business necessity to measure how many times someone accesses a phone number, then simply displaying it and measuring page views just doesn't work.

It appears to me that the X's are the confusing part, and you could just replace the phone number altogether with the "show phone number link".

In this case, the trade-off is minor because the amount of effort required in making a phone call is so much greater than clicking a link.

Answer 6

Personally, I find that quite often when I need to read such information from a webpage, I move my mouse cursor close to the piece of information I'm interested in. You could try to see if is just my weird way of not loosing myself in the page, or that more users do this. If more users do it, it might be a way to get the information you're after in a non-intrusive way.

Answer 7

Here's a proper native JavaScript solution:

Create a clickable phone number link:

<a href="tel:09483473843" class="reveal-number" data-number="094 834 73 843">094 834 73 843</a>

Add a function to hide the last 4 characters and show them on click. Additionally, there’s a timeout event to explain the user what to do next.

function reveal_number_init() {
    let phoneNumbers = document.getElementsByClassName('reveal-number');

    let replaceLastNChars = function(str, replace, num) {
        return str.slice(0, -num) + Array(num + 1).join(replace);
    };

    for (i = 0; i < phoneNumbers.length; i++) {
        var element = phoneNumbers[i];

        element.href = 'javascript:void(0);';
        element.innerText = replaceLastNChars(element.innerText, '*', 4);

        element.addEventListener('click', function (event) {
            element.innerText = element.dataset.number;

            setTimeout(function () {
                element.href = 'tel:' + element.dataset.number;
                element.innerHTML += '<br><small class="phone-reveal-help">Click again to call.</small>';
            }, 1000);
        });
    }
}

// Initialise the function:
document.addEventListener('DOMContentLoaded', function () {
    if (document.querySelector('.reveal-number')) {
        reveal_number_init();
    }
});

Next, you can use an AJAX call to store the phone number clicks, depending on your content management system or your database structure.

Read about its reasoning and functionality here - How to track and measure phone number views with JavaScript