20

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.

Current Axis

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.

Zigzag Scale Axis Not to Scale

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.

Tabs- Schematic and 3D

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.

Western Canadian Towns

My Question

Are there any other ways to make this more clear?

  • 1
    If you come to think of it, it's more of an engineering discussion that a UX one. Scaling is an integral part of the entire drilling and production process. In fact, there's an entire branch dedicated to measurement and scaling of various properties in an oil well - en.wikipedia.org/wiki/Well_logging – Adit Gupta Aug 25 '15 at 19:02
  • My question could apply to any diagram that uses numbers as evenly spaced "categories" instead of on a continuous axis. Ignoring the fact that you'd prefer to see a continuous, to-scale axis in this particular case, are there better ways to make it clear to users that a diagram is not to scale?. – sgryzko Aug 25 '15 at 19:41
  • 5
    You state that 'zig-zags' (which, btw, are called break points) would clutter things up because you use them everywhere would lead me to the conclusion that a linear graph is simply the wrong tool to be using in the first place. – DA01 Aug 25 '15 at 21:51
  • But, beyond that, I'd ask, what is the problem you are trying to solve here. I understand the scale issue, but what's the larger problem. What, specifically, are you trying to communicate to the end-user? Are the specific numbers what's important? The order they come in? Both? Neither? – DA01 Aug 25 '15 at 21:53
  • 1
    @sgryzko ah! That's some good info. If order is the key, I'd say focus on that. Look at things like the London Tube Map where scale is thrown out the window in exchange for clarity of order. Then, instead of the numbers, I'd simply state "not to scale" clearly. The numbers perhaps are adding more clutter than helping. – DA01 Aug 25 '15 at 22:51
21

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.

mini map pattern

  • 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:

mini-mapp design

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.

  • 1
    hard to argue with the final beautiful graphic there! i note that importantly it's actaully oriented vertically ... like a hole in the ground. Erik has a similar beautiful unaligned-chart-pair above but it's horizontal. Once I saw this one I realised how advantageous it is to make it vertical-like-a-drill-hole. – Fattie Aug 26 '15 at 14:21
  • I like the two panels idea and I'll probably use it at least partially, but what I failed to indicate in my question is that some equipment has a length (ex. tubing within the well) and it's important to represent how these items fit together, so icons at each important depth don't quite work. This would be a whole lot easier for everyone if my schematic weren't confidential. – sgryzko Aug 26 '15 at 17:31
  • 1
    @sgryzko yes that detail would have been helpful....a design is only as good as the problem specification! You can use the same principles to incorporate equipment length also. I would do this to scale if possible. One approach is here: i.imgur.com/f86QaY8.png – tohster Aug 26 '15 at 20:52
  • Really loving your clarity here @tohster. Do you know how this pattern translates to right-to-left cultures? Is simply reversing the layout appropriate. – Gusdor Aug 27 '15 at 14:13
  • My intent was for the charts to be vertical, but was too busy to come up with a proper graphic--I borrowed an existing one. – ErikE Aug 27 '15 at 15:30
37

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).

    With axis removed

  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.

    town names with axis and diagonals

  • I like this answer. No need for an axis if it's not for scale. – DrewJordan Aug 25 '15 at 20:33
  • I can't quite picture what you mean by #1. Your #2 has really got me thinking though. Thanks! – sgryzko Aug 25 '15 at 20:34
  • See my edit for #2. Is that what you meant? – sgryzko Aug 25 '15 at 20:44
  • @sgryzko Yes, that is what I meant by #2 (though vertical, of course, and having the actual depths of each item notated with it inside the same box. #1 is like getting rid of the axis entirely and just showing the blocks or boxes, similar to the drill mud diagram in Adit Gupta's answer. – ErikE Aug 25 '15 at 22:07
  • 1
    @sgryzko I updated my answer with images that are closer to what I was imagining. I hope this helps. – ErikE Aug 26 '15 at 16:12
21

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.

enter image description here

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.

enter image description here

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.

  • Thanks for the answer. I'm not sure if it helps though.I'd consider your example 1 to scale and your example 2 not to scale. My question was about making not to scale diagrams clear. It looks like in example 2, they use the "zigzag" indicators that I mentioned, but not consistently. I'd imagine that my users would be just as confused by your example 2 as my current design. – sgryzko Aug 25 '15 at 18:21
  • Ok..I'll reiterate it. In example 1, there are 2 scales - one with regular intervals and another specific to the casing. So, the point is that you provide a regular interval scale along with a non-regular scale for giving complete view to the engineer. Also, in example 2, there's no zig zag scale. They have precisely specified the location. – Adit Gupta Aug 25 '15 at 18:24
  • It doesn't really apply to my question, because I'm wondering about not to scale diagrams, but in Example 1, why is the "normal scale" with equal intervals necessary? It seems like noise because all the important depths are also shown as labels. Also, what do you mean by "there can be no scale interval assumptions"? – sgryzko Aug 25 '15 at 18:27
  • 1
    Well, as any problem, I was trying to answer for the given context :) 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. – Adit Gupta Aug 25 '15 at 19:57
  • 4
    This is the right answer, I make maps for a living and the zig-zag pattern is pretty well understood as meaning that the drawing is omitting a piece in the middle when used for a linear feature like this. I usually use one with less sharp angles though, more like 2 tildes stacked on top of each other. I usually write out "Not to Scale" rather than using "NTS" just because the average reader may not know the acronym. – Dan C Aug 25 '15 at 20:11
14

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.

  • Thanks for the answer but there's a lot of value in seeing visually how things hang together instead of having to parse a table. I may implement a table in addition to the schematic (for bulk operations and quick data entry) but not instead of the schematic. – sgryzko Aug 26 '15 at 17:20
1

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.

  • So to-scale but broken up? This could work but I'm currently only looking for a solution to add to the current not-to-scale diagram as opposed to changing it to a to-scale diagram. – sgryzko Aug 25 '15 at 20:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.