2

I'm working on a web project and I have a list of list which can be edited. It's displayed within a modal, I can resize it as I want so it's not that big of a deal. My main problem is I don't really know how I could display it with almost every information easily accessible (0 clicks ideally).

To give a little background, let's say you have a JSON that looks like the following :

{
    "value": "value",
    "conditions": [
        ["condition1", "condition2"],
        ["condition1"],
        ["condition1", "condition2", "condition3"]
    ]
}

So, you have a value that have some conditions, there's usually between 1 and 3 conditions in each conditions array (it can be more but most of the time it's not).

Each conditions array represent elements tied together (like condition1 AND conditions2 ...).

There is no length limit for the conditions array and the sub arrays.

I though about a list of input representing the conditions separated with a comma (so you can display it and edit it at the same place) but I realized that what's in the input is already defined in the system and should not be random things. So input is a no go as it could compromise the data. A selection from a drop-down or checkbox somewhere is what I'll use for the editable part. No issue here but I wanted to make clear that a list of input is not possible.

I'm using bootstrap 4, I though about of something like a grid of bootstrap list-group but I'm concerned about the result readability and the fact that the AND is not explicit.

Also, we should be able to add or delete elements in each list.

List-group grid is the best I could think of by now.

EDIT: Here's what it looks like using a list grid : https://jsfiddle.net/y70b651p/15/. As you can see, the result isn't great at all if list's lengths are too different.

Do you have any better solution?

New contributor
Titouan Le Floch Riche is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
  • can you post your interface so far? – Nicolas Hung Oct 17 at 8:30
  • I edited my answer with a jsfiddle example – Titouan Le Floch Riche Oct 17 at 19:51
  • From UX perspective this a a very vague question. Can you add more details about how this is going to be used, by who why and when? – jazZRo yesterday
  • Unfortunately, I can only say it will be used by admins only. – Titouan Le Floch Riche yesterday
0

To be able to give a more detailed answer, I'd need more contextual information about who it's for, what it's purpose is, and what situations they'll be using it.

But to address some of the shortcomings of the current design you linked to, I'd do the following:

  • Somehow convey to the user that the requirements are children of a parent item.
  • Give some visual indication that they can be changed.
  • Include explanations of the "AND" logic in the design.

Here's a mock-up showing some of those in action:

enter image description here

| improve this answer | |
New contributor
Bryce Barbara is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
  • Thanks for the mock-up Bryce ! I can't use it as is because the same "promotion item" would have multiple lists (like "Is over 21 and is in US and is New" or "Is over 18 and is in EU" for example) but it helps ! Unfortunately I can't give you any information as what's its purpose or so. But to give kind of an answer, it will be used by admins only, it's a back end feature. It doesn't have to be extremely fancy, but clear enough so they don't populate the db with wrong information. – Titouan Le Floch Riche yesterday

Your Answer

Titouan Le Floch Riche is a new contributor. Be nice, and check out our Code of Conduct.

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.