Buttons for showing None, Some or All of list

Question

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:

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:

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.

Answer 1

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)

Answer 2

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.

Answer 3

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.