5

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 :

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?

4
  • can you post your interface so far? Oct 17, 2020 at 8:30
  • I edited my answer with a jsfiddle example Oct 17, 2020 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
    Oct 19, 2020 at 13:34
  • Unfortunately, I can only say it will be used by admins only. Oct 20, 2020 at 1:59

1 Answer 1

1

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

2
  • 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. Oct 20, 2020 at 1:58
  • It sounds like you have three separate things the user needs to manage. Items, item requirements, and the requirement conditions. I would start by creating bare bones UI for editing all three on their own and then seeing how you could merge them together to allow for faster editing. Basically, you need to know the workflow that the users will go through before you can figure out how best to accommodate that workflow. Oct 21, 2020 at 17:58

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.