41

I'm trying to devise an icon to indicate that when it is clicked, it will collapse all the nodes in a tree. The tree contains profiles which already have an icon, so ideally I'm looking for a "decorator" for our profile icon (like the star-burst used to indicate that clicking this button will create a new thing, or the pencil that indicates that clicking the button will edit the selected thing).

I've tried using the Windows tree node icons, but these are hard-coded to the Windows Vista/7 style and so will look wrong on Windows XP; also, given that they are triangles, they're a bit abstract.

UPDATE: The icon will be displayed in a separate "Actions pane" to the right of the tree view.

6
  • We're using a little icon with a + and - sign next to a folder image. (our tree nodes are usually folders)
    – Barfieldmv
    Sep 5, 2011 at 14:38
  • That's a design question. Voted to close.
    – Phil
    Sep 5, 2011 at 15:00
  • 3
    @Phil: There are lots of questions phrased "What is a good icon?" that have many upvotes and answers. I can't see anything in the FAQ indicating that design questions are forbidden.
    – alastairs
    Sep 5, 2011 at 15:27
  • 12
    @Phil How is design not a huge part of user experience...? I can see how a purely stylistic question is unwanted, but UX is all about designing thing properly...
    – Ben Brocka
    Sep 5, 2011 at 16:50
  • 1
    @alastairs: The FAQ also doesn't say that questions about giraffes are forbidden ;) A good question would be: Can this be achieved with an icon? And if yes, what's the most common one? And my answer would be that only very few icons without label work for a broad audience and that a different approach might be better (could be easily tested against with a quick usability test).
    – Phil
    Sep 5, 2011 at 16:55

5 Answers 5

34

Go with a chevron. It is widely used for collapsing and expanding, and it's rather self explanatory.

enter image description here enter image description here

6
  • I like these. Where did you find them?
    – alastairs
    Sep 7, 2011 at 15:09
  • 2
    I created myself, feel free to use them. Sep 7, 2011 at 15:15
  • 2
    I create those with a guillemet (en.wikipedia.org/wiki/Guillemet) which I then rotate 90 degrees. It allows me to choose a specific font to get a specific look.
    – Shawn
    Dec 14, 2011 at 21:29
  • Yes, this is more intuitive to me than triangles that rotate 90 degrees to represent what is basically a vertical slide rather than a rotation. One idiom I've seen is to use a single down chevron to expand one, and the double down to expand all. Up and double up to collapse.
    – Jon Coombs
    Feb 26, 2016 at 23:05
  • 1
    I am thinking these are page down, page up actions. Isn't it somewhat confusing? or am I the only one?
    – Harshal
    Sep 22, 2016 at 10:09
10

I've previously used this kind of idea below - not these actual icon, but something based on them and in keeping with the rest of the design style.

enter image description here

enter image description here

2
  • Thanks; I had seen something similar to the "expand" icon elsewhere.
    – alastairs
    Sep 5, 2011 at 15:54
  • This makes sense, since presumably the individual nodes consist of a single box containing either a plus or a minus sign. If OTOH you were using a single chevron on each node in the tree, then the "all" version could be double chevrons, which is a simpler icon to parse visually.
    – Jon Coombs
    Feb 26, 2016 at 23:12
10

I would go to a visually cleaner solution, i.e, with less artifacts / clutter.

Google Mail - Collapse AllGoogle Mail - Collapse All Example2

Example1

2
  • I don't think I've ever seen this before, so personally I wouldn't call it broadly adopted!
    – Jon Coombs
    Feb 26, 2016 at 23:00
  • I just checked Gmail, and it is using an icon similar to this for the expand/collapse button when viewing an email conversation.
    – JohnDubya
    Oct 27, 2016 at 21:06
3

So is there a consensus? Across the web, even within the same organizations I've seen them use different icons. On Google Groups, they use the right facing arrow / down facing arrow combo. In Gmail, they use the + / -. In Google Plus they use the Chevron double arrow. WTF? I understand that different groups build those applications and one icon might make more contextual sense in one place than the other but seriously, standardization would be nice.

Outside the Chevron double arrow, I've always been reluctant in using the right / down facing arrow. I think it'll get lost / confused with any combo boxes on the page.

0

I can't quite grasp the context you need the design to be implemented. but I've always found cases like these don't necessarily need to reinvent the wheel.

a good reference to use is http://patterntap.com/ I've always find it useful, hopefully it'll help you.

1
  • 2
    Unfortunately, the patterntap link is broken.
    – LarsH
    Sep 12, 2018 at 18:08

Not the answer you're looking for? Browse other questions tagged or ask your own question.