web-dev-qa-db-ja.com

chrome拡張機能ポップアップのUIを設計する

chrome私の大学用の拡張機能を作成しました。これは、生徒が手動でマークを追加しなくても、合計マークと％を知るのに役立ちます。ユーザーはポップアップを操作しません。表示された結果のみを監視します。

これは、開いたときのポップアップの外観です（私は画面全体をキャプチャしました）：

enter image description here

開いたときのポップアップのクローズアップは：

enter image description here

UIについていくつか質問があります。

1）出力をどのように表示する必要がありますか？

 Total : 524/725

 Percentage : 72.2%

orちょうど

524/725

72.2％

単語（合計とパーセンテージ）にキャップまたは非キャップを使用する必要がある場合は、使用する必要があります。そして、ああ、 "％"（記号）または "パーセント"を使用する必要がありますか？

2）私は自分のポップアップに入れるべきアイデアがまったくありません。メイン出力とは別に何を配置するかについての提案。Facebookの共有、G +、Twitterなど、私たちについて、サポートWebサイト、ロゴなど。

3）どの色を提案しますか？背景やテキスト、その他の何かのために？

私は何を使用してもかまいませんが、ユーザーのエクスペリエンスを向上させるために、あなたのような経験豊富な人々からアドバイスをもらいたいです。

結局のところ、平均的なユーザーは、パラメーターの受け渡しでJSONオブジェクトを使用したかどうかは気にしないかもしれませんが、UIは気にするでしょう

編集：
私はその時に拡張機能自体をビルドしました。この編集を行うために2年後にここにドロップしました。

@Derek Sによる3番目の提案を利用しています。 [X]ボタン、別のフォント、色のマイナーなバリエーションを除いて。

拡張子 here を確認してください。

website-designusabilitygui-designweb-appcolor
3
nikhil

これが私が試してみることです。

Example 1

また、数字を色分けして、良いマークがある場合は緑色になるようにしますが、うまくいかない場合は、このようにオレンジ色になります...

Example 2

あなたはちょうどあなたのコードで何かをすることができます

if (PERCENTAGE <= 30) {
makeColorOrange();
}
if (PERCENTAGE > 30 || PERCENTAGE < 50) {
makeColorYellow();
}
else {
makeColorGreen();
}

編集：ポップアップの右下に[X]ボックスも追加します。ユーザーが[X]ボタンを押すまで、ページ上に永遠に留まるようにします。

また、コンテンツの重要性によっては、パーセンテージの方がより重要で、次のようなことができる場合があります...

enter image description here

11
Derek