5

Context

I'm working on very complex enterprise solution. We have this table that shows list of let's call them contracts. Every contract (row) can contain one or more customers (and one or more products).

Problem

I need to think of these use cases: 1. People want to copy & paste customer IDs.
2. People should be able to remove all the customers at once.
3. People should still have an overview what customers were selected.
4. People should be able to browse customers and pick those they want to.
(Since we are in the able the solution needs to be compact)

My proposal

My solution
- Clicking on the "CD-0005" would trigger the browse window
- Missing copy & paste functionality

enter image description here
- Looks super ugly
- Hard to provide overview on all the items (having tooltip on input hover is somehow strange)

What do you think? How can this problem be solved?

Improve this question
1
  • Need clarity on 2 points i.e a) People should still have an overview of what customers were selected. b) People should be able to browse customers and pick those they want to ---- and do what?
    – NB4
    May 24, 2019 at 12:31

4 Answers 4

Reset to default
1
  1. You can add a copy link in front of each customer ID on hover.

enter image description here

  1. Add filters on table headers
  2. Highlight the selected rows or make customer ID a badge when selected
  3. Making customer ID badge would make it easier to identify the ones needed and switch between states.

I loved how "Clear Move" handle the tables. You can use it as inspiration. enter image description here

Improve this answer
1
  • 2
    The main issue in the question is the Multiple customer or Multiple products that can come. @Usman how do you address that issue? This is an incomplete answer. Please read and analyze the complete question and then answer. Thank you :)
    – Kishan
    Feb 6, 2018 at 17:37
0

Why don't you add a context menu (invoked by right mouse click) containing "Copy" and "Copy all" items?

To know which customer ID you are about to copy a hover (on mouse over above each ID) helps.

The balloon closes on mouse out event.

It can be programmatically challenging to add a context menu on a balloon but once you get over it, the ease of use compensates for your effort.

Improve this answer
0

Usman Mani already proposed an elegant solution, however for anyone seeing this after... I had similar questions and stumbled upon a very useful article about building tables for reusability.

https://uxdesign.cc/designing-tables-for-reusability-490a3760533

TLDR: It's ok to not show all of the information in a row, do some usability testing and find the 2-3 most important data points a user needs in a table row and then hide the rest. Utilizing font awesome illustrate that there is more data if the user does require it.

Improve this answer
0

An easier and cleaner way would be to provide an Edit icon for each Contract row and open the whole thing in a modal overlay, provided the form does not run too long.

Improve this answer

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.