一覧表示パターン(SmartHR基本機能)

SmartHR基本機能の共通設定における一覧表示パターンをまとめています。

概要

オブジェクトを一覧形式で表示するレイアウトパターンです。OOUIではコレクションと呼ばれる画面です。 主にリスト形式のビューやテーブル、グリッド形式のビューを指します。

構成

一覧表示にはいくつかのパターンがありますが、SmartHRでは多くの場合、「一覧」は1項目1行の1次元リストを指します。 この一般的な「一覧」の構成は、次の要素で構成されています。

オブジェクト名

オブジェクトの名前を指します。一覧を識別するために必須要素として設定します。

遷移リンクのスタイル

オブジェクトの詳細(シングル)へ遷移する場合、オブジェクト名にリンクを設定します。リンクによる遷移は「オブジェクトの操作」にはあたらないため、アクションボタンは使いません。

遷移リンクのスタイル

オブジェクトの情報

オブジェクトごとに表示する情報を指します。一覧ではオブジェクトの持つすべての情報を表示する必要はありません。ユーザーが、それぞれのオブジェクトを識別・比較できる情報を抽出して、一覧に表示します。

オブジェクトの情報の表現

オブジェクトの情報量および表示領域の幅

各機能の仕様や要件によって異なるため、オブジェクトの情報量(列数)および表示領域の幅には制限を設けません。

ただし、情報量が多いと表示領域を圧迫し、ユーザーの認知負荷を高めることになります。表示する情報量(列数)を十分に検討し、情報量に応じて表示領域の幅を適切に設定してください。

横スクロール

表示する情報が多く、どうしても省略できない場合には、コレクションエリア内に横スクロールを付けます。 ただし、横スクロールは情報の一覧性を下げるため、可能な限り横スクロールを必要としない設計を心がけてください。

情報の省略

情報を指定幅以上に表示したい、またはセル内で情報を複数行で表示させたくない場合、セル上の情報に三点リーダーを付けて省略します。 省略した情報は、マウスオーバーした際にTooltipを表示し、すべての情報を示してください。

情報の省略表現

オブジェクトの操作

オブジェクトに対して「編集」「削除」などの操作をする場合、アクションボタンを設定します。ほとんどの場合はユーザーの視線導線に合わせ、オブジェクト名より右側に設置します。

単一のオブジェクト操作

単一のオブジェクトに操作をしたい場合、アクションボタンをオブジェクト一つ一つに対して設定します。

アクションボタンは1つのオブジェクトに対して、最大3つを上限とします。それ以上設置する必要がある場合は、ドロップダウンリストにアクションを格納することを検討しましょう。

単一のオブジェクト操作

複数のオブジェクト操作

複数のオブジェクトに対して、同時に操作をしたい場合は、チェックボックスによる「複数選択操作」パターンを使います。

オブジェクトそれぞれにチェックボックスを設置して複数選択を可能にし、複数選択したオブジェクトに対して「まとめて操作するアクション」を格納するエリアを一覧の上部に設置します。SmartHR UIではこのエリアをBulk action areaと呼んでいます。

複数のオブジェクト操作

並べ替え(ドラッグアンドドロップ)

[wip]

© 2021, SmartHR, Inc.