読み取り専用フォームデータを表示するためのデザインパターン
説明：
フォームに2つのビュー（編集可能と読み取り専用）があります。ユーザーには最初に読み取り専用ビューが表示されます。次に、編集可能なビューに移動するには、下部にある[編集]ボタンをクリックする必要があります。これにより、編集可能なビューが表示される別のページに移動します。
編集可能なビューでは、フォームを2列のグリッドレイアウトに配置し、ラベルを入力に対して上揃えで配置しています（図1と同様）。
読み取り専用ビューの2つのバージョンがあります。両方のビューが2列のグリッドレイアウトで配置されます。ビュー1には、フォームの入力値と上揃えされたラベルがあります（図1を参照）。一方、ビュー2には入力値と左揃えのラベルがあります（図2を参照）。
質問：
読み取り専用ビューの表示形式が編集可能ビューとまったく同じである場合、または読み取り専用ビューと編集可能ビューのスタイルを完全に異なるものにすることをお勧めします。 uxデザインパターンに応じて、どちらが最適かを判断します。
図：
図1 - 
図＃2 
私は同意します、フォームは同じようにレイアウトされるべきです。ユーザーがしなければならない認知作業は次のとおりです。
同一のレイアウト
- そのテキストを変更したい
- [編集をクリック]
- これでできます！
異なるレイアウト
- そのテキストを変更したい
- [編集をクリック]
- 待って、どこに行ったの？ファーストネームでした...
- [「名」または変更したい名前のページをスキャンします]
- さて、あります。
シグナリング編集可能性
テキストが編集可能かどうかをユーザーが確認できるように、さまざまなレイアウトを検討していると思います。テキストが編集可能であることを示す目立たない手がかり（= /// =）は編集可能（書体、太さ、その周りに表示される入力ボックス）ですが、その不在は、ユーザーがすぐにテキストを伝えることができるほど明確ではありません。 は編集できません。だから、彼らはもっと何かが必要だとあなたは正しいと思います。
私の提案では、読み取り専用ページには、すべてのフィールドの横に小さな「編集」リンクがあります。全員が同じ編集ページに移動できます。これにはいくつかの利点があります。
- これが編集ページではないことは明らかです
- 編集機能を知らない/忘れたユーザーは、編集機能がすぐにわかる
- ユーザーはマウスと注意を移動して編集ボタンに移動し、変更したいテキストに戻る必要はありません。
レイアウト
縦型レイアウトの場合は、icc97のアドバイスに従って、名前フィールドを1つの列に配置する必要があります。また、フィールドの内容と次の行の間のスペースを増やして、フィールドが下のヘッダーではなく、上のヘッダーでグループ化されていることを明確にします。
水平レイアウトを使用する場合は、フィールド名とフィールドの内容の間の大きなスペースを取り除く必要があります。これは小さな問題ですが、フィールド名を右揃えにすることも検討してください。
印刷
印刷用のよりコンパクトなビューが必要な場合は、印刷固有のレイアウトに移動する印刷ボタンを作成するか、または 印刷固有のメディアクエリ を使用できます。ユーザーが画面と印刷出力の間を頻繁に行き来することを期待しない限り、画面上のバージョンとの一貫性はそれほど重要ではありません。
個人的には、画面と印刷の両方にレイアウト＃2を使用しますが、レイアウト＃1とレイアウト＃2を切り替える場合は、フィールドラベルのdivをblockからinlineに指定の幅で変更する必要があります。
私が図2に示しているアプローチを採用する理由は、最初に水平に、次に左に戻るFパターンでページをスキャンするためです。したがって、たとえばFirst Nameのヘッダーが表示された場合、その値はヘッダーの下ではなく、右側に自動的に隣接する傾向があります。編集モードでは、フィールドを編集可能にすると、編集可能フィールドの入力タイプを有効にできます。これにより、編集可能/編集不可の属性を明確に区別できます。
「Fパターン」を使用して、読み取り専用で編集可能なオブジェクトを同じ場所に保持できるため、ユーザーが編集する必要があるフィールドを簡単に識別できます。
一貫性の理由から、読み取り専用ビューと編集可能なビューは同じレイアウトでなければなりません。このようにして、ユーザーは1つのレイアウトのみを学習する必要があります。それ以外の場合、レイアウトが異なると、混乱、エラー、認識能力の向上につながる可能性があります。
読み取り専用と編集可能の両方でfigure＃2を使用することをお勧めします。また、ラベルを左揃えではなく右揃えにします。このレイアウトは、読みやすさとスキャンに最適です。