4

I'm in a position where I have a horizontal scroll view with a list of labels inside. These labels are navigation buttons, so would generally be words like Next, Previous, Submit, Cancel, but they are user controlled so could be anything for example the name of the next page. Essentially I can't let these labels grow as wide as they want (each one based on dynamic data) so have put a maxwidth on each one.

I'm trying to decide on the maxwidth of the buttons to give a fair amount of characters.

What is a fair character count to allow before cropping?


Example

enter image description here


Addition: Note these labels maybe single or multiple words.

2

One potential approach would be to use the average (mode) word length as your maximum (or n+1) then the majority of labels will be displayed.

There are a number of sources for what that number is, but from this paper, it indicates that it would be 8 or 9 characters.

Alternatively calculate the average character length from your existing labels and take the mean from that on a rolling basis.

  • don't think I made it clear that these labels might be multiple words or single. how about labels that are multiple words? the same rules or would you alter your rule of "average (mode) word length as your maximum" – Dave Haigh Mar 3 '16 at 10:57
  • Trickier, I would stick with the same rule and test it out? Do you have any existing data on what users name their labels? – Midas Mar 3 '16 at 12:43
  • yeh we have past data and I can speak to some typical users. I will do some research, then come up with an average length. – Dave Haigh Mar 3 '16 at 12:49
7

Alternative option: set a maximum character limit on the labels?

Otherwise you might run in to this problem:

  • Stackexchange Graphic Design
  • Stackexchange UX
  • Stackexchange Wordpress

converted to the following tab-bar:

Stackexch… Stackexch… Stackexch…

Or perhaps a bit more subtly, leave the option but make options aware. Have a message pop up and highlight the excess symbols:

enter image description here

Because the biggest problem you will get when you automatically truncate is that users won't know what to expect in the end. If you limit the character count or indicate truncations, people know exactly what the result will be. Perhaps even add a special symbol to let users control the truncation?

Often the answer isn't about algorithms and statistics, but better communication.

  • 2
    "Often the answer isn't about algorithms and statistics, but better communication." Well said – nightning Mar 4 '16 at 19:09
0

I don't think this question is answerable, at least not with a specific number. That's because a 6 letter word with lots of skinny letters (like "little") might take up less space than a 4-letter word with wide letters or lots of capitals (like "WIDE").

Even if you use a monspaced font, there is another difficulty. On possible answer is "as many characters as are needed to fully distinguish the text of one label from another." For example, if the user starts all of her labels with the 11-character string "Go to page ", then at least 12 characters (and possibly more) will be needed to keep two or more buttons from showing the exact same text. You would need to programmatically analyze the text that each user chooser for all of her labels in order to determine the minimum number of characters to show so that each label has unique text.

Based on the question ("I'm trying to decide on the maxwidth"), it sounds like you want to use the minimum number of characters needed in order to determine the maxwidth. But that seems backwards to me: Why are you setting a maxwidth to begin with? What is the fundamental reason?

If there is no fundamental reason to limit the width of the label, why not show each user all the text that they choose to enter? If there is no physical constrain, why should each label not grow as large as needed?

If there is some physical (or maybe aesthetic) constraint that limits the width of the label, then THAT should be the starting point. Maybe you don't want any label to exceed one-third of the screen width, or for the width to be more than 5 times the label height. That's fine. But decide the maxwidth first. Once you know the maxwidth, THEN you can determine how many characters you can fit into that space.

If using a monospaced font, you can use trial and error to determine the max number of characters that fit.

If using a proportional font, I don't think you can come up with a number of characters: Even once you know the maxwidth you can afford, the number of characters simply cannot be predicted in advance since there is so much variability in the text entered by the user and the variable width of each character. Any kind of estimation or averaging approach will fail in edge cases.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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