If we analyze the semantics of the names "check-box" and "radio-button" we will see the following:
- Check-box. English box (box box) selection/marking (check in). The traditional idea of this type of component is that it is literally a box (a square) that can be scratched/marked to indicate the selection of an item.
- Radio-button. English Button (button) radial (radio). The word "radial" is perhaps little known, but has the same root as "dial" (in English, from the radio button) and in the dictionary it appears as "related to lightning". It means something that circulates, or that leads from one point to another crossing something (have you ever heard of Avenida Radial Leste here in São Paulo? ). The component has this name because, although it also allows the selection of items, the items are mutually exclusive, so that selecting a new item automatically undoes a previous selection. In fact, the name comes from radio, because formerly the automotive radios had physical buttons for tuning, and when pressing one of them the previous pressed was released.
Conventionally, these components have been designed to have in their design a square in the case of the check-box and a circle in the case of the radio-button, which are either filled or not to indicate the state of selected/not selected. The interface you use in the question is a more modern adaptation that allows you to indicate the selection state through color distinction and "radiality" (did I invent a new word?) through the uniqueness of the selection color among all items.
But she has some problems (at least in this implementation). First, there is a very low color contrast between the selected/non-selected states, which would be particularly severe in environments with lower luminosity (something relatively common for mobile device users). They also do not use the convention already widely established in human-computer interaction (square is for individual marking, circle for group selection), causing users to relearn the convention used.
However, the most relevant problem is that these components do not contain sensory cues (affordances) what they do and/or how they can be used. In a traditional computer system, where the mouse is used, the click is the most common affordance. The first thing a user in doubt will do is try to click an object. Similarly, in a mobile computer system, the most direct affordance is finger touching, and the first thing to be done is to try to touch the object. Eventually the user will learn how it works by interacting, but an empty square or circle has a visual affordance that already indicates that it may perhaps be filled. This type of affordance is missing in objects, and so users have the initial difficulty of differentiating them from mere buttons.
A solution to this particular problem would be to add an empty area, which gives the perception that it can be filled, or even just use a marking symbology (the traditional checklist scribble) to start the item is actually selected.
You can, for example, use the pseudo element :after to include any of these symbols that resemble a "brand", for example: . Increasing the color contrast between marked and unmarked options is also important, as it would highlight them in many cases (and especially in relation to color-blind users). Example of implementation:
.btn { background: #ccc !important; border: none !important }
.btn.active { background: #40d47e !important }
.btn.active:after { content: '✅'; color: #333 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="text-center">
<h3>Não sei se todos estão ativados ou desativados</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked>Android
</label>
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off">Windows
</label>
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off">iOS
</label>
</div>
<br>
<h3>Não sei se esta selecionado dois e um não esta selecionado</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked>Android
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off">Windows
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off">iOS
</label>
</div>
</div>
Still, it would be important to visually differentiate the component that allows an individual brand (the check-box) from that which allows multiple brands. One could leave it to the user to discover this by interacting (which is not usually a serious problem, since the choice is not commonly taken immediately), but any indication is useful.
An alternative is to make the selected buttons also sink, and the radio button always has one of them initially selected (i.e., sunken). This same alternative can be implemented only with the brand, always making one already start selected. Intuitively the user will notice the difference because the check-box with multiple items can start with all deselected and the radio-button does not. Or you can, if you have drawing skills, change the shape of the buttons to make them differentiated (more circular, for example) and so establish a convention of its own.
Maybe colors, although "spoil" your layout, colors are more intuitive for everyone.
– Randrade
Really the "feedback" for the user is well imperceptible, would change the color property of the text not to run away too much of the layout.
– user3010128
If the
gradientThe question is, I don’t use bootstrap so I don’t know where it changes 8D. I don’t know where to– DH.
I voted to leave open, because UX-oriented questions are well accepted by the community, and for those who do not know UX will never be "absolute", so will always fall into the idea that is based on opinion, but is not, here any answer can solve in different ways, but still solve, will not be a thing of "I think".
– Guilherme Nascimento
@Luizvieira I will continue later in META, but I understood his point of view. Then I will try to share my opinion, erasing the comments.
– Guilherme Nascimento
I use red and green to deactivate and active respectively and it is a wonder. And are colors that do not look bad because they are already usual, on and off, etc.
– Jorge B.