2

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:

enter image description here

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

4
  • 1
    What's your exact question?
    – msp
    Sep 16, 2014 at 8:02
  • Thanks msparer! How can i improve this UI? I don't think this is the best solution for the user...he will jump from a screen to another and i'm afraid he will lost the focus on what he's doing. Sep 16, 2014 at 13:49
  • Why do multiple product ratings need to be grouped into a single card? I consider "rating" a single action that should have one complete flow associated with it. That is, I find the thing I'm looking for, I rate it, and I am taken back to the initial screen. Perhaps it would help to have a bit more information about the type of content you're working with?
    – wersimmon
    Sep 17, 2014 at 15:33
  • @SimoneVellei, what SHOULD the user be doing? What is the main task you want the user to complete? From your example I'm led to believe the main task is rating products. Is that correct? Or is this just a shopping cart and rating products are just a secondary (optional) task?
    – Phil Tune
    Sep 23, 2014 at 14:31

1 Answer 1

2

As a mobile user, I don't think it is a good idea to have many new windows open when I am going through a process. What if I want to go back and change something, right? I would suggest you make it like a "slide show" form without opening new screens. Apple setting is a good example.

enter image description here

On the first form, you can show all the products. You can make it select-able and have a "next" button going to the next page. Since the second and third step is to select subproducts and rate them, I would suggest that you combine two of them and make it like the third step above, showing the subproduct name on the left and empty stars on the right. User can directly click the stars to rate. Then a "next" button to proceed. The final step is to show the summary that the user chose. Hope it helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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