1ページのチェックアウトフォームで入力フィールドの長さを変える必要がありますか？
現在、1ページのチェックアウトフォームをデザインしています。入力フィールドの長さについてフィードバックをいただければ幸いです。
「請求」と「配送」セクションでは、フィールドの長さをずらして、入力フィールドのサイズを予想される入力のサイズに対して相対的に保つようにしています。
ただし、「支払い」セクションでは、すべての入力フィールドが同じ長さです。 BillingセクションとShippingセクションで入力フィールドの長さがずれているため、フォームの一貫性が損なわれると思いますか？支払いセクションの入力の長さを変えて、他のセクションのように見えるようにする必要がありますか？
Luke Wroblewskiが「Webフォームデザイン」で指摘しているように、入力フィールドのサイズは、フォームフィールドに affordance を提供するのに役立ちます。請求セクションと配送セクションのフィールド長を調整した方法は、ユーザーが入力することが予想される内容をユーザーに提供するため、優れています。一貫性があり、支払いの詳細セクションの入力フィールドにも、ユーザーが適切なデータを入力するために必要なスペースと厳密に一致するフィールド長を設定することをお勧めします。
余談ですが、「 The Ultimate UX Design of：the Credit Card Payment Form 」という記事は、支払いの詳細セクションで作業するときに役立ちます。プロジェクトで頑張ってください！
一貫性が高ければ高いほどよいでしょう。私の意見では、請求セクションにあるようにフィールドを正当化することは、よりクリーンに感じられます。いくつかの簡単な勝利は、他の都市と一致するように都市と国のフィールド幅を拡張し、州と郵便番号を同じ行に置くことです。
おまけ：以前の人生では、3つのセクションを左から右にフロートする1ページのチェックアウトオプションに取り組みました。それは楽しかったですが、振り返ってみると、ユーザーが持っているバージョンのフローの方が簡単かもしれません。 3つのセクションすべてが左から右に浮いているのを見ると、圧倒される可能性があります。
幸運を！
見た目は、入力要素の幅が等しい場合は見栄えが良くなりますが、一方で、必要なだけ幅がある入力要素は、前述のように、その目的を示します。
余談ですが、[キャンセル]ボタンと[購入]ボタンを並べて配置します（つまり、右側に[購入]を右に配置します）。これにより、ユーザーは両方を確認でき、兄弟であるという事実（つまり、同じフォームにさまざまな方法で影響します）。