3

I'm developing a highly customisable SaaS application. It has at several places a multi select, for some cases additionally to selecting the items, the user can define an order, for other cases it is only the selection which matters. (Order is mostly for the order in which the items should be displayed later on)

Originally we were using two lists (available items / selected items) where the user could move the items from one list to another via buttons or drag&drop. Similar to: enter image description here In case the order would matter, there would be additional up/down arrow buttons on the right side, to change the order of the selected items.

However this control was too big for many scenarios, so with the redesign of the application and switch to angularJS we found a much smaller control: http://isteven.github.io/angular-multi-select/ The problem here is, that we have one use-case with several hundred items, and those look to be just too many for a drop down control. Also it isn't possible to change the order. So why the experience and layout improved for many use-cases it got worse for others.

Now as far as I know, you should try to use always the same controls, the same buttons, in order to not confuse the user. Are there any examples which we could look at? Any idea how we can introduce sorting into the angularjs-control? Or should we just have 2 different controls for slightly different usecases? won't that be confusing at best?

We've taken the idea of the first control from classical wizard applications which are 15-20 years old. I just can't imagine that nobody came up with a better solution since than, but still I won't seem to be able to find one.

1

With angular there are lot of options.

One of it is Ui Sortable Angular library

https://github.com/angular-ui/ui-sortable

demo @ http://codepen.io/thgreasi/pen/olDJi

You could use this as the right side list

  • Just wanted to let you know that we're only using ui-sortable which has now also drag & drop to change the order (this was only implemented few weeks ago) - so far customers seem ok with this solution – peter Mar 7 '15 at 15:19
1

You could use a one-line textbox with suggestions, very similar to StackExchange's Tag editor: elements are separated by comma, starting to type will show a list of matches.

I would add a "edit..." button that pops up a modal editor (using the majority of screen estate) for this field.

This could basically be the two lists side by side, as in your initial design. I would value the following features:

  • a "filter" to filter the source items (important for hundreds of source items)
  • multi select in both lists
  • buttons + drag & drop between the two lists to add / remove items (respects multi-select)
  • buttons + drag and drop in both lists for reordering in the target list (respects multi-select)

[edit] Rationale: For short lists and experienced operators, this provides a compact and fast input. "Text field plus edit button" is common enough for new users to discover. The modal window allows to focus on this particular task. For long lists etc., expert users will find an unlimited display and all advanced editing needs in the popup.

  • I like this as an idea of texbox only for power users + modal drag&drop dialog for the slower ones – peter Nov 25 '14 at 19:09
0

I understand that the user may have reasons for manually sorting a list.

However, it seems that some use cases (including the one with hundreds of items) may benefit from auto-sorting options.

Sort options could be

  • on the left hand list, to use prior to choosing a subset of selected items
  • on the right hand list, to use after choosing a subset

This allows the user to make sense of the data before, during, and after interacting with it, and may get them close enough to their desired final ordering - assuming of course that the sorting options provided are relevant and useful for the user.

Even if the user has multiple criteria for adding items into the final list, the intermediate sorting options on the left hand list allow for repeated reorganisation of the data so that they can cream off the relevant top items without having to keep dealing with the noise from the rest of the list.

  • yes we had sorting and filter on the left hand list, the problem there was rather that, when we had only ~15-20 items and the user actually just would choose 2-4 of them, it was a huge control taking up half the screen. That's why we started switching to the angular control, but realized that we actually can't let the user sort the items afterwards anymore, which is necessary (in some use cases) – peter Nov 25 '14 at 13:52
-1

With Vue.js - please consider using this component (compact on the page, comfortable to use even with long list of options):

https://www.npmjs.com/package/vue-libs-multi-select-with-order enter image description here

  • That's an implementation answer with a js-script. What about your UX take on the matter? – Benny Skogberg Aug 14 '17 at 13:50
  • That's why I attached an image demonstrating the behaiviour. – Alexander Aug 15 '17 at 10:04

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.