2

I am now designing a browser based software where user selects products and adds them to his "basket" after the user selected all he needed he then proceeds to edit each item in the basket. Items look like small tiles with product information on them. When the user clicks on a tile pop-up window opens allowing him to edit price, license model, royalties etc. Once the user finished he can close the window or click the "Next" button to proceed to edit the next product. I am currently using pop-up windows but was wondering if there is any other interesting solution for this?

I chose pop-ups because I don't want to send the user to another page and go back and forth as in some cases he might only need to have a quick look at the product's details to make sure they are correct

Pop-ups are not 100% working for me in this case because some of the products can have quite complex settings and users have the ability to add and modify multiple royalty tables. This feels like a lot of complex activity to place inside a pop-up.

Please let me know you thoughts or alternative interface solutions.

Many thanks in advance for taking the time.

Improve this question
2
  • To me this sounds like an X/Y problem, instead of having the user add all the items, then finding a way to go back and edit all of the items without breaking context, why not just have the user customize the item as they add it so that they don't need to edit it at all?
    – DasBeasto
    Oct 20, 2016 at 14:28
  • Hey @DasBeasto this is a good idea, we considered this and tested both approaches - during the process described above the user creates a complex configuration with products from many different product groups while considering additional elements like budget timeline etc. We found that users prefer to finish one task of putting the overall configuration together before diving into the details.
    – Vak
    Dec 5, 2016 at 16:50

2 Answers 2

Reset to default
2

You can use inline editing.

See this example: Simple inline editing.

enter image description here

It is for a table, but the functionality can be implemented with others libraries too (like this).

enter image description here

Another option can be a tooltip. See this library.

Improve this answer
4
  • Is there an echo in here? ;P
    – mtv.vac
    Oct 21, 2016 at 14:34
  • @mtv.vac An echo?
    – Madalina Taina
    Oct 21, 2016 at 14:41
  • @mtv.vac Ah, I understand. When I wrote this, it wasn't any answer posted. Anyway, I'm a developer, this is the solution I prefer, inline editing and I detailed my answer, I offer more options... I'm sorry if you were offended by my answer.
    – Madalina Taina
    Oct 21, 2016 at 14:45
  • 1
    @MadalinaTaina thank you for your response and very good examples of the interface. I will consider using it, it suggests a sort of show/hide interface like an accordion in my case as most of this detailed product information will be out of sight most of the time
    – Vak
    Dec 5, 2016 at 17:05
0

You could implement an in-line editing pattern for each item in the shopping cart. It will keep your user on the same page, without relying on a modal dialogue for edits.

You can read more about in-line editing here: http://patternry.com/p=inline-edit/ Note: this example only discusses text editing. However, you could just as easily incorporate dropdown menus, radio buttons/checkboxes, etc. to suit your needs.

Improve this answer
1
  • thank you for your response and very good examples of the interface. I will consider using it, it suggests a sort of show/hide interface like an accordion in my case as most of this detailed product information will be out of sight most of the time
    – Vak
    Dec 5, 2016 at 17:05

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.