What's the tradeoff for using an icon driven navigation?

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;







up vote
2
down vote

favorite












It seems a common theme these days for the UI design of many web applications to use icon driven navigation (so fixed sidebar on the left consisting of only icons for navigation)



Wondering why this is becoming the trend and if there's research suggesting it's a preferred approach, or just design trends moving that way...










share|improve this question



























    up vote
    2
    down vote

    favorite












    It seems a common theme these days for the UI design of many web applications to use icon driven navigation (so fixed sidebar on the left consisting of only icons for navigation)



    Wondering why this is becoming the trend and if there's research suggesting it's a preferred approach, or just design trends moving that way...










    share|improve this question























      up vote
      2
      down vote

      favorite









      up vote
      2
      down vote

      favorite











      It seems a common theme these days for the UI design of many web applications to use icon driven navigation (so fixed sidebar on the left consisting of only icons for navigation)



      Wondering why this is becoming the trend and if there's research suggesting it's a preferred approach, or just design trends moving that way...










      share|improve this question













      It seems a common theme these days for the UI design of many web applications to use icon driven navigation (so fixed sidebar on the left consisting of only icons for navigation)



      Wondering why this is becoming the trend and if there's research suggesting it's a preferred approach, or just design trends moving that way...







      navigation icons web






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked 2 hours ago









      lamps92

      161




      161




















          2 Answers
          2






          active

          oldest

          votes

















          up vote
          4
          down vote













          Icons alone can save space in case of long(er) labels, but the tradeoff is a memory tax on the user.



          Icons can give visual order and harmony to layout, especially in sidenavs. However, in a complex, multi-node nav, we are asking our users to memorize a lot of icons.



          See the firebase console as an example:



          enter image description here



          In the expanded view, I get clear labels. Words like authentication would be hard to add below an icon in the closed state, even at small sizes.



          Firebase does provide quick hover tips that show the label, but the tradeoffs are:



          • I still may have to move up and down the nav to locate what I want.


          • I get more space in the document area to work with, which is very useful for web applications where the user is editing, manipulating, and creating content, as opposed to viewing/reading.


          • I lose the category description which helps group the items


          Nielsen Norman Group has some thoughts on Icon usability as well.




          if you find you need to ponder to come up with an icon for navigation, chances are it’s not going to be easily recognizable or intuitive for users.



          Icon labels should be visible at all times, without any interaction from the user. For navigation icons, labels are particularly critical. Don’t rely on hover to reveal text labels: not only does it increase the interaction cost, but it also fails to translate well on touch devices.







          share|improve this answer




















          • Notice even Firebase fails there as "settings" doesn't have a label even though its given context of "this project" in the expanded view.
            – Bryce Howitson
            1 hour ago






          • 1




            I was just about the quote the same article from Nielson Norman Group, but I am glad I refreshed first! This is the best worded article I have read about why icons and labels go together,and they have a good video that explains it, too.
            – cmdoc
            1 hour ago


















          up vote
          1
          down vote













          The "why" is because designers like pretty pictures. So obviously they gravitate to icons. It also gives the designer more space, especially on a small screen. So most people think it's a great solution.



          However, just because something is a trend DOES NOT mean its a good idea.



          The argument AGAINST using all icons for navigation that most designers ignore is this: There are a very very small number of icons that ALL humans intuitively understand (think bathroom gender icons). Outside of that people must expend a large amount of cognitive energy to consider all the possible meanings of an icon, then put it in context with it's most LIKELY meaning within an app. Yes, people learn icon meaning over time and once they do, interaction is faster for subsequent uses but it takes work.



          The human brain doesn't like this process of learning. We're creatures of habit but we HATE forming habits.



          "Tooltips" were created specifically to address this context/understanding issue where there's limited space (look at your browser toolbar).



          So before following the trend, consider how your initial users will feel? Do they need to understand how to progress very quickly? Worse will there be a negative consequence for doing the "wrong" thing? If so, words in interfaces provide much more context than an image so you're better off using text + icon.






          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',
            convertImagesToLinks: false,
            noModals: false,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: null,
            bindNavPrevention: true,
            postfix: "",
            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%2f121848%2fwhats-the-tradeoff-for-using-an-icon-driven-navigation%23new-answer', 'question_page');

            );

            Post as a guest






























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            4
            down vote













            Icons alone can save space in case of long(er) labels, but the tradeoff is a memory tax on the user.



            Icons can give visual order and harmony to layout, especially in sidenavs. However, in a complex, multi-node nav, we are asking our users to memorize a lot of icons.



            See the firebase console as an example:



            enter image description here



            In the expanded view, I get clear labels. Words like authentication would be hard to add below an icon in the closed state, even at small sizes.



            Firebase does provide quick hover tips that show the label, but the tradeoffs are:



            • I still may have to move up and down the nav to locate what I want.


            • I get more space in the document area to work with, which is very useful for web applications where the user is editing, manipulating, and creating content, as opposed to viewing/reading.


            • I lose the category description which helps group the items


            Nielsen Norman Group has some thoughts on Icon usability as well.




            if you find you need to ponder to come up with an icon for navigation, chances are it’s not going to be easily recognizable or intuitive for users.



            Icon labels should be visible at all times, without any interaction from the user. For navigation icons, labels are particularly critical. Don’t rely on hover to reveal text labels: not only does it increase the interaction cost, but it also fails to translate well on touch devices.







            share|improve this answer




















            • Notice even Firebase fails there as "settings" doesn't have a label even though its given context of "this project" in the expanded view.
              – Bryce Howitson
              1 hour ago






            • 1




              I was just about the quote the same article from Nielson Norman Group, but I am glad I refreshed first! This is the best worded article I have read about why icons and labels go together,and they have a good video that explains it, too.
              – cmdoc
              1 hour ago















            up vote
            4
            down vote













            Icons alone can save space in case of long(er) labels, but the tradeoff is a memory tax on the user.



            Icons can give visual order and harmony to layout, especially in sidenavs. However, in a complex, multi-node nav, we are asking our users to memorize a lot of icons.



            See the firebase console as an example:



            enter image description here



            In the expanded view, I get clear labels. Words like authentication would be hard to add below an icon in the closed state, even at small sizes.



            Firebase does provide quick hover tips that show the label, but the tradeoffs are:



            • I still may have to move up and down the nav to locate what I want.


            • I get more space in the document area to work with, which is very useful for web applications where the user is editing, manipulating, and creating content, as opposed to viewing/reading.


            • I lose the category description which helps group the items


            Nielsen Norman Group has some thoughts on Icon usability as well.




            if you find you need to ponder to come up with an icon for navigation, chances are it’s not going to be easily recognizable or intuitive for users.



            Icon labels should be visible at all times, without any interaction from the user. For navigation icons, labels are particularly critical. Don’t rely on hover to reveal text labels: not only does it increase the interaction cost, but it also fails to translate well on touch devices.







            share|improve this answer




















            • Notice even Firebase fails there as "settings" doesn't have a label even though its given context of "this project" in the expanded view.
              – Bryce Howitson
              1 hour ago






            • 1




              I was just about the quote the same article from Nielson Norman Group, but I am glad I refreshed first! This is the best worded article I have read about why icons and labels go together,and they have a good video that explains it, too.
              – cmdoc
              1 hour ago













            up vote
            4
            down vote










            up vote
            4
            down vote









            Icons alone can save space in case of long(er) labels, but the tradeoff is a memory tax on the user.



            Icons can give visual order and harmony to layout, especially in sidenavs. However, in a complex, multi-node nav, we are asking our users to memorize a lot of icons.



            See the firebase console as an example:



            enter image description here



            In the expanded view, I get clear labels. Words like authentication would be hard to add below an icon in the closed state, even at small sizes.



            Firebase does provide quick hover tips that show the label, but the tradeoffs are:



            • I still may have to move up and down the nav to locate what I want.


            • I get more space in the document area to work with, which is very useful for web applications where the user is editing, manipulating, and creating content, as opposed to viewing/reading.


            • I lose the category description which helps group the items


            Nielsen Norman Group has some thoughts on Icon usability as well.




            if you find you need to ponder to come up with an icon for navigation, chances are it’s not going to be easily recognizable or intuitive for users.



            Icon labels should be visible at all times, without any interaction from the user. For navigation icons, labels are particularly critical. Don’t rely on hover to reveal text labels: not only does it increase the interaction cost, but it also fails to translate well on touch devices.







            share|improve this answer












            Icons alone can save space in case of long(er) labels, but the tradeoff is a memory tax on the user.



            Icons can give visual order and harmony to layout, especially in sidenavs. However, in a complex, multi-node nav, we are asking our users to memorize a lot of icons.



            See the firebase console as an example:



            enter image description here



            In the expanded view, I get clear labels. Words like authentication would be hard to add below an icon in the closed state, even at small sizes.



            Firebase does provide quick hover tips that show the label, but the tradeoffs are:



            • I still may have to move up and down the nav to locate what I want.


            • I get more space in the document area to work with, which is very useful for web applications where the user is editing, manipulating, and creating content, as opposed to viewing/reading.


            • I lose the category description which helps group the items


            Nielsen Norman Group has some thoughts on Icon usability as well.




            if you find you need to ponder to come up with an icon for navigation, chances are it’s not going to be easily recognizable or intuitive for users.



            Icon labels should be visible at all times, without any interaction from the user. For navigation icons, labels are particularly critical. Don’t rely on hover to reveal text labels: not only does it increase the interaction cost, but it also fails to translate well on touch devices.








            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered 1 hour ago









            Mike M

            7,36611524




            7,36611524











            • Notice even Firebase fails there as "settings" doesn't have a label even though its given context of "this project" in the expanded view.
              – Bryce Howitson
              1 hour ago






            • 1




              I was just about the quote the same article from Nielson Norman Group, but I am glad I refreshed first! This is the best worded article I have read about why icons and labels go together,and they have a good video that explains it, too.
              – cmdoc
              1 hour ago

















            • Notice even Firebase fails there as "settings" doesn't have a label even though its given context of "this project" in the expanded view.
              – Bryce Howitson
              1 hour ago






            • 1




              I was just about the quote the same article from Nielson Norman Group, but I am glad I refreshed first! This is the best worded article I have read about why icons and labels go together,and they have a good video that explains it, too.
              – cmdoc
              1 hour ago
















            Notice even Firebase fails there as "settings" doesn't have a label even though its given context of "this project" in the expanded view.
            – Bryce Howitson
            1 hour ago




            Notice even Firebase fails there as "settings" doesn't have a label even though its given context of "this project" in the expanded view.
            – Bryce Howitson
            1 hour ago




            1




            1




            I was just about the quote the same article from Nielson Norman Group, but I am glad I refreshed first! This is the best worded article I have read about why icons and labels go together,and they have a good video that explains it, too.
            – cmdoc
            1 hour ago





            I was just about the quote the same article from Nielson Norman Group, but I am glad I refreshed first! This is the best worded article I have read about why icons and labels go together,and they have a good video that explains it, too.
            – cmdoc
            1 hour ago













            up vote
            1
            down vote













            The "why" is because designers like pretty pictures. So obviously they gravitate to icons. It also gives the designer more space, especially on a small screen. So most people think it's a great solution.



            However, just because something is a trend DOES NOT mean its a good idea.



            The argument AGAINST using all icons for navigation that most designers ignore is this: There are a very very small number of icons that ALL humans intuitively understand (think bathroom gender icons). Outside of that people must expend a large amount of cognitive energy to consider all the possible meanings of an icon, then put it in context with it's most LIKELY meaning within an app. Yes, people learn icon meaning over time and once they do, interaction is faster for subsequent uses but it takes work.



            The human brain doesn't like this process of learning. We're creatures of habit but we HATE forming habits.



            "Tooltips" were created specifically to address this context/understanding issue where there's limited space (look at your browser toolbar).



            So before following the trend, consider how your initial users will feel? Do they need to understand how to progress very quickly? Worse will there be a negative consequence for doing the "wrong" thing? If so, words in interfaces provide much more context than an image so you're better off using text + icon.






            share|improve this answer
























              up vote
              1
              down vote













              The "why" is because designers like pretty pictures. So obviously they gravitate to icons. It also gives the designer more space, especially on a small screen. So most people think it's a great solution.



              However, just because something is a trend DOES NOT mean its a good idea.



              The argument AGAINST using all icons for navigation that most designers ignore is this: There are a very very small number of icons that ALL humans intuitively understand (think bathroom gender icons). Outside of that people must expend a large amount of cognitive energy to consider all the possible meanings of an icon, then put it in context with it's most LIKELY meaning within an app. Yes, people learn icon meaning over time and once they do, interaction is faster for subsequent uses but it takes work.



              The human brain doesn't like this process of learning. We're creatures of habit but we HATE forming habits.



              "Tooltips" were created specifically to address this context/understanding issue where there's limited space (look at your browser toolbar).



              So before following the trend, consider how your initial users will feel? Do they need to understand how to progress very quickly? Worse will there be a negative consequence for doing the "wrong" thing? If so, words in interfaces provide much more context than an image so you're better off using text + icon.






              share|improve this answer






















                up vote
                1
                down vote










                up vote
                1
                down vote









                The "why" is because designers like pretty pictures. So obviously they gravitate to icons. It also gives the designer more space, especially on a small screen. So most people think it's a great solution.



                However, just because something is a trend DOES NOT mean its a good idea.



                The argument AGAINST using all icons for navigation that most designers ignore is this: There are a very very small number of icons that ALL humans intuitively understand (think bathroom gender icons). Outside of that people must expend a large amount of cognitive energy to consider all the possible meanings of an icon, then put it in context with it's most LIKELY meaning within an app. Yes, people learn icon meaning over time and once they do, interaction is faster for subsequent uses but it takes work.



                The human brain doesn't like this process of learning. We're creatures of habit but we HATE forming habits.



                "Tooltips" were created specifically to address this context/understanding issue where there's limited space (look at your browser toolbar).



                So before following the trend, consider how your initial users will feel? Do they need to understand how to progress very quickly? Worse will there be a negative consequence for doing the "wrong" thing? If so, words in interfaces provide much more context than an image so you're better off using text + icon.






                share|improve this answer












                The "why" is because designers like pretty pictures. So obviously they gravitate to icons. It also gives the designer more space, especially on a small screen. So most people think it's a great solution.



                However, just because something is a trend DOES NOT mean its a good idea.



                The argument AGAINST using all icons for navigation that most designers ignore is this: There are a very very small number of icons that ALL humans intuitively understand (think bathroom gender icons). Outside of that people must expend a large amount of cognitive energy to consider all the possible meanings of an icon, then put it in context with it's most LIKELY meaning within an app. Yes, people learn icon meaning over time and once they do, interaction is faster for subsequent uses but it takes work.



                The human brain doesn't like this process of learning. We're creatures of habit but we HATE forming habits.



                "Tooltips" were created specifically to address this context/understanding issue where there's limited space (look at your browser toolbar).



                So before following the trend, consider how your initial users will feel? Do they need to understand how to progress very quickly? Worse will there be a negative consequence for doing the "wrong" thing? If so, words in interfaces provide much more context than an image so you're better off using text + icon.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered 2 hours ago









                Bryce Howitson

                3367




                3367



























                     

                    draft saved


                    draft discarded















































                     


                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fux.stackexchange.com%2fquestions%2f121848%2fwhats-the-tradeoff-for-using-an-icon-driven-navigation%23new-answer', 'question_page');

                    );

                    Post as a guest













































































                    Popular posts from this blog

                    How to check contact read email or not when send email to Individual?

                    Displaying single band from multi-band raster using QGIS

                    How many registers does an x86_64 CPU actually have?