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 have a set of list headings eg.

List One (24) List Two (34)

etc. and I want to start with them collapsed, but allow the user to view the first 10, or expand to view all. So, I have setup so the user can click/touch the list name and it will cycle between 0-10-All, but I also want some buttons so it's obvious you can do that. I current have some split buttons with 'none, some, all' as the 3 names. I'd probably prefer icons or less text, as it starts to take up a fair amount of room when viewing on a small mobile device screen. I'm open to any ideas?

Example of current setup:

Initial implementation

Update: The lists are unrelated, and internally are sorted. When they are expanded, items appear in between the headings that are visible.

I do like the idea of a 'Showing 10/128' system, combined with a single button that changes text to show what it would do next, like 'More/All/Hide'.

Implementation of ideas:

Revised implementation

This behaves in the same none/some/all 3-state expansion, but only changes the text on the badge between 0/17, 10/17 and 17/17. I think it works quite well and the V/^ supplies the necessary affordance.

share|improve this question
    
What's the relationship of data within group and how do the groups relate to each other? Are they sorted? Is three the absolute number of groups involved? –  Chris Aug 20 '12 at 6:40
    
I don't really understand the behaviour of this list. If I click "some" on the FRE item ten new items will dynamically appear between FRE and JOO, is that how it works? –  AndroidHustle Aug 20 '12 at 8:28
add comment

3 Answers 3

up vote 0 down vote accepted

I would use "show more" instead of "some", it's more common and might better align with the users model.

I would also suggest a [+] or arrow down to the left of the results is more common for the all/none, thought this could even be moved to the right.

If you have the room, show more labels. It might not be entirely clear that "128" is the number of results.

e.g. roughly:

[v] JOO     128 results

[^] JOO     12/128   [all] [more] [less]
    Joomla
    Jooachim
    ...

Show the "all / more / less only if the user has expanded it, and the number of sub items exceeds a certain threshold (maybe about a screenful)

share|improve this answer
    
This is pretty much what I will try out, with the single button as mentioned by Dvir Adler. Thanks. –  Matt Aug 21 '12 at 12:06
add comment

The current mockup works, but I have the following comments:

  • At first it's not very clear what none/some/all refer to.
    They sit detached from the number and don't have a hint label like "show:"
  • Especially with the amount of space it takes now, it's a fairly large element repeating itself over and over.
  • Perhaps "10" would be better than "some" - it's more accurate.

Here's a suggestion that comes to mind:

Use the number itself to indicate how much of the list is showing, i.e. "0/128", "10/128", "128/128".

This might require a hint for the column like "showing", or another indication of what the first number represents.

Of course the design of the number needs to be have a button affordance.

share|improve this answer
    
I do like the idea, but I wouldn't want to make it an interactive element, as I'd rather show the next state like 'Show More'/'Show All' on the button, rather than the current displayed state, but I will definitely be showing the 10/128 style. –  Matt Aug 21 '12 at 12:04
add comment

I would suggest having a single button (or better, an icon or a link) that initially reads "more..." (to go from none to some, and from some to all). When you display all, the button would read "hide". Simple, intuitive, and third of the visual space needed.

share|improve this answer
    
I am going to pursue this in combination with peterchen's solution. –  Matt Aug 21 '12 at 12:05
add comment

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.