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'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.

share|improve this question
1  
The toolbox (accordion) menu is better than just stacking lists imo. –  CaffGeek Feb 9 '12 at 15:19
add comment

4 Answers

up vote 3 down vote accepted

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.

share|improve this answer
    
So "tab" may be good. I'll make a change and send out here again. –  Mason Zhang Feb 10 '12 at 12:48
add comment

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.
share|improve this answer
add comment

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

share|improve this answer
    
+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. –  peteorpeter Feb 9 '12 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. –  Mason Zhang Feb 10 '12 at 5:20
add comment

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

share|improve this answer
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.