web-dev-qa-db-fra.com

Conception de l'interface utilisateur d'une popup de l'extension chrome

Je viens de construire une extension chrome pour mon collège. Elle aide les étudiants à connaître leurs notes totales et% sans ajouter manuellement leurs notes. L'utilisateur n'interagit pas avec le popup. Il ne regarde que le résultat affiché .

Voici à quoi ressemble la fenêtre lorsqu'elle est ouverte (j'ai capturé tout l'écran):

enter image description here

Le gros plan du popup lorsqu'il est ouvert est:

enter image description here

J'ai quelques questions sur son interface utilisateur:

1) Comment dois-je afficher la sortie.

 Total : 524/725

 Percentage : 72.2%

ou juste

524/725

72,2%

Dois-je utiliser des majuscules ou des non-majuscules pour les mots (total et pourcentage) si je les utilise? Et Oh, dois-je utiliser "%" (symbole) ou "pourcentage" ??

2) Je n'ai aucune idée à mettre dans ma popup. Toutes les suggestions sur ce qu'il faut mettre à part la sortie principale.Comme le partage Facebook, G +, Twitter, à propos de nous, le site Web d'assistance, le logo, etc.

3) Quelle couleur suggérez-vous? pour le fond ou le texte ou toute autre chose?

Je pourrais utiliser n'importe quoi, mais j'adorerais prendre conseil auprès de personnes expérimentées comme vous, ce qui améliorerait l'expérience de l'utilisateur.

Après tout, un utilisateur moyen peut ne pas se soucier de savoir si j'ai utilisé des objets JSON dans le passage de paramètres ou non, mais il se souciera de l'interface utilisateur.

Modifier:
J'ai construit l'extension à ce moment-là. Lâché ici après deux ans pour effectuer cette modification.

Il utilise la troisième suggestion de @Derek S; sauf le bouton [X], une police différente et des variations mineures de couleur.

Vous pouvez consulter l'extension ici .

website-designusabilitygui-designweb-appcolor
3
nikhil

Voilà comment j'essaierais de le faire ..

Example 1

Je coderais également les chiffres en couleur afin que si vous avez une bonne marque, c'est vert, mais si vous ne vous en sortez pas si bien, ce serait orange comme ça ...

Example 2

Vous pouvez simplement faire quelque chose dans votre code comme

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

EDIT: J'ajouterais également une case [X] en bas à droite de la popup. Faites-le rester indéfiniment sur la page jusqu'à ce que l'utilisateur appuie sur le bouton [X].

En fonction de l'importance de votre contenu, vous constaterez peut-être que les pourcentages sont plus importants et vous pourriez faire quelque chose comme ça ...

enter image description here

11
Derek