ダッシュボードのアイコンをキーワードで選ぶのはやめましょう
ダッシュボードの問題の多くは、アイコンが悪いことが原因ではありません。
それは、優れたアイコンを誤った意味で使用していることから生じます。
「users」と検索して、見た目のきれいなSVGを選んだとしても、後で問題に直面する可能性があります。顧客、チームメンバー、アカウント所有者、管理者などには、それぞれ異なるアイコンが必要になるからです。やがて、一つの「user」アイコンにあまりにも多くの意味を持たせなければならなくなり、その結果、SaaSのダッシュボードが煩雑に感じられるようになります。
キーワードでアイコンを選ぶのはやめましょう。「役割(ロール)」で選ぶようにしてください。
キーワードはアイコンが「何に関連しているか」を伝えますが、役割はアイコンが「何をするか」を伝えます。
アイコンを以下の5つのカテゴリに分類しましょう:
- ナビゲーションアイコン:ダッシュボード、請求、設定などの目的地を表します。シンプルで安定したものにする必要があります。
- ステータスアイコン:「これはアクティブか?」「これは失敗したか?」といった問いに答えるものです。チェックマーク、警告、ロックなどの直接的なシンボルを使用してください。
- アクションアイコン:編集、削除、エクスポートなどの操作を表します。操作が複雑な場合は、ラベルなしで使用するのは避けましょう。
- オブジェクトアイコン:プロジェクト、請求書、フォルダなどのエンティティを識別します。
- 空の状態(Empty state)アイコン:データがないときに表示されます。これらには、より個性を持たせてもよいでしょう。
単に最も美しいSVGを探すのではなく、「視覚的な語彙(visual vocabulary)」を探してください。
アイコンを決定する前に、次の3つのテストを行ってください:
- サイズテスト:高密度なテーブル内で16pxになっても、そのアイコンは機能しますか?多くのアイコンは32pxでは素晴らしく見えますが、小さくなると使い物にならなくなります。
- コンテキストテスト:アイコンをラベルや隣接するアイコンの横に配置してみてください。隣のアイコンと混同されることはありませんか?
- 意味テスト:アイコンがラベルを補完していますか?それとも、ラベルがアイコンの意味を説明しなければならない状態になっていませんか?
特定の機能に対して明確なアイコンが見つからない場合、その機能名が曖昧すぎる可能性があります。アイコンは意味を強化するためのものであり、不明瞭な言葉を修正するためのものではありません。
「user icon」と検索する代わりに、「internal collaborator icon」や「customer account icon」と検索してみてください。検索の精度を高めることが、UIの精度向上につながります。
出典: https://dev.to/svgicons/stop-picking-dashboard-icons-by-keyword-ij2