Recommend approach to create a form that needs to show unlimited rows

Question

I'm designing a form web page where users need to insert data. Part of the form is the main form information but there is another part that takes unknown number of entered rows.

Here is an example. Suppose I have a questionnaire that asks a user about his favorite food. So we need a section for user information; this is the main information. But then I need a part in the form where the user should enter one food per row, where each row contains fixed information/features. about the food (color, takes .. etc). The features are encoded as drop-down menus that contain pictures. Have a look at the sketch:

So the user need to create many rows, where each row corresponds to one set of the green boxes, (i.e. one row has the information of 12 features for the single food).

Since the user needs to create many rows, a naive solution is to repeat the same green boxes for each row. But this is a bad solution since it would blow up the Browser!

Can you recommend a good approach to solve this design/UX problem? What is a good UX solution to this situation? The approach needs to be compatible with mobile, tablet and desktop usage.

Answer 1

I would probably use an approach like this:

1. Initial view.

2. User selects box containing '+'.

This pattern could be repeated infinitely and should be easy to make adaptive to the display and input type.

If you run into performance limitations when a certain number of rows are reached, you could limit the rows per page and allow users to fill up an arbitrary number of pages with rows.

Answer 2

I think the iPhone/iPod strategy of aggregating apps provides a good solution to solving this problem. Essentially you allow users to create a group by stacking items (up to a certain number of items), and perhaps also allow them to create 'supergroups' that are stacks of groups.

However, if you want to provide an infinite number of items for a user then you need to make sure that there is some efficient way to search through and present the content to the user, otherwise it is better to put a limit or create some structure for them to organise the content.

Answer 3

If the "unlimited" number of rows must all be accessible, you have an Ajax or WinSocket problem: buffer them to and from the server as required. The server can store a functionally-unlimited number of items, but any browser will choke and fall over after awhile.

Answer 4

The first image is for mobile...you can add multiple food oprtions using plus icons, search existing food items and can add multiple columns in each food section. Further scroll down to see all the food items

Web, mobile and tab interface is almost same except that you have horizontal scroll while checking multiple columns in each food item.

strong text

Answer 5

First, divide the form in two steps, this helps to avoid the perception that the user need to fill a big form. Second, each row could be a collapsible row (something like an accordion) where each feature is added to it in a tag form (as a chip of Material Design components).

Take in mind that when you have a big group of controls in a form, you need to classify and separate them in small groups, Otherwise the user could boring filling an "infinite" form.