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?
usability gui-design interaction-design checkboxes radio-buttons
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?
usability gui-design interaction-design checkboxes radio-buttons
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?
usability gui-design interaction-design checkboxes radio-buttons
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?
usability gui-design interaction-design checkboxes radio-buttons
usability gui-design interaction-design checkboxes radio-buttons
asked 6 hours ago
Deniz ErdalDeniz Erdal
1,0722816
1,0722816
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
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.
New contributor
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.
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. They will encounter these controls over long use. So certain controls that appear the same but behave differently don't pose too much difficulty after repeated 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 has 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
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.
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
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
New contributor
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.
New contributor
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.
New contributor
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.
New contributor
edited 1 hour ago
New contributor
answered 2 hours ago
LanaLana
1013
1013
New contributor
New contributor
add a comment |
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.
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.
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.
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 3 hours ago
AsqanAsqan
23125
23125
add a comment |
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. They will encounter these controls over long use. So certain controls that appear the same but behave differently don't pose too much difficulty after repeated 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 has 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
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.
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. They will encounter these controls over long use. So certain controls that appear the same but behave differently don't pose too much difficulty after repeated 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 has 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
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.
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. They will encounter these controls over long use. So certain controls that appear the same but behave differently don't pose too much difficulty after repeated 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 has 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
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.
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. They will encounter these controls over long use. So certain controls that appear the same but behave differently don't pose too much difficulty after repeated 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 has 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
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 50 mins ago
Mike MMike M
12.5k12736
12.5k12736
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