web-dev-qa-db-fra.com

affichage des plages de valeurs acceptables

J'ai besoin d'afficher des informations relatives aux paramètres environnementaux de la pièce tels que la température, l'humidité, etc.

Par exemple, les champs de température sont:

  • La température ambiante réelle.
  • Le point de consigne du thermostat de température ambiante.
  • La consigne de température ambiante souhaitée. Sera idéalement le même que le point de consigne du thermostat de température ambiante, mais pourrait être différent si vous avez oublié de changer votre thermostat. Peut-être qu'au lieu d'afficher, affichez simplement une indication si elle est différente du point de consigne du thermostat?
  • La température d'alarme d'alarme élevée (c.-à-d. Si la pièce atteint cette température, envoyer une alarme d'avertissement).
  • La température d'alarme d'alarme basse.
  • La température d'alarme critique élevée.
  • La température d'alarme critique basse.

Comment ces informations devraient-elles être présentées de manière intuitive en utilisant un minimum d'espace sur l'écran? Notez que je ne demande PAS une conception, mais des aspects tels que la façon de communiquer les alarmes hautes/basses, etc.

1
user1032531

L'approche est très différente pour différents scénarios:

  • Qui sont vos utilisateurs? S'agit-il de personnes âgées ayant des problèmes de vue?
  • Quelle est son application prévue? Usage industriel ou usage domestique?
  • Quelle plateforme hébergera cet affichage? Petit monochrome LCD écran, écran d'ordinateur, TV, smartphone, tablette?
  • Avez-vous des restrictions d'espace? Quelle est la résolution d'écran (typique)? Avez-vous une contrainte?
  • S'agit-il d'un écran passif ou les utilisateurs devront interagir avec lui d'une manière ou d'une autre? Si oui, comment? Souris? Écran tactile?

Meilleur universel l'approche n'existe pas. Vous devrez trouver un compromis en fonction de votre cas spécifique.

Jetons d'abord un coup d'œil à une preuve de concept pour une approche classique de ce type d'écrans (ce que vous pouvez voir, par exemple, dans un tableau de bord de surveillance de centrale électrique):

Classic approach 1

Notez que:

  1. Ici, je montre une disposition verticale, mais cela fonctionne également avec une disposition horizontale. Lequel dépend des contraintes d'espace et de la résolution de l'écran. Si possible, je garderais la disposition verticale parce qu'il est plus facile - à première vue - de comprendre haut/bas alors qu'une disposition horizontale est plus affectée par des considérations liées à la culture.
  2. J'utilise seulement deux couleurs: le noir pour les informations principales (température actuelle) et le gris pour tout le reste. Vous pouvez ajouter des couleurs (soigneusement choisies) par-dessus, mais ne vous fiez pas uniquement à la couleur pour transporter des informations utiles. Plus d'informations à ce sujet plus tard. Notez que les tailles et les couleurs dépendent de votre scénario spécifique (voir les questions précédentes), c'est pourquoi ce n'est qu'une preuve de concept.
  3. J'ai une convention: des marqueurs pour les déclencheurs à gauche et la sélection des utilisateurs à droite. En raison de leur nombre et de leur positionnement, vous n'avez pas besoin de faire la différence entre avertissement/alerte, seuil haut/bas et température souhaitée. C'est évident, vous économisez de l'espace et vous n'ajoutez pas bruit.
  4. Vous voudrez peut-être afficher la température du thermostat et la température ambiante souhaitée, j'ai simplement ajouté du texte pour montrer que c'est différent (si vous avez besoin de plus, je suggère de déclencher un avertissement).
  5. Je ne répète pas l'unité de température (° C dans ce cas), elle est clairement visible une fois et évidemment tous les autres chiffres ont la même unité.
  6. Je ne l'ai pas fait dans cette maquette, mais vous voudrez peut-être afficher la température souhaitée sous la température réelle (avec une police légèrement plus petite et une couleur muette). Avec cette approche, vous pouvez omettre un indicateur (simplifiant la disposition).

Voyons quelques détails ouverts. Le marqueur de température actuel peut être différent et être coloré pour mettre en évidence les avertissements et les alertes (mais ce n'est pas le but de votre question):

Current temperature indicator - detail


Tout cela dit ... Je dois poser une autre question. Devez-vous afficher tous ces détails sur le même écran? Vos utilisateurs en ont-ils besoin? S'il s'agit d'un thermostat domestique, je doute qu'ils aient besoin (et qu'ils veulent) de tant d'informations.

Si vous pouvez simplifier, vous pouvez arriver à l'un de ces deux:

Compact approach

Vous pouvez lire les plages de gauche à droite de haut en bas: avertissement supérieur, alerte supérieure, avertissement inférieur, alerte inférieure (notez que les seuils supérieurs sont en haut). Vous pouvez également lire les plages de haut en bas à gauche à droite: avertissement supérieur, avertissement inférieur, alerte supérieure, alerte inférieure (les avertissements sont à gauche et les erreurs à droite). Il doit s'agir d'un modèle conceptuel simple à comprendre même sans instructions (car les chiffres sont explicites).

Notez à nouveau que je n'utilise pas la couleur et la taille du texte, la position et la luminosité différencient les valeurs présentées. La disposition (dans le deuxième exemple) peut varier en fonction de considérations liées à la culture. Les avertissements peuvent être simplement surlignés en clignotant et en utilisant l'inverse:

Compact approach with warning

Différentes dispositions sont possibles (y compris également des icônes informatives):

Compact approach with different layout

Lorsque la température souhaitée et actuelle est la même, vous pouvez simplement omettre la deuxième ligne de texte.


Quelle approche est la meilleure? Le premier présente de nombreux inconvénients, par exemple, il véhicule de nombreuses données et utilise beaucoup d'espace. Cependant, cela vous donne à première vue une indication claire de où vous êtes et où vous allez (et il peut accueillir encore plus de données). La deuxième approche est plus compacte et convient mieux aux basses résolutions LCD (abandonnant le texte gris au profit d'une approche monochrome).

L'autre point est où/comment l'alarme doit rester. Si ce n'est pas absolument nécessaire, je les garderais hors de vue (à moins qu'une alarme ne soit effectivement déclenchée, premier exemple en deuxième approche) ...

1
Adriano Repetti