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

[Hartmut W Sager]

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 at 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 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
>
> _______________________________________________
> Roundtable mailing list
> Roundtable at muug.mb.ca
> http://www.muug.mb.ca/mailman/listinfo/roundtable
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://www.muug.mb.ca/pipermail/roundtable/attachments/20160104/84a4964a/attachment.html>