1

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"

Improve this question

4 Answers 4

Reset to default
2

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.

Improve this answer
2
  • 1
    PC users have been getting used to the arrows for some time now... ;)
    – Marjan Venema
    Commented Jun 19, 2012 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
    Commented Jun 19, 2012 at 16:50
0

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.

Improve this answer
0

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

Improve this answer
3
  • 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
    Commented Jun 20, 2012 at 14:58
  • 1
    thank you for your suggestion. i can NOT input a image as i'm a green hand here.
    – xyz
    Commented Jun 21, 2012 at 2:49
  • Aha of course, you will get there soon :)
    – Adriaan
    Commented Jun 21, 2012 at 5:58
0

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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