Scenario: A customer calls in to a store and places three separate orders using a single account/number. Now he wants to cancel two of them and calls in the store. The store owner picks up and to maintain the records and document the calls he has to first select the orders which the customer wants to cancel from the interface and then fill up few details about it. So he will select two orders out of three and then fill up the details.

For this I was thinking of having three tabs with checkboxes on the interface. The user will first select the order by checking the tab and then can fill up the details. But the problem with this design will be if he wants to review any order details by coming back to a tab the checkbox will get unselected i.e. the order will be deselected from documenting.

Suggestions are most welcome with design and approach

enter image description here

  • 1
    Two comments: (1) Won't the details already be filled in? The customer has already placed the order. And (2) Why should selecting a tab deselect it? You're designing the interface: if that result is undesirable, don't implement it. – Andrew Leach Feb 20 '14 at 15:16
  • Is an "order" always a single product in this system? – Matt Obee Feb 20 '14 at 15:22
  • 1
    For (2), only if you code that. It's possible to say that clicking a tab doesn't change its selected state if you keep a record of what has been selected. – Andrew Leach Feb 20 '14 at 15:44
  • 1
    This is getting dangerously close to begin off-topic by asking how to implement this ability. It should probably be migrated to StackOverflow along with code that you are currently using. – Code Maverick Feb 20 '14 at 15:54
  • 1
    Not really. I don't need any code for it neither i want info on how to implement it. I just want to see the behavior from some reference. Screenshots of the states will also do. – user43771 Feb 20 '14 at 15:57

I probably wouldn't use tabs; I would use a datagrid displaying all orders at-a-glance given a customer number. The datagrid would have a checkbox column (or allow multiple row selections) and a button that would perform whatever action against all selected rows.

For order details, if there isn't enough room on the row to show the order and its details, you could do a master/detail datagrid where you click the row and the details expand/collapse, or when clicked, a modal pops up with the details pre-filled where you could have multiple actions on the modal.

|improve this answer|||||
  • Actually there is not much room on the interface to have a data grid of any sort. It is a 220 px wide form with a vertical scroll and is a pop over from the footer of the application. So data grid and modal cannot be used. – user43771 Feb 20 '14 at 15:43
  • 2
    That information probably would have been useful in the question. =D – Code Maverick Feb 20 '14 at 15:52

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.