支払い取引における変形設計のメリットとデメリットは何ですか？
アプリケーションでのチェックアウトまたは支払いプロセスは重要であり、経験の浅いユーザーがフォームに入力したことを正しく感じるようにスムーズに実行する必要があります。ユーザーがクレジットカードを受け取ってフォームを読み込もうとする例や、何がどこに行くのか、数多くの例を見てきました。経験豊富なユーザーはこれを何度も行っており、クレジットカード番号、有効な日付、名前、CVCコードを見つけているため、この問題は発生しません。しかし、経験の浅いユーザーを助けるために、その問題を克服し、何がどこにあるのかを視覚的に理解させるために、変形GUI設計を実装することができました。経験豊富なユーザーは、現実の世界に近すぎると思われる支払いプロセスを信頼できない可能性があります。これは、支払い取引におけるスキューモーフィックデザインの長所と短所をまとめたものですか。
通常のお支払いフォームは次のようになります。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
変形形態に相当する形式は次のようになります。
興味深いデザイン、これまで見たことがない。クレジットカードフォームは非常に一般的であるため、ほとんどの人はほとんど問題を抱えていないと思いますが、このようなフォームのための余分なスペースがある場合、なぜこれを使用すべきでないのかわかりません。
ただし、4つに分割されたグループではなく、カード番号のテキスト入力フィールドを1つにすることにします。セグメント化されたフィールドは見た目は簡単かもしれませんが、入力時または修正時に複雑さが増します（ユーザーは、手動で次の入力フィールドに進むか、間違いがあった場合の自動動作と戦う必要があります）。 JavaScriptとCSSを使用すると、単一のテキスト入力フィールドに簡単にスタイルを設定して、4つのブロックに分割されたコンテンツを表示できます。
私は、長所は短所（もしあれば）を大幅に上回っていると思います。クレジットカードの使用は、視覚的にもユーザーフレンドリーでもあります。デザインコミュニティで多くの注目を集めているようです。dribbble.comであなたが話していることのデザインを示す次のリンクをチェックしてください。
ほとんどのカードのレイアウトが一貫している場合（一貫していると思いますが、まだ調査を行っていません）、これはプロセスに慣れていないユーザーにとって特に有用であることがわかります。適切に設計および実装されていれば、サイトのセキュリティに対するユーザーの認識に悪影響を及ぼすことはないと思います。
潜在的な欠点の1つは、「現実の世界」のレイアウトは、配置や近接性がないため、スキャンが簡単ではないことです。
実用的な場合は、カードレイアウトのイラスト付きの標準フォームを使用して、それを補完します。これは、専門家と初心者の両方のユーザーに適した幸せなメディアのようです。
これは面白いコンセプトだと思います。視覚的なデザイン、ユーザーエクスペリエンスなどではなく、実際的な観点から見ると、すべてのカードが上記の形式に準拠しているわけではないことに注意してください。 Amexの1つは通常の4 x 4ロングナンバー形式ではなく、そのCVCナンバーは4桁でカードの前面にあります。したがって、詳細を入力するための適切なデザインを表示する前に、カードタイプの入力を求める必要があるでしょう。
また、ほとんどのカードの前面には、開始日、発行番号などの詳細情報が記載されています。デザインのレイアウトがユーザーのカードのレイアウトと一致しているが、フィールドが異なる場合、これにより詳細が間違っている可能性があります追加する、例えば有効期限日ではなく開始日。これは、デザインの視覚的なレイアウトに過度に依存する経験の浅いユーザーの場合に役立ちます。
新しいデザインのメリットを感じないユーザーのために、より伝統的なWebレイアウトへのリンクを用意することをお勧めします。 （請求先住所などのその他の詳細は、実際のカードにはないため、標準形式で入力する必要があります。）
最後に指摘すべきことは、私は英国を拠点としているため、Amexやその他のカードの詳細について上記で述べたことは、他の場所では当てはまらない可能性があるということです。これは、国際的およびローカライズされた考慮事項についての問題を提起します...
とにかく、新しいことに挑戦する幸運と公平なプレイ！