すべてのクレジットカードフィールドを1つの水平線上に配置することは悪い考えですか？
チェックアウトフォームが少し長くて気に入らないので、クレジットカードフィールドを1行に配置しました。下の画像のように、すべてのフィールドを1行に水平に配置するのは悪い考えですか？
@ColinSharpeは正しいです。垂直に配置する方がはるかに簡単です。とはいえ、すべてを見るために下にスクロールする必要がないという意味では、恐ろしいデザインではありません。それは多くのユーザーにとってプラスです。ユーザーがブラウザの幅を小さくした場合や、幅が十分でないデバイスを使用している場合でも、応答することを確認する必要があります。
レスポンシブウェブデザイン に関しては、常に自分自身に問いかける必要があります "表示可能な領域が最小幅よりも小さいデバイスまたはブラウザをユーザーが使用するとどうなりますか？私のページまたはフォーム？」計画を立てていない限り、次の行に飛び込んでデザインを落とすか、方法によっては画面から消えてしまう可能性があります。あなたのCSSです。
CSS-Tricks および CodePen のChris Coyierが Simple Responsive Form demo を作成しました。これにより、表示可能領域の幅が変化すると外観が変化します。
Jake Rocheleauが CSS3とHTML5でスタイリッシュなレスポンシブフォームを作成する という記事を書き、 demo も作成しました。
Media Queries をチェックして、完全なレスポンシブWebデザインの優れた例を確認することもできます。
誰もが知っているように、水平方向と垂直方向の配置は、解像度と周囲のコンテンツに依存します。デザインでは、右上隅に負のスペースが形成されているため、カード（ラジオボタン）を1行に収めるのは良いことです。そのままにしておくと、以下の部分が同期する場合があります。
私がeコマースプロジェクトの1つでずっと前に試したデザインを共有したいと思います。
これは、単純なアイトラッキングの考慮事項に反します。
目はラベルからフィールド、ラベルまで追跡し、上記の例ではジグザグになっています。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
多くの研究では、単純なフォームは次のようにページの真下にフィールドをリストする必要があることを示しています：
2番目のオプションははるかに簡単です。
ここにUXの専門家からの証拠があります...
http://www.cxpartners.co.uk/cxblog/web_forms_design_guidelines_an_eyetracking_study/
http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
私はここで一般的な意見に反対することを敢えてします。私にとっては、すべてを1行にまとめる方がはるかに簡単です。私はジグザグの目の動きを本当の問題としてはまったく見ていません（しかし、私の個人的な意見を裏付ける研究を指摘することはできません）。さらに、ワンライナーを使用すると、今日の画面サイズをより適切に利用できます。その垂直方向のアプローチは、腰を動かすスペースであり、垂直方向にスクロールする必要があります。特に、フォームにより多くの値を入力する必要がある場合。新しい行に移動するだけで、データエントリの新しいブロックをより簡単に示すこともできます。
アマゾンは、水平方向のフォームがどれほど優れているかを示しており、OPのデザインは非常に魅力的だと思います。軽量でありながらコンパクトでありながら、ラインに沿って目を簡単に移動できます。
最高のeコマースサイトのいくつかがどのように支払いを行い、より具体的なカードフォームを実行しているかを確認するために、事前報告書にお金を払わなくても素晴らしいリソース。
https://baymard.com/checkout-usability/benchmark/step-type/payment
ここでは、日付と月にドロップダウンボックスを使用する方がよいことがわかります。また、ドロップダウンの月に01ではなく1月を使用しないようにします。これにより、サイトで選択する必要がある情報の類似性が、カードの内容を正確に反映するようになります。