水平方向にソート可能な巨大な列リストの問題
時にはプライドが許されないこともありますが、私はそれを脇に置いて、私のような心から追加の意見を求めることにしました！長い投稿でごめんなさい、私の問題を説明するために私の考えを分析しなければなりません。
私は次のようにページの一部に巨大な複数列のリストを含むアプリを設計しています：
見た目はよく似ていますが、テーブルではなく列リストに表示されるため、操作が簡単です。スクリーンショットは1920x1080画面のもので、このリストには60列のうち約6列が表示されています。アイテムは並べ替え可能である必要があります。別の方法を試しました。
a）現在、2列目に表示されているように、タイトルにカーソルを合わせると、並べ替え可能、列固定、データ並べ替え、列サイズ変更の4つのアイコンが表示されます。多くの努力の結果、主に他の問題のため、リストを適切に並べ替えることができましたが、リストは応答する固定ヘッダーを使用しています-ただし、リストアイテムを画面外にドラッグすると、画面の端でマウスを上下に動かして、一番右に移動します。
b）右側に開くサイドドロワーを備えた「編集」ボタンを使用してから、netflixタイプの並べ替え可能要素を使用しました：ドラッグアンドドロップエレメントか、入力ボックスにソート順を入力します。垂直方向により多くの項目が画面に収まり、ドラッグ可能なオブジェクトを備えたマウスを使用して画面を水平方向より垂直方向にスクロールする方が簡単です。私はUXが嫌いですが、ユーザーが考えることができることを意味します-「ねえ、リストはそこにあるので、列をドラッグアンドドロップできないのはなぜですか？これは愚かなUIデザイナーである必要があります
c）モーダルを開く編集ボタンを使用してみましたが、上の引き出しに似た縦のリストがあります。これにより、良い面と悪い面の両方が表示されます。あなたはあなたのタスクを簡単に達成できるので良いですが、上記のb）に似ています-現在のビューでデータのサイズ変更/修正/並べ替えができるが、別のビューで並べ替えられるのはなぜですか？
私はこれに非常に長い間悩まされてきました。それが私がここにいて、あらゆる種類のアイデアを受け入れる理由です。不思議なことに、モバイルの方がずっと簡単です。人々は、ソート・ドラッグ・アクションを発行できるようになる前に取られるべきアクションを期待しています。したがって、ボタンを使用して項目を「ソート」してソートする方が簡単です。私はアプリの別の部分と同様のデザインを作成しました。これは、モバイルとiPhoneとAndroidの両方でかなりうまく機能します。
どんな提案も大歓迎です！上記の3つのソリューションから、LEAST BADはモーダルなソリューションです。しかし、我慢できないが楽しくて使いやすいものが必要です！
編集：いくつかのことを明確にします。テーブルはそれ自体が従来のテーブルではありません。テーブル>行>セルとしてではなく、列>テーブル>行>セルとしてレンダリングされるため、各列は個別の要素であり、簡単にドラッグアンドドロップできます。
邪魔にならないように、ロックは左側の列を（position：fixed要素として）修正します。ソートは即座に機能し、行内のデータをソートし、最後にサイズ変更によって列の幅をその場でサイズ変更します。
タッチデバイスと非タッチデバイスの両方の機能に関心がありますが、私の主な関心は、デスクトップでのcolumnsの並べ替えsing MOUSEです。
ここで問題は、列全体を最初の位置から最後の位置までドラッグすることです。これは、最大20000px離れている場合があり、非常に扱いにくいです。画面の右側の列を[最後の位置で押す]に移動するのは遅く、スクロールを続けるにはマウスカーソルを上下に移動する必要があります。
ヤコブ・ニールセンからの引用から始めましょう：
ドラッグアンドドロップデザインは、何かがドラッグできるか、またはどこにドロップできるかが明らかでない場合、最悪の違反者になることがよくあります。 （または、ドラッグまたはドロップするとどうなりますか？）対照的に、単純なチェックボックスとコマンドボタンでは、通常、何をクリックできるかが非常にわかりやすくなります。
アプローチA
私の意見では、並べ替えるアイテムが少ない場合、またはそれらのほとんどすべてが同じ画面に表示されている場合にうまく機能します。これにはいくつかの理由があります：
- ボタンを長い間クリックしたままにする必要があり、多くのユーザーにとって煩わしい（またはそれほど簡単ではない）です（障害のあるユーザーについては言及していません誰がこの行動をとるか不可能かもしれない）。
- ページ/画面の片側から反対側に移動する必要があり、これはマウスで行うには長い道のりかもしれません。（物理的な）デスクトップの境界線またはタッチパッドの端近くで終了する可能性があります（以降の移動はさらに困難になります））。
- アイテムを画面外にドラッグすると別のアクションがトリガーされます（たとえば、列をページの外にドラッグすると非表示になります）の場合、ユーザーが誤って操作する可能性が高くなります。
さらに、現在のデザインでは（目に見える）記号がないため、列が（なんらかの理由で）並べ替え可能であることが明らかでない場合があります。
アプローチB
相互作用がアプローチAよりもはるかに優れている場合でも、私はあなたに同意します。この場合、ユーザーには、ヘッダー行に既にあるものと重複するアイテムの永続的に表示されるリストが表示されます。これはスペースの無駄であり、並べ替えを行うには絶対にやりすぎです（特に、セッション全体で開いたままにしないため）。
アプローチC
これをモバイルアプリケーションで使用しましたが、ここではデスクトップアプリケーションで作業しているようです（少なくともスクリーンショットの画面/テキストサイズから）。
ここでもうまく機能する可能性がありますが、アプローチAで説明した問題に対処する必要がありますまた：マウスのみの並べ替えは、煩わしい場合や難しい場合があります。
代替アプローチ
あなたは少なくともこれらに従ってください：
- holistic順序付けスキームを使用して、任意の並べ替えを補完できます。たとえば、アルファベット順、関連性、その他の属性による。これらのスキームは、クリーンなシナリオからカスタム注文を開始するための良い方法です。
- デフォルトにリセットオプションを指定することを忘れないでください。これは、大量の列がある場合に特に便利です（すでにデフォルトが選択されている場合は、これをスキップできます） ）。
- ドラッグアンドドロップは非常に自然なアプローチですが、状況によっては最適ではない場合があり（前の段落を参照）、代替アプローチも提供する必要があります。マウスがなくても注文できる必要があります。キーボードショートカットを含めることを忘れないでください（たとえば、 CTRL + LEFT ARROW）。
- マウスを使用するときは、（考えられる問題のため）ドラッグする必要がないを行う代替アプローチを提供する必要があります。 ◀と▶（または、垂直方向のリストの場合は▲と▼）の2つのボタンの使用は、ほとんどどこでも受け入れられています。
- ドラッグ中に継続的なフィードバックを与えること、およびドラッグ可能なアイテムに記号を示すことを忘れないでください（これらは、例のように視覚的に目立つ必要はなく、微妙なドットパターンや2つの水平/垂直線が機能する場合があります）。
さらに、シンプルリストに固執しないでください。アイテムの自然な流れ（左から右）を上から下に変更している場合は、スペースを節約でき、グリッドを使用できます。グリッドは、画面上の多くのスペースを節約し、ドラッグアンドドロップを容易にします（画面により多くのアイテムが収まるため）。次の画像は、グリッドレイアウトでの意味の（非常に生の！）例を示しています。
この例では、ボックスをプレースホルダーとして使用しているため、より多くの情報を配置できます（後述）。このグリッドの各行には、ビューの1ページに収まる列が含まれていることに注意してください。乱用して、これを固定レイアウトと呼びます。左側と右側の両方に空白がある場合があります。別のアプローチは、流動レイアウトです。水平ヘッダーでの表示方法に関係なく、各グリッド行にできるだけ多くの列を収めます。
ノート：
- グループ（どういうわけか関連アイテムの）はそれぞれ異なる背景色を持っています。もちろん、必須ではありません（特に、現在のデザインでと戦うの可能性があるため）ある種のグループ化は、アフィニティでアイテムを見つけるのに役立ちます。背景色である必要はありません。境界線の色やアイコンなど、グラフィックデザイナーが提供するものであれば何でもかまいません。
- ここにrawボックスがありますが、それらはより多くの情報を伝えるかもしれません（もちろん、聴衆によると）。例えば：
このモックには、各項目を識別するための（グループの）背景色、アイコン、およびテキストと、（オプション？）情報テキスト（この例では、この列の一意の値の数）があります。これは単なるボックスの内部レイアウトであり、最終的なデザインは必須ドラッグのためのシグニファイアを含める必要がありますが、ドラッグは許可する必要がありますボックス内の任意の場所をクリック。
グリッドレイアウトを使用すると、ボタンを使用して全方向に並べ替えることができます。
◀と▶を含める場合、ボタンが列と一緒に移動し、これによりユーザーは旅行中にフォローする必要があるため、それらを各列に配置することは避けます（ヘッダーレイアウトで許可されている場合）。それらが固定位置（右側としましょう）にある場合、ユーザーは同じボタンを繰り返しクリックするだけでアイテムをすばやく移動できます。 （モーダルダイアログアプローチとは逆に）インプレースアプローチを使用する場合は、selectedヘッダー列も導入する必要があります。
列の順序に直接関係のない考えはほとんどありません。
固定列も有効にすることを検討してください。 （私の意見では）最良のオプションは、常に左側に固定される任意の選択された列を持つことです。比較したい場合は、たとえば、タイムスタンプと仮定の言語列を使用して何度も検索する必要はありません。これにより、この場合も並べ替えが役に立たなくなります（この場合データ分析の使用パターンは、少なくとも私の経験ではかなり一般的です。
列数が非常に多い場合は、列ページャーも提供してください。すべての列をすばやくスキャンするのに役立ちます。リストの次のページに移動するときにリセットしないでください。カラムページャーとは？次のページをクリックすると、列が最初に表示されるようにスクロールされます（最後に表示された後の列）。
私は少し混乱しているので、さらに質問をする必要があります。
- 後で2番目のデザインとしてモバイルについて言及したので、マウスの操作についての質問はありますか？マウスとタッチデバイスをカバーするために1つのデザインが必要ですか、それとも2つの異なるアプローチを開発する用意がありますか？
- 「並べ替え可能な列」は、最初にテーブルの行を並べ替えるように聞こえました。しかし、読んで、アクションは
sortable, fix column, sort data, resize column。最初の画像では、両方向の水平矢印のみが表示されています。列の並べ替え、列の固定（これと水平スクロールの左側にあるすべての列を除く）、列のサイズ変更、および行の並べ替えを提供する必要があると思います。正しい？ - ディスプレイから列を削除する方法について、「OFF SCREEN」をドラッグすることについての発言はありますか？そうでない場合、画面からドラッグするとどのような結果になりますか？
一般的に、（a）は直接操作であり、変更中にプレビューできるため、（a）を選び、（b）と（c）は避けます。
最も重要な（頻繁な）アクションはデータの並べ替えであると思います。単一の列のみを並べ替える必要がある場合、列ヘッダーをクリックすると、昇順、降順、並べ替えなし（アイコンで表示）を切り替えることができます。データを2つ以上の列に従って並べ替える必要がある場合（「srceventが最初、それがタイムスタンプに従って同じ順序である場合」）、もちろんそれ以上必要です。
マウスのみの場合、列の並べ替えとサイズ変更の標準的な解決策はドラッグアンドドロップです。列ヘッダー（または列の境界）をクリックするとカーソルが変わり、ドラッグすると結果の継続的なプレビューが表示されます。
同様にドラッグして列を削除するを処理することもできます。ユーザーが列をテーブルの外にドラッグしたときに列を削除します（ユーザーがどこに行けるかがわかるように、カーソルを変更することで通知されます）。 。または、ユーザーが不要な列をドロップできる「列ストレージ」をどこかに作成します（垂直スクロールバーの上にある列ヘッダーの右側の四角形ですか？）。列を元に戻すには、このスペースにカーソルを合わせると、ドラッグ可能な列のリストが表示されます。 （空想的な解決策は、テーブルの外にドロップされた列をこの場所にアニメーション化することです-それらを再び見つける場所を示します:-)）または、コンテキストメニュー（列ヘッダー上）を使用して、列（列のあるチェックボックスのリスト）を削除して再表示します）。
「Fix Column」を見たことがない。 Excelには列ヘッダーとは別のものがありますが、列ヘッダーのコンテキストメニューがあれば配置できます。