Multiple options vs single option UI
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}
On the dashboard we are building we got 2 sets of options users can pick:
Multiple options (checkboxes)
and single options (radio buttons behavior)
while the look of the components is similar, their uses are different.
In usability tests, users used these components without any difficulties or once they used and understand the functionalities they didn't have any issues to use them in the other parts of the product.
But, my designer colleagues argued that the components should look different and users have to understand if its a checkbox or a radio box from the first glance.
My aim was to keep the consistency and lower the cognitive load.
Any thoughts or inputs?
Edit 1: Updated the UI, thank you @200_success for the feedback
usability gui-design interaction-design checkboxes radio-buttons
asked Apr 24 at 10:10
Deniz ErdalDeniz Erdal
1,20921119
add a comment |
On the dashboard we are building we got 2 sets of options users can pick:
Multiple options (checkboxes)
and single options (radio buttons behavior)
while the look of the components is similar, their uses are different.
In usability tests, users used these components without any difficulties or once they used and understand the functionalities they didn't have any issues to use them in the other parts of the product.
But, my designer colleagues argued that the components should look different and users have to understand if its a checkbox or a radio box from the first glance.
My aim was to keep the consistency and lower the cognitive load.
Any thoughts or inputs?
Edit 1: Updated the UI, thank you @200_success for the feedback
usability gui-design interaction-design checkboxes radio-buttons
asked Apr 24 at 10:10
Deniz ErdalDeniz Erdal
1,20921119
34
If you go with this approach, it becomes crucial to make sure it's clear when only one option is allowed vs. multiple. For instance, your example has two selections made for the field "Age", which I wouldn't have expected to be possible. One way to make this clear without changing your elements is adding some help text like "Choose all that apply"
– nvioli
Apr 24 at 19:58
35
Those gray options look more like they're disabled, rather than deselected.
– 200_success
Apr 24 at 20:18
5
"My aim was to keep the consistency and lower the cognitive load." - Consistency with common patterns (global consistency) is more important than a single control design for both, even (particularly) if it behaves differently. I would also argue that if you're worried about cognitive load, then this is not going to achieve that reduction. "or once they used and understand the functionalities they didn't have any issues to use them in the other parts of the product." - did this require intervention to achieve? Did you test for hesitancy/etc vs control group version using normative design?
– taswyn
Apr 25 at 2:05
4
you've tested it and found no issues. This absolutely over rides whatever business think. It's not broken. Don't fix it.
– colmcq
Apr 25 at 10:15
2
One thing I find unusual about this choice for the "Age" field is that it is possible to select non-contiguous groups of ages. Is this something that you intend? It seems to me that it would be somewhat odd to select "7-9" and "13-16" but not select the "10-12" in between them. If what you're looking for is a contiguous range, consider something like a bar above the ages where you can move the minimum and maximum left and right to select as much of the range as you want, but in a strictly contiguous manner. A common example of this would be the margin settings in a word processor.
– Darrel Hoffman
Apr 26 at 19:48
add a comment |
On the dashboard we are building we got 2 sets of options users can pick:
Multiple options (checkboxes)
and single options (radio buttons behavior)
while the look of the components is similar, their uses are different.
In usability tests, users used these components without any difficulties or once they used and understand the functionalities they didn't have any issues to use them in the other parts of the product.
But, my designer colleagues argued that the components should look different and users have to understand if its a checkbox or a radio box from the first glance.
My aim was to keep the consistency and lower the cognitive load.
Any thoughts or inputs?
Edit 1: Updated the UI, thank you @200_success for the feedback
usability gui-design interaction-design checkboxes radio-buttons
asked Apr 24 at 10:10
Deniz ErdalDeniz Erdal
1,20921119
On the dashboard we are building we got 2 sets of options users can pick:
Multiple options (checkboxes)
and single options (radio buttons behavior)
while the look of the components is similar, their uses are different.
In usability tests, users used these components without any difficulties or once they used and understand the functionalities they didn't have any issues to use them in the other parts of the product.
But, my designer colleagues argued that the components should look different and users have to understand if its a checkbox or a radio box from the first glance.
My aim was to keep the consistency and lower the cognitive load.
Any thoughts or inputs?
Edit 1: Updated the UI, thank you @200_success for the feedback
usability gui-design interaction-design checkboxes radio-buttons
usability gui-design interaction-design checkboxes radio-buttons
asked Apr 24 at 10:10
Deniz ErdalDeniz Erdal
1,20921119
asked Apr 24 at 10:10
Deniz ErdalDeniz Erdal
1,20921119
edited Apr 30 at 8:58
Deniz Erdal
asked Apr 24 at 10:10
Deniz ErdalDeniz Erdal
1,20921119
asked Apr 24 at 10:10
Deniz ErdalDeniz Erdal
1,20921119
asked Apr 24 at 10:10
Deniz ErdalDeniz Erdal
1,20921119
1,20921119
34
If you go with this approach, it becomes crucial to make sure it's clear when only one option is allowed vs. multiple. For instance, your example has two selections made for the field "Age", which I wouldn't have expected to be possible. One way to make this clear without changing your elements is adding some help text like "Choose all that apply"
– nvioli
Apr 24 at 19:58
35
Those gray options look more like they're disabled, rather than deselected.
– 200_success
Apr 24 at 20:18
5
"My aim was to keep the consistency and lower the cognitive load." - Consistency with common patterns (global consistency) is more important than a single control design for both, even (particularly) if it behaves differently. I would also argue that if you're worried about cognitive load, then this is not going to achieve that reduction. "or once they used and understand the functionalities they didn't have any issues to use them in the other parts of the product." - did this require intervention to achieve? Did you test for hesitancy/etc vs control group version using normative design?
– taswyn
Apr 25 at 2:05
4
you've tested it and found no issues. This absolutely over rides whatever business think. It's not broken. Don't fix it.
– colmcq
Apr 25 at 10:15
2
One thing I find unusual about this choice for the "Age" field is that it is possible to select non-contiguous groups of ages. Is this something that you intend? It seems to me that it would be somewhat odd to select "7-9" and "13-16" but not select the "10-12" in between them. If what you're looking for is a contiguous range, consider something like a bar above the ages where you can move the minimum and maximum left and right to select as much of the range as you want, but in a strictly contiguous manner. A common example of this would be the margin settings in a word processor.
– Darrel Hoffman
Apr 26 at 19:48
add a comment |
34
If you go with this approach, it becomes crucial to make sure it's clear when only one option is allowed vs. multiple. For instance, your example has two selections made for the field "Age", which I wouldn't have expected to be possible. One way to make this clear without changing your elements is adding some help text like "Choose all that apply"
– nvioli
Apr 24 at 19:58
35
Those gray options look more like they're disabled, rather than deselected.
– 200_success
Apr 24 at 20:18
5
"My aim was to keep the consistency and lower the cognitive load." - Consistency with common patterns (global consistency) is more important than a single control design for both, even (particularly) if it behaves differently. I would also argue that if you're worried about cognitive load, then this is not going to achieve that reduction. "or once they used and understand the functionalities they didn't have any issues to use them in the other parts of the product." - did this require intervention to achieve? Did you test for hesitancy/etc vs control group version using normative design?
– taswyn
Apr 25 at 2:05
4
you've tested it and found no issues. This absolutely over rides whatever business think. It's not broken. Don't fix it.
– colmcq
Apr 25 at 10:15
2
One thing I find unusual about this choice for the "Age" field is that it is possible to select non-contiguous groups of ages. Is this something that you intend? It seems to me that it would be somewhat odd to select "7-9" and "13-16" but not select the "10-12" in between them. If what you're looking for is a contiguous range, consider something like a bar above the ages where you can move the minimum and maximum left and right to select as much of the range as you want, but in a strictly contiguous manner. A common example of this would be the margin settings in a word processor.
– Darrel Hoffman
Apr 26 at 19:48
34
34
If you go with this approach, it becomes crucial to make sure it's clear when only one option is allowed vs. multiple. For instance, your example has two selections made for the field "Age", which I wouldn't have expected to be possible. One way to make this clear without changing your elements is adding some help text like "Choose all that apply"
– nvioli
Apr 24 at 19:58
If you go with this approach, it becomes crucial to make sure it's clear when only one option is allowed vs. multiple. For instance, your example has two selections made for the field "Age", which I wouldn't have expected to be possible. One way to make this clear without changing your elements is adding some help text like "Choose all that apply"
– nvioli
Apr 24 at 19:58
35
35
Those gray options look more like they're disabled, rather than deselected.
– 200_success
Apr 24 at 20:18
Those gray options look more like they're disabled, rather than deselected.
– 200_success
Apr 24 at 20:18
5
5
"My aim was to keep the consistency and lower the cognitive load." - Consistency with common patterns (global consistency) is more important than a single control design for both, even (particularly) if it behaves differently. I would also argue that if you're worried about cognitive load, then this is not going to achieve that reduction. "or once they used and understand the functionalities they didn't have any issues to use them in the other parts of the product." - did this require intervention to achieve? Did you test for hesitancy/etc vs control group version using normative design?
– taswyn
Apr 25 at 2:05
"My aim was to keep the consistency and lower the cognitive load." - Consistency with common patterns (global consistency) is more important than a single control design for both, even (particularly) if it behaves differently. I would also argue that if you're worried about cognitive load, then this is not going to achieve that reduction. "or once they used and understand the functionalities they didn't have any issues to use them in the other parts of the product." - did this require intervention to achieve? Did you test for hesitancy/etc vs control group version using normative design?
– taswyn
Apr 25 at 2:05
4
4
you've tested it and found no issues. This absolutely over rides whatever business think. It's not broken. Don't fix it.
– colmcq
Apr 25 at 10:15
you've tested it and found no issues. This absolutely over rides whatever business think. It's not broken. Don't fix it.
– colmcq
Apr 25 at 10:15
2
2
One thing I find unusual about this choice for the "Age" field is that it is possible to select non-contiguous groups of ages. Is this something that you intend? It seems to me that it would be somewhat odd to select "7-9" and "13-16" but not select the "10-12" in between them. If what you're looking for is a contiguous range, consider something like a bar above the ages where you can move the minimum and maximum left and right to select as much of the range as you want, but in a strictly contiguous manner. A common example of this would be the margin settings in a word processor.
– Darrel Hoffman
Apr 26 at 19:48
One thing I find unusual about this choice for the "Age" field is that it is possible to select non-contiguous groups of ages. Is this something that you intend? It seems to me that it would be somewhat odd to select "7-9" and "13-16" but not select the "10-12" in between them. If what you're looking for is a contiguous range, consider something like a bar above the ages where you can move the minimum and maximum left and right to select as much of the range as you want, but in a strictly contiguous manner. A common example of this would be the margin settings in a word processor.
– Darrel Hoffman
Apr 26 at 19:48
add a comment |
4 Answers
4
active
oldest
votes
It depends. How often do your users see this form / section / settings?
Frequently used, long session applications give users a chance to remember how controls work, especially frequently used ones.
Part of this has to do with Application Posture.
A sovereign application is a program that monopolizes the user's attention for long periods of time.
Google docs and Microsoft Word are great examples of Sovereign Posture Applications: Users spend long periods of time manipulating documents.
The target users are usually intermediates, who encounter these controls repeatedly over long use.
Certain controls that appear the same but behave differently don't pose too much difficulty after repeated prolonged exposure.
Most of us have become accustomed to the toolbar, as pointed out by another post:
Another example is OmniFocus, the task management application.
The inspector panel displays details for repeated and scheduled events. It has a multiselect toggle showing which days of the week to include an event. It has the same effect as checkboxes:
The mental model for events is clearer to begin with, which probably helps in using these controls:
Events have:
- Start dates
- End dates
- Frequencies
- Repetition
For example, it's clear to me that I can go to Karate class Sunday, Monday, and Wednesday. I can select multiple days as I need to.
One time forms, rarely accessed 'Settings' pages, and seldom encountered UI can be challenging without clear labels and/or controls.
I'm not clear on your larger context, but clear labeling is crucial for users encountering your form for the first time, or infrequently:
It seems like you're in a good place, as it has been confirmed by user testing. Keep in mind that in some contexts, you'll design for perpetual 'first timers' that are venturing into unfamiliar territory.
answered Apr 24 at 15:55
Mike MMike M
13.7k12940
add a comment |
You don't need to make different appearances for these components.
Your case is similar to well-known toggles in a toolbar of text processors like Word.
These font settings toggles act like checkboxes:
And these Word’s alignment controls act like radio buttons:
Note, they look identically and it doesn't produce any confusion or difficulties because in our mental model (user's view of how the system should work) we understand that a piece of text can be bold, underlined and cursive simultaneously so we expect that respective toggles should act like checkboxes. And we understand that text can't be right and left aligned simultaneously so it's not a surprise for us that alignment controls act like radio buttons. We know that and we don't need extra reminders about that.
You wrote that in usability tests, users used these components without any difficulties. I think that means that the behaviour of the components matches the user's mental model i.e. users understand and expect that they can choose several age-ranges and only one view (lists or thumbnails).
I took the example of Word's toggles from A. Cooper's "About Face 3. The Essentials of Interaction Design". He wrote about it as an example of a more graphical and more space efficient approach to the checkbox or radio buttons (see Chapter 21: Controls, Check boxes (p. 443) and Radio buttons (p. 446)). And also Cooper didn't say anything like these two types of toggles must look differently.
answered Apr 24 at 14:24
LanaLana
66426
22
And yet, this principle gets abused all the time, including by Word. All sorts of things on Word's ribbon don't immediately match the user's mental model and they only find out whether it's a checkbox or a radio button by trying it. So it's important to make sure that the user's mental model really covers this. (Coming to it cold, without any context, it's not clear to me at all that the OP's first one is checkboxes and second one is a radio button set.)
– T.J. Crowder
Apr 25 at 8:52
I don't agree with this answer. I think it would make much more sense to simply see checkboxes...but that is just me. Sure craigslist.com is ugly, but the darn thing works and is easy to use.
– JonH
Apr 25 at 18:35
@T.J.Crowder Can you give an example where Word's buttons don't match the mental image? I can't think of any I don't find intuitive, although it might just be because I've already used them all. :)
– Nulano
Apr 25 at 21:23
In Word there’s the additional button “click to action”, which is neither a radio or a checkbox, it simply performs an action once (undo, increase font size, zoom in).
– Tim
Apr 26 at 2:08
1
This is a wrong answer. The examples you used are grouped by style in the second example but not in the first. Text modifications are completely different to alignment. You can't have two alignments, you can have two text modifications. Doesn't really help when we're trying to select multiple ages....... I can't believe how highly voted this is an answer.
– insidesin
Apr 26 at 6:31
add a comment |
I think your designer colleagues are right.
If I now look at the options, I have straightforward an idea how I can interact with them and for what they are used.
Using the squares for checkboxes and circles for radio buttons are very old, common and recognizable for most of the users. So, it simplyfies your problem in this case.
answered Apr 24 at 13:24
AsqanAsqan
27925
22
In my opinion this is less visually appealing and doesn't add much value
– GrumpyCrouton
Apr 24 at 17:36
2
@GrumpyCrouton It makes it clear the top buttons are check-boxes (multiple selections), and the bottom ones are radio buttons (single selection).
– cpburnz
Apr 25 at 13:32
2
@cpburnz I'm not disagreeing with that, but it's a compromise on how visually appealing it is, and I don't think that distinction is worth it (Again, this is an opinion)
– GrumpyCrouton
Apr 25 at 14:39
1
The average user, who does not engage with ux design, will not know that there is a difference between check boxes and radio buttons. They are just shapes you can click to select something.
– GittingGud
Apr 26 at 12:39
add a comment |
Most normal users don't know the difference between a radio button and a check button. At the most, they sometimes get upset when you can't activate multiple radio buttons where it would make sense.
Doing without a visual difference won't confuse a single user - they will see that in some cases selecting one thing removes the other selection, and in other cases not. And they won't care, especially if it makes sense.
If you do want them to have a difference, how about using round corners for the radiobuttons (maybe even between options) and angled corners with the check boxes? The design stays simple, and people who are 'in the know' can see the difference immediately.
answered Apr 25 at 7:41
Carl DombrowskiCarl Dombrowski
1342
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "102"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
noCode: true, onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fux.stackexchange.com%2fquestions%2f125231%2fmultiple-options-vs-single-option-ui%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
It depends. How often do your users see this form / section / settings?
Frequently used, long session applications give users a chance to remember how controls work, especially frequently used ones.
Part of this has to do with Application Posture.
A sovereign application is a program that monopolizes the user's attention for long periods of time.
Google docs and Microsoft Word are great examples of Sovereign Posture Applications: Users spend long periods of time manipulating documents.
The target users are usually intermediates, who encounter these controls repeatedly over long use.
Certain controls that appear the same but behave differently don't pose too much difficulty after repeated prolonged exposure.
Most of us have become accustomed to the toolbar, as pointed out by another post:
Another example is OmniFocus, the task management application.
The inspector panel displays details for repeated and scheduled events. It has a multiselect toggle showing which days of the week to include an event. It has the same effect as checkboxes:
The mental model for events is clearer to begin with, which probably helps in using these controls:
Events have:
- Start dates
- End dates
- Frequencies
- Repetition
For example, it's clear to me that I can go to Karate class Sunday, Monday, and Wednesday. I can select multiple days as I need to.
One time forms, rarely accessed 'Settings' pages, and seldom encountered UI can be challenging without clear labels and/or controls.
I'm not clear on your larger context, but clear labeling is crucial for users encountering your form for the first time, or infrequently:
It seems like you're in a good place, as it has been confirmed by user testing. Keep in mind that in some contexts, you'll design for perpetual 'first timers' that are venturing into unfamiliar territory.
answered Apr 24 at 15:55
Mike MMike M
13.7k12940
add a comment |
It depends. How often do your users see this form / section / settings?
Frequently used, long session applications give users a chance to remember how controls work, especially frequently used ones.
Part of this has to do with Application Posture.
A sovereign application is a program that monopolizes the user's attention for long periods of time.
Google docs and Microsoft Word are great examples of Sovereign Posture Applications: Users spend long periods of time manipulating documents.
The target users are usually intermediates, who encounter these controls repeatedly over long use.
Certain controls that appear the same but behave differently don't pose too much difficulty after repeated prolonged exposure.
Most of us have become accustomed to the toolbar, as pointed out by another post:
Another example is OmniFocus, the task management application.
The inspector panel displays details for repeated and scheduled events. It has a multiselect toggle showing which days of the week to include an event. It has the same effect as checkboxes:
The mental model for events is clearer to begin with, which probably helps in using these controls:
Events have:
- Start dates
- End dates
- Frequencies
- Repetition
For example, it's clear to me that I can go to Karate class Sunday, Monday, and Wednesday. I can select multiple days as I need to.
One time forms, rarely accessed 'Settings' pages, and seldom encountered UI can be challenging without clear labels and/or controls.
I'm not clear on your larger context, but clear labeling is crucial for users encountering your form for the first time, or infrequently:
It seems like you're in a good place, as it has been confirmed by user testing. Keep in mind that in some contexts, you'll design for perpetual 'first timers' that are venturing into unfamiliar territory.
answered Apr 24 at 15:55
Mike MMike M
13.7k12940
add a comment |
It depends. How often do your users see this form / section / settings?
Frequently used, long session applications give users a chance to remember how controls work, especially frequently used ones.
Part of this has to do with Application Posture.
A sovereign application is a program that monopolizes the user's attention for long periods of time.
Google docs and Microsoft Word are great examples of Sovereign Posture Applications: Users spend long periods of time manipulating documents.
The target users are usually intermediates, who encounter these controls repeatedly over long use.
Certain controls that appear the same but behave differently don't pose too much difficulty after repeated prolonged exposure.
Most of us have become accustomed to the toolbar, as pointed out by another post:
Another example is OmniFocus, the task management application.
The inspector panel displays details for repeated and scheduled events. It has a multiselect toggle showing which days of the week to include an event. It has the same effect as checkboxes:
The mental model for events is clearer to begin with, which probably helps in using these controls:
Events have:
- Start dates
- End dates
- Frequencies
- Repetition
For example, it's clear to me that I can go to Karate class Sunday, Monday, and Wednesday. I can select multiple days as I need to.
One time forms, rarely accessed 'Settings' pages, and seldom encountered UI can be challenging without clear labels and/or controls.
I'm not clear on your larger context, but clear labeling is crucial for users encountering your form for the first time, or infrequently:
It seems like you're in a good place, as it has been confirmed by user testing. Keep in mind that in some contexts, you'll design for perpetual 'first timers' that are venturing into unfamiliar territory.
answered Apr 24 at 15:55
Mike MMike M
13.7k12940
It depends. How often do your users see this form / section / settings?
Frequently used, long session applications give users a chance to remember how controls work, especially frequently used ones.
Part of this has to do with Application Posture.
A sovereign application is a program that monopolizes the user's attention for long periods of time.
Google docs and Microsoft Word are great examples of Sovereign Posture Applications: Users spend long periods of time manipulating documents.
The target users are usually intermediates, who encounter these controls repeatedly over long use.
Certain controls that appear the same but behave differently don't pose too much difficulty after repeated prolonged exposure.
Most of us have become accustomed to the toolbar, as pointed out by another post:
Another example is OmniFocus, the task management application.
The inspector panel displays details for repeated and scheduled events. It has a multiselect toggle showing which days of the week to include an event. It has the same effect as checkboxes:
The mental model for events is clearer to begin with, which probably helps in using these controls:
Events have:
- Start dates
- End dates
- Frequencies
- Repetition
For example, it's clear to me that I can go to Karate class Sunday, Monday, and Wednesday. I can select multiple days as I need to.
One time forms, rarely accessed 'Settings' pages, and seldom encountered UI can be challenging without clear labels and/or controls.
I'm not clear on your larger context, but clear labeling is crucial for users encountering your form for the first time, or infrequently:
It seems like you're in a good place, as it has been confirmed by user testing. Keep in mind that in some contexts, you'll design for perpetual 'first timers' that are venturing into unfamiliar territory.
answered Apr 24 at 15:55
Mike MMike M
13.7k12940
edited May 21 at 11:27
answered Apr 24 at 15:55
Mike MMike M
13.7k12940
answered Apr 24 at 15:55
Mike MMike M
13.7k12940
answered Apr 24 at 15:55
Mike MMike M
13.7k12940
13.7k12940
add a comment |
add a comment |
You don't need to make different appearances for these components.
Your case is similar to well-known toggles in a toolbar of text processors like Word.
These font settings toggles act like checkboxes:
And these Word’s alignment controls act like radio buttons:
Note, they look identically and it doesn't produce any confusion or difficulties because in our mental model (user's view of how the system should work) we understand that a piece of text can be bold, underlined and cursive simultaneously so we expect that respective toggles should act like checkboxes. And we understand that text can't be right and left aligned simultaneously so it's not a surprise for us that alignment controls act like radio buttons. We know that and we don't need extra reminders about that.
You wrote that in usability tests, users used these components without any difficulties. I think that means that the behaviour of the components matches the user's mental model i.e. users understand and expect that they can choose several age-ranges and only one view (lists or thumbnails).
I took the example of Word's toggles from A. Cooper's "About Face 3. The Essentials of Interaction Design". He wrote about it as an example of a more graphical and more space efficient approach to the checkbox or radio buttons (see Chapter 21: Controls, Check boxes (p. 443) and Radio buttons (p. 446)). And also Cooper didn't say anything like these two types of toggles must look differently.
answered Apr 24 at 14:24
LanaLana
66426
22
And yet, this principle gets abused all the time, including by Word. All sorts of things on Word's ribbon don't immediately match the user's mental model and they only find out whether it's a checkbox or a radio button by trying it. So it's important to make sure that the user's mental model really covers this. (Coming to it cold, without any context, it's not clear to me at all that the OP's first one is checkboxes and second one is a radio button set.)
– T.J. Crowder
Apr 25 at 8:52
I don't agree with this answer. I think it would make much more sense to simply see checkboxes...but that is just me. Sure craigslist.com is ugly, but the darn thing works and is easy to use.
– JonH
Apr 25 at 18:35
@T.J.Crowder Can you give an example where Word's buttons don't match the mental image? I can't think of any I don't find intuitive, although it might just be because I've already used them all. :)
– Nulano
Apr 25 at 21:23
In Word there’s the additional button “click to action”, which is neither a radio or a checkbox, it simply performs an action once (undo, increase font size, zoom in).
– Tim
Apr 26 at 2:08
1
This is a wrong answer. The examples you used are grouped by style in the second example but not in the first. Text modifications are completely different to alignment. You can't have two alignments, you can have two text modifications. Doesn't really help when we're trying to select multiple ages....... I can't believe how highly voted this is an answer.
– insidesin
Apr 26 at 6:31
add a comment |
You don't need to make different appearances for these components.
Your case is similar to well-known toggles in a toolbar of text processors like Word.
These font settings toggles act like checkboxes:
And these Word’s alignment controls act like radio buttons:
Note, they look identically and it doesn't produce any confusion or difficulties because in our mental model (user's view of how the system should work) we understand that a piece of text can be bold, underlined and cursive simultaneously so we expect that respective toggles should act like checkboxes. And we understand that text can't be right and left aligned simultaneously so it's not a surprise for us that alignment controls act like radio buttons. We know that and we don't need extra reminders about that.
You wrote that in usability tests, users used these components without any difficulties. I think that means that the behaviour of the components matches the user's mental model i.e. users understand and expect that they can choose several age-ranges and only one view (lists or thumbnails).
I took the example of Word's toggles from A. Cooper's "About Face 3. The Essentials of Interaction Design". He wrote about it as an example of a more graphical and more space efficient approach to the checkbox or radio buttons (see Chapter 21: Controls, Check boxes (p. 443) and Radio buttons (p. 446)). And also Cooper didn't say anything like these two types of toggles must look differently.
answered Apr 24 at 14:24
LanaLana
66426
22
And yet, this principle gets abused all the time, including by Word. All sorts of things on Word's ribbon don't immediately match the user's mental model and they only find out whether it's a checkbox or a radio button by trying it. So it's important to make sure that the user's mental model really covers this. (Coming to it cold, without any context, it's not clear to me at all that the OP's first one is checkboxes and second one is a radio button set.)
– T.J. Crowder
Apr 25 at 8:52
I don't agree with this answer. I think it would make much more sense to simply see checkboxes...but that is just me. Sure craigslist.com is ugly, but the darn thing works and is easy to use.
– JonH
Apr 25 at 18:35
@T.J.Crowder Can you give an example where Word's buttons don't match the mental image? I can't think of any I don't find intuitive, although it might just be because I've already used them all. :)
– Nulano
Apr 25 at 21:23
In Word there’s the additional button “click to action”, which is neither a radio or a checkbox, it simply performs an action once (undo, increase font size, zoom in).
– Tim
Apr 26 at 2:08
1
This is a wrong answer. The examples you used are grouped by style in the second example but not in the first. Text modifications are completely different to alignment. You can't have two alignments, you can have two text modifications. Doesn't really help when we're trying to select multiple ages....... I can't believe how highly voted this is an answer.
– insidesin
Apr 26 at 6:31
add a comment |
You don't need to make different appearances for these components.
Your case is similar to well-known toggles in a toolbar of text processors like Word.
These font settings toggles act like checkboxes:
And these Word’s alignment controls act like radio buttons:
Note, they look identically and it doesn't produce any confusion or difficulties because in our mental model (user's view of how the system should work) we understand that a piece of text can be bold, underlined and cursive simultaneously so we expect that respective toggles should act like checkboxes. And we understand that text can't be right and left aligned simultaneously so it's not a surprise for us that alignment controls act like radio buttons. We know that and we don't need extra reminders about that.
You wrote that in usability tests, users used these components without any difficulties. I think that means that the behaviour of the components matches the user's mental model i.e. users understand and expect that they can choose several age-ranges and only one view (lists or thumbnails).
I took the example of Word's toggles from A. Cooper's "About Face 3. The Essentials of Interaction Design". He wrote about it as an example of a more graphical and more space efficient approach to the checkbox or radio buttons (see Chapter 21: Controls, Check boxes (p. 443) and Radio buttons (p. 446)). And also Cooper didn't say anything like these two types of toggles must look differently.
answered Apr 24 at 14:24
LanaLana
66426
You don't need to make different appearances for these components.
Your case is similar to well-known toggles in a toolbar of text processors like Word.
These font settings toggles act like checkboxes:
And these Word’s alignment controls act like radio buttons:
Note, they look identically and it doesn't produce any confusion or difficulties because in our mental model (user's view of how the system should work) we understand that a piece of text can be bold, underlined and cursive simultaneously so we expect that respective toggles should act like checkboxes. And we understand that text can't be right and left aligned simultaneously so it's not a surprise for us that alignment controls act like radio buttons. We know that and we don't need extra reminders about that.
You wrote that in usability tests, users used these components without any difficulties. I think that means that the behaviour of the components matches the user's mental model i.e. users understand and expect that they can choose several age-ranges and only one view (lists or thumbnails).
I took the example of Word's toggles from A. Cooper's "About Face 3. The Essentials of Interaction Design". He wrote about it as an example of a more graphical and more space efficient approach to the checkbox or radio buttons (see Chapter 21: Controls, Check boxes (p. 443) and Radio buttons (p. 446)). And also Cooper didn't say anything like these two types of toggles must look differently.
answered Apr 24 at 14:24
LanaLana
66426
edited Apr 24 at 15:29
answered Apr 24 at 14:24
LanaLana
66426
answered Apr 24 at 14:24
LanaLana
66426
answered Apr 24 at 14:24
LanaLana
66426
66426
22
And yet, this principle gets abused all the time, including by Word. All sorts of things on Word's ribbon don't immediately match the user's mental model and they only find out whether it's a checkbox or a radio button by trying it. So it's important to make sure that the user's mental model really covers this. (Coming to it cold, without any context, it's not clear to me at all that the OP's first one is checkboxes and second one is a radio button set.)
– T.J. Crowder
Apr 25 at 8:52
I don't agree with this answer. I think it would make much more sense to simply see checkboxes...but that is just me. Sure craigslist.com is ugly, but the darn thing works and is easy to use.
– JonH
Apr 25 at 18:35
@T.J.Crowder Can you give an example where Word's buttons don't match the mental image? I can't think of any I don't find intuitive, although it might just be because I've already used them all. :)
– Nulano
Apr 25 at 21:23
In Word there’s the additional button “click to action”, which is neither a radio or a checkbox, it simply performs an action once (undo, increase font size, zoom in).
– Tim
Apr 26 at 2:08
1
This is a wrong answer. The examples you used are grouped by style in the second example but not in the first. Text modifications are completely different to alignment. You can't have two alignments, you can have two text modifications. Doesn't really help when we're trying to select multiple ages....... I can't believe how highly voted this is an answer.
– insidesin
Apr 26 at 6:31
add a comment |
22
And yet, this principle gets abused all the time, including by Word. All sorts of things on Word's ribbon don't immediately match the user's mental model and they only find out whether it's a checkbox or a radio button by trying it. So it's important to make sure that the user's mental model really covers this. (Coming to it cold, without any context, it's not clear to me at all that the OP's first one is checkboxes and second one is a radio button set.)
– T.J. Crowder
Apr 25 at 8:52
I don't agree with this answer. I think it would make much more sense to simply see checkboxes...but that is just me. Sure craigslist.com is ugly, but the darn thing works and is easy to use.
– JonH
Apr 25 at 18:35
@T.J.Crowder Can you give an example where Word's buttons don't match the mental image? I can't think of any I don't find intuitive, although it might just be because I've already used them all. :)
– Nulano
Apr 25 at 21:23
In Word there’s the additional button “click to action”, which is neither a radio or a checkbox, it simply performs an action once (undo, increase font size, zoom in).
– Tim
Apr 26 at 2:08
1
This is a wrong answer. The examples you used are grouped by style in the second example but not in the first. Text modifications are completely different to alignment. You can't have two alignments, you can have two text modifications. Doesn't really help when we're trying to select multiple ages....... I can't believe how highly voted this is an answer.
– insidesin
Apr 26 at 6:31
22
22
And yet, this principle gets abused all the time, including by Word. All sorts of things on Word's ribbon don't immediately match the user's mental model and they only find out whether it's a checkbox or a radio button by trying it. So it's important to make sure that the user's mental model really covers this. (Coming to it cold, without any context, it's not clear to me at all that the OP's first one is checkboxes and second one is a radio button set.)
– T.J. Crowder
Apr 25 at 8:52
And yet, this principle gets abused all the time, including by Word. All sorts of things on Word's ribbon don't immediately match the user's mental model and they only find out whether it's a checkbox or a radio button by trying it. So it's important to make sure that the user's mental model really covers this. (Coming to it cold, without any context, it's not clear to me at all that the OP's first one is checkboxes and second one is a radio button set.)
– T.J. Crowder
Apr 25 at 8:52
I don't agree with this answer. I think it would make much more sense to simply see checkboxes...but that is just me. Sure craigslist.com is ugly, but the darn thing works and is easy to use.
– JonH
Apr 25 at 18:35
I don't agree with this answer. I think it would make much more sense to simply see checkboxes...but that is just me. Sure craigslist.com is ugly, but the darn thing works and is easy to use.
– JonH
Apr 25 at 18:35
@T.J.Crowder Can you give an example where Word's buttons don't match the mental image? I can't think of any I don't find intuitive, although it might just be because I've already used them all. :)
– Nulano
Apr 25 at 21:23
@T.J.Crowder Can you give an example where Word's buttons don't match the mental image? I can't think of any I don't find intuitive, although it might just be because I've already used them all. :)
– Nulano
Apr 25 at 21:23
In Word there’s the additional button “click to action”, which is neither a radio or a checkbox, it simply performs an action once (undo, increase font size, zoom in).
– Tim
Apr 26 at 2:08
In Word there’s the additional button “click to action”, which is neither a radio or a checkbox, it simply performs an action once (undo, increase font size, zoom in).
– Tim
Apr 26 at 2:08
1
1
This is a wrong answer. The examples you used are grouped by style in the second example but not in the first. Text modifications are completely different to alignment. You can't have two alignments, you can have two text modifications. Doesn't really help when we're trying to select multiple ages....... I can't believe how highly voted this is an answer.
– insidesin
Apr 26 at 6:31
This is a wrong answer. The examples you used are grouped by style in the second example but not in the first. Text modifications are completely different to alignment. You can't have two alignments, you can have two text modifications. Doesn't really help when we're trying to select multiple ages....... I can't believe how highly voted this is an answer.
– insidesin
Apr 26 at 6:31
add a comment |
I think your designer colleagues are right.
If I now look at the options, I have straightforward an idea how I can interact with them and for what they are used.
Using the squares for checkboxes and circles for radio buttons are very old, common and recognizable for most of the users. So, it simplyfies your problem in this case.
answered Apr 24 at 13:24
AsqanAsqan
27925
22
In my opinion this is less visually appealing and doesn't add much value
– GrumpyCrouton
Apr 24 at 17:36
2
@GrumpyCrouton It makes it clear the top buttons are check-boxes (multiple selections), and the bottom ones are radio buttons (single selection).
– cpburnz
Apr 25 at 13:32
2
@cpburnz I'm not disagreeing with that, but it's a compromise on how visually appealing it is, and I don't think that distinction is worth it (Again, this is an opinion)
– GrumpyCrouton
Apr 25 at 14:39
1
The average user, who does not engage with ux design, will not know that there is a difference between check boxes and radio buttons. They are just shapes you can click to select something.
– GittingGud
Apr 26 at 12:39
add a comment |
I think your designer colleagues are right.
If I now look at the options, I have straightforward an idea how I can interact with them and for what they are used.
Using the squares for checkboxes and circles for radio buttons are very old, common and recognizable for most of the users. So, it simplyfies your problem in this case.
answered Apr 24 at 13:24
AsqanAsqan
27925
22
In my opinion this is less visually appealing and doesn't add much value
– GrumpyCrouton
Apr 24 at 17:36
2
@GrumpyCrouton It makes it clear the top buttons are check-boxes (multiple selections), and the bottom ones are radio buttons (single selection).
– cpburnz
Apr 25 at 13:32
2
@cpburnz I'm not disagreeing with that, but it's a compromise on how visually appealing it is, and I don't think that distinction is worth it (Again, this is an opinion)
– GrumpyCrouton
Apr 25 at 14:39
1
The average user, who does not engage with ux design, will not know that there is a difference between check boxes and radio buttons. They are just shapes you can click to select something.
– GittingGud
Apr 26 at 12:39
add a comment |
I think your designer colleagues are right.
If I now look at the options, I have straightforward an idea how I can interact with them and for what they are used.
Using the squares for checkboxes and circles for radio buttons are very old, common and recognizable for most of the users. So, it simplyfies your problem in this case.
answered Apr 24 at 13:24
AsqanAsqan
27925
I think your designer colleagues are right.
If I now look at the options, I have straightforward an idea how I can interact with them and for what they are used.
Using the squares for checkboxes and circles for radio buttons are very old, common and recognizable for most of the users. So, it simplyfies your problem in this case.
answered Apr 24 at 13:24
AsqanAsqan
27925
answered Apr 24 at 13:24
AsqanAsqan
27925
answered Apr 24 at 13:24
AsqanAsqan
27925
answered Apr 24 at 13:24
AsqanAsqan
27925
27925
22
In my opinion this is less visually appealing and doesn't add much value
– GrumpyCrouton
Apr 24 at 17:36
2
@GrumpyCrouton It makes it clear the top buttons are check-boxes (multiple selections), and the bottom ones are radio buttons (single selection).
– cpburnz
Apr 25 at 13:32
2
@cpburnz I'm not disagreeing with that, but it's a compromise on how visually appealing it is, and I don't think that distinction is worth it (Again, this is an opinion)
– GrumpyCrouton
Apr 25 at 14:39
1
The average user, who does not engage with ux design, will not know that there is a difference between check boxes and radio buttons. They are just shapes you can click to select something.
– GittingGud
Apr 26 at 12:39
add a comment |
22
In my opinion this is less visually appealing and doesn't add much value
– GrumpyCrouton
Apr 24 at 17:36
2
@GrumpyCrouton It makes it clear the top buttons are check-boxes (multiple selections), and the bottom ones are radio buttons (single selection).
– cpburnz
Apr 25 at 13:32
2
@cpburnz I'm not disagreeing with that, but it's a compromise on how visually appealing it is, and I don't think that distinction is worth it (Again, this is an opinion)
– GrumpyCrouton
Apr 25 at 14:39
1
The average user, who does not engage with ux design, will not know that there is a difference between check boxes and radio buttons. They are just shapes you can click to select something.
– GittingGud
Apr 26 at 12:39
22
22
In my opinion this is less visually appealing and doesn't add much value
– GrumpyCrouton
Apr 24 at 17:36
In my opinion this is less visually appealing and doesn't add much value
– GrumpyCrouton
Apr 24 at 17:36
2
2
@GrumpyCrouton It makes it clear the top buttons are check-boxes (multiple selections), and the bottom ones are radio buttons (single selection).
– cpburnz
Apr 25 at 13:32
@GrumpyCrouton It makes it clear the top buttons are check-boxes (multiple selections), and the bottom ones are radio buttons (single selection).
– cpburnz
Apr 25 at 13:32
2
2
@cpburnz I'm not disagreeing with that, but it's a compromise on how visually appealing it is, and I don't think that distinction is worth it (Again, this is an opinion)
– GrumpyCrouton
Apr 25 at 14:39
@cpburnz I'm not disagreeing with that, but it's a compromise on how visually appealing it is, and I don't think that distinction is worth it (Again, this is an opinion)
– GrumpyCrouton
Apr 25 at 14:39
1
1
The average user, who does not engage with ux design, will not know that there is a difference between check boxes and radio buttons. They are just shapes you can click to select something.
– GittingGud
Apr 26 at 12:39
The average user, who does not engage with ux design, will not know that there is a difference between check boxes and radio buttons. They are just shapes you can click to select something.
– GittingGud
Apr 26 at 12:39
add a comment |
Most normal users don't know the difference between a radio button and a check button. At the most, they sometimes get upset when you can't activate multiple radio buttons where it would make sense.
Doing without a visual difference won't confuse a single user - they will see that in some cases selecting one thing removes the other selection, and in other cases not. And they won't care, especially if it makes sense.
If you do want them to have a difference, how about using round corners for the radiobuttons (maybe even between options) and angled corners with the check boxes? The design stays simple, and people who are 'in the know' can see the difference immediately.
answered Apr 25 at 7:41
Carl DombrowskiCarl Dombrowski
1342
add a comment |
Most normal users don't know the difference between a radio button and a check button. At the most, they sometimes get upset when you can't activate multiple radio buttons where it would make sense.
Doing without a visual difference won't confuse a single user - they will see that in some cases selecting one thing removes the other selection, and in other cases not. And they won't care, especially if it makes sense.
If you do want them to have a difference, how about using round corners for the radiobuttons (maybe even between options) and angled corners with the check boxes? The design stays simple, and people who are 'in the know' can see the difference immediately.
answered Apr 25 at 7:41
Carl DombrowskiCarl Dombrowski
1342
add a comment |
Most normal users don't know the difference between a radio button and a check button. At the most, they sometimes get upset when you can't activate multiple radio buttons where it would make sense.
Doing without a visual difference won't confuse a single user - they will see that in some cases selecting one thing removes the other selection, and in other cases not. And they won't care, especially if it makes sense.
If you do want them to have a difference, how about using round corners for the radiobuttons (maybe even between options) and angled corners with the check boxes? The design stays simple, and people who are 'in the know' can see the difference immediately.
answered Apr 25 at 7:41
Carl DombrowskiCarl Dombrowski
1342
Most normal users don't know the difference between a radio button and a check button. At the most, they sometimes get upset when you can't activate multiple radio buttons where it would make sense.
Doing without a visual difference won't confuse a single user - they will see that in some cases selecting one thing removes the other selection, and in other cases not. And they won't care, especially if it makes sense.
If you do want them to have a difference, how about using round corners for the radiobuttons (maybe even between options) and angled corners with the check boxes? The design stays simple, and people who are 'in the know' can see the difference immediately.
answered Apr 25 at 7:41
Carl DombrowskiCarl Dombrowski
1342
answered Apr 25 at 7:41
Carl DombrowskiCarl Dombrowski
1342
answered Apr 25 at 7:41
Carl DombrowskiCarl Dombrowski
1342
answered Apr 25 at 7:41
Carl DombrowskiCarl Dombrowski
1342
1342
add a comment |
add a comment |
Thanks for contributing an answer to User Experience Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fux.stackexchange.com%2fquestions%2f125231%2fmultiple-options-vs-single-option-ui%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
34
If you go with this approach, it becomes crucial to make sure it's clear when only one option is allowed vs. multiple. For instance, your example has two selections made for the field "Age", which I wouldn't have expected to be possible. One way to make this clear without changing your elements is adding some help text like "Choose all that apply"
– nvioli
Apr 24 at 19:58
35
Those gray options look more like they're disabled, rather than deselected.
– 200_success
Apr 24 at 20:18
5
"My aim was to keep the consistency and lower the cognitive load." - Consistency with common patterns (global consistency) is more important than a single control design for both, even (particularly) if it behaves differently. I would also argue that if you're worried about cognitive load, then this is not going to achieve that reduction. "or once they used and understand the functionalities they didn't have any issues to use them in the other parts of the product." - did this require intervention to achieve? Did you test for hesitancy/etc vs control group version using normative design?
– taswyn
Apr 25 at 2:05
4
you've tested it and found no issues. This absolutely over rides whatever business think. It's not broken. Don't fix it.
– colmcq
Apr 25 at 10:15
2
One thing I find unusual about this choice for the "Age" field is that it is possible to select non-contiguous groups of ages. Is this something that you intend? It seems to me that it would be somewhat odd to select "7-9" and "13-16" but not select the "10-12" in between them. If what you're looking for is a contiguous range, consider something like a bar above the ages where you can move the minimum and maximum left and right to select as much of the range as you want, but in a strictly contiguous manner. A common example of this would be the margin settings in a word processor.
– Darrel Hoffman
Apr 26 at 19:48