What is a good icon for illustrating expand (and collapse) all?

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

    We're using a little icon with a + and - sign next to a folder image. (our tree nodes are usually folders)

    That's a design question. Voted to close.

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

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

    @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).

  • 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

    I like these. Where did you find them?

    I created myself, feel free to use them.

    I create those with a guillemet (http://en.wikipedia.org/wiki/Guillemet) which I then rotate 90 degrees. It allows me to choose a specific font to get a specific look.

    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.

    I am thinking these are page down, page up actions. Isn't it somewhat confusing? or am I the only one?

    There are _Material Design_ versions here.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM