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).

  • Have you considered hover?
    – JRaymond
    Nov 29, 2012 at 16:42
  • 8
    Are you really measuring how many people view the phone number? seems to me you are actually measuring how many users are stubborn enough to tolerate that annoying interaction.
    – DA01
    Nov 29, 2012 at 21:37
  • @JRaymond - hover is not a good solution. For one, you expect users to explore the page to find hidden content. This is novelty to younger users (I think up to around 9 years old), but an annoyance to users in general. Nov 30, 2012 at 0:52
  • @StackOverflowNewbie no more so than clicking on them - and there is more immediacy to a hover than there is to a click; as well as a strong action association. Obviously the better UI is to just show them the number; but if his requirements insist on it...
    – JRaymond
    Nov 30, 2012 at 0:55
  • 1
    Hover doesn't work well on mobile, which lets out a large chunk of your audience. Nov 30, 2012 at 18:44

7 Answers 7


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.

  • 3
    Really good question to ask yourself. I'll start doing that, thanks a lot! Nov 29, 2012 at 14:22
  • 1
    @John: I'm not sure it's that simple. The amount of effort to click the link is miniscule, and this isn't part of a pathway so any dropped users don't compound. I don't know the specific business case here, but maybe there's real value in being able to tell his users how many times a visitor requested his phone number.
    – Jeremy T
    Nov 29, 2012 at 15:54
  • 3
    @JeremyTunnell John is simply advocating for a conscious acknowledgement of the trade-offs involved in this type of decision. Without consistently asking these questions of yourself you run a high risk of eroding quality in exchange for a succession of minor administrative gains. John also admits that "amazing benefit" is conceivable.
    – janoside
    Nov 29, 2012 at 23:27
  • @JeremyTunnell - the question is not whether the amount of effort to click the link is miniscule or not. It's whether the effort is necessary or not. Nov 30, 2012 at 0:54

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.

  • 8
    +1 for a "fake it to make it" approach, I really like the disclosure triangle idea. Nov 29, 2012 at 18:26
  • If this is for a phone, could you write some javascript that would detect the click then ask the phone to tel://phone-number?
    – boatcoder
    Nov 30, 2012 at 18:40
  • 1
    Ironic: Now that Google Plus and other sites use this design to gather more analytics, as a user I hate it. Ah well. May 17, 2013 at 17:00

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


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.


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.


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.


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')) {

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.