web-dev-qa-db-ja.com

許容値の範囲を表示する

温度、湿度など、部屋の環境パラメータに関する情報を表示する必要があります。

たとえば、温度のフィールドは次のとおりです。

  • 実際の室温。
  • 室温サーモスタットの設定値。
  • 希望の室温設定値。理想的には室温サーモスタットの設定値と同じになりますが、サーモスタットを変更し忘れた場合は異なる場合があります。表示するのではなく、サーモスタットの設定値と異なる場合は表示するだけですか?
  • 高温警告アラーム温度(つまり、部屋がこの温度に上昇した場合、警告アラームを送信します)。
  • 低警告アラーム温度。
  • 高臨界アラーム温度。
  • 低臨界アラーム温度。

最小限の画面スペースを使用して、この情報をどのように直感的に表示する必要がありますか?私は設計を求めているのではなく、高/低アラームの伝達方法などの側面を要求していることに注意してください。

1
user1032531

アプローチはシナリオごとに大きく異なります。

  • ユーザーは誰ですか?彼らは視力に問題のある高齢者ですか?
  • その用途は何ですか?工業用か家庭用か?
  • このディスプレイをホストするプラットフォームはどれですか?小さなモノクロLCD画面、コンピュータ画面、テレビ、スマートフォン、タブレット?
  • スペース制限はありますか? (通常の)画面解像度とは何ですか?制約はありますか?
  • それはパッシブディスプレイですか、それともユーザーが何らかの方法で操作する必要がありますか?はいの場合、どのように?マウス?タッチスクリーン?

最高のユニバーサルアプローチは存在しません。特定のケースに応じて、妥協点を見つける必要があります。

最初に、この種のディスプレイ(たとえば、発電所監視ダッシュボードに表示されるもの)に対するclassicアプローチの概念実証を見てみましょう。

Classic approach 1

ご了承ください:

  1. ここでは垂直レイアウトを示していますが、水平レイアウトでも機能します。どちらがスペースの制約と画面解像度に依存します。可能であれば、水平レイアウトがmore文化関連の考慮事項の影響を受ける一方で、一見すると高/低を理解する方が簡単なので、垂直レイアウトを維持します。
  2. 私は2つの色のみを使用しています。主な情報(現在の温度)には黒、その他には灰色です。これに(慎重に選択された)色を追加できますが、有用な情報を伝えるために色だけに依存することはありません。これについては後で詳しく説明します。サイズと色は特定のシナリオ(前の質問を参照)に依存することに注意してください。これが概念の実証にすぎない理由です。
  3. 規約があります。左側にトリガーのマーカー、右側にユーザ​​ー選択があります。それらの数と配置により、警告/アラート、高/低しきい値、および必要な温度を区別する必要はありません。明らかに、スペースを節約し、noiseを追加しません。
  4. サーモスタットの温度と希望の室温を表示したい場合があります。それが異なることを示すテキストを追加しました(必要な場合は、警告をトリガーすることをお勧めします)。
  5. 私は温度の単位(この場合は°C)を繰り返していません。これは、一度はっきりと表示され、他のすべての数値は同じ単位です。
  6. 私はこのモックではそれをしませんでしたが、実際の温度の下で希望の温度を表示したい場合があります(フォントが少し小さく、色が落ち着いています)。このアプローチでは、インジケーターを省略できます(レイアウトを簡略化します)。

開いている詳細をいくつか見てみましょう。現在の温度マーカーは異なる場合があり、警告や警告を強調するために色を付けることができます(ただし、これは問題ではありません)。

Current temperature indicator - detail


以上のことすべて...もう1つ質問しなければなりません。 これらすべての詳細を同じディスプレイに表示する必要がありますか?ユーザーはそれを必要としますか?それが家庭用サーモスタットである場合、私は彼らがそれほど多くの情報を必要とする(そして彼らが望んでいる)とは疑います。

単純化できれば、次の2つのいずれかに到達できます。

Compact approach

範囲を左右上下で読み取ることができます:上限警告、上限警告、下限警告、下限警告(上限しきい値は上部にあります)。範囲を上から下、左から右に読むこともできます:上限警告、下限警告、上限警告、下限警告(警告は左側にあり、エラーは右側にあることに注意してください)。指示がなくても理解できるシンプルな概念モデルである必要があります(数値は自明です)。

繰り返しますが、色とテキストのサイズ、位置、および明るさを使用していないことに注意してください。配置(2番目の例)は、文化関連の考慮事項によって異なる場合があります。警告は単に点滅するテキストと反転を使用して強調表示されます:

Compact approach with warning

さまざまなレイアウトが可能です(情報アイコンを含めることもできます)。

Compact approach with different layout

必要に応じて現在の温度が同じ場合は、テキストの2行目を省略できます。


どちらのアプローチが優れていますか?最初の方法には多くの欠点があります。たとえば、多くのデータを伝達し、多くのスペースを使用します。ただし、一目でどこにいるのかどこにいるのかが明確にわかります(そして、さらにデータ)。 2番目のアプローチは、よりコンパクトで、低解像度のスイートに適していますLCD=ディスプレイ(モノクロのアプローチを優先して灰色のテキストを破棄します)。

もう1つのポイントは、アラームがとどまる場所/方法です。それが絶対に必要ではない場合、私はそれらを視界に入れないようにします(アラームが実際にオンになっている場合を除き、2番目のアプローチの最初の例)...

1
Adriano Repetti