I need to design a page to get user inputs in below format:

1. Item A (text)

 a. Sub-item (text)

 b. Upload photo for Sub-item (Browse and upload)

 c. Description for Sub-item (text)

2. Item B (text)

 a. Sub-item (text)

 b. Upload photo for Sub-item (Browse and upload)

 c. Description for Sub-item (text)

Only Item A, Item B, Item n.. are required. All other fields are optional. I like this to be in one page, heavy javascript to guide users.

I am thinking to show only one field for Item A, when users click on it, it show other field one by one through jQuery. All field should have Suggested Text, etc...

But is there a suitable method for getting multiple user inputs through text in a list format that is not too intimidating for users?

  • Can you give some further details. What context will this be in, will it be used on mobile devices? Does it have to look visually like a list? – limitlessloop Jan 14 '13 at 11:02
  • It is on desktop and doesn't have to look like a list. Basically Item A is a Business Name, Sub-item is the Service or Product of that business, etc... – HP. Jan 15 '13 at 5:03

I would suggest not to use jQuery and display the form fully. Imagine if you are a user and you come to the form where there is 1 field. Great only 1 field to fill out that's easy! But every time you fill it in the new filed comes up. AAAAArgh! It would drive me crazy, especially if you have more than 1 of these.

Other alternative is to display 1 field and having something like "Describe your item" link under that would display all sub-items strait away. And then have a "Add an item" button if the user would like to add an extra item.


download bmml source – Wireframes created with Balsamiq Mockups

Also I'm a bit confused about the question in bold... are you talking about the form?

| improve this answer | |
  • But what if the full form shows only ONCE when the Item A is clicked? That wouldn't be much annoying is it? The reason I am thinking about it is because showing everything will scare of users (Etsy does the "context" input display pretty well). Also I don't know if letting users to click on Describe your Item would consider "more work" (aka. fewer people will likely to do that although I like to get high percentage of people filling out the optional parts). Yes, my bold question is about the form. – HP. Jan 15 '13 at 5:00
  • I thought that sub items are not essential to complete the form. Why would 4 field form scare the user away? – Igor-G Jan 15 '13 at 8:58
  • Well, there could be Item C, Item B, etc... That would be a long list to enter. The ideal goal is to get users to fill in at least Item A and Item B with all sub-items. – HP. Jan 16 '13 at 4:25

A common usage example for such pattern would be websites which maintains your profiles like Naukri.com, elance.com etc where you would click a link to Add an employment/Education/skill/language/certifications/licenses etc. They would give you a bunch of fields out of which only 1-2 will be mandatory and rest will be optional.

Assuming that all the fields are going to be same and if showing 4-5 fields at the same time is taking too much of real-estate in your context, then you could do the following

-- Show only mandatory fields with the Save button and 'More' link

-- On clicking 'More' link, other fields would be displayed

-- On clicking 'Save' button, show the data in a grid kind of layout (and recently saved data on top) along with a 'Add New' button.

| improve this answer | |

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.