4

I am showing a dual list on web application. It has desktop view and mobile responsive view.

As we know that we can't show the dual list 2 columns side by side in mobile view due to less space.

So Expecting any alternative solutions...

Here I am attaching what i tryied...

enter image description here

Here I am attaching Example Desktop Screen:

enter image description here

As user want to select an item and he can move it from bottom to top, top to bottom from the selected list using right side "Up and Down" buttons.
That's the reason I have approached dual list.

  • What is the reason for this approach? Can't you simply use checkboxes for example? – jazZRo Apr 13 '18 at 11:51
  • From selected List we need to change the Item Placement Top to Bottom, Bottom to Top. Also user at any time move the items from selected List to All List, that's why we userd dual list @jazZRo – B.Sadashiv Apr 13 '18 at 13:27
1

It is better to provide the "working" list as a basis and show the list with all items only when needed. There are two actions which I would separate and avoid confusion between the two lists:

  1. Order items while viewing the list
  2. Change the contents of the list

So instead of starting with adding items, start with the current state of the list and allow users to order items. To add or remove items, users go to a second screen where they have an overview of available items and an pick what the need. In case of a new list, show the add/remove screen first and after that the situation will be as stated above and shown in the following example:

A screen to view and order the list:
enter image description here

A screen to pick items:
enter image description here

  • The idea is good but we must show the list of all items first. By default there is no selected items, User should see the list of all items then he will pick the items. except this the idea is useful for me @jazZRo – B.Sadashiv Apr 17 '18 at 6:46
  • You will have your reasons for that workflow, and it's ok to swap the order of screens. The important ascpect is that the two concepts - (1) deciding the contents of the list, and (2) deciding the order of the list - are separated steps in the workflow. – jazZRo Apr 19 '18 at 7:37
  • any how thanks for your effort. I learned new patterns without using dual box. @jazZRo – B.Sadashiv Apr 19 '18 at 9:03
  • You're welcome. If this is your answer, do you want to accept it? – jazZRo Apr 19 '18 at 11:51
  • Yes, I have accepted. – B.Sadashiv Apr 19 '18 at 11:55
0

Wouldn't it be better to show the selected state in the list itself. That way you'd only need one list which would give the user the information they needed.

This solution would provide some extra advantages as you'd just be able to tap on or off an item to select or deselect it and you'd be able to move more efficiently between items while selecting them (on desktop, there'd be no need to move to the selection buttons each time).

Another advantage is you'd also be able to see what isn't selected much more clearly, something that isn't possible with a dual list design.

Your list might look something like this, where x represents some selected state communication and the list items themselves would be the toggle triggers. All the information and interaction elements in one list:

[x] item 1
[ ] item 2
[x] item 3
[x] item 4
[ ] item 5
[ ] item 6
[x] item 7

Update to reflect question update.

You can still do this in one list. The order of items in the list will still have the same meaning whether the lists are merged or not. You could for example re-arrange the above list like this:

[x] item 1
[x] item 7
[x] item 4
[ ] item 2
[x] item 3
[ ] item 5
[ ] item 6

Just make the list items draggable

  • Please check my updated edited question for the reason i have used dual list. @Toni Leigh – B.Sadashiv Apr 16 '18 at 11:28
  • @B.Sadashiv I believe you can still just use one list – Toni Leigh Apr 16 '18 at 17:11

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.