フォームに適したUX
私はUIデザインに取り組んでいます。 CSS/HTMLの知識が豊富です。しかし、UXでは良くありません。
添付画像は、1ページ用に作成したUIです。
私はそれをほぼ10の方法で変更しようとしましたが、それでも私の顧客はそれが奇妙に見えると言います。
フィールドを1つずつ作成できますが、問題はスクロールバーが表示されることです。
このフォームのUXを改善するにはどうすればよいですか？
任意のサンプルまたは https://gomockingbird.com/ ワイヤーフレームの種類/提案はすべて大歓迎です
フォームの幅は960ピクセルに固定されています。
あなたはその形式で多くの情報を持っています-それはあまりうまく整理されていません。フォームフィールドを論理的なグループに細分化して、ユーザーの方向付けとガイドに役立てることを検討してください（HTMLフィールドセットと凡例タグはここでうまく機能します）。また、統一された視覚スタイルを提示します。現在、入力はいたるところにあります。ユーザーの目がフォームを簡単にスキャンできるように、フォームフィールドを並べます。以下のサンプルインターフェイスを参照してください（フィールドの分類方法がわからなかったため、すべてのフィールドを含めませんでした）。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
問題は、ページに構造がないため、ユーザーがどこから始めればよいか、次にどこに行けばよいかなどがわかりにくいことです。
すべてのフィールドを垂直に配置すると、使いやすさが向上し、時間、負担、およびエラーが最小限になるという証拠がたくさんあります。
確かに、可能な限りスクロールを回避するのはいいことですが、ユーザーはそれらを使って非常に楽しく作業しています。さらに、フィールドをここのように表示しても、画面とウィンドウのサイズ、画面の解像度、ズームのレベルなどが異なるため、スクロールバーを回避できる保証はありません。
Joshua's フィールドをセクションにグループ化する提案もエクスペリエンスを向上させる可能性がありますが、セクションの見出しの関連性に基づいて、どのフィールドに入力する必要があるかについて決定を下す人々もいることの証拠もあります。
ジョシュアがモックアップに持っているので、左にフラッシュするのではなく、フィールドラベルを右にフラッシュします（つまり、フィールドに対して突き合わせます）。これにより、ユーザーはラベルをフィールドに簡単に関連付けることができます。
全体として、配置はフォームのユーザーエクスペリエンスにとって非常に重要です。あなたがそれについてもっと読みたければ、私は 私のウェブサイトの詳細な投稿 を書きました。