10

I'm creating a web application which will contain a large list of ingredients. You can see my current approach below:

enter image description here

However as the list grows it starts to take too much of the screen estate. Here are my current thoughts:

  • the list items are equally important so prioritizing them (e.g. hiding less important items behind a tab) is not ideal solution
  • one option would be to create tabs (e.g. item categories) but this would introduce quite a lot of extra clicks for the user
  • I thought of having some kind of rolldown/rollup sublists but not sure how to really do it. Any examples of such a solution which is well implemented?

Please share your thoughts on this subject. Also, I would appreciate any links/screenshots of an existing existing implementation which you think is well done.

The most important thing is to keep the list simple and reduce the amount of clicks to minimum.

Improve this question
2
  • 1
    What's the context? Why are people searching the list? Do they know what they're looking for in advance? Do they already know what those items will be called? Do they already have expectations of what the list will contain? Is there a categorization scheme that matches the users' mental model? What other solutions have you already tried, and why didn't they work?
    – Jimmy Breck-McKye
    Oct 26, 2012 at 18:52
  • Great questions, I'll try to clarify. Context: user will create a list of shopping items and categorize them (as seen on the picture). Once the list is created, user can make a shopping list by selecting items from the list. Shopping list can be printed or sent to a mobile phone. I guess this clarifies most of your questions. I haven't tried any other solutions, as this is work in progress. I'm currently just researching possible options.
    – finspin
    Oct 26, 2012 at 20:20

2 Answers 2

Reset to default
3

The book 100 Things Every Designer Should Know About People (has some really great tips, and links to good research in general) mentions that having a user go through clicks really isn't an issue, as long as at each step brings the user more information that they need. I've linked to the page available in Amazon right where the author says it. Sadly the page right before that isn't included.

So I think the collapsible menu or tabs isn't really an issue. As for shopping lists that work extremely well - have a look at Clear (a todo manager, essentially the same thing right?). It has kick ass implementation, and does collapsible menus really well.

Improve this answer
0

There are examples of some very nice lists in a previous answer to closed question: https://ux.stackexchange.com/a/11641/13249

I don't know if pictures are the best solution for you, but they do a great job in those BBC examples of breaking up the monotony of the list and making it much easier to scan.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.