Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
We're using a little icon with a + and - sign next to a folder image. (our tree nodes are usually folders) –  Barfieldmv Sep 5 '11 at 14:38
    
That's a design question. Voted to close. –  Phil Sep 5 '11 at 15:00
    
@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 '11 at 15:27
6  
@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 '11 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 '11 at 16:55
add comment

closed as off topic by Rahul May 19 '12 at 12:30

Questions on User Experience Stack Exchange are expected to relate to user experience within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

5 Answers

up vote 12 down vote accepted

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

share|improve this answer
    
I like these. Where did you find them? –  alastairs Sep 7 '11 at 15:09
    
I created myself, feel free to use them. –  Matt Rockwell Sep 7 '11 at 15:15
    
Great, thanks a lot! –  alastairs Sep 7 '11 at 15:18
    
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 '11 at 21:29
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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

Google Mail - Collapse AllGoogle Mail - Collapse All Example2

Example1

This also seems to be a fairly broaden adopted solution.

share|improve this answer
add comment

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

share|improve this answer
    
Thanks; I had seen something similar to the "expand" icon elsewhere. –  alastairs Sep 5 '11 at 15:54
add comment

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