[RndTbl] UI convention to show collapsible content (+ and - icons vs left/right and down arrows)

Trevor Cordes trevor at tecnopolis.ca
Sun Jan 3 23:49:07 CST 2016


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"...


More information about the Roundtable mailing list