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.
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')