how to make compact UI for lists

Question

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.

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:

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.

Answer 1

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.

Answer 2

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.

Answer 3

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?

Answer 4

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