web-dev-qa-db-ja.com

ユーザーに迷惑をかけずに電話番号ビューを測定する方法は？

私は、予約フォームを開いたりレビューを投稿したりするなど、ユーザーの操作を測定する顧客ページがあるWebサイトで作業しています。

測定したい相互作用の1つは、ユーザーが電話番号を表示するときです。現在、次のようにしています。

電話 123-XXX XXX
番号を表示

番号の表示は、クリック時に完全な番号を表示し、ユーザーインタラクションを追跡できるボタンリンクです。

最近、電話番号のXに関するフィードバックがありました。私たちのユーザーと顧客はそれを混乱させます。

顧客情報は1つのページに表示され、タブはオプションではありません。

代替案の1つは、「電話番号の表示ボタン」だけを使用して、XXXバージョンを表示しないことです。

他に何か提案はありますか？

また、数値を直接表示するための適切な引数も探しています（もちろん、これはユーザーにとって最適なためです）。

website-designmeasuringquantitative-analysisphone-numbers
18
Martin Larsson

通常、UXと管理情報の間にはある程度のトレードオフがあります。私のやや偏った意見では、UXが優先されるべきです。

自分に質問をしてみてください：「私はむしろ幸せな顧客が少ないのですが、彼らについてもっと知っていますか、それとも幸せな顧客が多くて彼らについてあまり知りませんか？ "

それがあなたがしていることの本質であり、彼らが電話番号を見たときにそれを知ることに驚くべき利益がない限り、私は本当にそれをやめます。

25
JohnGB

他の回答はそれを行うための「正しい」方法をカバーしていたので、ここではスラントデザインの回答です。

must電話番号を非表示にする場合は、電話番号を表示するだけの懲罰的なタスクにするのではなく、意図しない追加の手順のように見せてください。

電話番号を難読化し、ユーザーが電話番号をクリックしたときにのみそれを明らかにすることは、人々の前にぶら下がる情報のようです。また、番号を取得するために何かを与える必要があるかどうか疑問に思うかもしれません。たとえば、一部のサイトでは、ログインするかサインアップするまで実際の詳細を表示できません。

代わりに、あなたが言うように「番号を表示」というリンク、またはユーザーが実行しようとしているアクションまたはユーザーが望むデータ（「連絡先情報」というリンク）でラベル付けされたものを用意してください。これは良いGUIデザインではありません-余分なクリックです-しかし、少なくともそれを露骨に隠しているわけではありません。

または、電話番号がかろうじて収まらないようにデザインを絞り、矢印または三角形などを配置して、「より多くの」コントロールのように見えるようにします。

23
Alex Feinman

個人的には、電話番号を表示し、さまざまな分析方法を使用して電話番号とのやり取りを追跡するために最善を尽くしたいと思います。

  1. ユーザーが電話番号を含む親要素にカーソルを合わせると、ページの読み込みごとに1回起動する親要素にホバーイベントを追加します。 Google Analtyics などのカスタムイベントを分析ソフトウェアに組み込む必要があります。このソートは、現在見ているページの一部にマウスを移動する人々の意図をある程度示します。

  2. 次のようなリンクにします

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

    クリック可能であるため、そのイベントも追跡できます（ただし、1で説明したホバーイベントの上にこのイベントを追跡する必要はありません）。幸い、ほとんどの分析ソフトウェアはリンククリックを自然に取得します。HREFは一意であるため、優れたデータを提供します。ユーザーがリンクをクリックまたはタップして、それをサポートするデバイスで電話をかけることができるため、これは素晴らしいですが、通常のデスクトップブラウザーがクリック後に何もしない場合、ユーザーを混乱させる可能性があります。それは意図を測定しますが、それらのいくつかを一種の「どこにもないボタン」として挫折させるかもしれません。

電話番号の「ビュー」を追跡するだけでなく、Webに個別の電話番号を設定して、実際の呼び出しを追跡することもできます。法案が来たときに毎月番号。あなたはおそらくすでにそれを考慮したでしょう

3
Michael

Xsは混乱を引き起こしている疑いがあるため、削除してください。このような：

電話：（番号を表示）をクリックし、(show number)をクリック可能にして、クリックすると実際の番号に置き換えられるようにします。 Xsはなく、非常に直感的で、以前と同じワークフローを使用できます。

2
sharptooth

ビジネスのニーズとUXのニーズの間には常に緊張があり、UXは常に勝つべきだとは思いません。

誰かが電話番号にアクセスした回数を測定するビジネス上の必要がある場合、単にそれを表示してページビューを測定するだけでは機能しません。

Xは混乱を招く部分のようですが、電話番号を「電話番号を表示するリンク」で完全に置き換えることができます。

この場合、電話をかけるのに必要な労力はリンクをクリックするよりもはるかに大きいため、トレードオフはわずかです。

1
Jeremy T

個人的には、Webページからそのような情報を読む必要があるときに、マウスカーソルを興味のある情報の近くに移動することがよくあります。ページ内、またはより多くのユーザーがこれを実行します。より多くのユーザーがそれを行う場合、それはあなたが求めている情報を邪魔にならない方法で取得する方法であるかもしれません。

1
André

これが適切なネイティブJavaScriptソリューションです。

クリック可能な電話番号リンクを作成します。

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

最後の4文字を非表示にし、クリックで表示する関数を追加します。さらに、ユーザーに次に何をすべきかを説明するタイムアウトイベントがあります。

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();
    }
});

次に、AJAX呼び出しを使用して、コンテンツ管理システムまたはデータベース構造に応じて、電話番号のクリックを保存できます。

その理由と機能については、こちらをお読みください JavaScriptで電話番号ビューを追跡および測定する方法

0
Ciprian