I have this administrator section in my online Internet Service Provider management system where he can insert new Internet plans, edit and visualize existing ones.

Here is a simple example using Bootstrap and Angular: http://jsfiddle.net/9mnwcdLc/3/

I need to find a way to highlight plans by their upload/download speed which might be in kB/s, MB/s and GB/s. How should I differentiate them, both on the upload and the download columns, based on the fact that they might be using kB/s or MB/s or GB/s?

Thank you.

  • What is the purpose/goal of the highlight?
    – SteveD
    Commented Apr 27, 2016 at 15:22
  • Making the table easier/faster to read, having all these different units and speeds without proper highlighting looks a bit odd to me . Commented Apr 27, 2016 at 16:53
  • Welcome to the site, @MagisterMundus. Are there severe space constraints? What's the purpose of listing the speeds in different units (as opposed to just listing them all in kB/s)? Commented Apr 27, 2016 at 18:07
  • No, no space contraints so far. The purpose to me is to not have anything above 1000, for example 11.500kB looks worse to me when compared to 11.5MB. What is your opinion? Commented Apr 27, 2016 at 18:21
  • I find converting to the same unit so much easier to understand. Here's a related question you might find helpful
    – kerr
    Commented Apr 28, 2016 at 2:56

2 Answers 2


Personally, I don't think you need to highlight plans by their speed as the table is rather easy to follow. But I do have the following comments:

  • Do you really have plans with speeds ranging from KB/s to GB/s? If not, I would really try to settle on a consistent unit of measurement across all of them.
  • If possible, I would make the table sortable by the user. That is, using your sample, allowing the user to click on the header to sort your plans by download or upload speeds, or by price, etc. Or perhaps just provide a drop-down menu prompting the user to Sort plans by and have it default to "Best download speed".

Below is a mockup I did as an example:

enter image description here

The above provides the best user experience because it empowers them to differentiate your plans based on what is important to them. Note that the above example includes both the sorting options in your headers as well as the "Sort plans by" menu, but you wouldn't need to implement both.

In terms of the actual question though, you could use some sort of icon to indicate the speed. Below is a quick mockup I did of how this could work:

enter image description here

Of course you'd have to use appropriate icons. But, as I said earlier, the best approach would be to do something like the first mockup above.

  • I agree with your reasoning and your first mockup, perhaps I should just leave it to the user to sort it as he/she pleases. Thank you for your answer. Commented Apr 28, 2016 at 11:30

This depends on your intention.

If you want your users to be able to easily compare the plans stick to a single unit of measurement.

If you want to make them more hard to compare, choose your units to make the biggest numbers for the plans you want to emphasise. This is actually a practice you may see in European supermarkets, they are required to put a price per volume/price per weight onto the tags, comparable products will often be labelled in totally different dimensions, like €/100g and €/kg or more drastically €/100g and €/liter.

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.