Table: ソートできるカラムの表示検討
Qs-F opened this issue · 0 comments
Qs-F commented
現在、カラムでソートできるかどうかユーザーが判断するには対象のカラムのヘッダをホバーする (v1.1.3未満ではクリックしてみる) しか方法がなく、これはユーザービリティを著しく低下させてしまうものである。そのため、カラムでソートできるかどうかを表示する方法を検討する。
解決したい課題
- カラムでソートできるかどうかをユーザーが何も操作することなく判断できるようにする
- ソートできるカラムについて、ソートされていない / 降順でソートされている / 昇順でソートされている、の3つのうちいずれかの状態ことがわかる
- (可能であれば) 降順のものをもう一度クリックすると昇順になる、のような非明示的な (ある程度普及しているパターンであり一般的ではあるものの、わからないユーザーもいるようである) 操作をなくしたい
- フィルタアイコンのようなものを出して、クリックするとメニューが開いて昇順 / 降順選べる、とか
- この操作はAPIへの負担も不用意に増加させてしまう可能性が考えられるのでできれば減らしていきたい
案1: ヘッダの横に上下三角のアイコンを出し、クリックで入れ替え、ソートされているときはカラーを変更する
参考: https://ant.design/components/table#components-table-demo-head
良い点
- ある程度一般的に普及している表示のようである
悪い点
-
- (可能であれば) 降順のものをもう一度クリックすると昇順になる、のような非明示的な (ある程度普及しているパターンであり一般的ではあるものの、わからないユーザーもいるようである) 操作をなくしたい
が解決できない
案2: ヘッダの横にフィルタアイコンを出し、クリックするとメニューが開いて降順 / 昇順が選べる
参考: https://ant.design/components/table#components-table-demo-head
良い点
-
- (可能であれば) 降順のものをもう一度クリックすると昇順になる、のような非明示的な (ある程度普及しているパターンであり一般的ではあるものの、わからないユーザーもいるようである) 操作をなくしたい
が解決できる
悪い点
- ソートするのに2度手間になる
- 単一のカラムでのみのソートを許すようなAPI設計の場合、どこかでソートし直すと前にソートしていた部分の設定が非明示的に消えてしまう
案3: テーブルの外にButton (or Select) をおき、そこでソートするカラムを選ぶ
参考: https://smarthr.design/products/design-patterns/smarthr-table/#h3-2
良い点
- 単一のカラムでのみのソートを許すようなAPIでも複数カラム可能でも対応が可能
悪い点
- サービス側でのデザインの負担が増える
- テーブルだけを見てどのカラムでソートされているかを判断できない
- SmartHRでは加えてソートされているカラムに三角アイコンを付けることで対応しているようである (もしかしたらヘッダのクリックでもソートに対応しているのかも)