Once my boss asked me to make one of the dropdowns on our dashboard wider. He’s shown me the list of organizations as an example where a big part of the names was hidden.

It’s not a big deal, but I’ve decided to take it seriously and use real data to grasp what the width should be. Also, it’s a simple example to show how data could be used in a data-driven design.

So, where to start?

I have the real data — more than 4000 organizations names with the lengths from 2 to 79 symbols. First, that could come to the mind, is to calculate Arithmetic mean that is a sum of all organizations’ names lengths (further just names) divided by their count.

Let’s try… I’ve got the value ~18 symbols. Will the boss be happy with this width? The organization name he has shown as an example consists of 28 symbols, so the result will be like — VGS Testing & Hea… I guess it’s not a big change.

Obviously, the method doesn’t work properly.

Why? It’s an average length of the names. What could be wrong?

Let me show you an example — the arithmetic means of 1, 3, 15, 27, 58, 142, 1321 is ~224 and it doesn’t mirror this set of numbers, because of 1321 impacts to the results more than others. In the case of the names, we have the same issue.

Can I try something else? Yes, I have to.

The arithmetic mean is not the only method of calculating the average. A Median is another approach that equals the value at the center of an ordered data set, for example, the median of 1, 3, 15, 27, 58, 142, 1321 is 27 (notice that the arithmetic mean is ~ 224). In my case, the median of the lengths of the names is 12, which means that 50% of the names consist of 12 characters or less.

But, it’s also not my width of the dropdown, it’s even less than the arithmetic means ~18. It happened because I didn’t take into account a deviation from the center (median). Not so far from the median (12 symbols), there are the names with 20, 27 and more symbols, it’s a significant difference that impacts on a result.