web-dev-qa-db-ja.com

クレジットカードフィールドのプレースホルダーテキスト

Stripe 'Elements'のデフォルトのクレジットカードフィールドのプレースホルダーテキストについては、多くの議論がありました。

以下に示すように、デフォルトは '4242 4242 4242 4242'です stripe elements 4242

それを別のものに変更することができないと不平を言う少数の声のユーザーがいます。 Stripeは、「まあ、それを何に変更しますか?」に沿ってユーザーからのフィードバックを求めていました。

  • 「****-****-****-****」
  • 「0000 0000 0000 0000」
  • 「クレジットカード番号はこちら」
  • 「好きなように設定しましょう!」

usersが不満を述べているため、デフォルトのプレースホルダーテキストを変更できないため、最新のアクティビティはユーザーが支払いプロバイダーを変更すると脅迫しています。

個人的には、どちらの方法でもネズミを与えることはできませんでしたが、顧客が不満を言っているのなら、それを変更してほしいと思うかもしれません。

UX.SE-UXの観点から、Stripeはこの状況で何をすべきでしょうか?

9
Jake Harry

更新:Stripeはユーザーのフィードバックを聞いて、次の変更をロールアウトしました:

多くの調査、より詳細なテスト、およびチーム、エンドカスタマー、ユーザー(一部のユーザーを含む)との多くの議論の後、Elementsのプレースホルダーにいくつかの変更を加えました。

(1)card要素は、プレースホルダーとして「カード番号」と「Zip」(およびローカライズされた同等物)を使用するようになりました。上記のとおり、この変更は、「カード番号」の方が「4242 4242 4242 4242」よりも支払いが成功する可能性が高いことがテストで判明した後で行うことにしました。

(2)cardNumbercardCvccardExpiryおよびpostalCode要素は、カスタムを設定できるplaceholderオプションを受け入れるようになりました(または空)以前に報告されたプレースホルダー。デフォルトのオプションがニーズに合わない場合は、希望どおりのフォームを柔軟に作成できるようにしたいと考えています。

これを押し進めて、あなたの忍耐力、そしてあなたの提案に感謝します。

新しいプレースホルダー: new placeholder

1
Jake Harry

プレースホルダーがひどく間違っている

tl; dr
プレースホルダーが何も明確にしていない場合、そこにあるべきではありません。

これは、プレースホルダテキストの悪影響の良い例です かなり前にNN/gによって指摘されました

概要:フォームフィールド内のプレースホルダーテキストは、フィールドにどのような情報が含まれているかを覚えたり、エラーをチェックして修正したりするのを難しくします。また、視覚および認知障害のあるユーザーに追加の負担がかかります。

この場合、Stripeは偽の番号を含めて情報を追加していません。ユーザーは、クレジットカード番号がどのように見えるかを知っています。それが行う唯一のことは、ユーザーが自分のものではない数を見たときの混乱の原因となります。

クレジットカードアイコンをそのままにし、プレースホルダーテキストをすべてドロップします。私はこのようなものをテストすることから始めます...

Stripe controls without the placeholder noise

12
plainclothes

彼らがこれをしたとは信じられません。まず第一に、それは明確なバイアスを示しています。 4で始まるカードはVISAに属しているので、他のすべてのCCカード会社が不満を持っていると想像できます。

もう1つは、4桁の4つのグループで、16桁の数字に相当します。それはいいですね....私がAMEXの所有者であるからではなかった場合。 AMEXカードはNNNN NNNNNN NNNNN(4桁+ 6桁+ 5桁= 15桁の数字)という形式を使用します。ところで、念のため、すべてのAMEXは3から始まります。

最後に...同じフィールドのCC番号と有効期限...うわー...混乱するユーザーについて話します。

私がすること

このサンプルが単なるテストドライブなのか、何なのかは本当にわかりません。実際に彼らがまったく考えていないように見えません。上記の重大な間違いを確認するのに、文字通り30秒かかりました。これは単なるテストであると想定してください。

とにかく、まず最初に:

  • Differentiate fields:同じフィールドの異なるデータがユーザーを混乱させないと誰もが私に納得させる方法はありません。以前にこれをテストしたことがあるからです!したがって、両方のフィールドを表示し、明確にラベルを付けます。

  • 偏ったプレースホルダーとヒントを削除:そのプレースホルダーを取り、 "ここにクレジットカード番号を入力してください"のようなテキストを使用します。接吻。いわばアプローチ。ブランド間で違いがあるため、最も重要な部分は数値形式を使用しないでくださいです。

  • ユーザーに制御を与える:調査でユーザーによる苦情が表示され、プレースホルダーテキストを制御したい場合、システムがその機能を利用できる必要があることは明らかですユーザー。つまり、ユーザーが変更しない限り、ニュートラルなプレースホルダーはデフォルトで配置されているはずです。結局、Stripeには多くのユーザーが持っていない知識とリソースがあります。

免責事項: UXと同様に、推奨事項は実際のデータ、研究、および最良の原則に基づいている必要があります。この例は明らかに最良の原則を無視していますが、一方で私は何も研究していません。Stripeだけがそれを持っています。したがって、これを塩ひとつまみにしてください。

5
Devin