業務システムの詳細画面で情報を探しやすくする設計の進め方

業務システムの詳細画面は、データベースの項目順に並べるのではなく、利用者が対象を確かめ、状態を理解し、次の作業を行う順に設計します。表示できる情報をすべて同じ強さで見せると、重要な期限や保留理由が埋もれます。誰が何を判断する画面かを絞り、識別、現在の状態、次の行動、補足の情報を区別してください。

詳細画面で行う判断を整理する

利用者が一覧から詳細を開く理由を聞きます。別の対象ではないか確認する、対応状況を知る、内容を修正する、承認するなど、目的は異なります。役割ごとに必要な情報と操作を書き出し、毎回見る項目と、問題があるときだけ見る項目を分けると配置を決めやすくなります。

対象を識別する情報には、名称だけでなく番号や相手先などを組み合わせます。同名の案件がある場合、タイトルだけでは取り違えを防げません。画面を下へ移動して操作する際も、どの対象を扱っているか分かるかを確認します。画面の固定表示を使う場合は、本文やボタンを隠さないかも見ます。

受付、確認待ち、完了などの状態には、何が済み何が残っているかの意味を持たせます。色だけで区別せず、文字で状態を示します。保留中なら理由、確認する相手、次の対応を近くに置くと、利用者は別の履歴を全部読まずに現状を把握しやすくなります。

主要な操作は、何が起こるか分かる名称にします。「処理する」だけでなく、確認依頼を送る、確定するなど行動を示します。確定と削除のように影響が異なる操作を同じ見た目で並べず、実行できる条件と権限を明確にします。押せない場合は、必要な情報や状態を説明すると問い合わせを減らす判断につながります。

基本情報、連絡先、明細、対応履歴、添付など、業務で一緒に確認する項目をまとめます。似た名称でも意味が違う日付や担当は、用途が分かる名前にします。入力項目と表示項目が同じとは限らず、関連する情報を見やすく整えて表示することも検討できます。

タブや折りたたみは長い画面の整理に役立ちますが、必要な情報が隠れて気づかれないこともあります。エラーや未対応の件がある場合は、閉じた場所にも存在が伝わるようにします。異なるタブを往復して比較する情報は、同じ画面で見られるかを検討してください。短く見せることだけを目的に分割しないようにします。

設計表には「利用する役割」「開く理由」「確認する情報」「判断」「次の操作」「不足時の表示」「関連する履歴」を書きます。項目ごとに頻度や重要性を確認し、根拠なくすべてを目立たせないようにします。既存の画面を変える場合は、現在の場所を覚えている利用者への影響も確認します。

想定例として、相談案件の詳細を考えます。上部に相談を識別する情報と状態、その下に次の対応と期限を置き、過去のやり取りは時系列で辿れる構成にします。連絡先の変更と過去の送付先は意味が異なるため、現在の情報だけで履歴を書き換えないようにします。画面の整理とデータの意味を合わせて検討します。

試作には短いデータだけでなく、長い名称、未入力、添付が複数ある記録、明細が多い記録を使います。未入力を単なる空白にすると見落とす場合があるため、未確認や対象外などの意味が必要かを判断します。スマホで使う画面なら、表示の幅だけでなく入力と操作の流れまで試してください。

利用者に対象を探し、現状を説明し、次の操作を行ってもらいます。何を見ればよいか迷った場所と、誤って押しそうになった操作を記録します。権限が違う役割でも同じように確認し、画面に見えないだけで操作が実行できる問題がないかを、受け付ける側の検証も含めて確かめます。

一画面にすべてを収めるべきでしょうか。画面の高さだけでなく、一緒に見る必要がある情報を探せることが重要です。必要に応じて区切りや目次を用意し、離すと比較しにくい情報は近くに置きます。端末のサイズにも合わせて判断してください。

編集画面と詳細画面は分けるべきでしょうか。誤変更の影響、入力の量、閲覧の頻度から比較します。閲覧中に不用意に値が変わらないことが重要です。同じ画面で編集する場合も、編集中の状態、保存の成否、離れるときの未保存の扱いを明確にしてください。