How to indicate that something isn't to scale?

Question

Background

I'm developing a UI for displaying production equipment (pumps, tubing strings, FCDs, etc.) in an oil well.

Most oil wells have equipment that is very unevenly spaced. For example, there might be a few thousand meters with nothing, then a dozen items or so, then some more space, then a few more items, etc.

For the schematic, I am using Measured Depth (MD), which is different from True Vertical Depth (TVD) unless the well is perfectly vertical. I indicate the TVD elsewhere in the interface.

Current Solution

My solution to this is to display a "squished" schematic, where each distinct depth gets its own row in the schematic. I've removed the actual schematic for confidentiality reasons but it is just to the right of the scale and shows icons for all of the equipment.

The Problem

Unfortunately, this has confused a few people in usability testing. Also, QA logged this as a bug (Inconsistent Axis Scaling). I'd really like to keep this not-to-scale representation because it uses the screen real estate very effectively and because we're also planning on developing a separate to-scale view.

Possible Ideas

I could put zigzag-type indicators to show where the axis is "broken", but technically the axis is broken everywhere, so it doesn't look great.

I could also just spell it out at the top (NOT TO SCALE), but that seems hacky.

Or maybe I shouldn't worry too much about this until we implement our separate to-scale view, because that'll help make it more obvious.

Another Example

I used to drive across Western Canada every summer with my family. There are long stretches with essentially nothing. To help pass the time, my mother would make lists of the funny town names we'd pass through (Piapot, Regina, Moosomin, etc.). If I wanted to show those towns on a diagram, it might look like this.

My Question

Are there any other ways to make this more clear?

Answer 1

Start by figuring out what you want to communicate

Since you are (rightly) looking for a reasoned, non-hacky way to lay this out, you can start with first principles.

1. Understand the layout pattern

• The layout you're trying to use is a common one....I call it the mini-map or navigator pattern although there is probably a more correct UX term for it.

• The basic panel layout is a sensible one and it's used by magazines, websites, brochures, and lots of other content layouts. You have a left column with a "birds-eye" view of content, and a right column with a detailed view. This is a good general layout for several reasons:
  • The layout provides a hierarchical view of complicated content.
  • Placing the mini-map column on the left and details on the right provide good visual organization and flow since users (in LTR languages) are accustomed to processing content top-to-bottom, left-to-right.
  • The vertical orientation of the columns provide user with scannability down either column, depending on the level of detail the user is looking for. For web pages, the vertical layout allows for content to be arbitrarily long, since the page can be scrolled down.

2. Organize your content

• Armed with the understanding of the pattern, you can now organize your content.

• The purpose of the mini-map is to provide the user with an orientation of how your content (in your case, depth and equipment) is organized. In your case, the equipment is ordered by depth, so let's try to create a mini-map that uses correct scale to communicate this orientation effectively.

  • You've gotten negative feedback on your non-linear axis for good reason....it's because your existing layout violates what users expect from a navigator/minimap view.

• For the details panel on the right, the equipment is indexed by depth, so your choice of font and layout should make that ordering clear for users.

• Now, all that remains is to connect the left panel to the right panel visually, so that users clearly see the relationships.

3. Then, create the design

Here is an example that incorporates the principles laid out above:

Notes:

• Mini-map is drawn to scale to provide clear orientation and communication of spatial relationship between depth levels.

• Details column laid out using even vertical spacing to promote readability and scannability.

• Use large, orange font for detail headers to provide 1. visual relationship with the (orange) mini-map; and 2. clear communciation of column indexing.

• Use subtle callout arrows to relate mini-map to details panel: these should probably be higher contrast for the visually impaired, but I used subtle lines to demonstrate that if the layout is well thought out, you don't have to do much to relate the left panel to the right panel.

• Note that if the design is properly communicative, there is barely a need for any extra labeling: the organization of meaning of the content is apparent to the user.

hope that helps.

Answer 2

You could:

1. Remove the axis line entirely. If the diagram is not to scale, then the axis line itself is the confounding/confusing element of the UX that is causing failed perception. Use simple labels attached to sections that are set off from each other only in the sense of a list. You could put a larger space between items that are spaced farther apart, but that is not necessary.

   Here is an example image. I know it's horizontal, and will try to fix that at some point (please imagine it is vertical).

   

2. Make the vertical axis more of a legend, with horizontal tick marks showing positions, but without numbers (except for perhaps overall major lines such as 1000, 2000, etc). Add diagonal callout lines that lead to boxes or sections showing whats in each spot, with the depth in the section body. For very tight or crowded sections use a "zoom circle" or "zoom square".

   Again, please imagine that the axis is along the left side and the layout is vertical instead of horizontal.

   

Answer 3

I have graduated as a Petroleum Engineer, so perhaps I can help you here.

This is a domain specific problem and the right solution depends on the kind of equipment you're using in the oil well. Let me give you a few examples here. It's slightly technical but I'll try my best to explain it clearly:

Example 1: Casing Installation

You do well casing before putting your other equipments into the well. Consider the following diagram.

Two scales have been specified here. One is the "normal scale" with equal intervals for depth while the other indicates the depth at which various casings have been installed. The normal scale indicates the True Vertical Depth (TVD) and is an important measure in oil well drilling. -

Petroleum Engineers will need both of them so that they can correlate it easily with other future installations.

2. Drill Mud Diagram

In the following diagram, only specific depth has been specified. That's because it's essential to know the correct depth for mud diagrams or else there can be a blowout and the company will lose the well.

Suggestions:

1. Get more detailed information about the equipments. There can be no scale interval assumptions in drilling process.

2. It's better to specify two scales. It gives both holistic and specific information to the engineer.

Hope this helps! Let me know if you need anything specific.

Edit: - I see that you're using Measured Depth (MD) in the diagrams. For scaling, it's better to have a reference point (usually rotary table) and then scale accordingly. See some technical discussion on this.

Edit 2 - Based on queries raised by OP, I'm reproducing my comment for easy access.

The representation of any not-to-scale axis is actually mentioned explicitly by writing NTS at the top. That's a standard practice. It's not a hack but a sort of convention.

Answer 4

Broken axes are only useful if they are intended to be used sparingly.

If, as you say, the axis is broken everywhere, it makes more sense to use a table instead describing the relevant points.

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

If necessary, the graphic of the well can be placed next to this table, for identical effect (but with less confusion) than your original design.

Answer 5

Although I can't produce a graphic, I'd go with your first inclination, to use the 'zig-zag' indicators. They're pretty much everywhere and I think users would intuitively understand what they mean.

However, the way you've used them isn't great with your use case, as you've noticed. I'd recommend having a range of depth for each section instead of the middle marker (like 0-6000 [break] 8500-10000 [break] 130050-15000) and continuing the 'zig zag' through the entire width of the chart.