スペースの問題がある列をソートする可能性をユーザーに示す方法
私は、20列と多くの情報を持つ大きなテーブルで作業しています。
列が並べ替え可能であることを示す最も一般的な方法は、列ヘッダーの右側または左側に小さな矢印を追加することです。
私の問題は、列ごとに矢印を追加するための十分なスペースがないことです（実際にはありません）。そのため、この機能をユーザーにどのように表示できるのか疑問に思っています。
マウスオーバー時にコンテキスト矢印を試すことができます。
スペースがある場合ほど自明ではありませんが、このコンテキストでは役立ちます。
編集：Googleドライブのスプレッドシートはそれを使用します
基本的なWebアプリの経験を持つほとんどのユーザーは、個々のヘッダーをクリックしてテーブルを並べ替えようとする可能性があります。しかし、より初心者のユーザーには、テーブルに並べられていない並べ替え可能なコンテンツを表示するサイトと同様の隣接するコントロールを追加することをお勧めします。 Amazon.com と同様です。
並べ替えに矢印や個別のドロップダウンメニューを使用できない場合、最も簡単な方法は、ラベルをクリック可能にすることです。 ラベルをハイパーリンクのようにします。そして、ユーザーがラベルをクリックすると、ソートが行われていることを「発見」できます。機能の理解という点では使い勝手は悪いですが、少なくともラベルをクリックするための視覚的な手掛かりを与えることができます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
編集：ホバー上のラベルのテキストを「並べ替え」のようなわかりやすいものに変更することで、少しわかりやすくすることができますOR Gildasのアイデアを使用して、そこに並べ替えアイコンを重ねることができます。
結論として、ハイパーリンクの視覚的な合図によってユーザーに描画し、コンテキスト内でアクションを通知します。
列の数が多いため、主に水平方向のスペースの節約について問題がありますか？もしそうなら、ヘッダーの上/下に矢印を置くことは役立つかもしれません：
追加ノード：スペースを削減する別の方法は、ソート可能な各列のヘッダーの上にある矢印のみを含めることです。ソートされていない列のヘッダーをクリックすると、デフォルトの方向にソートされます。ソートされた列のヘッダーをクリックすると、ソートの方向が切り替わります。
列ヘッダーに下線を付けます。これにより、ユーザーはヘッダーがリンクであることがわかり（ユーザーはそれと対話できます）、title = "Sort by price"を追加できるため、ユーザーがリンクにカーソルを合わせると、何が起こるかを説明できます彼らがそれをクリックした場合。
ユーザーに伝えるも使用できます。このテーブルまたはテーブルのすぐ上につながるテキストがある場合は、ヘッダーをクリックしてテーブルをソートできることをユーザーに伝えます。