何かがスケーリングされていないことをどのように示すのですか？

Question

背景

油井に生産設備（ポンプ、チュービングストリング、FCDなど）を表示するためのUIを開発しています。

ほとんどの油井には、機器の間隔が非常に不均一です。たとえば、何もない状態で数千メートル、次にアイテム数が10程度、さらにスペースが増えて、アイテムがさらに数個増える場合があります。

回路図では、ウェルが完全に垂直でない限り、 Measured Depth（MD）を使用しています。これは True Vertical Depth（TVD）とは異なります。インターフェースの他の場所でTVDを示しています。

現在のソリューション

これに対する私の解決策は、「押しつぶされた」回路図を表示することです。この場合、回路図では、それぞれの深さが独自の行になります。機密保持のため、実際の回路図は削除しましたが、スケールの右側にあり、すべての機器のアイコンが表示されています。

問題

残念ながら、これはユーザビリティテストで数人を混乱させました。また、QAはこれをバグとして記録しました（軸スケーリングの不一致）。画面の領域を非常に効果的に使用し、別の縮尺でのビューの開発も計画しているため、縮尺ではなくこの縮尺の表現を維持したいと思います。

考えられるアイデア

軸が「壊れている」場所を示すためにジグザグタイプのインジケーターを配置できますが、技術的には軸がどこでも壊れているため、見栄えがよくありません。

私はまた、上にそれをスペルアウトすることもできます（スケールではありません）が、それはハックに思えます。

または、別のスケールビューを実装するまで、これについてあまり気にする必要はありません。

別の例

以前は家族と一緒に西カナダをドライブ毎年夏にドライブしていました。本質的に何もない長いストレッチがあります。時間を過ごすのを助けるために、私の母は私たちが通過する面白い町名（ピアポット、レジーナ、ムーソミンなど）のリストを作成しました。それらの町を図で表そうとすると、こんな感じになります。

私の質問

これをより明確にする他の方法はありますか？

tohster · Accepted Answer

やりたいことを理解することから始めます

あなたはこれをレイアウトするための合理的でハックのない方法を（正しく）探しているので、最初の原則から始めることができます。

1.レイアウトパターンを理解する

あなたが使おうとしているレイアウトは一般的なものです...私はそれをmini-mapまたはnavigatorパターンと呼んでいますが、おそらくもっと正しいUX用語があります。

基本的なパネルレイアウトは賢明なものであり、雑誌、ウェブサイト、パンフレット、その他多くのコンテンツレイアウトで使用されています。左側の列にはコンテンツの「概観」ビューがあり、右側の列には詳細ビューがあります。これはいくつかの理由で良い一般的なレイアウトです：
- レイアウトは、複雑なコンテンツの階層ビューを提供します。
- 左側のミニマップ列と右側の詳細を配置すると、ユーザー（LTR言語のユーザー）がコンテンツの処理に慣れているため、視覚的な整理とフローが適切になります上から下、左から右。
- 列の垂直方向は、ユーザーが探している詳細レベルに応じて、どちらかの列を下にscannabilityをユーザーに提供します。 Webページの場合、vertical layoutを使用すると、ページを下にスクロールできるため、コンテンツを任意に長くすることができます。

2.コンテンツを整理する

パターンの理解を武器に、コンテンツを整理できるようになりました。
ミニマップの目的は、コンテンツ（あなたの場合は奥行きと設備）がorganizedであることをユーザーに示すことです。あなたの場合、機器は深さ順に並べられているので、この方向を効果的に伝えるために正しい縮尺を使用のミニマップを作成してみましょう。
- 正当な理由で非線形軸に負のフィードバックがありました...既存のレイアウトがユーザーがナビゲーター/ミニマップビューに期待するものに違反しているためです。
右側の詳細パネルの場合、機器はdepth by depthであるため、フォントとレイアウトを選択すると、その順序がユーザーに明確になるはずです。
あとは、左パネルを右パネルに視覚的に接続して、ユーザーが関係を明確に確認できるようにするだけです。

3.次に、デザインを作成します

上記の原則を組み込んだ例を次に示します。

ノート：

ミニマップは縮尺に合わせて描画深度レベル間の空間関係の明確な方向と通信を提供します。
偶数の垂直間隔を使用してレイアウトされた詳細列は、読みやすさとスキャン可能性を向上させます。
詳細ヘッダーに大きなオレンジ色のフォントを使用して、1を提供します。視覚的関係（オレンジ）ミニマップ。および2.列のインデックス付けの明確な伝達。
微妙な吹き出し矢印を使用して、ミニマップを詳細パネルに関連付けます。これらはおそらく視覚障害者のためのより高いコントラストになるはずですが、レイアウトをよく考えれば、関連付けるために多くのことをする必要がないことを示すために微妙な線を使用しました左のパネルから右のパネルへ。
デザインが適切に伝達的である場合、追加のラベル付けはほとんど必要ないことに注意してください。コンテンツの意味の構成はユーザーには明らかです。

お役に立てば幸いです。

ErikE · Answer

あなたは出来る：

軸線を完全に削除します。図が縮尺どおりでない場合、軸線自体がUXの混乱/混乱要素であり、認識の失敗を引き起こしています。リストの意味でのみ互いに離れているセクションに添付された単純なラベルを使用します。さらに間隔をあけたアイテム間に、より大きなスペースを置くことができますが、これは必須ではありません。

以下は画像の例です。私はそれが水平であることを知っており、いつかそれを修正しようとします（垂直であると想像してください）。
垂直軸を凡例のようにし、水平目盛りに位置を示しますが、数字は付けません（1000、2000などの全体的な主線を除く）。ボックスまたはセクションにつながる斜めの吹き出し線を追加し、セクションボディの深さで各スポットの内容を示します。非常に狭いセクションや混雑したセクションの場合は、「ズームサークル」または「ズームスクエア」を使用します。

ここでも、軸が左側にあり、レイアウトが水平ではなく垂直であると想像してください。

Adit Gupta · Answer

私は石油エンジニアを卒業しているので、おそらくここであなたを助けることができます。

これはドメイン固有の問題であり、正しい解決策は、油井で使用している機器の種類によって異なります。いくつか例を挙げましょうここに。少し技術的ですが、わかりやすく説明するために最善を尽くします。

例1：ケーシングの取り付け

他の機器を井戸に入れる前に、ケーシングをよく行います。次の図を検討してください。

ここでは2つのスケールが指定されています。1つは深さの等間隔の「通常のスケール」で、もう1つはさまざまなケーシングが設置された深さを示します。通常のスケールは真の垂直深度（TVD）を示し、油井掘削における重要な指標です。 -

石油エンジニアは、他の将来の設備と簡単に関連付けることができるように、両方を必要とします。

2.泥図のドリル

次の図では、特定の深さのみが指定されています。それは、泥図の正確な深さを知ることが不可欠であるか、そうでなければパンクが発生し、会社が井戸を失うことになるからです。

提案：

機器に関する詳細情報を取得します。掘削プロセスでは、スケール間隔の仮定はありません。
2つのスケールを指定することをお勧めします。 holisticとspecificの両方の情報をエンジニアに提供します。

お役に立てれば！特定のものが必要な場合はお知らせください。

編集：-図で測定深度（MD）を使用しているようです。スケーリングについては、参照ポイント（通常は回転テーブル）を用意し、それに応じてスケーリングすることをお勧めします。これに関する技術的な議論を参照してください。

編集2-OPによって生成されたクエリに基づいて、簡単にアクセスできるようにコメントを複製しています。

実寸ではない軸の表現は、実際には先頭にNTSを記述することで明示的に言及されています。これは標準的な方法です。それはハックではなく、ある種の慣習です。

March Ho · Answer

壊れた軸は、控えめに使用することを目的とする場合にのみ役立ちます。

あなたが言うように、軸がどこでも壊れている場合、関連するポイントを説明する代わりにテーブルを使用するほうが理にかなっています。

+-------+-----------+------+ | Depth | Structure | Icon | +-------+-----------+------+ | 0 | Oil Rig | A | | 6100 | Foo Pipe | F | | 6200 | Bar Pipe | B | | 8940 | Drill | D | | 9000 | Drill Bit | DB | +-------+-----------+------+

必要に応じて、元のデザインと同じ効果（ただし混乱が少ない）にするために、ウェルのグラフィックをこのテーブルの横に配置できます。

DrewJordan · Answer

私はグラフィックを作成することはできませんが、「ジグザグ」インジケーターを使用するのはあなたの最初の傾向です。それらはほとんどどこにでもあり、ユーザーはそれらが何を意味するかを直感的に理解するだろうと私は思います。

ただし、気づいたように、それらを使用する方法は、ユースケースでは適切ではありません。中央のマーカー（0-6000 [break] 8500-10000 [break] 130050-15000など）ではなく、各セクションに深度の範囲を設定し、チャートの幅全体にわたって「ジグザグ」を続けることをお勧めします。