0

In this example I have 4 product types. (Left hand tabs). There are some option buttons within those products (colour, fabric, Fingers and 'on sale') which, on selection will trigger additional option choices to the user.

However, some buttons are only ever applicable to certain products. (You wouldn't have a button to allow the user to choose how many glove fingers their gloves have if they're looking at Scarves, for example). So we're hiding those non-usable buttons in that instance.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

However, we now end up with big gaps in the page. So, my question is - is it better to hide the buttons and leave a gap, or should the other buttons shuffle up and rearrange themselves so that they're all aligned?

The trouble with option A is that it leaves the visual UI a bit incomplete, like the CSS is broken. However the buttons are always in a consnstent position so if I tab between products I know the 'Colour' button is always in the same place.

The trouble with B is that, while it looks neater, constantly moving buttons around breaks the consistency of the system.

Which option is the least worst for the user? Or is there a 3rd option I've not considered? (I don't want to keep the buttons but grey them out, because I don't like the idea of showing a 'disabled' button that cannot be enabled by the user in any manner at all - it suggests temporarily disabled, not 'completely unavailable forever')

  • I don't think simply removing the button doesn't cause any usability issues (I doubt any users with think "oh there used to be a fingers option here, why dont these scarves have that option"), it is a common filtering design. However, if it proves to be problematic perhaps try disabling instead of removing. – DasBeasto Jun 22 '15 at 16:06
  • Option C: disable the buttons that don't apply to selected product. (I'd edit your post Jon and include option C to see what people say about that.) – obelia Jun 22 '15 at 17:56
  • @obelia yeah, I considered that, but I don't like disabling something that can never be enabled. It's a pointless button greyed out forever. Is that really the better option? – JonW Jun 22 '15 at 17:58
  • 1
    Can't you put all the "universal" buttons to the right and the article-specific buttons to the left of them? (In this example, you would have Fingers, Colour, Fabric, On Sale.) That way, the gap will always be to the left of the visible buttons. – Mr Lister Jun 22 '15 at 18:14
2

The trouble with B is that, while it looks neater, constantly moving buttons around breaks the consistency of the system.

Consistency

Two things one must remember about consistency:

  • Consistency has different dimensions. Maintaining consistency in one dimension will pretty much always break it in another. In your example, option B breaks spatial consistency, but maintains layout (gaps) consistency.
  • Consistency has its origins in cognition - by delivering similar things in a similar way, the brain has to 'think' less due to the similar patterns.

One key problem with consistency is that it is used as an automatic reasoning mechanism by designers, without actually running a proper cognitive analysis (which I'll attempt next)

Spatial orientation

A microwave

The argument against option B is that of positional (spatial) consistency, the outcome of which is spatial disorientation. But for spatial disorientation to happen, spatial orientation has to happen first, which means users has to memorise the position of screen elements.

Spatial orientation (memorising position) happens and strengthen in two principle ways:

  • Subjective importance - you will remember where your city is on the world map, but not where Uganda is on the world map (unless Uganda is somehow important to you).
  • Repeated usage - for example, most Mac users will remember that the 'close' button is on the top-left of the window.

Now ask yourself if you can remember (hoping you are not in your kitchen):

  • Where the kettle is in your kitchen.
  • The placement (ie, order) of each and every button on your microwave.

I suspect you'll remember the former but not the later (perhaps with the exception of the start/stop button).

What's more, being of visual nature and on screen, when interacting with controls:

  • There is always a feedback mechanism between the eye and the operating hand - your brain (subconsciously) inspects the label of the button as you approach it. This is different from the cold and warm tap position, which with time become part of muscle memory (and your eye may ignore the blue/red colours).
  • There is no muscle memory as you are interacting with a dynamic display.

Conclusion

Essentially, the chance that any users will:

  • Remember the position of these buttons
  • Approach a button without inspection

is extremely unlikely.

So option B is all good.

1

When I look at similar websites, they just show what is relevant. The "buttons" are placed in context and not as a button toolbar, which leads to less bonding of the location.

german shop tie vs trousers

0

You should definitely not use option A, in my opinion.

There are a number of problems with using option A, for example:

  • The gap implies they should be given visual separation, when in fact the options are related.
  • What happens when the options grow and you have multiple gaps? It will take a lot of space with gaps of white space.
  • What happens when you have more options removed than presented? You'll have floating elements in the page.

Your point about option B being inconsistent - the group of buttons are consistent in relation to the other groups of UI elements, so I don't think this is a problem.

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.