UI convention to show collapsible content (+ and - icons vs left/right and down arrows)
(Adam, Trevor, and MUUG round table, I have added you to this discussion for you valuable input.) My kids and I have been discussing proper icons to distinguish collapsible content on the web (specifically on one of my new mobile friendly/responsive web pages: http://matchomatics.com/index.php?country=canada&page=why-matchomatics). Our discussions were for which icons identify the collapsible content behavior the best (arrows/chevrons vs +/-). After much more web based research I think I will stick to '<' for collapsed and 'v' for expanded as using +/- icons can confuse users that this is as an 'add/remove' action. And sorry Alex, I see only a small sampling of reference to an '^' arrow to show collapsed content. Interesting to note that when using arrows the icon shows the 'current' state but when using +/- the icons show the 'action' state. Don't you just love UI transitions, as in the 'hamburger' menu icon... Bradford C. Vokey - Director ============================== Fortress Software Incorporated ============================== 390 Provencher Blvd Unit F Winnipeg, Manitoba, Canada R2H 0H1 ----------------------------------------------- Phone: (204) 231-3969 or 1-800-665-0396 FAX: 1-800-513-9356 -----------------------------------------------
On 2016-01-03 Fortress Software Inc. wrote:
After much more web based research I think I will stick to '<' for collapsed and 'v' for expanded as using +/- icons can confuse users that this is as an 'add/remove' action.
Yes, < / > seem to be popular right now for collapsibles. I think you're doing it "right". However, I see no reason why you can't do whatever you want, assuming you're consistent and it looks reasonable... i.e. throw some users at it and see if they instantly get that it's a collapsible. Or be lazy and just do what google, ebay, amazon, fb, are doing. :-) Some sites eliminate icons and just leave it for the user to infer they can click a row of something to expand it. It's often intuitive without icons, especially when *every* row is collapsible. 'v' seems to be universal for "drop-down menu here" in top navbars.
Interesting to note that when using arrows the icon shows the 'current' state but when using +/- the icons show the 'action' state.
Yes, that old conundrum in UI's, even worse when the clickable is textual and it's ambiguous whether it's state or action.
Don't you just love UI transitions, as in the 'hamburger' menu icon...
I read a study somewhere that the hamburger icon was horribly non-intuitive, especially how it's used in something like Firefox. Funny how it's popping up everywhere now. I think your site is good the way it is for UI. However, I do miss the old colorful site. You've gone from extreme color to extreme bland! Ya, ya, I know it's "in"...
To be honest, I thought your email indicating "<" (left arrow) was a typo and that you had meant to write ">" (right arrow). Then I checked your web site and I see that you have indeed used "<" on the right hand side of the menu item to indicate expansion which I don't believe I've seen used before... In my opinion, the common convention is a ">" (right arrow/triangle shape) on the left of a menu item indicates available expansion, and it changes to "down arrow" when expanded. Plus/minus is the same; ie. should be to the left of menu items with "+" (plus) indicating available expansion and changing to "-" when expanded. Plus/minus was much more common back when we all only had text based terminals. A "down arrow" to the right of text (or an icon) indicates a "drop down", or "pop-up menu" is available. The fundamental difference being, a "expansion" menu happens in-place (pushing other items out of the way) where-as a "pop-up" or "drop-down" menu appears over-top of the existing text. That being said, absolutely anything can become a "standard"; it only needs appear in something popular enough that people get used to it. Arrows probably started replacing +/- because it got used in something popular (Outlook?). I'd be interested to know the history of these "conventions".... In the "real world" there are actually written standards for these things (called human factors). That's why when you see a door knob, you "intuitively" know to twist it, not just pull or push. That being said, the standards are frequently ignored. If you've ever walked up to a door and tried "pulling" when it's actually a "push", it's likely because someone ignored the standard and used a shape that implies "push". Sorry for droning on about this but I find Human Factors a fascinating and very overlooked area. A high proportion of "mistakes" could be avoided with better design. When they are ignored, tragedy can result ("medical error", "pilot error", Chernobyl, etc.). P.S. I had to google what a "hamburger menu icon" was.... John On Sun, Jan 3, 2016 at 11:49 PM, Trevor Cordes <trevor@tecnopolis.ca> wrote:
On 2016-01-03 Fortress Software Inc. wrote:
After much more web based research I think I will stick to '<' for collapsed and 'v' for expanded as using +/- icons can confuse users that this is as an 'add/remove' action.
Yes, < / > seem to be popular right now for collapsibles. I think you're doing it "right". However, I see no reason why you can't do whatever you want, assuming you're consistent and it looks reasonable... i.e. throw some users at it and see if they instantly get that it's a collapsible. Or be lazy and just do what google, ebay, amazon, fb, are doing. :-)
Some sites eliminate icons and just leave it for the user to infer they can click a row of something to expand it. It's often intuitive without icons, especially when *every* row is collapsible.
'v' seems to be universal for "drop-down menu here" in top navbars.
Interesting to note that when using arrows the icon shows the 'current' state but when using +/- the icons show the 'action' state.
Yes, that old conundrum in UI's, even worse when the clickable is textual and it's ambiguous whether it's state or action.
Don't you just love UI transitions, as in the 'hamburger' menu icon...
I read a study somewhere that the hamburger icon was horribly non-intuitive, especially how it's used in something like Firefox. Funny how it's popping up everywhere now.
I think your site is good the way it is for UI. However, I do miss the old colorful site. You've gone from extreme color to extreme bland! Ya, ya, I know it's "in"... _______________________________________________ Roundtable mailing list Roundtable@muug.mb.ca http://www.muug.mb.ca/mailman/listinfo/roundtable
-- John Lange www.johnlange.ca
I totally agree with your accurate description of current common usage of
/v/+/-, including "expand in place" vs "overlay", and left/right positioning. Furthermore, +/- for expanding/contracting subordinate items was already standard in very early Windows (with some possible non-MS heritage in DOS). Interestingly, in Windows Vista, +/- in a folder tree were replaced by right-pointing and down-pointing triangles.
Hartmut W Sager - Tel +1-204-339-8331 On 4 January 2016 at 11:46, John Lange <john@johnlange.ca> wrote:
To be honest, I thought your email indicating "<" (left arrow) was a typo and that you had meant to write ">" (right arrow). Then I checked your web site and I see that you have indeed used "<" on the right hand side of the menu item to indicate expansion which I don't believe I've seen used before...
In my opinion, the common convention is a ">" (right arrow/triangle shape) on the left of a menu item indicates available expansion, and it changes to "down arrow" when expanded.
Plus/minus is the same; ie. should be to the left of menu items with "+" (plus) indicating available expansion and changing to "-" when expanded. Plus/minus was much more common back when we all only had text based terminals.
A "down arrow" to the right of text (or an icon) indicates a "drop down", or "pop-up menu" is available.
The fundamental difference being, a "expansion" menu happens in-place (pushing other items out of the way) where-as a "pop-up" or "drop-down" menu appears over-top of the existing text.
That being said, absolutely anything can become a "standard"; it only needs appear in something popular enough that people get used to it. Arrows probably started replacing +/- because it got used in something popular (Outlook?). I'd be interested to know the history of these "conventions"....
In the "real world" there are actually written standards for these things (called human factors). That's why when you see a door knob, you "intuitively" know to twist it, not just pull or push. That being said, the standards are frequently ignored. If you've ever walked up to a door and tried "pulling" when it's actually a "push", it's likely because someone ignored the standard and used a shape that implies "push".
Sorry for droning on about this but I find Human Factors a fascinating and very overlooked area. A high proportion of "mistakes" could be avoided with better design. When they are ignored, tragedy can result ("medical error", "pilot error", Chernobyl, etc.).
P.S. I had to google what a "hamburger menu icon" was....
John
On Sun, Jan 3, 2016 at 11:49 PM, Trevor Cordes <trevor@tecnopolis.ca> wrote:
On 2016-01-03 Fortress Software Inc. wrote:
After much more web based research I think I will stick to '<' for collapsed and 'v' for expanded as using +/- icons can confuse users that this is as an 'add/remove' action.
Yes, < / > seem to be popular right now for collapsibles. I think you're doing it "right". However, I see no reason why you can't do whatever you want, assuming you're consistent and it looks reasonable... i.e. throw some users at it and see if they instantly get that it's a collapsible. Or be lazy and just do what google, ebay, amazon, fb, are doing. :-)
Some sites eliminate icons and just leave it for the user to infer they can click a row of something to expand it. It's often intuitive without icons, especially when *every* row is collapsible.
'v' seems to be universal for "drop-down menu here" in top navbars.
Interesting to note that when using arrows the icon shows the 'current' state but when using +/- the icons show the 'action' state.
Yes, that old conundrum in UI's, even worse when the clickable is textual and it's ambiguous whether it's state or action.
Don't you just love UI transitions, as in the 'hamburger' menu icon...
I read a study somewhere that the hamburger icon was horribly non-intuitive, especially how it's used in something like Firefox. Funny how it's popping up everywhere now.
I think your site is good the way it is for UI. However, I do miss the old colorful site. You've gone from extreme color to extreme bland! Ya, ya, I know it's "in"... _______________________________________________ Roundtable mailing list Roundtable@muug.mb.ca http://www.muug.mb.ca/mailman/listinfo/roundtable
-- John Lange www.johnlange.ca
_______________________________________________ Roundtable mailing list Roundtable@muug.mb.ca http://www.muug.mb.ca/mailman/listinfo/roundtable
participants (4)
-
Fortress Software Inc. -
Hartmut W Sager -
John Lange -
Trevor Cordes