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.

Currently I am working on a project that displays available classes for each semester to college students. I have divided the classes into certain broad sections (ART, BIS, BIO etc..). A user has the option to expand each broad section into a list that displays all available classes of that type (Ex. ART121).

When listing categories that a user may pick from we are using a hide/expand type of sectioning where a user may expand certain sections and collapse others.

I was wondering what is the best way to indicate that this action is available to the user.

I have seen the usage of the + and the enter image description here quite a bit, but I was wondering if there are any other methods that have been found to do a better job than either of these in communicating the possible expand/collapse action.

The reason I am not just using either of these previous options is that when enter image description here is collapsed it looks like enter image description here which could easily be mistaken for a play button. Also the + button could be mistaken for "I want to add this to my class list"

share|improve this question

4 Answers 4

Between your two options, what is best would depend on whether the users are primarily Mac users (arrows) or PC users (+). In this case, you would be choosing based on established conventions of desktop applications.

If you are concerned about the collapsed arrow looking like a play button, I have seen these rendered as empty triangles when collapsed. This has the added benefit of having less visual weight too. If the icon is small enough and appears to be part of a hierarchy, anyone mistaking it for a play button will be able to learn your visual convention on first usage.

This other thread seems relevant: What's the best way to view a deep hierarchy?.

Generally speaking, collapsing / expanding deep hierarchies are not a very good user experience except in limited scenarios (typically for advanced users or power users). They also introduce many usability issues of their own, especially on the web (ie. what does BACK button do?) Instead, I suggest exploring a drill-down approach, giving users increasing relevance and focus, rather than maintaining reference points to an entire collection. If there is a clear way to return to the top (ie breadcrumbs or other visuals) then this would probably be worth exploring.

share|improve this answer
1  
PC users have been getting used to the arrows for some time now... ;) –  Marjan Venema Jun 19 '12 at 6:57
    
Very true, though the development tools still make it very easy to create things that look like old school tree views. –  Steve Jun 19 '12 at 16:50

I have seen (and liked) a type of arrow that is horizontal when the item is closed and diagonal-bottom-right when it's open.

Something similar to this arrow HERE.

One is horizontal, pointing to the right. This means closed. Both Windows and Mac users will understand that.

The other one is very very similar to this but instead of pointing to bottom-left, it diagonal too, but pointing to bottom-right (just flip horizontal). This would mean that the group is open and again, both Mac and Windows users will understand that.

It's also a very good design. Could be interesting as a Proof of Concept at least.

share|improve this answer

how about ">>" "<<" symbols?

share|improve this answer
    
I wanted to suggest that you should elaborate more on your answer by showing an example as it wasn't clear. Look at how the person below has elaborated as a great example what I mean. –  Adriaan Jun 20 '12 at 14:58
1  
thank you for your suggestion. i can NOT input a image as i'm a green hand here. –  xyz Jun 21 '12 at 2:49
    
Aha of course, you will get there soon :) –  Adriaan Jun 21 '12 at 5:58

In previous days we were showing icons or some indication visually like drag/swipe/hide/show. But current trend is showing vertical/horizontal line only. User will try the line if he/she need to reduce/hide.

Though, if you want to show prominently, we can try the below type based on vertical/horizontal

enter image description here

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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