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.

  • 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

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]

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)

  • 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

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.

  • 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

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.

  • I am going to pursue this in combination with peterchen's solution. – Matt Aug 21 '12 at 12:05

Your Answer

