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

[John Lange]

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 at 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 at muug.mb.ca
> http://www.muug.mb.ca/mailman/listinfo/roundtable
>



-- 
John Lange
www.johnlange.ca
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://www.muug.mb.ca/pipermail/roundtable/attachments/20160104/e2e89457/attachment-0001.html>