2

I'm a developer working on an app in which we have a collection of categories. Within each category theres a collection of text buttons which correspond to filters applied to a set of data. We're currently in the midst of discussing whether it's important to keep the hitzone size consistent for all of the filter buttons. This runs the risk of truncating the button labels especially once we get to localization. To illustrate, here's some ascii art:

Option 1:

|-----------------------------------------------------------|
|     |     |     |     |     |     |     |     |     |     |
|-----------------------------------------------------------|
|                                                           |
|  button1   buttonlongerthanprevious   button3   button4   |
|                                                           |
|  buttonlongerthanprevious   button5   button6   button7   |
|                                                           |
|-----------------------------------------------------------|

Option 2:

|-----------------------------------------------------------|
|     |     |     |     |     |     |     |     |     |     |
|-----------------------------------------------------------|
|                                                           |
|  button1       button2       button3       button4        |
|                                                           |
|  buttonlong... buttonlong... buttonlong... buttonlong...  |
|                                                           |
|-----------------------------------------------------------|

In the first example, the hitzone would be a padded area around the text. In the second example, it would take up exactly 1/4th the screen. Which of these alternatives is the correct one? Is there value in keeping hitzone sizes consistent at the cost of possibly truncating some of the labels?

2 Answers 2

2

My instincts say "let them have organic sizes." This has one major reason, namely that it is easier for the eye to track things of different sizes and find them again when going back over the same list.

Let's say that the collection of buttons is a list of shoe-maker's brands. If the user visually scans them and finds Adidas for example, he has already seen a few of the other brands, Puma, for example. And if he looks back at the list and is looking for Puma, his eye will remember much more easily what that looked like last time and find it more quickly on a second scan. Another bonus on this is that he knows that the smaller buttons will give him the brands with the shorter names, he will be able to differentiate between Nike and Reebok more easily even though it is probably on a more subconscious level.

This depends on other options however. For example, if the list is sorted alphabetically, the user will probably use that information to make a quicker scan, knowing that Adidas will come before Puma. In this case it is more important that the alphabetical listing is obvious, then the size of the buttons won't play as large a role.

That being said, I think truncating texts containing potentially important information which might make the user have to guess its meaning, is something that should be avoided as much as possible.

3
  • Thanks for your answer. I hadn't considered users searching for the correct filter using the string length as a guide. Commented Sep 4, 2016 at 1:17
  • 1
    Here's an interesting article that demonstrates how good the brain is at scanning texts rather than reading them letter by letter ecenglish.com/learnenglish/lessons/can-you-read :)
    – Winter
    Commented Sep 4, 2016 at 1:28
  • Very cool. I remember reading this in high school. Nice reminder of how important designing for scanning is especially when dealing with a lot of UI controls. Commented Sep 4, 2016 at 1:31
1

Well, you could have an option 3: make all buttons the same size, where size equals the necessary space to accomodate the longest label. Alternatively, you could try to find some shorter labels as well.

Another option you might consider is to simply use links instead of buttons. This way, users will expect links to take its size (plus any padding) and nothing else.

But of course, you'll need some testing since your information is kinda incomplete, so there might be many additional paths to follow. I'm not sure why you need so many buttons when you want to apply a filter, so maybe that's where the real issue is. In general, you need only one button for a filter, although it's true that in very special cases you may find more than one button. But these cases are not very common, and sometimes they're simply wrong

4
  • Multiple filters can be applied simultaneously, thus requiring multiple toggles. This doesn't really answer my question either. Are there objective measures on whether equal sizes matter when it comes to arrays of buttons? Commented Sep 3, 2016 at 4:18
  • 2
    Devin's answer is a good one. Yes, equal sizes do matter but the fact you have the problem is more likely indication that a different issue needs solving. Design is all about finding the problem of the problem and not just solving the immediate one in front of you, and UX is about designing the user's experience.
    – Jonny
    Commented Sep 3, 2016 at 10:01
  • @SandyChapman, given the information you provided, it's as far as I can go. UX always exists in context, with user cases and testing, so I hope you understand sometimes answers are generic. I tried to cover your user cases, and some you didn't think about. As an example, NOW you mention toggles. Well, then you don't need any button at all and in this case you're probably looking for toggle UI elements or even checkboxes. See how every bit of information changes the answer? Remember: UX is ALWAYS about context and information
    – Devin
    Commented Sep 3, 2016 at 17:39
  • @Devin Toggles are buttons. And the display state of whether the toggle is active or not is represented by a check box in our UI, but that is irrelevant to what I'm asking. On a layout of interactive elements when does consistent size take priority over the potential drawback of truncating the label is what I've asked. If your answer is, it depends, well that's a fine answer, but as it stands you are skirting around the question saying it's a false dichotomy. Of course making the buttons bigger avoids the issue, and of course finding shorter labels are an option, but that's not my question. Commented Sep 3, 2016 at 18:02

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.