並び替えのアイコン｜UIデザインポリシー整理
リーガルテックAI SaaSスタートアップ、MNTSQのプロダクトデザイナーのクボスケです。
私たちは、レバレッジの効くデザインの仕組みづくりを目指しています。この記事は、MNTSQとしてのUIデザインの基準や方針を決めていく「UIデザインポリシー整理」というプロジェクトのなかで行なわれたディスカッションをもとにまとめたものです。
このプロジェクトの主旨や運営については、初回の記事でも述べていますので、ぜひご覧ください。
それでは、今回のトピックは「並び替えのアイコン」です。
並び替えのアイコン
並び替えは、データやリストの表示を特定の基準に従って並び替える機能です。
並び替える基準を変更するためのボタンなどのアイコンは、それぞれ上下を向いた二本の矢印の図案を使用します。
並び替えの基準や状態についてはテキストで表記します。「昇順／降順」は伝わりやすいものに言い換えます。
以下はやりとりの内容を一部抜粋したものです。
クボスケ：並び替えを意味するアイコンに、左端揃えの3本線の図案が使われることがありますが、「絞り込み」に中央揃えの3本線を使うことにしたため、それと区別しやすいなにか別のものにしたほうがいいのではと思いました
ちょっと調べてみたところ、3本線を矢印と組み合わせたもののほか、A–Zや1–9をあしらった例も見つかりました。昇順／降順の概念を含んでいたり、アルファベットや数字を使うことで、対象のデータの形式によって使い分ける必要が出てきてしまうかもしれませんね。low-to-high（金額など）やnew-to-old（日時など）にように数値を扱うときにでもA–Zでいいのか、逆に文字列を扱うときに1–9で違和感ないか、とか
上下の矢印の図案も一般的です。アイコンだけでなく、Unicode内にも記号として登録されている（⇅：U+21C5など）くらいなので、それなりに通用するものと考えられるでしょうか
ナカシマ：アイコンだけの議論と、アイコンが状態まで表現するのかという視点がありそうです
クボスケ：状態の表現まで含んだアイコンの例として、表組のヘッダー行に並び順コントロールを持つデザインパターンもあると思います。この場合のアイコンはボタンにもなっていて、機能を持っています
このような表組のヘッダー行でのボタン用に、別のアイコンを用意しているデザインシステムもありますね（Shopify Polarisの例）
kassy：Notionでは、絞り込みに中央揃えの3本線、並び替えに上下2つの矢印が使われています。違和感はないですね
ナカシマ：Notionのデータベースのテーブルビューでは、そもそも表組のヘッダー行のボタンで各列の値をキーにして並び替える機能は付いてないんですね
クボスケ：Googleスプレッドシートでは、「データ」のメニューの中に絞り込み（フィルタ）も並べ替えもあり、三本線に上下両端矢印のアイコンが使われています
kassy：いつのまにかスプレッドシートにまで踏み込んだ話になってしまいましたが、そもそもMNTSQの中で扱う表組としてどこまで考慮するべきでしょうか。スプレッドシートの複雑な操作性を求めるようなユースケースでは、データをダウンロードしてExcelなどで触ってもらう前提がプロダクトとして現実的な気もします
ナカシマ：たしかに、MNTSQ上ではそこまでは必要性が高くないかもしれませんね
クボスケ：そうですね。表組のヘッダー行での並び順コントロールについては、また今後必要になったときに考えましょうか
ナカシマ：並び替えの基準についてはテキストで表現するかたちでしょうか
クボスケ：はい。アイコン自体には昇順／降順を示すものを含まずに、現在の表示がなにを基準に決められた並び順なのかは、傍にテキストを添えるのがよさそうです。初期状態ではいずれかの並び順になっていて、トグルで変更できるイメージですね
kassy：ところで、「昇順／降順」ってどっちがどっちか混乱しませんか。「asc/desc」といった英語の省略表記だとさらにわかりにくいと感じます。添えるテキストはわかりやすくしたいですね