<div dir="ltr"><div class="gmail_default" style="font-family:verdana,sans-serif;font-size:small;color:rgb(0,0,0)">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.<br> <br></div><div class="gmail_extra"><div><div class="gmail_signature"><div dir="ltr"><div><div dir="ltr"><div><div dir="ltr"><div><div dir="ltr"><font size="2"><span style="font-family:verdana,sans-serif">Hartmut W Sager - Tel +1-204-339-8331<br></span></font><br></div></div></div></div></div></div></div></div></div>
<br><div class="gmail_quote">On 4 January 2016 at 11:46, John Lange <span dir="ltr"><<a href="mailto:john@johnlange.ca" target="_blank">john@johnlange.ca</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">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...<div><br></div><div>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.</div><div><br></div><div>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.<br></div><div><br></div><div>A "down arrow" to the right of text (or an icon) indicates a "drop down", or "pop-up menu" is available.<br></div><div><br></div><div>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.</div><div><br></div><div>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"....</div><div><br></div><div>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".</div><div><br></div><div>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.).</div><div><br></div><div>P.S. I had to google what a "hamburger menu icon" was....</div><div><br></div><div>John</div><div><br></div></div><div class="gmail_extra"><br><div class="gmail_quote">On Sun, Jan 3, 2016 at 11:49 PM, Trevor Cordes <span dir="ltr"><<a href="mailto:trevor@tecnopolis.ca" target="_blank">trevor@tecnopolis.ca</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><span>On 2016-01-03 Fortress Software Inc. wrote:<br>
> After much more web based research I think I will stick to '<' for<br>
> collapsed and 'v' for expanded as using +/- icons can confuse users<br>
> that this is as an 'add/remove' action.<br>
<br>
</span>Yes, < / > seem to be popular right now for collapsibles. I think<br>
you're doing it "right". However, I see no reason why you can't do<br>
whatever you want, assuming you're consistent and it looks<br>
reasonable... i.e. throw some users at it and see if they instantly get<br>
that it's a collapsible. Or be lazy and just do what google, ebay,<br>
amazon, fb, are doing. :-)<br>
<br>
Some sites eliminate icons and just leave it for the user to infer they<br>
can click a row of something to expand it. It's often intuitive<br>
without icons, especially when *every* row is collapsible.<br>
<br>
'v' seems to be universal for "drop-down menu here" in top navbars.<br>
<span><br>
> Interesting to note that when using arrows the icon shows the<br>
> 'current' state but when using +/- the icons show the 'action' state.<br>
<br>
</span>Yes, that old conundrum in UI's, even worse when the clickable is<br>
textual and it's ambiguous whether it's state or action.<br>
<span><br>
> Don't you just love UI transitions, as in the 'hamburger' menu icon...<br>
<br>
</span>I read a study somewhere that the hamburger icon was horribly<br>
non-intuitive, especially how it's used in something like Firefox.<br>
Funny how it's popping up everywhere now.<br>
<br>
I think your site is good the way it is for UI. However, I do miss the<br>
old colorful site. You've gone from extreme color to extreme bland!<br>
Ya, ya, I know it's "in"...<br>
_______________________________________________<br>
Roundtable mailing list<br>
<a href="mailto:Roundtable@muug.mb.ca" target="_blank">Roundtable@muug.mb.ca</a><br>
<a href="http://www.muug.mb.ca/mailman/listinfo/roundtable" rel="noreferrer" target="_blank">http://www.muug.mb.ca/mailman/listinfo/roundtable</a><span class="HOEnZb"><font color="#888888"><br>
</font></span></blockquote></div><span class="HOEnZb"><font color="#888888"><br><br clear="all"><div><br></div>-- <br><div>John Lange<br><a href="http://www.johnlange.ca" target="_blank">www.johnlange.ca</a></div>
</font></span></div>
<br>_______________________________________________<br>
Roundtable mailing list<br>
<a href="mailto:Roundtable@muug.mb.ca">Roundtable@muug.mb.ca</a><br>
<a href="http://www.muug.mb.ca/mailman/listinfo/roundtable" rel="noreferrer" target="_blank">http://www.muug.mb.ca/mailman/listinfo/roundtable</a><br>
<br></blockquote></div><br></div></div>