6

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:

enter image description here

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.

  • Does the user need to see all 12 features for every food they choose at all times? Once they've entered the 12 features for a food, can you collapse the row and hide the 12 green boxes? – rach oune Oct 21 '14 at 16:16
  • 4
    You've got ~250 views and one vague answers. That may have something to do with the inconsistency between what you're describing and what you've shown in your wireframe. At least, I can't make any sense of it. It'd be a lot easier to help if you put a little more time in and created a more realistic wireframe. – dennislees Nov 16 '15 at 14:43
  • unlimited rows is pretty vague. If you need to show all the rows, doesn't really matter how you'll display it, it will blow up the Browser because of the size of the HTML page – Dinei Oct 12 '16 at 1:11
  • @dennislees I think the vagueness is more due to English skills than laziness. – Lee Sleek Dec 11 '16 at 2:22
  • 1
    I cannot really think of myself adding enough entries to any list to "blow up the browser" - any browser today. My main question before I can start designing is - what does the user have to do with the entries? If there are many, are duplicates allowed? The mockup does not show any way to add an entry - completly free input or selection from some list? Would a copy function for similar entries be useful? Is there some completeness criterion, i.e., is an overview useful for final submission? ...and more... Please detail the process before starting any design! – virtualnobi Nov 29 '17 at 8:44
1

I would probably use an approach like this:

  1. Initial view.

initial_view

  1. User selects box containing '+'.

enter image description here

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.

0

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.

0

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.

0

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

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

enter image description here

enter image description here

strong text

0

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.

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.