I just built a chrome extension for my college. It helps students know their total marks and % without manually adding their marks. The user doesn't interact with the popup. He only watches the result displayed.

Here is how the popup looks when opened (I captured the whole screen):

enter image description here

The closeup of popup when opened is :

enter image description here

I've got a few questions on its UI:

1) How should I display the output.Should I put it as

 Total : 524/725

 Percentage : 72.2%

or just



Should I use caps or non-caps for the words(total and percentage) if at all I use them. And Oh, should I use "%" (symbol) or "percentage"??

2) I have no Idea whatsoever to put over in my popup. Any suggestions on what to put apart from the main output.Like facebook share, G+, Twitter, about us, support website, logo etc.

3) What colour do u suggest? for background or text or any other thing?

I might use anything, but I'd love to take advice from experienced folks like you, which would better the User's experience.

After all an average user might not care about whether I used JSON objects in parameter passing or not, but he'll care about the UI.

I've built the extension at that time itself. Dropped here after two years to make this edit.

It makes use of the third suggestion by @Derek S; except the [X] button, a different font, and minor variations in colour.

You can check out the extension here.

1 Answer 1


This is how I would try and do it..

Example 1

I would also color code the numbers so that if you have a good mark it's green, but if you aren't doing so well then it would be orange like this...

Example 2

You could just do something in your code like

if (PERCENTAGE <= 30) {
if (PERCENTAGE > 30 || PERCENTAGE < 50) {
else {

EDIT: I would also add a [X] box in the bottom right of the popup. Make it stay forever on the page until the user presses the [X] button.

Also depending on the importance of your content you may find that the percentages are more important and you could do something like this...

enter image description here

  • 1
    Just a note on color: green does not necessarily equal good, nor does any other color equal a certain level/state/mood. I like the color coding, but be sure to pick an appropriate one for your audience. Commented Mar 26, 2014 at 23:03
  • @Derek S really loving it. I can't wait to implement it. Thanks a ton buddy! Awesome stuff!!
    – nikhil
    Commented Mar 27, 2014 at 10:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.