Multiple options vs single option UI





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}







4















On the dashboard we are building we got 2 sets of options users can pick:



Multiple options (checkboxes)
enter image description here



and single options (radio buttons behavior)
enter image description here



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?










share|improve this question





























    4















    On the dashboard we are building we got 2 sets of options users can pick:



    Multiple options (checkboxes)
    enter image description here



    and single options (radio buttons behavior)
    enter image description here



    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?










    share|improve this question

























      4












      4








      4








      On the dashboard we are building we got 2 sets of options users can pick:



      Multiple options (checkboxes)
      enter image description here



      and single options (radio buttons behavior)
      enter image description here



      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?










      share|improve this question














      On the dashboard we are building we got 2 sets of options users can pick:



      Multiple options (checkboxes)
      enter image description here



      and single options (radio buttons behavior)
      enter image description here



      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






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked 6 hours ago









      Deniz ErdalDeniz Erdal

      1,0722816




      1,0722816






















          3 Answers
          3






          active

          oldest

          votes


















          6














          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:



          enter image description here



          And these Word’s alignment controls act like radio buttons:



          enter image description here



          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.






          share|improve this answer










          New contributor




          Lana is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.




























            2














            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.



            enter image description here



            enter image description here



            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.






            share|improve this answer































              1














              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:



              enter image description here



              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:



              enter image description here



              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:



              enter image description here



              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.






              share|improve this answer
























                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
                });


                }
                });














                draft saved

                draft discarded


















                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









                6














                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:



                enter image description here



                And these Word’s alignment controls act like radio buttons:



                enter image description here



                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.






                share|improve this answer










                New contributor




                Lana is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.

























                  6














                  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:



                  enter image description here



                  And these Word’s alignment controls act like radio buttons:



                  enter image description here



                  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.






                  share|improve this answer










                  New contributor




                  Lana is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                  Check out our Code of Conduct.























                    6












                    6








                    6







                    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:



                    enter image description here



                    And these Word’s alignment controls act like radio buttons:



                    enter image description here



                    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.






                    share|improve this answer










                    New contributor




                    Lana is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                    Check out our Code of Conduct.










                    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:



                    enter image description here



                    And these Word’s alignment controls act like radio buttons:



                    enter image description here



                    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.







                    share|improve this answer










                    New contributor




                    Lana is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                    Check out our Code of Conduct.









                    share|improve this answer



                    share|improve this answer








                    edited 1 hour ago





















                    New contributor




                    Lana is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                    Check out our Code of Conduct.









                    answered 2 hours ago









                    LanaLana

                    1013




                    1013




                    New contributor




                    Lana is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                    Check out our Code of Conduct.





                    New contributor





                    Lana is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                    Check out our Code of Conduct.






                    Lana is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                    Check out our Code of Conduct.

























                        2














                        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.



                        enter image description here



                        enter image description here



                        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.






                        share|improve this answer




























                          2














                          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.



                          enter image description here



                          enter image description here



                          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.






                          share|improve this answer


























                            2












                            2








                            2







                            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.



                            enter image description here



                            enter image description here



                            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.






                            share|improve this answer













                            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.



                            enter image description here



                            enter image description here



                            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.







                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered 3 hours ago









                            AsqanAsqan

                            23125




                            23125























                                1














                                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:



                                enter image description here



                                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:



                                enter image description here



                                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:



                                enter image description here



                                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.






                                share|improve this answer




























                                  1














                                  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:



                                  enter image description here



                                  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:



                                  enter image description here



                                  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:



                                  enter image description here



                                  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.






                                  share|improve this answer


























                                    1












                                    1








                                    1







                                    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:



                                    enter image description here



                                    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:



                                    enter image description here



                                    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:



                                    enter image description here



                                    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.






                                    share|improve this answer













                                    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:



                                    enter image description here



                                    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:



                                    enter image description here



                                    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:



                                    enter image description here



                                    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.







                                    share|improve this answer












                                    share|improve this answer



                                    share|improve this answer










                                    answered 50 mins ago









                                    Mike MMike M

                                    12.5k12736




                                    12.5k12736






























                                        draft saved

                                        draft discarded




















































                                        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.




                                        draft saved


                                        draft discarded














                                        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





















































                                        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







                                        Popular posts from this blog

                                        Reichsarbeitsdienst

                                        Tanganjiko

                                        Norda sulo