Comment indiquer que quelque chose n'est pas à l'échelle?
Contexte
Je développe une interface utilisateur pour afficher les équipements de production (pompes, chaînes de tubes, FCD, etc.) dans un puits de pétrole.
La plupart des puits de pétrole ont un équipement très inégalement espacé. Par exemple, il peut y avoir quelques milliers de mètres sans rien, puis une douzaine d'articles environ, puis un peu plus d'espace, puis quelques autres articles, etc.
Pour le schéma, j'utilise Profondeur mesurée (MD) , qui est différent de Profondeur verticale vraie (TVD) sauf si le puits est parfaitement vertical. J'indique le TVD ailleurs dans l'interface.
Solution actuelle
Ma solution est d'afficher un schéma "écrasé", où chaque profondeur distincte obtient sa propre ligne dans le schéma. J'ai supprimé le schéma réel pour des raisons de confidentialité, mais il se trouve juste à droite de l'échelle et affiche des icônes pour tous les équipements.
Le problème
Malheureusement, cela a dérouté quelques personnes dans les tests d'utilisabilité. En outre, le contrôle qualité l'a enregistré en tant que bogue (mise à l'échelle des axes incohérente). J'aimerais vraiment conserver cette représentation non à l'échelle car elle utilise très efficacement l'espace d'écran et parce que nous prévoyons également de développer une vue à l'échelle distincte.
Idées possibles
Je pourrais mettre des indicateurs de type zigzag pour montrer où l'axe est "cassé", mais techniquement l'axe est cassé partout, donc ça n'a pas l'air génial.
Je pourrais aussi l'épeler tout en haut (PAS À L'ÉCHELLE), mais cela semble bizarre.
Ou peut-être que je ne devrais pas trop m'inquiéter à ce sujet jusqu'à ce que nous implémentions notre vue séparée à l'échelle, car cela aidera à le rendre plus évident.
Un autre exemple
J'avais l'habitude de traverser l'Ouest canadien en voiture chaque été avec ma famille. Il y a de longs tronçons avec pratiquement rien. Pour aider à passer le temps, ma mère dressait des listes des noms de villes drôles que nous traversions (Piapot, Regina, Moosomin, etc.). Si je voulais montrer ces villes sur un diagramme, cela pourrait ressembler à ceci.
Ma question
Y a-t-il d'autres façons de rendre cela plus clair?
Commencez par déterminer ce que vous voulez communiquer
Puisque vous cherchez (à juste titre) un moyen raisonné et non hacky de le présenter, vous pouvez commencer par les premiers principes.
1. Comprendre le modèle de mise en page
- La disposition que vous essayez d'utiliser est courante .... Je l'appelle le modèle de mini-carte ou de navigateur bien qu'il y ait probablement plus terme UX correct pour cela.
- La disposition de base du panneau est judicieuse et est utilisée par les magazines, les sites Web, les brochures et de nombreuses autres dispositions de contenu. Vous avez une colonne de gauche avec une vue "à vol d'oiseau" du contenu et une colonne de droite avec une vue détaillée. Il s'agit d'une bonne présentation générale pour plusieurs raisons:
- La mise en page offre une vue hiérarchique du contenu complexe.
- Placer la colonne mini-carte à gauche et les détails à droite fournir une bonne organisation visuelle et un bon flux puisque les utilisateurs (dans les langues LTR) sont habitués à traiter le contenu de haut en bas, de gauche à droite .
- L'orientation verticale des colonnes offre à l'utilisateur une numérisation dans l'une ou l'autre colonne, selon le niveau de détail recherché par l'utilisateur. Pour les pages Web, la disposition verticale permet au contenu d'être arbitrairement long, car la page peut être défilée vers le bas.
2. Organisez votre contenu
- Armé de la compréhension du modèle, vous pouvez désormais organiser votre contenu.
Le but de la mini-carte est de fournir à l'utilisateur une orientation sur l'organisation de votre contenu (dans votre cas, la profondeur et l'équipement) . Dans votre cas, l'équipement est ordonné par profondeur, alors essayons de créer une mini-carte qui utilise une échelle correcte pour communiquer cette orientation efficacement.
- Vous avez reçu des commentaires négatifs sur votre axe non linéaire pour une bonne raison ... c'est parce que votre disposition existante viole ce que les utilisateurs attendent d'une vue navigateur/mini-carte.
Pour le panneau de détails sur la droite, l'équipement est indexé par la profondeur , donc votre choix de police et de mise en page devrait rendre cette commande claire pour les utilisateurs.
Maintenant, il ne reste plus qu'à connecter visuellement le panneau gauche au panneau droit, afin que les utilisateurs voient clairement les relations.
3. Ensuite, créez le design
Voici un exemple qui incorpore les principes énoncés ci-dessus:
Remarques:
La mini-carte est dessinée à l'échelle pour fournir une orientation et une communication claires des relations spatiales entre les niveaux de profondeur.
Colonne de détails disposée en utilisant un espacement vertical uniforme pour favoriser la lisibilité et la numérisation.
Utilisez une grande police orange pour les en-têtes de détail pour fournir 1. relation visuelle avec la mini-carte (orange); et 2. une communication claire de l'indexation des colonnes.
Utilisez des flèches de légende subtiles pour relier la mini-carte au panneau de détails: celles-ci devraient probablement être un contraste plus élevé pour les malvoyants, mais j'ai utilisé des lignes subtiles pour démontrer que si la mise en page est bien pensée, vous n'avez pas besoin de faire grand-chose pour relier du panneau gauche au panneau droit.
Notez que si le design est correctement communicatif, il n'y a à peine besoin d'un étiquetage supplémentaire: l'organisation de la signification du contenu est évidente pour l'utilisateur.
j'espère que cela pourra aider.
Vous pourriez:
Supprimez complètement la ligne d'axe. Si le diagramme n'est pas à l'échelle, alors la ligne d'axe elle-même est l'élément de confusion/confusion de l'UX qui provoque une perception défaillante. Utilisez des étiquettes simples attachées à des sections qui ne se distinguent que dans le sens d'une liste. Vous pouvez mettre un espace plus grand entre les éléments plus espacés, mais ce n'est pas nécessaire.
Voici un exemple d'image. Je sais que c'est horizontal, et j'essaierai de résoudre ce problème à un moment donné (veuillez imaginer que c'est vertical).
![With axis removed]()
Faites de l'axe vertical davantage une légende, avec des graduations horizontales indiquant les positions, mais sans chiffres (à l'exception peut-être des lignes principales globales telles que 1000, 2000, etc.). Ajoutez des lignes de légende diagonales qui mènent à des boîtes ou des sections montrant ce qui se trouve à chaque endroit, avec la profondeur dans le corps de la section. Pour les sections très serrées ou encombrées, utilisez un "cercle de zoom" ou un "carré de zoom".
Encore une fois, imaginez que l'axe est le long du côté gauche et que la disposition est verticale au lieu d'horizontale.
![town names with axis and diagonals]()
J'ai obtenu mon diplôme d'ingénieur pétrolier, alors je peux peut-être vous aider ici.
Il s'agit d'un problème spécifique au domaine et la bonne solution dépend du type d'équipement que vous utilisez dans le puits de pétrole. Permettez-moi de vous donner quelques exemples ici. C'est un peu technique mais je ferai de mon mieux pour l'expliquer clairement:
Exemple 1: Installation du boîtier
Vous faites bien le tubage avant de mettre vos autres équipements dans le puits. Considérez le diagramme suivant.
Deux échelles ont été spécifiées ici. L'une est l '"échelle normale" avec des intervalles égaux pour la profondeur tandis que l'autre indique la profondeur à laquelle divers boîtiers ont été installés. L'échelle normale indique la True Vertical Depth (TVD) et est une mesure importante dans le forage de puits de pétrole. -
Les ingénieurs pétroliers auront besoin des deux pour pouvoir les corréler facilement avec d'autres futures installations.
2. Diagramme de boue de forage
Dans le diagramme suivant, seule la profondeur spécifique a été spécifiée. C'est parce qu'il est essentiel de connaître la bonne profondeur pour les diagrammes de boue, sinon il peut y avoir une éruption et l'entreprise perdra le puits.
Suggestions:
Obtenez des informations plus détaillées sur les équipements. Il ne peut y avoir d'hypothèse d'intervalle d'échelle dans le processus de forage.
Il vaut mieux spécifier deux échelles. Il fournit à l'ingénieur à la fois des informations holistiques et spécifiques .
J'espère que cela t'aides! Faites-moi savoir si vous avez besoin de quelque chose de spécifique.
Edit: - Je vois que vous utilisez la profondeur mesurée (MD) dans les diagrammes. Pour la mise à l'échelle, il est préférable d'avoir un point de référence (généralement une table rotative), puis de mettre à l'échelle en conséquence. Voir quelques discussions techniques à ce sujet .
Edit 2 - Sur la base des requêtes soulevées par OP, je reproduis mon commentaire pour un accès facile.
La représentation de tout axe non à l'échelle est en fait mentionnée explicitement en écrivant NTS en haut. C'est une pratique standard. Ce n'est pas un hack mais une sorte de convention.
Les axes cassés ne sont utiles que s'ils sont destinés à être utilisés avec parcimonie.
Si, comme vous le dites, l'axe est cassé partout, il est plus logique d'utiliser un tableau à la place décrivant les points pertinents.
+-------+-----------+------+
| Depth | Structure | Icon |
+-------+-----------+------+
| 0 | Oil Rig | A |
| 6100 | Foo Pipe | F |
| 6200 | Bar Pipe | B |
| 8940 | Drill | D |
| 9000 | Drill Bit | DB |
+-------+-----------+------+
Si nécessaire, le graphique du puits peut être placé à côté de ce tableau, pour un effet identique (mais avec moins de confusion) que votre design d'origine.
Bien que je ne puisse pas produire de graphique, j'irais avec votre première inclinaison, pour utiliser les indicateurs "zig-zag". Ils sont à peu près partout et je pense que les utilisateurs comprendraient intuitivement ce qu'ils veulent dire.
Cependant, la façon dont vous les avez utilisés n'est pas excellente avec votre cas d'utilisation, comme vous l'avez remarqué. Je recommanderais d'avoir une plage de profondeur pour chaque section au lieu du marqueur du milieu (comme 0-6000 [break] 8500-10000 [break] 130050-15000) et de continuer le "zig zag" sur toute la largeur du graphique.