web-dev-qa-db-ja.com

進捗状況の0%を表示する方法は?

アプリケーションのユーザーに1日に5つの演習を実行してほしい。 0、1、2、3、4または5の現在の進行状況を示すGUI要素が欲しいのですが、5つの正方形が水平に配置された進行状況バーのビルドや、 5つのくさび付きの円グラフ。問題は、進行状況が0%のとき、この比喩がどれも明白ではないように見えることです。言い換えると、同じ色の5つのウェッジが表示される場合、値が0%か100%か、それともプログレスバーであるかは明らかではありません。

バッテリーが切れていることを表示する必要がある場合、携帯電話にも同様の問題があることに気付きました。この場合、AFAIK iPhoneは1%を示し、Windows Phoneはバッテリー内にハートマークを示します。また、バッテリーが放電して充電を開始すると、私のAndroidはアニメーションを表示し、Windowsはバッテリーの下部に細い赤い線を表示します(1%トリックのようなもの) 。

したがって、おそらく「完了」と「todo」の領域の違いを明確にするために、0%を1%として表示するのは良い考えでしょうか。

また、数字やテキストを使用するという最も明白な解決策も検討しました。しかし、もう一度、数字の代わりにプログレスバーを使用する理由はありますか?あると思います。

19
qbolec

ここには3つのオプションがあります。

最初のサンプルでは、​​タスクが完了すると満たされる「ボイド」を持つ2つの状態があります

2番目のサンプルは、タスクに量のシーケンス(x完了したタスクの量)で番号が付けられ、順序が重要でない場合に役立ちます。

最後に、最も簡単で明確なオプションは、進行状況を示す多数のオプションです。ストレートかつ要点。私はあなたがやっていることに多少関係のあるものを構築しましたが、これは0の問題が報告されたときに使用したものです。0はゼロであり、どのように伸ばしたいかに関係なく、それ以外のものにはなり得ません。 、混乱する余地はありません。そして明らかに、あなたは円を塗りつぶすことができ、簡単な例をあざけるだけです

enter image description here

26
Devin

開始

興味深い質問です。何ができるか見てみましょう。

彼らに考えさせてはいけない

ここでは、方程式から色を取り除き、立体形状について考えてみましょう。 5つのセクションをなんとか区別するためにゲシュタルトプリンシパルを使用できます。セクションが概説されている場合、それは「空」です。何かが空の場合、通常、それは完了していないと見なします。色や柄などでいっぱいの場合は、「いっぱい」または「完成」と見なします。

つまり、どちらの方法でも、スマートフォンの内部では、バッテリーの無地部分が失われ始めます。ソリッドとアウトラインの比率は、それがどれだけ空であるかを私たちに知らせます。

グラフを使用しない

何故なの?まあチャートは全体の一部を示しています。それらの「活動」を「全体」と見なすことができると思いますが、通常、データと統計はチャートとグラフで表示されます。ユーザーが1日に行ったアクティビティの量を示している場合、ユーザーがグラフの「意味」を短時間で理解するのはより困難になる場合があります。

プログレスバー! ...?

あなたは「数字の代わりにプログレスバーを使う理由はありますか?あると思います」と言います。

だからあなたへの私の質問は、なぜですか?

あなたの状況では、どのようなメリットがありますか?

私の提案は、人々が読むことを嫌いであり、私は読書に数字を含めることです。 「2」を読み取ると、「5から」、「2/5」、または何かを読み取って比率を示す必要があります。

プログレスバーは視覚的に表示されるので、適切に実行されれば、精神的な理解が減ると思います。


幸運を! :)

7
AzKai

非常に有効な質問とUXチャレンジ

デバイスの製造元がバッテリーインジケーターに対して行ったような回避策でしか機能しないと思います。個人的には、あなたの場合、以下のようにプログレスバーとテキストを操作できると思います:

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

5
Ades

それは、ユーザーに採用してほしい行動と、ユーザーが達成したい目標やタスクにこれらの演習がどのように関係しているかに本当に依存すると思います。

あなたが説明したことから、5つの演習はやるべきことのチェックリストのように見え、特定の順序で実行する必要はないので、プログレスバーのメタファーが機能していないように見えます行動と一致させる(つまり、ある日1を実行し、次の2を実行した場合、タスクを完了することはありません)。 「xから5つの演習が完了しました」というラベルを付けるだけの方が簡単で、問題は解決しました。

しかし、ユーザーを最終目標に追い込み、これに一致する動作を作成したいようです。次に、実際に行う必要があるのは、個々の日をメインディスプレイとして使用し(おそらく、週次または月次のカレンダーを使用)、1日あたり1つまたは2つではなく、5つの演習を完了することに関連する利点を示すことです。したがって、カレンダーで、すべての演習が完了している場合はチェックマークを1つ、5つすべてが完了していない場合は別のインジケーターを提供できます(したがって、1または2または4だけを行うことを考えていません)。

2
Michael Lai

グラフィックの例では、塗りつぶされたグラフィックの色あせた(10〜20%の透明度など)バージョンはsomethingがそこに属していることを示していますが、完全ではありません。各アクティビティが完了すると、シェイプの多くが塗りつぶされます。 0%が完了したときは明らかです。

これには、完全性への欲求を果たすという利点もあります。 (そのため、多くのプログレスバーに「進捗状況が未完了」のアウトラインまたは影付きの領域があります

1
Voxwoman