I need to create an Input form that allows a user with a mobile device, to insert informations with this structure:
output = {
context: ‘Context Title’,
products : [
{
name : ‘product1’,
subProducts : [
{ name : ‘subproduct1’, rating : 2 },
{ name : ‘subproduct2’, rating : 5 },
...others dinamyc subprodutcs...
]
},
...others dinamyc products...
]
}
The user has to insert those informations in the easiest and fastest possible way. My idea was to design the form like the picture below:
The first screen shows the "context" value. The user can change it by tapping on it. Under the context value, there is a panel where the user can pick some products. The products will be listed according to a recommendation engine, but the user will be able to search something else using a search bar.
Once the user pick a product up (action 1), a new screen takes place. In this new screen there is the name of the product as title. Under the title there is a new panel where the user can choose some Subproducts. Like the previous screen, the sub-products will be suggested by a recommendation engine but the user can use the search bar.
The user will be able to pick one or more Subproducts and he can rate them. So, everytime he choose a subproduct (action 2a, 2b), the subproduct is removed from the list and a "card" is shown at the top of the panel. The user can rate the subproduct or he can remove it by sliding the card away.
By tapping on the confirm button at the bottom of the page (action 3) we get back at the first screen. A "card" will give the user a summary information about the products he picked.
I created a little demo according on this UI. It works, but i'm afraid that is quite dispersive for the user.
Do you have any idea?
Thanks