Percentage Indicator Strip - which visual representation is more effective?

At the bottom of the image where we have Class H, which of the following percentage indicators represents more clearly the value of 29%?

The Line or the Dot?

Please do not think too much, do not evaluate, just look. First thoughts are more important.


Alternate options are always welcome.


My preference is the line.

#1. Definitely

Maybe I could have had this as a “blind” review? Otherwise the opinions of some (especially when rated highly) may skew the results.

Nevertheless, we move onwards and I absolutely appreciate everyones input - this is fun :slight_smile:

The main thing like I said, is stick to first impressions. I’m hoping to go up to at least 11 responses (because 11 is what my amplifier goes up to) then I’ll leave it at that and implement it as the final visual.

So at this point we have 3 for the line, zero for the dot.

Four for the line.

The dot is too small an indicator to be immediately obvious what the progress is. I don’t mean that it’s too hard to see, it has to do with your brain filling in the rest of the space. It takes extra time and becomes misleading.

Sometimes you should take your time and evaluate. Second opinions are a great resource, but never rush an interface!

me, too - the line for certain. that’s the first thought.

the dot simply looks like it could go back to the left. i would wonder though what the percentage is of? if the percentage is going to fluctuate, i might find the dot “friendly”, too.

+1 for the Line.

[quote=320103:@Dave Kondris]me, too - the line for certain. that’s the first thought.

the dot simply looks like it could go back to the left. i would wonder though what the percentage is of? if the percentage is going to fluctuate, i might find the dot “friendly”, too.[/quote]

The percentage will not fluctuate within that set of data. Meaning that if the resultant calculation is 29% as in this case, the dot (and line) will stay there. A different set of data may show the dot (or line) a 75% etc. if that is the calculated result.

The dot does not move across and back like showing amplitude of live music etc. if it did then I guess one could take a differing view.

Anyway, it’s 2am here Sunday night. Good thing we have a public holiday tomorrow :slight_smile:

Thanks all for your participation, much appreciated - I think I know where this is heading.


Normally these sorts of ‘visual’ things are subjective and not necessarily right or wrong. That seems not so in this case - it’s pretty much definitive.

The Blue Line version was also my first method of how to represent this. Nothing new, as this type of indicator is used widely.

The reason I created the “dot” method was because of my television. I noticed when looking at the programme schedule it shows “progress” of current programmes, which looks almost exactly the same as what I came up with.

But is it a “progress” indicator or a “range” indicator?

The reality is that it’s more so of a “range” indicator. But to show that effectively is more complicated and would confuse the user - and with no gain anyway.

I’m hesitant to mark this post as solved but Tim’s post sums it up nicely.

Thanks to all. Cheers.

Design isn’t as subjective as one might think. Studies are done to learn how humans are affected visually. It’s why we know that colors affect people in certain ways; such as green meaning fresh, or purple meaning royal. The same kind of thing goes into interface design. Some things work better for certain reasons.

Good interface designers actually know the best ways to convey meaning through interface in sometimes really subtle ways. I’ll admit I’m not as knowledgeable as the guys Apple and Microsoft hire for interfaces, but I do know some things!

If you need help conveying something that you’re not quite sure how to, ask an interface designer! They’ll likely have to charge you for it (it is their business.)

IMHO this is more a matter of what you’re saying to the user.

The dot says “This is where you are”, the bar says “This is what you’ve accomplished”. A range indicator would be a bar that could slide inside its parent bar and says “This start here, ends there and have this width”. We use this kind of indicator with audio EQ knob to represents the bandwidth (the ‘Q’) of a filter.

Now think about the YouTube movie progress bar. It says both in the same control. It also says how many data it has in memory after where you are.
It all depends on what you want to say to your user. The beauty of it is that you can combine several indications to construct (not to much) complex “sentences”.

[quote=320437:@Eric de La Rochette]IMHO this is more a matter of what you’re saying to the user.

The dot says “This is where you are”, the bar says “This is what you’ve accomplished”.[/quote]
I love this! This is exactly the kind of thought that should go into the design of your interface.

If I had known from the first post that it was a range and not progress, I may have had different thoughts. It’s hard to comment on what will work best without knowing more about the app and what you’re trying to convey to the user.


line too.


line. the dot seems like it is intended to adjust something by dragging.

Line for percentage, the dot is akin to a bubble in a spirit level indicating a position in a range with possibly the width being a margin of error.

Ok. Thanks and much appreciated for everyone’s input. This exercise has made me think a lot more about the UI than I ever have.

Yes, the dot does look like you can drag/adjust/move it like a slider. That is wrong. It should look like an “indicator” of a result, as in static. The dot idea is now dead.

There is some clarification required. The Total Impulse number that is shown is the most important value - there is no requirement to actually “show” what that means in a graphic way because users of this software will/should already know. Nevertheless much better if the value can be shown graphically as well.

The Total Impulse classification of “H” is set within a standard defined value range. You can read it here if you wish:

For this test we have:
H = Total Impulse between 160 to 320
I = Total Impulse between 320 to 640
and so on…

This test shows a total impulse of 206.08, which is within the range of “H” in fact 29% of the full range of H.

I had a discussion with my “Interface Designer”. After three bottles of scotch, and a rather heated discussion, this is what we came up with:

The “Ideal” version is, well, the ideal:

  • The value of Total Impulse is easily read by the initial text
  • The range between H - I, can be easily understood
  • The “Classification” text and graphic underneath re-enforces it
  • The blue graduation/vignette shows the “strength” up the range
  • The dark red bubble quote box above (not sure of the terminology) actually shows the classification and percentage exactly

The Compromise

  • The value of Total Impulse is easily read by the initial text
  • The % symbol is dropped
  • Less elements means easy to understand
  • Removing the rounded end (RH side) makes it look cut-off/finished
  • Easer to implement with coding
  • Finish software quicker

There is always version 2.0 to implement any changes. I do tend to get caught up with “wanting to make it better” Easy to waste time that way.

So now the question becomes: the Ideal or the compromise ?


Steve, stop fiddling about adding “Fairy Dust” and just get on with the “real” job of coding! :slight_smile:

How many model rockets can a developer launch in the time it takes to design one interface element?

I can’t vote because not being a model rocket aficionado I’m unsure if the compromise would be obvious to me. The ideal is busy but makes it cleat that the total impulse is 29% in the range from H to I. At least to me.

You may want to get a focus group of model rocketeers to give feedback.

I like that Peter, very funny but true. Probably 100+ launches I would say.

You are correct. The “class” of that test motor is H with a “strength” value of 29%. 100% is the best you’ll get from H then it would slip over into I. It’s a bit of a odd scale (not of my making) It’s a standard that’s been around for some time and has to be adhered to. Each Alpha letter doubles the last in total impulse. Therefore it’s important to show the percentage.

I do have a “focus group” of model rocketeers, and have recently posted the same image and asked the same questions. At this stage all have agreed that the “Ideal” is better.

I was a bit surprised. You would think that model rocketeers would only need a simple H29, but it seems like the “Ideal” version offers clarity to even the more seasoned rocketeers.

Unfortunately for me, it means creating the code. The above two images were mock-ups only. I’m sure I’ll get there but it now becomes a distraction, although seemingly a necessary one.