1

What are the best UX practices for displaying quick reference long lists such as these in the image below?

This page is used for quickly referencing what a user is allowed to eat on a diet. For this reason I wouldn't want to hide information under accordions because I want to minimize the amount of clicks.

On a larger screen most of my concern is that the amount of items and content is overwhelming. How can I help resolve this? Would creating an almost "infographic" type page be an effective solution?

More importantly how do I display all of this information on Mobile? Especially in a manner that is not overwhelming and easy to quickly reference.

enter image description here

5

I suggest you forget about minimizing the amount of clicks, specially on mobile. Number of clicks don't really matter if user knows exactly what (s)he wants.

You can simply divide the content on pages, tabs or accordion menus.

Must read: Stop Counting Clicks

Must read: UX Myths

3

I think huge amounts of data are always difficult to display on mobile. You can think about displaying them in a table or as a list type. Tabs are not a bad idea for the four "categories" you have there for the nutrients.

https://material.angularjs.org/latest/demo/tabs or https://material.google.com/components/tabs.html

https://material.angularjs.org/latest/demo/list

2

I think the problem that user would face is inability to 'Quickly Refer' desired content if all the content is displayed at same time to the user. Displaying four long lists won't help.

A tab based view would work better in this scenario. User would still have access to top level topics (Carbs, Vegetable, Proteins...) at one place and it would work perfectly on mobile. If you can focus increasing engagement through tab based structure then additional clicks won't matter.

Best way to do this would be to also have a quick search functionality. This would help user a LOT.

For example, As an user, I would like to view if I am allowed to eat Rice or not? So I would need to go over each and every single item until I find Rice (If it is present in the list). Quick search would definitely help here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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