I'm making an app with 2 lists in the main screen, and the space allocated for the 2 lists are equal. So there will be only 5 items visible for each list.

enter image description here

I'm thinking of an improvement on making more items visible for each list. Possible solutions:

Solution 1: use tabbed widget to display the 2 lists. The 2 lists will share the same space and there will be only 1 list visible and another one will be hidden.

Solution 2: use a toolbox style: enter image description here

My question is: I think neither solution 1 nor solution 2 is a good choice. Is there any other way to do it? and is the "toolbox" style appropriate nowadays? I don't want to make an app like using last century's technology.

  • 1
    The toolbox (accordion) menu is better than just stacking lists imo.
    – CaffGeek
    Feb 9, 2012 at 15:19

4 Answers 4


I'd lean towards the tabs solution. Right now you use a lot of vertical space, and having two lists above each other will make for difficult viewing. Imagine having these two toolboxes from your example one above the other.

The tabbed approach saves space and allows you to do some cool stuff, like having a small Apple-styled notices displayed on the tab that show the ammount of new or important elements inside that tab. They don't even have to be "tabs" per se - just buttons that toggle the state of the panel below them.

  • So "tab" may be good. I'll make a change and send out here again. Feb 10, 2012 at 12:48

An accordion is useful for when you have more than two lists and want to be able to toggle between them. You only have two lists, so I think accordion is a bit overkill.

Why not just put them next to each other?

enter image description here

  • +1 There's a reason this pattern is so common for multi-list apps - see MS Outlook, Mail.app (and Gmail web app) for iPad, Asana, Trello, etc. etc. etc. Feb 9, 2012 at 18:12
  • Thanks a lot for your suggestions. The reason that I didn't make it parallel: there is no enough space horizontally. typically the length of a task subject will be more than 5 works. Feb 10, 2012 at 5:20

My final solution to this question: tabbed pages, but with another style. Seems much better than old design.

enter image description here

enter image description here


This is what I came up with:

  • Build it like a regular navigation just like you do with an Iphone or the Jquery mobile standard navigation way.
  • Use a small scrollbar inside the two lists.
  • Create a grid and only use icons to save space.

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.